@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
514 lines • 21.4 kB
TypeScript
import * as React from 'react';
/**
* The transition states of the SidePanel during expand/collapse animations.
* - `expanded`: Panel is fully expanded
* - `expanding`: Panel is animating from collapsed to expanded
* - `collapsed`: Panel is fully collapsed
* - `collapsing`: Panel is animating from expanded to collapsed
*/
export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<{
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* The unique ID for the panel element. If not provided, a unique ID will be generated.
* This ID is used for the `aria-controls` attribute on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. If not provided, a unique ID will be generated.
* This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
*/
labelId: string;
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}> & {
onExpand?: ((data: undefined, prevState: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => void) | undefined;
onCollapse?: ((data: undefined, prevState: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => void) | undefined;
onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => void) | undefined;
onHandleAnimationStart?: ((data: undefined, prevState: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => void) | undefined;
} & {
shouldExpand?: ((data: undefined, state: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => boolean) | undefined;
shouldCollapse?: ((data: undefined, state: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => boolean) | undefined;
shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => boolean) | undefined;
shouldHandleAnimationStart?: ((data: undefined, state: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}) => boolean) | undefined;
}) | undefined) => {
state: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
};
events: {
/**
* Expand the SidePanel. This sets the state directly to `expanded` without animation.
* For animated expansion, use the toggle button which triggers `setExpandingState`.
*/
expand(): void;
/**
* Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
* For animated collapse, use the toggle button which triggers `setCollapsingState`.
*/
collapse(): void;
/**
* Handler for the CSS transition end event. This should be called when the width
* transition completes to finalize the state from `expanding` to `expanded` or
* from `collapsing` to `collapsed`.
*/
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
/**
* Triggers the start of a transition animation. This toggles between expanding
* and collapsing states based on the current state.
*/
handleAnimationStart(): undefined;
};
}) & import("@workday/canvas-kit-react/common").ModelExtras<{
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* The unique ID for the panel element. If not provided, a unique ID will be generated.
* This ID is used for the `aria-controls` attribute on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. If not provided, a unique ID will be generated.
* This ID is used for the `aria-labelledby` attribute on both the panel and toggle button.
*/
labelId: string;
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}, {}, {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
}, {
/**
* Expand the SidePanel. This sets the state directly to `expanded` without animation.
* For animated expansion, use the toggle button which triggers `setExpandingState`.
*/
expand(): void;
/**
* Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
* For animated collapse, use the toggle button which triggers `setCollapsingState`.
*/
collapse(): void;
/**
* Handler for the CSS transition end event. This should be called when the width
* transition completes to finalize the state from `expanding` to `expanded` or
* from `collapsing` to `collapsed`.
*/
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
/**
* Triggers the start of a transition animation. This toggles between expanding
* and collapsing states based on the current state.
*/
handleAnimationStart(): undefined;
}, {
state: {
/**
* The unique ID for the panel element. Used for `aria-controls` on the toggle button.
*/
panelId: string;
/**
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
* and toggle button to provide an accessible name.
*/
labelId: string;
/**
* The current transition state of the SidePanel. This tracks both the expanded/collapsed
* state and the animation states (expanding/collapsing).
*/
transitionState: SidePanelTransitionStates;
/**
* The initial transition state of the SidePanel.
* @default 'expanded'
*/
initialTransitionState: SidePanelTransitionStates;
/**
* Which side the SidePanel originates from. Uses logical properties for RTL support.
* - `start`: Left side in LTR, right side in RTL
* - `end`: Right side in LTR, left side in RTL
* @default 'start'
*/
origin: "end" | "start";
/**
* Callback fired when the SidePanel's transition state changes.
* Use this to react to state changes including animation states.
* @param state The new transition state
*/
onStateTransition(state: SidePanelTransitionStates): void;
};
events: {
/**
* Expand the SidePanel. This sets the state directly to `expanded` without animation.
* For animated expansion, use the toggle button which triggers `setExpandingState`.
*/
expand(): void;
/**
* Collapse the SidePanel. This sets the state directly to `collapsed` without animation.
* For animated collapse, use the toggle button which triggers `setCollapsingState`.
*/
collapse(): void;
/**
* Handler for the CSS transition end event. This should be called when the width
* transition completes to finalize the state from `expanding` to `expanded` or
* from `collapsing` to `collapsed`.
*/
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
/**
* Triggers the start of a transition animation. This toggles between expanding
* and collapsing states based on the current state.
*/
handleAnimationStart(): undefined;
};
}>;
//# sourceMappingURL=useSidePanelModel.d.ts.map