@octopusdeploy/design-system-components/dist/src/components/Drawer/Drawer.d.ts

The design systems component library.

import type { ReactNode } from "react";
import type { AvatarProps } from "../Avatar/index";
import type { ErrorInfo } from "../ErrorSummary";
interface DrawerPropsCommon {
    /**
     * The content of the drawer.
     */
    children: ReactNode;
    /**
     * If drawer should be visible.
     *
     * Controls open state of the drawer. When this is false the drawer is not displayed.
     */
    isOpen: boolean;
    /**
     * onClose callback.
     *
     * Callback when the drawer is closed via button click or another interaction (for example, pressing the Esc key will close the drawer).
     */
    onClose: () => void;
    /**
     * The title of the drawer.
     */
    title: string;
    /**
     * The subtitle of the drawer
     */
    subtitle?: string;
    /**
     * The header icon of the drawer
     */
    avatar?: React.ReactElement<AvatarProps>;
    /**
     * The layout.
     *
     * Controls if the drawer should have a prepared layout area or leave the content area completely unstyled.
     */
    layout?: "basic" | "none";
    /**
     * Controls whether the drawer appears in a wide (max: 1220px), medium (max: 975px) or narrow (max: 730px) configuration
     */
    width?: DrawerWidth;
    /**
     * onExited callback.
     *
     * Called after the close animation has completed and the drawer is no longer shown.
     */
    onExited?: () => void;
    /**
     * The state controlling whether showing the linear progress bar or not.
     */
    showLinearProgress?: boolean;
    /**
     * Errors related to the drawer that shows in the Error Panel at the top of the drawer.
     */
    errors?: ErrorInfo[];
}
export interface DrawerWithCustomActionsProps extends DrawerPropsCommon {
    /**
     * The drawer variant.
     *
     * The customActions variant should be used when the default actions (Cancel and Ok) are not appropriate, and you want to replace all buttons with your own custom actions.
     */
    variant: "customActions";
    /**
     * The custom header actions.
     *
     * Replaces the default actions (Cancel and Ok) with custom actions. When using this prop all primary/secondary action props will be ignored and replaced with customActions.
     */
    customActions?: React.ReactNode[];
}
export interface DrawerWithPrimaryActionProps extends DrawerPropsCommon {
    /**
     * The drawer variant.
     *
     * The default variant renders customizable primary "Ok" and secondary "Cancel" actions but doesn't let you add any more extra actions to the header.
     */
    variant: "default";
    /**
     * The primary action callback.
     *
     * The callback to trigger when the primary action ("Ok" by default) is clicked.
     */
    onPrimaryActionClick: () => void;
    /**
     * The label of the primary action.
     *
     * A custom label for the primary action ("Ok" by default).
     */
    primaryActionLabel?: string;
    /**
     * Disables the primary action.
     *
     * If true, the primary action will be disabled and not clickable.
     */
    isPrimaryActionDisabled?: boolean | null;
    /**
     * The custom primary action.
     *
     * ReactNode that replaces the default primary action.
     */
    customPrimaryAction?: React.ReactNode;
}
/** Props used for the {@link Drawer} component */
export type DrawerProps = DrawerWithCustomActionsProps | DrawerWithPrimaryActionProps;
/** Defines all possible widths for the {@link Drawer} component */
type DrawerWidth = "wide" | "medium" | "narrow";
export declare const Drawer: ({ isOpen, onClose, title, subtitle, children, width, ...restOfProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
export {};