@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
TypeScript
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