/** * 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[]; /** * 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[]; /** * 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; /** * Sets the close button tooltip alignment */ closeIconTooltipAlignment?: 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; /** * Show/hide the "X" close button. */ hideCloseButton?: boolean; /** * 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; /** * 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; /** * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new. */ export declare const SidePanel: React.ForwardRefExoticComponent>; export {}; //# sourceMappingURL=SidePanel.d.ts.map