@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
50 lines (49 loc) • 1.91 kB
TypeScript
import { DialogHTMLAttributes, JSX } from 'react';
import { DrawerPosition } from './Drawer.utils';
export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
/** Content within the Drawer. */
children: React.ReactNode;
/** Close button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the close button.
* (default) 'Close dialog'
*
*/
closeButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
/** Disables closing the Drawer by clicking on the backdrop.
* @default false
*/
disableBackdropClose?: boolean;
/** Content within the Drawer's footer. For example a CTA button. */
footer?: React.ReactNode;
/** Content within the Drawer's header. For example a Heading. */
header?: React.ReactNode;
/**
* If `true`, hides the close button. Ensure you provide an alternative method for closing,
* such as a button in the footer or within the children components.
* @default false
*/
hideCloseButton?: boolean;
/** Determines if the Drawer is open.
* @default false
*/
isOpen?: boolean;
/** Specifies the final position of the Drawer after opening.
* @default 'start'
*/
position?: DrawerPosition;
/** Callback function called when the Drawer is closed. */
onClose?: () => void;
}
/**
* A component that renders a modal drawer, which can be used for navigation,
* displaying additional information, or providing extra controls.
*
* Design in Figma: [Drawer](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=16282-9317)
*/
export declare const DSDrawer: ({ children, className, closeButtonProps, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;