@workday/canvas-kit-preview-react
Version:
Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.
100 lines • 2.83 kB
TypeScript
import * as React from 'react';
export declare const SidePanelContext: React.Context<{
state: string;
origin: string;
}>;
/**
* The optional config options for the `useSidePanel` hook
*/
export interface UseSidePanelProps {
/**
* sets the initial expanded state for the side panel
* @default true
*/
initialExpanded?: boolean;
/**
* sets the `id` for the panel
* @default unique identifier
*/
panelId?: string;
/**
* sets the `id` for the label
* @default unique identifier
*/
labelId?: string;
}
/**
* The `panelProps` provided by the `useSidePanel` hook
*/
export interface PanelProps {
/**
* the expand / collasped state
*/
expanded: boolean;
/**
* the accessible `id`
* - this will either be a unique identifier value or the `panelId` provided in the config
*/
id: string;
/**
* the accessible label `id`
* - this will either be a unique identifier value or the `labelId` provided in the config
*/
'aria-labelledby': string;
/**
* an internally-set boolean
* - this prevents unintentional keyframe animations on the initial render
*/
touched: boolean;
}
export interface LabelProps {
/**
* the accessible `id`
* - this will either be a unique identifier value or the `labelId` provided in the config
*/
id: string;
}
export interface ControlProps {
/**
* the accessible `id` that connects the panel to this control
* - this will either be a unique identifier value or the `panelId` provided in the config
*/
'aria-controls': string;
/**
* the accessible attribute that describes the expanded state of the panel
* - this is set by the `expanded` state in the `useSidePanel` hook
*/
'aria-expanded': boolean;
/**
* the accessible label `id`
* - this will either be a unique identifier value or the `labelId` provided in the config
*/
'aria-labelledby': string;
/**
* the handler function for toggling the expanded / collapsed state
*/
onClick: () => void;
}
/**
*
* This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
* configuration object:
*
* ```tsx
* import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
*
* const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
* initialExpanded: false,
* panelId: 'custom-panel-id',
* labelId: 'custom-label-id',
* });
* ```
*/
export declare const useSidePanel: (config?: UseSidePanelProps) => {
expanded: boolean;
setExpanded: (newExpandedState: boolean) => void;
panelProps: PanelProps;
labelProps: LabelProps;
controlProps: ControlProps;
};
//# sourceMappingURL=hooks.d.ts.map