@wix/design-system
Version:
@wix/design-system
52 lines • 2.23 kB
TypeScript
import { AriaRole, CSSProperties, ReactNode } from 'react';
export interface DrawerProps {
/** applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook?: string;
/** when false - items should not be rendered in the DOM. */
open: boolean;
/** the content of the drawer */
children: ReactNode;
/** shows handle and enables expand/collapse functionality
* @default true
*/
resizable?: boolean;
/** the snap points of the drawer
* @default [1]
* */
snapPoints?: (number | string)[];
/** whether the drawer should be dismissible by clicking outside of it
* @default true
*/
dismissible?: boolean;
/** only controls the color of the backdrop. Meaning if the backdrop=false, the overlay is still present preventing clicks on the content behind the backdrop, just invisible.
* @default true
*/
backdrop?: boolean;
/** controls whether the backdrop overlay is rendered at all. When false, the overlay element is not rendered in the DOM.
* @default true
*/
renderBackdrop?: boolean;
/** the margin around the Drawer content box (spacing between box and screen)
* @default true
*/
margin?: boolean;
/** fires when (1) overlay is clicked (outside click) and (2) when is in collapsed position and being dragged towards the anchor side and (3) Esc key press. */
onClose: (open: boolean) => void;
/** a11y: Sets the aria-labelledby attribute on the drawer content */
ariaLabelledBy?: string;
/** wai-aria role */
role?: AriaRole;
/** z-index of the drawer
* @default 1000
*/
zIndex?: CSSProperties['zIndex'];
/** Whether the drawer content should be wrapped in a scrollable container, by default it is true. If false, the drawer content will be rendered as is, without any scrollable container.
* @default true
*/
scrollable?: boolean;
/** When true, repositions the drawer upward when the on-screen keyboard appears on mobile, keeping inputs visible. When false, falls back to default browser scroll behavior.
* @default true
*/
repositionInputs?: boolean;
}
//# sourceMappingURL=Drawer.types.d.ts.map