@corvu/disclosure/dist/index.d.ts

Unstyled, accessible and customizable UI primitives for SolidJS

import * as solid_js from 'solid-js';
import { ValidComponent, JSX, Accessor, Setter, Component } from 'solid-js';
import { Ref, ElementOf } from '@corvu/utils/dom';
import { DynamicProps, DynamicButtonSharedElementProps, DynamicButtonElementProps } from '@corvu/utils/dynamic';
export { DynamicProps } from '@corvu/utils/dynamic';

type DisclosureContentCorvuProps = {
    /**
     * Whether the disclosure content should be forced to render. Useful when using third-party animation libraries.
     * @defaultValue `false`
     */
    forceMount?: boolean;
    /**
     * The `id` of the disclosure context to use.
     */
    contextId?: string;
};
type DisclosureContentSharedElementProps<T extends ValidComponent = 'div'> = {
    ref: Ref<ElementOf<T>>;
    style: string | JSX.CSSProperties;
};
type DisclosureContentElementProps = DisclosureContentSharedElementProps & {
    id: string;
    'data-expanded': '' | undefined;
    'data-collapsed': '' | undefined;
    'data-corvu-disclosure-content': '' | null;
};
type DisclosureContentProps<T extends ValidComponent = 'div'> = DisclosureContentCorvuProps & Partial<DisclosureContentSharedElementProps<T>>;
/** Content of a disclosure. Can be animated.
 *
 * @data `data-corvu-disclosure-content` - Present on every disclosure content element.
 * @data `data-expanded` - Present when the disclosure is expanded.
 * @data `data-collapsed` - Present when the disclosure is collapsed.
 * @css `--corvu-disclosure-content-width` - The width of the disclosure content. Useful if you want to animate its width.
 * @css `--corvu-disclosure-content-height` - The height of the disclosure content. Useful if you want to animate its height.
 */
declare const DisclosureContent: <T extends ValidComponent = "div">(props: DynamicProps<T, DisclosureContentProps<T>>) => JSX.Element;

type DisclosureContextValue = {
    /** Whether the disclosure is expanded. */
    expanded: Accessor<boolean>;
    /** Callback fired when the expanded state changes. */
    setExpanded: Setter<boolean>;
    /** Whether the disclosure content should be removed or hidden when collapsed. */
    collapseBehavior: Accessor<'remove' | 'hide'>;
    /** Whether the initial open animation of the disclosure content should be prevented. */
    preventInitialContentAnimation: Accessor<boolean>;
    /** The `id` attribute of the disclosure content element. */
    disclosureId: Accessor<string>;
    /** Whether the disclosure content is present. This differes from `expanded` as it tracks pending animations. */
    contentPresent: Accessor<boolean>;
    /** The disclosure content element. */
    contentRef: Accessor<HTMLElement | null>;
    /** The current size of the disclosure content. Useful if you want to animate width or height. `[width, height]` */
    contentSize: Accessor<[number, number] | null>;
};
/** Context which exposes various properties to interact with the disclosure. Optionally provide a contextId to access a keyed context. */
declare const useDisclosureContext: (contextId?: string) => DisclosureContextValue;

