@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
226 lines • 10.4 kB
TypeScript
import * as React from 'react';
/**
* Adds the necessary props to the SidePanel container element.
* This includes the `id` and `aria-labelledby` attributes for accessibility.
*/
export declare const useSidePanelContainer: 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 'aria-labelledby': string;
readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
}>;
export type SidePanelVariant = 'standard' | 'alternate';
export interface SidePanelProps {
/**
* The width of the component (in `px` if it's a `number`) when it is collapsed.
*
* @default 64
*/
collapsedWidth?: number | string;
/**
* The width of the component (in `px` if it's a `number`) when it is expanded.
*
* @default 320
*/
expandedWidth?: number | string;
/**
* The style variant of the side panel. 'standard' uses a lighter gray background (`system.color.bg.alt.softer`), no depth. 'alternate' uses a white background with depth (`system.color.bg.default` and level 5 depth).
*
* @default 'standard'
*/
variant?: SidePanelVariant;
children?: React.ReactNode;
}
export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
variant: {
alternate: {
backgroundColor: "--cnvs-sys-color-bg-default";
boxShadow: "--cnvs-sys-depth-5";
};
standard: {
backgroundColor: "--cnvs-sys-color-bg-alt-softer";
};
};
expanded: {
expanded: ({ expandedWidth }: {
expandedWidth: `--${string}`;
collapsedWidth: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
width: `--${string}`;
maxWidth: `--${string}`;
};
collapsed: ({ collapsedWidth }: {
expandedWidth: `--${string}`;
collapsedWidth: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
width: `--${string}`;
maxWidth: `--${string}`;
};
expanding: ({ expandedWidth }: {
expandedWidth: `--${string}`;
collapsedWidth: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
width: `--${string}`;
maxWidth: `--${string}`;
};
collapsing: ({ collapsedWidth }: {
expandedWidth: `--${string}`;
collapsedWidth: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
width: `--${string}`;
maxWidth: `--${string}`;
};
};
}, {}, {
expandedWidth: string;
collapsedWidth: string;
}, never, never>;
export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponentM<"section", SidePanelProps & Partial<{
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
panelId: string;
labelId: string;
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}> & {
onExpand?: ((data: undefined, prevState: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => void) | undefined;
onCollapse?: ((data: undefined, prevState: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => void) | undefined;
onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => void) | undefined;
onHandleAnimationStart?: ((data: undefined, prevState: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => void) | undefined;
} & {
shouldExpand?: ((data: undefined, state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => boolean) | undefined;
shouldCollapse?: ((data: undefined, state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => boolean) | undefined;
shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => boolean) | undefined;
shouldHandleAnimationStart?: ((data: undefined, state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
}) => boolean) | undefined;
}, {
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;
};
}> & {
/**
* `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
* it should be the first focusable element in the panel.
*
* The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
* attributes from the model.
*/
ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
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;
};
}>;
/**
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
* By default, the heading is hidden when the panel is collapsed.
*/
Heading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("@workday/canvas-kit-react/text").TypeLevelProps>, import("./SidePanelHeading").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=SidePanel.d.ts.map