@carbon/ibm-products/lib/components/SidePanel/SidePanel.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { ButtonProps } from '@carbon/react';
import React, { ReactNode, RefObject } from 'react';
type SidePanelBaseProps = {
    /**
     * Sets the action toolbar buttons
     */
    actionToolbarButtons?: ButtonProps<React.ElementType>[];
    /**
     * The primary actions to be shown in the side panel. Each action is
     * specified as an object that will render expressive Buttons. Any Button
     * props can be passed in and any other fields in the object will be
     * passed through to the button element as HTML attributes.
     *
     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
     */
    actions?: ButtonProps<React.ElementType>[];
    /**
     * Determines if the title will animate on scroll
     */
    animateTitle?: boolean;
    /**
     * Sets the body content of the side panel
     */
    children: ReactNode;
    /**
     * Sets an optional className to be added to the side panel outermost element
     */
    className?: string;
    /**
     * Sets the close button icon description
     */
    closeIconDescription?: string;
    /**
     * Determines whether the side panel should render the condensed version (affects action buttons primarily)
     */
    condensedActions?: boolean;
    /**
     * Sets the current step of the side panel
     */
    currentStep?: number;
    /**
     * Unique identifier
     */
    id?: string;
    /**
     * Determines whether the side panel should render with an overlay
     */
    includeOverlay?: boolean;
    /**
     * Sets the label text which will display above the title text
     */
    labelText?: string;
    /**
     * Provide a ref to return focus to once the side panel is closed.
     */
    launcherButtonRef?: RefObject<any>;
    /**
     * Sets the icon description for the navigation back icon button
     */
    navigationBackIconDescription?: string;
    /**
     * Changes the current side panel page to the previous page
     */
    onNavigationBack?(): void;
    /**
     * Specify a handler for closing the side panel.
     * This handler closes the modal, e.g. changing `open` prop.
     */
    onRequestClose?(): void;
    /**
     * Optional function called when the side panel exit animation is complete.
     * This handler can be used for any state cleanup needed before the panel is removed from the DOM.
     */
    onUnmount?(): void;
    /**
     * Determines whether the side panel should render or not
     */
    open: boolean;
    /**
     * Determines if the side panel is on the right or left
     */
    placement?: 'left' | 'right';
    /**
     * Prevent closing on click outside of the panel
     */
    preventCloseOnClickOutside?: boolean;
    /**
     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
     * This prop is required when using the `slideIn` variant of the side panel.
     */
    selectorPageContent?: string;
    /**
     * Specify a CSS selector that matches the DOM element that should
     * be focused when the side panel opens
     */
    selectorPrimaryFocus?: string;
    /**
     * Sets the size of the side panel
     */
    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /**
     * Determines if this panel slides in
     */
    slideIn?: boolean;
    /**
     * @deprecated please use the `decorator` instead
     *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
     */
    slug?: ReactNode;
    /**
     * @deprecated please use the `decorator` instead
     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
     */
    aiLabel?: ReactNode;
    /**
     * Provide a `decorator` component to be rendered inside the `SidePanel` component
     */
    decorator?: ReactNode;
    /**
     * Sets the subtitle text
     */
    subtitle?: ReactNode;
    /**
     * Sets the title text
     */
    title?: string;
};
type SidePanelSlideInProps = {
    /**
     * Determines if this panel slides in
     */
    slideIn?: false;
    /**
     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
     * This prop is required when using the `slideIn` variant of the side panel.
     */
    selectorPageContent?: string;
} | {
    /**
     * Determines if this panel slides in
     */
    slideIn: true;
    /**
     * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
     * This prop is required when using the `slideIn` variant of the side panel. Required for slideIn panels.
     */
    selectorPageContent: string;
};
export type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
export declare const SidePanel: any;
export {};