UNPKG

@workday/canvas-kit-labs-react

Version:

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

108 lines 4.75 kB
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