type DisclosureRootProps = {
    /**
     * Whether the disclosure is expanded.
     */
    expanded?: boolean;
    /**
     * Callback fired when the expanded state changes.
     */
    onExpandedChange?: (expanded: boolean) => void;
    /**
     * Whether the disclosure is expanded initially.
     * @defaultValue `false`
     */
    initialExpanded?: boolean;
    /**
     * Whether the disclosure content should be removed or hidden when collapsed. Useful if you want to always render the content for SEO reasons.
     * @defaultValue `remove`
     */
    collapseBehavior?: 'remove' | 'hide';
    /**
     * Whether the initial open animation of the disclosure content should be prevented.
     * @defaultValue `false`
     */
    preventInitialContentAnimation?: boolean;
    /**
     * Callback fired when the disclosure content present state changes.
     */
    onContentPresentChange?: (present: boolean) => void;
    /**
     * The `id` attribute of the disclosure content element.
     * @defaultValue `createUniqueId()`
     */
    disclosureId?: string;
    /**
     * The `id` of the disclosure context. Useful if you have nested disclosures and want to create components that belong to a disclosure higher up in the tree.
     */
    contextId?: string;
    /** @hidden */
    children: JSX.Element | ((props: DisclosureRootChildrenProps) => JSX.Element);
};
/** Props that are passed to the Root component children callback. */
type DisclosureRootChildrenProps = {
    /** Whether the disclosure is expanded. */
    expanded: boolean;
    /** Callback fired when the expanded state changes. */
    setExpanded: Setter<boolean>;
    /** Whether the disclosure content should be removed or hidden when collapsed. */
    collapseBehavior: 'remove' | 'hide';
    /** Whether the initial open animation of the disclosure content should be prevented. */
    preventInitialContentAnimation: boolean;
    /** The `id` attribute of the disclosure content element. */
    disclosureId: string;
    /** Whether the disclosure content is present. This differes from `expanded` as it tracks pending animations. */
    contentPresent: boolean;
    /** The disclosure content element. */
    contentRef: HTMLElement | null;
    /** The current size of the disclosure content. Useful if you want to animate width or height. `[width, height]` */
    contentSize: [number, number] | null;
};
/** Context wrapper for the disclosure. Is required for every disclosure you create. */
declare const DisclosureRoot: Component<DisclosureRootProps>;

type DisclosureTriggerCorvuProps = {
    /**
     * The `id` of the disclosure context to use.
     */
    contextId?: string;
};
type DisclosureTriggerSharedElementProps<T extends ValidComponent = 'button'> = {
    onClick: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
} & DynamicButtonSharedElementProps<T>;
type DisclosureTriggerElementProps = DisclosureTriggerSharedElementProps & {
    'aria-controls': string;
    'aria-expanded': 'true' | 'false';
    'data-collapsed': '' | undefined;
    'data-expanded': '' | undefined;
    'data-corvu-disclosure-trigger': '' | null;
} & DynamicButtonElementProps;
type DisclosureTriggerProps<T extends ValidComponent = 'button'> = DisclosureTriggerCorvuProps & Partial<DisclosureTriggerSharedElementProps<T>>;
/** Button that changes the open state of the disclosure when clicked.
 *
 * @data `data-corvu-disclosure-trigger` - Present on every disclosure trigger element.
 * @data `data-expanded` - Present when the disclosure is expanded.
 * @data `data-collapsed` - Present when the disclosure is collapsed.
 */
declare const DisclosureTrigger: <T extends ValidComponent = "button">(props: DynamicProps<T, DisclosureTriggerProps<T>>) => JSX.Element;

declare const Disclosure: solid_js.Component<DisclosureRootProps> & {
    Trigger: <T extends solid_js.ValidComponent = "button">(props: DynamicProps<T, DisclosureTriggerProps<T>>) => solid_js.JSX.Element;
    Content: <T extends solid_js.ValidComponent = "div">(props: DynamicProps<T, DisclosureContentProps<T>>) => solid_js.JSX.Element;
    useContext: (contextId?: string) => DisclosureContextValue;
};

export { DisclosureContent as Content, type DisclosureContentCorvuProps as ContentCorvuProps, type DisclosureContentElementProps as ContentElementProps, type DisclosureContentProps as ContentProps, type DisclosureContentSharedElementProps as ContentSharedElementProps, type DisclosureContextValue as ContextValue, DisclosureRoot as Root, type DisclosureRootChildrenProps as RootChildrenProps, type DisclosureRootProps as RootProps, DisclosureTrigger as Trigger, type DisclosureTriggerCorvuProps as TriggerCorvuProps, type DisclosureTriggerElementProps as TriggerElementProps, type DisclosureTriggerProps as TriggerProps, type DisclosureTriggerSharedElementProps as TriggerSharedElementProps, Disclosure as default, useDisclosureContext as useContext };