@workday/canvas-kit-labs-react/dist/commonjs/expandable/lib/Expandable.d.ts

Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi

import React from 'react';
import { ExtractProps } from '@workday/canvas-kit-react/common';
import { Flex } from '@workday/canvas-kit-react/layout';
export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
    /**
     * The children of the `Expandable` container. This should contain `Expandable.Target` and
     * `Expandable.Container`
     */
    children?: React.ReactNode;
}
/**
 * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
 * `DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the
 * hoisted model pattern.
 */
export declare const Expandable: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ExpandableProps & Partial<{
    id: string;
    initialVisibility: import("@workday/canvas-kit-react/disclosure").Visibility;
}> & {
    onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
        id: string;
        visibility: "hidden" | "visible";
    }) => void) | undefined;
    onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
        id: string;
        visibility: "hidden" | "visible";
    }) => void) | undefined;
} & {
    shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
        id: string;
        visibility: "hidden" | "visible";
    }) => boolean) | undefined;
    shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
        id: string;
        visibility: "hidden" | "visible";
    }) => boolean) | undefined;
}, {
    state: {
        id: string;
        visibility: "hidden" | "visible";
    };
    events: {
        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
    };
}> & {
    /**
     * `Expandable.Target` creates a heading and a button. The heading is a semantic heading to
     * describe the associated content. The button provides users the ability to toggle the
     * associated content.
     *
     * As according to the [W3 disclosure
     * specification](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/), the button has
     * `aria-expanded` and `aria-controls` attributes set by default
     *
     * This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
     * `Expandable.Title`.
     */
    Target: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./ExpandableTarget").ExpandableTargetProps, {
        state: {
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * `Expandable.Title` styles the target text that describes the content.
     */
    Title: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ExpandableTitle").ExpandableTitleProps>;
    /**
     * `Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
     * `iconPosition` prop to determine which chevron icon to use.
     */
    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./ExpandableIcon").ExpandableIconProps, {
        state: {
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
    /**
     * `Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative
     * image.
     */
    Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ExpandableAvatar").ExpandableAvatarProps>;
    /**
     * `Expandable.Content` holds the content that will be conditionally expanded and collapsed. It
     * has an `id` to ensure the `Expandable.Target` properly set it to the `aria-controls`
     * attribute.
     */
    Content: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ExpandableContent").ExpandableContentProps, {
        state: {
            id: string;
            visibility: "hidden" | "visible";
        };
        events: {
            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
        };
    }>;
};
//# sourceMappingURL=Expandable.d.ts.map