import React from 'react';
import PropTypes from 'prop-types';
import { TransitionOpenPropsBase } from '@splunk/react-ui/TransitionOpen';
import { ComponentProps } from '../utils/types';
/** @public */
type SidePanelRequestCloseHandler = (data: {
    event: React.MouseEvent<HTMLDivElement> | MouseEvent | KeyboardEvent | TouchEvent;
    reason: 'clickAway' | 'escapeKey';
}) => void;
type SidePanelInitialFocus = 'first' | 'container' | (React.Component & {
    focus: () => void;
}) | HTMLElement | null;
interface SidePanelPropsBase extends TransitionOpenPropsBase {
    children?: React.ReactNode;
    /**
     * The layout mode for the panel.
     * - page: Positions relative to the viewport (default)
     * - container: Positions relative to nearest positioned ancestor
     * - inline: Renders inline allowing content to reflow around the panel
     */
    dockLayout?: 'page' | 'container' | 'inline';
    /**
     * The position of the Panel on the screen.
     */
    dockPosition?: 'top' | 'bottom' | 'left' | 'right';
    /**
     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
     */
    elementRef?: React.Ref<HTMLDivElement>;
    /**
     * Allows focus to be set to a component other than the default.
     * Supports `'first'` (first focusable element), `'container'` (the panel itself), or a ref.
     * Note: Panel should be in view on open.
     */
    initialFocus?: SidePanelInitialFocus;
    /**
     * The inner element can control the width of the side bar when placed left or right and
     * the height when placed top or bottom.
     */
    innerClassName?: string;
    /**
     * The inner element can control the width of the side bar when placed left or right and
     * the height when placed top or bottom.
     */
    innerStyle?: React.CSSProperties;
    /**
     * A function called when the open / close animation ends.
     */
    onAnimationEnd?: () => void;
    /**
     * Only applies to dockLayout=page because other dockLayout modes do not support
     * closing via the escape key or click away.
     *
     * A function that is called when a close event occurs. The callback is passed a
     * reason and the event.
     *
     * Generally, this callback should be used to toggle the `open` prop.
     */
    onRequestClose?: SidePanelRequestCloseHandler;
    /**
     * Indicates the current open state of the panel.
     */
    open?: boolean;
    /**
     * The outer element grows to the width of the side bar when placed left or right or
     * the height when placed top or bottom. It has minimal styles:
     * a white background and a box shadow. Adding styles to this container
     * can be useful when the sidebar must be shorter than the width or height of the page
     * or when multiple sidebars are shown.
     */
    outerClassName?: string;
    /**
     * The outer element grows to the width of the side bar when placed left or right or
     * the height when placed top or bottom. It has minimal styles:
     * a white background and a box shadow. Adding styles to this container
     * can be useful when the sidebar must be shorter than the width or height of the page
     * or when multiple sidebars are shown.
     */
    outerStyle?: React.CSSProperties;
    /**
     * Pass the ref of the invoking element (or other element that follows the logical flow of the application) to automatically move focus
     * to the invoking element on SidePanel close. If using a ref is not possible, you can pass a function that sets focus to the appropriate element.
     * This function will be called when the panel closes.
     */
    returnFocus?: React.MutableRefObject<(React.Component & {
        focus: () => void;
    }) | HTMLElement | null> | (() => void);
    /**
     * Only applies to dockLayout=page because other dockLayout modes do not support
     * closing via click away.
     *
     * Indicates whether to add an overlay mask on the whole page, blocking other interactions
     * while the Panel is open.
     */
    useLayerForClickAway?: boolean;
}
interface SidePanelPageLayoutProps extends SidePanelPropsBase {
    dockLayout?: 'page';
}
interface SidePanelNonPageLayoutProps extends SidePanelPropsBase {
    dockLayout: 'container' | 'inline';
    onRequestClose?: never;
    useLayerForClickAway?: never;
}
type SidePanelProps = ComponentProps<SidePanelPageLayoutProps | SidePanelNonPageLayoutProps, 'div'>;
declare function SidePanel({ children, dockLayout, dockPosition, elementRef, initialFocus, innerClassName, innerStyle, onAnimationEnd, onRequestClose, open, outerClassName, outerStyle, returnFocus, useLayerForClickAway, ...otherProps }: SidePanelProps): React.JSX.Element;
declare namespace SidePanel {
    var propTypes: {
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        dockLayout: PropTypes.Requireable<string>;
        dockPosition: PropTypes.Requireable<string>;
        elementRef: PropTypes.Requireable<object>;
        initialFocus: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
        innerClassName: PropTypes.Requireable<string>;
        innerStyle: PropTypes.Requireable<object>;
        onAnimationEnd: PropTypes.Requireable<(...args: any[]) => any>;
        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
        open: PropTypes.Requireable<boolean>;
        outerClassName: PropTypes.Requireable<string>;
        outerStyle: PropTypes.Requireable<object>;
        returnFocus: PropTypes.Requireable<object>;
        useLayerForClickAway: PropTypes.Requireable<boolean>;
    };
}
export default SidePanel;
export { SidePanelRequestCloseHandler };