@wix/design-system
Version:
@wix/design-system
34 lines • 2 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 */
resizable?: boolean;
/** the snap points of the drawer */
snapPoints?: (number | string)[];
/** whether the drawer should be dismissible by clicking outside of it */
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. */
backdrop?: boolean;
/** controls whether the backdrop overlay is rendered at all. When false, the overlay element is not rendered in the DOM. */
renderBackdrop?: boolean;
/** the margin around the Drawer content box (spacing between box and screen) */
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 */
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. */
scrollable?: boolean;
/** When true Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to false will fall back to the default browser behavior. */
repositionInputs?: boolean;
}
//# sourceMappingURL=Drawer.types.d.ts.map