@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
235 lines • 11.3 kB
TypeScript
import * as React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
/**
* 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' | 'alternative' | 'overlay';
export interface SidePanelProps extends CSProps {
/**
* 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'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.
* - `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.
* - `'overlay'`: default surface background (`system.legacy.color.surface.default`) with level 6 depth, for panels that need to look lifted off the page. This is a visual treatment only — it adds no dialog semantics, focus trapping, or backdrop.
*
* @default 'standard'
*/
variant?: SidePanelVariant;
children?: React.ReactNode;
}
export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
variant: {
overlay: {
backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
boxShadow: "--cnvs-sys-depth-6";
};
alternative: {
backgroundColor: "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))";
};
standard: {
backgroundColor: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
};
};
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` (the panel's `id`), `aria-pressed` (`true`
* when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
* Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
* conveys the state, so the label should not change between states.
*/
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("../..").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