@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
55 lines • 2.65 kB
TypeScript
import * as React from 'react';
import { ExtractProps } from '@workday/canvas-kit-react/common';
import { Heading } from '@workday/canvas-kit-react/text';
export interface SidePanelHeadingProps extends ExtractProps<typeof Heading, never> {
children?: React.ReactNode;
}
export declare const sidePanelHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
/**
* Adds the necessary props to the SidePanelHeading subcomponent.
* This sets the `id` to the `labelId` from the model for accessibility purposes,
* and hides the heading when the panel is not expanded.
*/
export declare const useSidePanelHeading: import("@workday/canvas-kit-react/common").BehaviorHook<{
state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
};
events: {
expand(): void;
collapse(): void;
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
handleAnimationStart(): undefined;
};
}, {
readonly id: string;
readonly hidden: boolean;
}>;
/**
* `SidePanel.Heading` is a styled heading component that provides the accessible name
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
* which is used by the panel's `aria-labelledby` attribute.
*
* The heading is automatically hidden when the panel is collapsed.
*/
export declare const SidePanelHeading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("@workday/canvas-kit-react/text").TypeLevelProps>, SidePanelHeadingProps, {
state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
};
events: {
expand(): void;
collapse(): void;
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
handleAnimationStart(): undefined;
};
}>;
//# sourceMappingURL=SidePanelHeading.d.ts.map