@reusable-ui/collapsible/dist/collapsible.d.ts

A capability of UI to expand/reduce its size or toggle the visibility.

import { default as React } from 'react';
import { Factory, CssKnownProps, CssRule, CssStyleCollection, CssVars, CssConfigProps, Refs } from '@cssfn/core';
import { EventHandler } from '@reusable-ui/hooks';
import { SemanticProps } from '@reusable-ui/semantics';
import { AccessibilityProps } from '@reusable-ui/accessibilities';
export interface CollapsibleVars {
    anim: any;
}
export declare const ifExpanded: (styles: CssStyleCollection) => CssRule;
export declare const ifExpanding: (styles: CssStyleCollection) => CssRule;
export declare const ifCollapsing: (styles: CssStyleCollection) => CssRule;
export declare const ifCollapsed: (styles: CssStyleCollection) => CssRule;
export declare const ifExpand: (styles: CssStyleCollection) => CssRule;
export declare const ifCollapse: (styles: CssStyleCollection) => CssRule;
export declare const ifExpandCollapsing: (styles: CssStyleCollection) => CssRule;
export declare const ifExpandingCollapse: (styles: CssStyleCollection) => CssRule;
export interface CollapsibleStuff {
    collapsibleRule: Factory<CssRule>;
    collapsibleVars: CssVars<CollapsibleVars>;
}
export interface CollapsibleConfig {
    animExpand?: CssKnownProps['animation'];
    animCollapse?: CssKnownProps['animation'];
}
/**
 * Adds a capability of UI to expand/reduce its size or toggle the visibility.
 * @param config  A configuration of `collapsibleRule`.
 * @returns A `CollapsibleStuff` represents a collapsible state.
 */
export declare const usesCollapsible: <TConfigProps extends CssConfigProps = CssConfigProps>(config?: CollapsibleConfig & Refs<TConfigProps>) => CollapsibleStuff;
export interface ExpandedChangeEvent {
    expanded: boolean;
}
export interface CollapsibleProps<TExpandedChangeEvent extends ExpandedChangeEvent = ExpandedChangeEvent> extends Partial<Pick<TExpandedChangeEvent, 'expanded'>> {
}
export declare const enum CollapsibleState {
    Collapsed = 0,
    Collapsing = 1,
    Expanding = 2,
    Expanded = 3
}
export interface CollapsibleApi<TElement extends Element = HTMLElement> {
    expanded: boolean;
    isVisible: boolean;
    state: CollapsibleState;
    class: string | null;
    props: {
        open: true;
    } | null;
    handleAnimationStart: React.AnimationEventHandler<TElement>;
    handleAnimationEnd: React.AnimationEventHandler<TElement>;
    handleAnimationCancel: React.AnimationEventHandler<TElement>;
}
export declare const useCollapsible: <TElement extends Element = HTMLElement, TExpandedChangeEvent extends ExpandedChangeEvent = ExpandedChangeEvent>(props: CollapsibleProps<TExpandedChangeEvent> & SemanticProps) => CollapsibleApi<TElement>;
export interface CollapsibleEventProps {
    onExpandStart?: EventHandler<void>;
    onExpandEnd?: EventHandler<void>;
    onCollapseStart?: EventHandler<void>;
    onCollapseEnd?: EventHandler<void>;
}
export declare const useCollapsibleEvent: <TElement extends Element = HTMLElement>(props: CollapsibleEventProps, collapsibleApi: CollapsibleApi<TElement>) => void;
export interface ControllableCollapsibleProps<TExpandedChangeEvent extends ExpandedChangeEvent = ExpandedChangeEvent> extends CollapsibleProps<TExpandedChangeEvent> {
    onExpandedChange?: EventHandler<TExpandedChangeEvent>;
}
export interface UncontrollableCollapsibleProps<TExpandedChangeEvent extends ExpandedChangeEvent = ExpandedChangeEvent> extends ControllableCollapsibleProps<TExpandedChangeEvent> {
    defaultExpanded?: boolean;
}
export declare const useUncontrollableCollapsible: <TExpandedChangeEvent extends ExpandedChangeEvent = ExpandedChangeEvent>(props: UncontrollableCollapsibleProps<TExpandedChangeEvent> & Pick<AccessibilityProps, "enabled" | "inheritEnabled" | "readOnly" | "inheritReadOnly">) => readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>, React.Dispatch<void>];