@backstage/core-components/dist/index.d.ts

Core components used by Backstage plugins and apps

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { CSSProperties, ElementType, ReactNode, SVGProps, PropsWithChildren, ComponentProps, MouseEventHandler, MouseEvent, ComponentClass, ErrorInfo, ReactElement, ComponentType, MutableRefObject, ChangeEvent } from 'react';
import { ButtonProps as ButtonProps$1 } from '@material-ui/core/Button';
import { LinkProps as LinkProps$1 } from '@material-ui/core/Link';
import { LinkProps as LinkProps$2, NavLinkProps } from 'react-router-dom';
import IconButton from '@material-ui/core/IconButton';
import CSS from 'csstype';
import { Options } from 'react-markdown';
import { TooltipProps } from '@material-ui/core/Tooltip';
import { LinearProgressProps } from '@material-ui/core/LinearProgress';
import { CardHeaderProps } from '@material-ui/core/CardHeader';
import { BackstagePalette } from '@backstage/theme';
import { TabProps } from '@material-ui/core/Tab';
import { Column, MaterialTableProps, Options as Options$1, Icons } from '@material-table/core';
import { SparklinesProps, SparklinesLineProps } from 'react-sparklines';
import { IconComponent, SignInPageProps, ApiRef, ProfileInfoApi, BackstageIdentityApi, SessionApi, IdentityApi, ProfileInfo, BackstageUserIdentity } from '@backstage/core-plugin-api';
import { ListItemTextProps } from '@material-ui/core/ListItemText';
import * as _material_ui_styles from '@material-ui/styles';
import { WithStyles, Theme } from '@material-ui/core/styles';
import { BottomNavigationActionProps } from '@material-ui/core/BottomNavigationAction';
import { StyledComponentProps, StyleRules } from '@material-ui/core/styles/withStyles';
import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
import { Overrides } from '@material-ui/core/styles/overrides';

/**
 * Properties for {@link AlertDisplay}
 *
 * @public
 */
type AlertDisplayProps = {
    anchorOrigin?: {
        vertical: 'top' | 'bottom';
        horizontal: 'left' | 'center' | 'right';
    };
    transientTimeoutMs?: number;
};
/**
 * Displays alerts from {@link @backstage/core-plugin-api#AlertApi}
 *
 * @public
 * @remarks
 *
 * Shown as SnackBar at the center top of the page by default. Configurable with props.
 *
 * @param anchorOrigin - The `vertical` property will set the vertical orientation of where the AlertDisplay will be located
 * and the `horizontal` property will set the horizontal orientation of where the AlertDisplay will be located
 * @param transientTimeoutMs - Number of milliseconds a transient alert will stay open for. Default value is 5000
 *
 * @example
 * Here's some examples:
 * ```
 * // This example shows the default usage, the SnackBar will show up at the top in the center and any transient messages will stay open for 5000ms
 * <AlertDisplay />
 *
 * // With this example the SnackBar will show up in the bottom right hand corner and any transient messages will stay open for 2500ms
 * <AlertDisplay transientTimeoutMs={2500} anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}/>
 *
 * // If you want to just set the time a transientTimeoutMs, you can do that like this:
 * <AlertDisplay transientTimeoutMs={10000} />
 * ```
 */
declare function AlertDisplay(props: AlertDisplayProps): react_jsx_runtime.JSX.Element | null;

/** @public */
type AutoLogoutProps = {
    /**
     * Enable/disable the AutoLogoutMechanism.
     * defaults to true.
     */
    enabled?: boolean;
    /**
     * The amount of time (in minutes) of inactivity
     * after which the user is automatically logged out.
     * defaults to 60 minutes.
     */
    idleTimeoutMinutes?: number;
    /**
     * The number of seconds before the idleTimeout expires,
     * at which the user will be alerted by a Dialog that
     * they are about to be logged out.
     * defaults to 10 seconds
     */
    promptBeforeIdleSeconds?: number;
    /**
     * Enable/disable the usage of Node's worker thread timers instead of main thread timers.
     * This is helpful if you notice that the your browser is killing inactive tab's timers, like the one used by AutoLogout.
     * If you experience some browser incompatibility, you may try to set this to false.
     * defaults to true.
     */
    useWorkerTimers?: boolean;
    /**
     * Enable/disable the autologout for disconnected users.
     * disconnected users are the ones that are logged in but have no Backstage tab open in their browsers.
     * If enabled, disconnected users will be automatically logged out after `idleTimeoutMinutes`
     * defaults to true
     */
    logoutIfDisconnected?: boolean;
};
/**
 * The Autologout feature enables platform engineers to add a mechanism to log out users after a configurable amount of time of inactivity.
 * When enabled, the mechanism will track user actions (mouse movement, mouse click, key pressing, taps, etc.) in order to determine if they are active or not.
 * After a certain amount of inactivity/idle time, the user session is invalidated and they are required to sign in again.
 *
 * @public
 */
declare const AutoLogout: (props: AutoLogoutProps) => JSX.Element | null;

/** @public */
type AvatarClassKey = 'avatar';
/**
 * Properties for {@link Avatar}.
 *
 * @public
 */
interface AvatarProps {
    /**
     * A display name, which will be used to generate initials as a fallback in case a picture is not provided.
     */
    displayName?: string;
    /**
     * URL to avatar image source
     */
    picture?: string;
    /**
     * Custom styles applied to avatar
     * @deprecated - use the classes property instead
     */
    customStyles?: CSSProperties;
    /**
     * Custom styles applied to avatar
     */
    classes?: {
        [key in 'avatar' | 'avatarText']?: string;
    };
}
/**
 *  Component rendering an Avatar
 *
 * @public
 * @remarks
 *
 * Based on https://v4.mui.com/components/avatars/#avatar with some styling adjustment and two-letter initials
 */
declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;

/** @public */
type LinkClassKey = 'visuallyHidden' | 'externalLink';
type LinkProps = Omit<LinkProps$1, 'to'> & Omit<LinkProps$2, 'to'> & {
    to: string;
    component?: ElementType<any>;
    noTrack?: boolean;
    externalLinkIcon?: boolean;
};
/**
 * Thin wrapper on top of material-ui's Link component, which...
 * - Makes the Link use react-router
 * - Captures Link clicks as analytics events.
 */
declare const Link: (props: LinkProps) => JSX.Element;

/**
 * Properties for {@link LinkButton}
 *
 * @public
 * @remarks
 *
 * See {@link https://v4.mui.com/api/button/#props | Material UI Button Props} for all properties
 */
type LinkButtonProps = ButtonProps$1 & Omit<LinkProps, 'variant' | 'color'>;
/**
 * Thin wrapper on top of material-ui's {@link https://v4.mui.com/components/buttons/ | Button} component
 *
 * @public
 * @remarks
 */
declare const LinkButton: (props: LinkButtonProps) => JSX.Element;
/**
 * @public
 * @deprecated use LinkButton instead
 */
declare const Button: (props: LinkButtonProps) => JSX.Element;
/**
 * @public
 * @deprecated use LinkButtonProps instead
 */
type ButtonProps = LinkButtonProps;

/**
 * Properties for {@link CodeSnippet}
 *
 * @public
 */
interface CodeSnippetProps {
    /**
     * Code Snippet text
     */
    text: string;
    /**
     * Language used by {@link CodeSnippetProps.text}
     */
    language: string;
    /**
     * Whether to show line number
     *
     * @remarks
     *
     * Default: false
     */
    showLineNumbers?: boolean;
    /**
     * Whether to show button to copy code snippet
     *
     * @remarks
     *
     * Default: false
     */
    showCopyCodeButton?: boolean;
    /**
     * Array of line numbers to highlight
     */
    highlightedNumbers?: number[];
    /**
     * Custom styles applied to code
     *
     * @remarks
     *
     * Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}
     */
    customStyle?: any;
}
/**
 * Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}
 * providing consistent theming and copy code button
 *
 * @public
 */
declare function CodeSnippet(props: CodeSnippetProps): react_jsx_runtime.JSX.Element;

/**
 * Properties for {@link CopyTextButton}
 *
 * @public
 */
interface CopyTextButtonProps {
    /**
     * The text to be copied
     */
    text: string;
    /**
     * Number of milliseconds that the tooltip is shown
     *
     * @remarks
     *
     * Default: 1000
     */
    tooltipDelay?: number;
    /**
     * Text to show in the tooltip when user has clicked the button
     *
     * @remarks
     *
     * Default: "Text copied to clipboard"
     */
    tooltipText?: string;
    /**
     * Text to use as aria-label prop on the button
     *
     * @remarks
     *
     * Default: "Copy text"
     */
    'aria-label'?: string;
}
/**
 * Copy text button with visual feedback
 *
 * @public
 * @remarks
 *
 * Visual feedback takes form of:
 *  - a hover color
 *  - click ripple
 *  - Tooltip shown when user has clicked
 *
 * @example
 *
 * ```
 * <CopyTextButton
 *   text="My text that I want to be copied to the clipboard"
 *   arial-label="Accessible label for this button" />
 * ```
 */
declare function CopyTextButton(props: CopyTextButtonProps): react_jsx_runtime.JSX.Element;

/**
 * Properties for {@link CreateButton}
 *
 * @public
 */
type CreateButtonProps = {
    title: string;
} & Partial<Pick<LinkProps$2, 'to'>>;
/**
 * Responsive Button giving consistent UX for creation of different things
 *
 * @public
 */
declare function CreateButton(props: CreateButtonProps): react_jsx_runtime.JSX.Element | null;

/**
 * Types used to customize and provide data to {@link DependencyGraph}
 *
 * @packageDocumentation
 */

/**
 * Types for the {@link DependencyGraph} component.
 *
 * @public
 */
declare namespace DependencyGraphTypes {
    /**
     * Edge of {@link DependencyGraph}
     *
     * @public
     */
    type DependencyEdge<T = {}> = T & {
        /**
         * ID of {@link DependencyNode} from where the Edge start
         */
        from: string;
        /**
         * ID of {@link DependencyNode} to where the Edge goes to
         */
        to: string;
        /**
         * Label assigned and rendered with the Edge
         */
        label?: string;
    };
    /**
     * Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}
     *
     * @public
     */
    type RenderLabelProps<T = unknown> = {
        edge: DependencyEdge<T>;
    };
    /**
     * Custom React component for edge labels
     *
     * @public
     */
    type RenderLabelFunction<T = {}> = (props: RenderLabelProps<T>) => ReactNode;
    /**
     * Node of {@link DependencyGraph}
     *
     * @public
     */
    type DependencyNode<T = {}> = T & {
        id: string;
    };
    /**
     * Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode}
     *
     * @public
     */
    type RenderNodeProps<T = unknown> = {
        node: DependencyNode<T>;
    };
    /**
     * Custom React component for graph {@link DependencyGraphTypes.DependencyNode}
     *
     * @public
     */
    type RenderNodeFunction<T = {}> = (props: RenderNodeProps<T>) => ReactNode;
    /**
     * Graph direction
     *
     * @public
     */
    enum Direction {
        /**
         * Top to Bottom
         */
        TOP_BOTTOM = "TB",
        /**
         * Bottom to Top
         */
        BOTTOM_TOP = "BT",
        /**
         * Left to Right
         */
        LEFT_RIGHT = "LR",
        /**
         * Right to Left
         */
        RIGHT_LEFT = "RL"
    }
    /**
     * Node alignment
     *
     * @public
     */
    enum Alignment {
        /**
         * Up Left
         */
        UP_LEFT = "UL",
        /**
         * Up Right
         */
        UP_RIGHT = "UR",
        /**
         * Down Left
         */
        DOWN_LEFT = "DL",
        /**
         * Down Right
         */
        DOWN_RIGHT = "DR"
    }
    /**
     * Algorithm used to rand nodes in graph
     *
     * @public
     */
    enum Ranker {
        /**
         * {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm
         */
        NETWORK_SIMPLEX = "network-simplex",
        /**
         * Tight Tree algorithm
         */
        TIGHT_TREE = "tight-tree",
        /**
         * Longest path algorithm
         *
         * @remarks
         *
         * Simplest and fastest
         */
        LONGEST_PATH = "longest-path"
    }
    /**
     * Position of label in relation to the edge
     *
     * @public
     */
    enum LabelPosition {
        LEFT = "l",
        RIGHT = "r",
        CENTER = "c"
    }
}

/**
 * Properties of {@link DependencyGraph}
 *
 * @public
 * @remarks
 * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels
 */
interface DependencyGraphProps<NodeData, EdgeData> extends SVGProps<SVGSVGElement> {
    /**
     * Edges of graph
     */
    edges: DependencyGraphTypes.DependencyEdge<EdgeData>[];
    /**
     * Nodes of Graph
     */
    nodes: DependencyGraphTypes.DependencyNode<NodeData>[];
    /**
     * Graph {@link DependencyGraphTypes.Direction | direction}
     *
     * @remarks
     *
     * Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`
     */
    direction?: DependencyGraphTypes.Direction;
    /**
     * Node {@link DependencyGraphTypes.Alignment | alignment}
     */
    align?: DependencyGraphTypes.Alignment;
    /**
     * Margin between nodes on each rank
     *
     * @remarks
     *
     * Default: 50
     */
    nodeMargin?: number;
    /**
     * Margin between edges
     *
     * @remarks
     *
     * Default: 10
     */
    edgeMargin?: number;
    /**
     * Margin between each rank
     *
     * @remarks
     *
     * Default: 50
     */
    rankMargin?: number;
    /**
     * Margin on left and right of whole graph
     *
     * @remarks
     *
     * Default: 0
     */
    paddingX?: number;
    /**
     * Margin on top and bottom of whole graph
     *
     * @remarks
     *
     * Default: 0
     */
    paddingY?: number;
    /**
     * Heuristic used to find set of edges that will make graph acyclic
     */
    acyclicer?: 'greedy';
    /**
     * {@link DependencyGraphTypes.Ranker | Algorithm} used to rank nodes
     *
     * @remarks
     *
     * Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`
     */
    ranker?: DependencyGraphTypes.Ranker;
    /**
     * {@link DependencyGraphTypes.LabelPosition | Position} of label in relation to edge
     *
     * @remarks
     *
     * Default: `DependencyGraphTypes.LabelPosition.RIGHT`
     */
    labelPosition?: DependencyGraphTypes.LabelPosition;
    /**
     * How much to move label away from edge
     *
     * @remarks
     *
     * Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or
     * `DependencyGraphTypes.LabelPosition.RIGHT`
     */
    labelOffset?: number;
    /**
     * Minimum number of ranks to keep between connected nodes
     */
    edgeRanks?: number;
    /**
     * Weight applied to edges in graph
     */
    edgeWeight?: number;
    /**
     * Custom node rendering component
     */
    renderNode?: DependencyGraphTypes.RenderNodeFunction<NodeData>;
    /**
     * Custom label rendering component
     */
    renderLabel?: DependencyGraphTypes.RenderLabelFunction<EdgeData>;
    /**
     * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by
     * {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}
     */
    defs?: JSX.Element | JSX.Element[];
    /**
     * Controls zoom behavior of graph
     *
     * @remarks
     *
     * Default: `enabled`
     */
    zoom?: 'enabled' | 'disabled' | 'enable-on-click';
    /**
     * A factory for curve generators addressing both lines and areas.
     *
     * @remarks
     *
     * Default: 'curveMonotoneX'
     */
    curve?: 'curveStepBefore' | 'curveMonotoneX';
    /**
     * Controls if the arrow heads should be rendered or not.
     *
     * Default: false
     */
    showArrowHeads?: boolean;
    /**
     * Controls if the graph should be contained or grow
     *
     * @remarks
     *
     * Default: 'grow'
     */
    fit?: 'grow' | 'contain';
}
/**
 * Graph component used to visualize relations between entities
 *
 * @public
 */
declare function DependencyGraph<NodeData, EdgeData>(props: DependencyGraphProps<NodeData, EdgeData>): react_jsx_runtime.JSX.Element;

/** @public */
type DependencyGraphDefaultLabelClassKey = 'text';

/** @public */
type DependencyGraphDefaultNodeClassKey = 'node' | 'text';

/** @public */
type DependencyGraphEdgeClassKey = 'path' | 'label';

/** @public */
type DependencyGraphNodeClassKey = 'node';

/** @public */
type DismissableBannerClassKey = 'root' | 'topPosition' | 'icon' | 'content' | 'message' | 'info' | 'error';
/**
 * @public
 * @deprecated This type contained a typo, please use DismissableBannerClassKey instead
 */
type DismissbleBannerClassKey = DismissableBannerClassKey;
type Props$h = {
    variant: 'info' | 'error' | 'warning';
    message: ReactNode;
    id: string;
    fixed?: boolean;
};
/** @public */
declare const DismissableBanner: (props: Props$h) => react_jsx_runtime.JSX.Element;

/** @public */
type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';
type Props$g = {
    title: string;
    description?: string | JSX.Element;
    missing: 'field' | 'info' | 'content' | 'data' | {
        customImage: JSX.Element;
    };
    action?: JSX.Element;
};
/**
 * Various placeholder views for empty state pages
 *
 * @public
 *
 */
declare function EmptyState(props: Props$g): react_jsx_runtime.JSX.Element;

/** @public */
type EmptyStateImageClassKey = 'generalImg';

type Props$f = {
    annotation: string | string[];
    readMoreUrl?: string;
};
/**
 * @public
 * @deprecated This component is deprecated, please use {@link @backstage/plugin-catalog-react#MissingAnnotationEmptyState} instead
 */
declare function MissingAnnotationEmptyState(props: Props$f): react_jsx_runtime.JSX.Element;

/** @public */
type ErrorPanelClassKey = 'text' | 'divider';
/** @public */
type ErrorPanelProps = {
    error: Error;
    defaultExpanded?: boolean;
    titleFormat?: string;
    title?: string;
};
/**
 * Renders a warning panel as the effect of an error.
 *
 * @public
 */
declare function ErrorPanel(props: PropsWithChildren<ErrorPanelProps>): react_jsx_runtime.JSX.Element;

/**
 * @public
 */
type FavoriteToggleIconClassKey = 'icon' | 'iconBorder';
/**
 * Icon used in FavoriteToggle component.
 *
 * Can be used independently, useful when used as {@link @material-table/core#MaterialTableProps.actions} in {@link @material-table/core#MaterialTable}
 *
 * @public
 */
declare function FavoriteToggleIcon(props: {
    isFavorite: boolean;
}): react_jsx_runtime.JSX.Element;
/**
 * Toggle encapsulating logic for marking something as favorite,
 * primarily used in various instances of entity lists and cards but can be used elsewhere.
 *
 * This component can only be used in as a controlled toggle and does not keep internal state.
 *
 * @public
 */
declare function FavoriteToggle(props: ComponentProps<typeof IconButton> & {
    id: string;
    title: string;
    isFavorite: boolean;
    onToggle: (value: boolean) => void;
}): react_jsx_runtime.JSX.Element;

type ResponseErrorPanelClassKey = 'text' | 'divider';
/**
 * Renders a warning panel as the effect of a failed server request.
 *
 * @remarks
 * Has special treatment for ResponseError errors, to display rich
 * server-provided information about what happened.
 */
declare function ResponseErrorPanel(props: ErrorPanelProps): react_jsx_runtime.JSX.Element;

/** @public */
type FeatureCalloutCircleClassKey = '@keyframes pulsateSlightly' | '@keyframes pulsateAndFade' | 'featureWrapper' | 'backdrop' | 'dot' | 'pulseCircle' | 'text';
type Props$e = {
    featureId: string;
    title: string;
    description: string;
};
/**
 * One-time, round 'telescope' animation showing new feature.
 *
 * @public
 *
 */
declare function FeatureCalloutCircular(props: PropsWithChildren<Props$e>): react_jsx_runtime.JSX.Element;

type IconLinkVerticalProps = {
    color?: 'primary' | 'secondary';
    disabled?: boolean;
    href?: string;
    icon?: ReactNode;
    label: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
    title?: string;
};
/** @public */
type IconLinkVerticalClassKey = 'link' | 'disabled' | 'primary' | 'secondary' | 'label';
/** @public */
declare function IconLinkVertical({ color, disabled, href, icon, label, onClick, title, }: IconLinkVerticalProps): react_jsx_runtime.JSX.Element;

/** @public */
type HeaderIconLinkRowClassKey = 'links';
type Props$d = {
    links: IconLinkVerticalProps[];
};
/**
 * HTML nav tag with links mapped inside
 *
 * @public
 *
 */
declare function HeaderIconLinkRow(props: Props$d): react_jsx_runtime.JSX.Element;

type Props$c = {
    scrollStep?: number;
    scrollSpeed?: number;
    minScrollDistance?: number;
};
/** @public */
type HorizontalScrollGridClassKey = 'root' | 'container' | 'fade' | 'fadeLeft' | 'fadeRight' | 'fadeHidden' | 'button' | 'buttonLeft' | 'buttonRight';
/**
 * Horizontal scrollable component with arrows to navigate
 *
 * @public
 *
 */
declare function HorizontalScrollGrid(props: PropsWithChildren<Props$c>): react_jsx_runtime.JSX.Element;

type Props$b = CSS.Properties & {
    shorthand?: boolean;
    alpha?: boolean;
};
type LifecycleClassKey = 'alpha' | 'beta';
declare function Lifecycle(props: Props$b): react_jsx_runtime.JSX.Element;

/**
 * The properties for the LogViewer component.
 *
 * @public
 */
interface LogViewerProps {
    /**
     * The text of the logs to display.
     *
     * The LogViewer component is optimized for appending content at the end of the text.
     */
    text: string;
    /**
     * Determines if the overflow text should be wrapped or shown via a single line in a horizontal scrollbar.
     */
    textWrap?: boolean;
    /**
     * Styling overrides for classes within the LogViewer component.
     */
    classes?: {
        root?: string;
    };
}
/**
 * A component that displays logs in a scrollable text area.
 *
 * @remarks
 * The LogViewer has support for search and filtering, as well as displaying
 * text content with ANSI color escape codes.
 *
 * Since the LogViewer uses windowing to avoid rendering all contents at once, the
 * log is sized automatically to fill the available vertical space. This means
 * it may often be needed to wrap the LogViewer in a container that provides it
 * with a fixed amount of space.
 *
 * @public
 */
declare function LogViewer(props: LogViewerProps): react_jsx_runtime.JSX.Element;

/** @public Class keys for overriding LogViewer styles */
type LogViewerClassKey = 'root' | 'header' | 'log' | 'line' | 'lineSelected' | 'lineCopyButton' | 'lineNumber' | 'textHighlight' | 'textSelectedHighlight' | 'modifierBold' | 'modifierItalic' | 'modifierUnderline' | 'modifierForegroundBlack' | 'modifierForegroundRed' | 'modifierForegroundGreen' | 'modifierForegroundYellow' | 'modifierForegroundBlue' | 'modifierForegroundMagenta' | 'modifierForegroundCyan' | 'modifierForegroundWhite' | 'modifierForegroundGrey' | 'modifierBackgroundBlack' | 'modifierBackgroundRed' | 'modifierBackgroundGreen' | 'modifierBackgroundYellow' | 'modifierBackgroundBlue' | 'modifierBackgroundMagenta' | 'modifierBackgroundCyan' | 'modifierBackgroundWhite' | 'modifierBackgroundGrey';

type MarkdownContentClassKey = 'markdown';
type Props$a = {
    content: string;
    dialect?: 'gfm' | 'common-mark';
    linkTarget?: Options['linkTarget'];
    transformLinkUri?: (href: string) => string;
    transformImageUri?: (href: string) => string;
    className?: string;
};
/**
 * Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.
 *
 * @remarks
 * If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`
 */
declare function MarkdownContent(props: Props$a): react_jsx_runtime.JSX.Element;

type OAuthRequestDialogClassKey = 'dialog' | 'title' | 'contentList' | 'actionButtons';
declare function OAuthRequestDialog(_props: {}): react_jsx_runtime.JSX.Element;

type LoginRequestListItemClassKey = 'root';

type Props$9 = {
    text?: string | undefined;
    title?: TooltipProps['title'];
    line?: number | undefined;
    placement?: TooltipProps['placement'];
};
type OverflowTooltipClassKey = 'container';
declare function OverflowTooltip(props: Props$9): react_jsx_runtime.JSX.Element;

declare function Progress(props: PropsWithChildren<LinearProgressProps>): react_jsx_runtime.JSX.Element;

/** @public */
type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow';
/** @public */
type BottomLinkProps = {
    link: string;
    title: string;
    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
};
/**
 * Footer with link used in  {@link InfoCard } and {@link TabbedCard}
 *
 * @public
 *
 */
declare function BottomLink(props: BottomLinkProps): react_jsx_runtime.JSX.Element;

type SlackChannel = {
    name: string;
    href?: string;
};
/** @public */
type ErrorBoundaryProps = PropsWithChildren<{
    slackChannel?: string | SlackChannel;
    onError?: (error: Error, errorInfo: string) => null;
}>;
type State = {
    error?: Error;
    errorInfo?: ErrorInfo;
};
/** @public */
declare const ErrorBoundary: ComponentClass<ErrorBoundaryProps, State>;

/** @public */
type InfoCardClassKey = 'noPadding' | 'header' | 'headerTitle' | 'headerSubheader' | 'headerAvatar' | 'headerAction' | 'headerContent';
/** @public */
type CardActionsTopRightClassKey = 'root';
/** @public */
type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
/**
 * InfoCard is used to display a paper-styled block on the screen, similar to a panel.
 *
 * You can custom style an InfoCard with the 'className' (outer container) and 'cardClassName' (inner container)
 * props. This is typically used with the material-ui makeStyles mechanism.
 *
 * The InfoCard serves as an error boundary. As a result, if you provide an 'errorBoundaryProps' property this
 * specifies the extra information to display in the error component that is displayed if an error occurs
 * in any descendent components.
 *
 * By default the InfoCard has no custom layout of its children, but is treated as a block element. A
 * couple common variants are provided and can be specified via the variant property:
 *
 * When the InfoCard is displayed as a grid item within a grid, you may want items to have the same height for all items.
 * Set to the 'gridItem' variant to display the InfoCard with full height suitable for Grid:
 *
 * `<InfoCard variant="gridItem">...</InfoCard>`
 */
type Props$8 = {
    title?: ReactNode;
    subheader?: ReactNode;
    divider?: boolean;
    deepLink?: BottomLinkProps;
    /** @deprecated Use errorBoundaryProps instead */
    slackChannel?: string;
    errorBoundaryProps?: ErrorBoundaryProps;
    variant?: InfoCardVariants;
    alignContent?: 'normal' | 'bottom';
    children?: ReactNode;
    headerStyle?: object;
    headerProps?: CardHeaderProps;
    icon?: ReactNode;
    action?: ReactNode;
    actionsClassName?: string;
    actions?: ReactNode;
    cardClassName?: string;
    actionsTopRight?: ReactNode;
    className?: string;
    noPadding?: boolean;
    titleTypographyProps?: object;
    subheaderTypographyProps?: object;
};
/**
 * Material-ui card with header , content and actions footer
 *
 * @public
 *
 */
declare function InfoCard(props: Props$8): JSX.Element;

/** @public */
type GaugeClassKey = 'root' | 'overlay' | 'description' | 'circle' | 'colorUnknown';
/** @public */
type GaugeProps = {
    value: number;
    fractional?: boolean;
    inverse?: boolean;
    unit?: string;
    max?: number;
    size?: 'normal' | 'small';
    description?: ReactNode;
    getColor?: GaugePropsGetColor;
    relativeToMax?: boolean;
    decimalDigits?: number;
};
/** @public */
type GaugePropsGetColorOptions = {
    palette: BackstagePalette;
    value: number;
    inverse?: boolean;
    max?: number;
};
/** @public */
type GaugePropsGetColor = (args: GaugePropsGetColorOptions) => string;
/**
 * Circular Progress Bar
 *
 * @public
 *
 */
declare function Gauge(props: GaugeProps): react_jsx_runtime.JSX.Element;

type Props$7 = {
    title: string;
    subheader?: string;
    variant?: InfoCardVariants;
    /** Progress in % specified as decimal, e.g. "0.23" */
    progress: number;
    alignGauge?: 'normal' | 'bottom';
    size?: 'normal' | 'small';
    description?: ReactNode;
    icon?: ReactNode;
    inverse?: boolean;
    deepLink?: BottomLinkProps;
    getColor?: GaugePropsGetColor;
};
/** @public */
type GaugeCardClassKey = 'root';
/**
 * {@link Gauge} with header, subheader and footer
 *
 * @public
 *
 */
declare function GaugeCard(props: Props$7): react_jsx_runtime.JSX.Element;

type Props$6 = {
    /**
     * Progress value between 0.0 - 1.0.
     */
    value: number;
    width?: 'thick' | 'thin';
    getColor?: GaugePropsGetColor;
};
declare function LinearGauge(props: Props$6): react_jsx_runtime.JSX.Element | null;

/** @public */
type SelectInputBaseClassKey = 'root' | 'input';
/** @public */
type SelectClassKey = 'formControl' | 'label' | 'chips' | 'chip' | 'checkbox' | 'root';
/** @public */
type SelectItem = {
    label: string;
    value: string | number;
};
/** @public */
type SelectedItems = string | string[] | number | number[];
type SelectProps = {
    multiple?: boolean;
    items: SelectItem[];
    label: string;
    placeholder?: string;
    selected?: SelectedItems;
    onChange: (arg: SelectedItems) => void;
    triggerReset?: boolean;
    native?: boolean;
    disabled?: boolean;
    margin?: 'dense' | 'none';
    'data-testid'?: string;
};
/** @public */
declare function SelectComponent(props: SelectProps): react_jsx_runtime.JSX.Element;

/** @public */
type ClosedDropdownClassKey = 'icon';

type OpenedDropdownClassKey = 'icon';

interface StepperProps {
    elevated?: boolean;
    onStepChange?: (prevIndex: number, nextIndex: number) => void;
    activeStep?: number;
}
declare function SimpleStepper(props: PropsWithChildren<StepperProps>): react_jsx_runtime.JSX.Element;

type StepActions = {
    showNext?: boolean;
    canNext?: () => boolean;
    onNext?: () => void;
    nextStep?: (current: number, last: number) => number;
    nextText?: string;
    showBack?: boolean;
    backText?: string;
    onBack?: () => void;
    showRestart?: boolean;
    canRestart?: () => boolean;
    onRestart?: () => void;
    restartText?: string;
    showSkip?: boolean;
    canSkip?: () => boolean;
    onSkip?: () => void;
    skipText?: string;
};
type StepProps = {
    title: string;
    children: ReactElement;
    end?: boolean;
    actions?: StepActions;
};

type SimpleStepperFooterClassKey = 'root';

type SimpleStepperStepClassKey = 'end';
declare function SimpleStepperStep(props: PropsWithChildren<StepProps>): react_jsx_runtime.JSX.Element;

type StatusClassKey = 'status' | 'ok' | 'warning' | 'error' | 'pending' | 'running' | 'aborted';
declare function StatusOK(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusWarning(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusError(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusPending(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusRunning(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusAborted(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;

type MetadataTableTitleCellClassKey = 'root';
type MetadataTableCellClassKey = 'root';
type MetadataTableListClassKey = 'root';
type MetadataTableListItemClassKey = 'root' | 'random';

type StructuredMetadataTableListClassKey = 'root';
type StructuredMetadataTableNestedListClassKey = 'root';
/** @public */
interface StructuredMetadataTableProps {
    metadata: {
        [key: string]: any;
    };
    dense?: boolean;
    options?: {
        /**
         * Function to format the keys from the `metadata` object. Defaults to
         * startCase from the lodash library.
         * @param key - A key within the `metadata`
         * @returns Formatted key
         */
        titleFormat?: (key: string) => string;
        nestedValuesAsYaml?: boolean;
    };
}
/** @public */
declare function StructuredMetadataTable(props: StructuredMetadataTableProps): react_jsx_runtime.JSX.Element;

type SetQueryParams<T> = (params: T) => void;
declare function useQueryParamState<T>(stateName: string, 
/** @deprecated Don't configure a custom debounceTime */
debounceTime?: number): [T | undefined, SetQueryParams<T>];

type SupportItemLink = {
    url: string;
    title: string;
};
type SupportItem = {
    title: string;
    icon?: string;
    links: SupportItemLink[];
};
type SupportConfig = {
    url: string;
    items: SupportItem[];
};
declare function useSupportConfig(): SupportConfig;

type SupportButtonProps = {
    title?: string;
    items?: SupportItem[];
    children?: ReactNode;
};
type SupportButtonClassKey = 'popoverList';
declare function SupportButton(props: SupportButtonProps): react_jsx_runtime.JSX.Element | null;

type SubRoute$1 = {
    path: string;
    title: string;
    children: JSX.Element;
    tabProps?: TabProps<ElementType, {
        component?: ElementType;
    }>;
};
/**
 * TabbedLayout is a compound component, which allows you to define a layout for
 * pages using a sub-navigation mechanism.
 *
 * @remarks
 * Consists of two parts: TabbedLayout and TabbedLayout.Route
 *
 * @example
 * ```jsx
 * <TabbedLayout>
 *   <TabbedLayout.Route path="/example" title="Example tab">
 *     <div>This is rendered under /example/anything-here route</div>
 *   </TabbedLayout.Route>
 * </TabbedLayout>
 * ```
 */
declare function TabbedLayout(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare namespace TabbedLayout {
    var Route: (props: SubRoute$1) => null;
}

type SubRoute = {
    path: string;
    title: string;
    children: JSX.Element;
    tabProps?: TabProps<ElementType, {
        component?: ElementType;
    }>;
};

declare function RoutedTabs(props: {
    routes: SubRoute[];
}): react_jsx_runtime.JSX.Element;

type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters';
type SelectedFilters = {
    [key: string]: string | string[];
};

type SubvalueCellClassKey = 'value' | 'subvalue';
type SubvalueCellProps = {
    value: ReactNode;
    subvalue: ReactNode;
};
declare function SubvalueCell(props: SubvalueCellProps): react_jsx_runtime.JSX.Element;

type TableHeaderClassKey = 'header';
type TableToolbarClassKey = 'root' | 'title' | 'searchField';
/** @public */
type FiltersContainerClassKey = 'root' | 'title';
type TableClassKey = 'root';
interface TableColumn<T extends object = {}> extends Column<T> {
    highlight?: boolean;
    width?: string;
}
type TableFilter = {
    column: string;
    type: 'select' | 'multiple-select';
};
type TableState = {
    search?: string;
    filtersOpen?: boolean;
    filters?: SelectedFilters;
};
interface TableProps<T extends object = {}> extends MaterialTableProps<T> {
    columns: TableColumn<T>[];
    subtitle?: string;
    filters?: TableFilter[];
    initialState?: TableState;
    emptyContent?: ReactNode;
    isLoading?: boolean;
    onStateChange?: (state: TableState) => any;
}
interface TableOptions<T extends object = {}> extends Options$1<T> {
}
/**
 * @public
 */
declare function Table<T extends object = {}>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
declare namespace Table {
    var icons: Readonly<Icons>;
}

declare function TrendLine(props: SparklinesProps & Pick<SparklinesLineProps, 'color'> & {
    title?: string;
}): react_jsx_runtime.JSX.Element | null;

type WarningPanelClassKey = 'panel' | 'summary' | 'summaryText' | 'message' | 'details';
type WarningProps = {
    title?: string;
    severity?: 'warning' | 'error' | 'info';
    titleFormat?: string;
    message?: ReactNode;
    defaultExpanded?: boolean;
    children?: ReactNode;
};
/**
 * Show a user friendly error message to a user similar to
 * ErrorPanel except that the warning panel only shows the warning message to
 * the user.
 *
 * @param severity - Ability to change the severity of the alert. Default value
 *        "warning"
 * @param title - A title for the warning. If not supplied, "Warning" will be
 *        used.
 * @param message - Optional more detailed user-friendly message elaborating on
 *        the cause of the error.
 * @param children - Objects to provide context, such as a stack trace or detailed
 *        error reporting. Will be available inside an unfolded accordion.
 */
declare function WarningPanel(props: WarningProps): react_jsx_runtime.JSX.Element;

/**
 * @public
 * Props for the {@link @backstage/core-plugin-api#IconComponent} component.
 */
type IconComponentProps = ComponentProps<IconComponent>;
/**
 * @public
 * Props for the {@link AppIcon} component.
 */
type AppIconProps = IconComponentProps & {
    id: string;
    Fallback?: IconComponent;
};
/**
 * @public
 * A component that renders a system icon by its id.
 */
declare function AppIcon(props: AppIconProps): react_jsx_runtime.JSX.Element;
/**
 * Broken Image Icon
 * @public
 */
declare function BrokenImageIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function CatalogIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function ChatIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function DashboardIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function DocsIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function EmailIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function GitHubIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function GroupIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function HelpIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function UserIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function WarningIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function StarIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function UnstarredIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;

/** @public */
type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
type Props$5 = {
    stretch?: boolean;
    noPadding?: boolean;
    className?: string;
};
/**
 * The main content part inside a {@link Page}.
 *
 * @public
 *
 */
declare function Content(props: PropsWithChildren<Props$5>): react_jsx_runtime.JSX.Element;

/**
 * TODO: favoriteable capability
 */
/** @public */
type ContentHeaderClassKey = 'container' | 'leftItemsBox' | 'rightItemsBox' | 'description' | 'title';
type ContentHeaderTitleProps = {
    title?: string;
    className?: string;
};
type ContentHeaderDescriptionProps = {
    description?: string;
    className?: string;
};
type ContentHeaderProps = {
    title?: ContentHeaderTitleProps['title'];
    titleComponent?: ReactNode;
    description?: ContentHeaderDescriptionProps['description'];
    descriptionComponent?: ReactNode;
    textAlign?: 'left' | 'right' | 'center';
};
/**
 *  A header at the top inside a {@link Content}.
 *
 * @public
 *
 */
declare function ContentHeader(props: PropsWithChildren<ContentHeaderProps>): react_jsx_runtime.JSX.Element;

interface IErrorPageProps {
    status?: string;
    statusMessage: string;
    additionalInfo?: ReactNode;
    supportUrl?: string;
    stack?: string;
}
/** @public */
type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
/**
 * Error page with status and description
 *
 * @public
 *
 */
declare function ErrorPage(props: IErrorPageProps): react_jsx_runtime.JSX.Element;

type MicDropClassKey = 'micDrop';

/** @public */
type StackDetailsClassKey = 'title';

/** @public */
type HeaderClassKey = 'header' | 'leftItemsBox' | 'rightItemsBox' | 'title' | 'subtitle' | 'type' | 'breadcrumb' | 'breadcrumbType' | 'breadcrumbTitle';
type Props$4 = {
    component?: ReactNode;
    pageTitleOverride?: string;
    style?: CSSProperties;
    subtitle?: ReactNode;
    title: ReactNode;
    tooltip?: string;
    type?: string;
    typeLink?: string;
};
/**
 * Backstage main header with abstract color background in multiple variants
 *
 * @public
 *
 */
declare function Header(props: PropsWithChildren<Props$4>): react_jsx_runtime.JSX.Element;

/**
 * @public
 */
type HeaderActionMenuItem = {
    label?: ListItemTextProps['primary'];
    secondaryLabel?: ListItemTextProps['secondary'];
    icon?: ReactElement;
    disabled?: boolean;
    onClick?: (event: MouseEvent<HTMLElement>) => void;
};
/**
 * @public
 */
type HeaderActionMenuProps = {
    actionItems: HeaderActionMenuItem[];
};
/**
 * @public
 */
declare function HeaderActionMenu(props: HeaderActionMenuProps): react_jsx_runtime.JSX.Element;

/** @public */
type HeaderLabelClassKey = 'root' | 'label' | 'value';
type HeaderLabelContentProps = PropsWithChildren<{
    value: ReactNode;
    className: string;
    typographyRootComponent?: keyof JSX.IntrinsicElements;
}>;
type HeaderLabelProps = {
    label: string;
    value?: HeaderLabelContentProps['value'];
    contentTypograpyRootComponent?: HeaderLabelContentProps['typographyRootComponent'];
    url?: string;
};
/**
 * Additional label to main {@link Header}
 *
 * @public
 *
 */
declare function HeaderLabel(props: HeaderLabelProps): react_jsx_runtime.JSX.Element;

/** @public */
type HeaderTabsClassKey = 'tabsWrapper' | 'defaultTab' | 'selected' | 'tabRoot';
type Tab = {
    id: string;
    label: string;
    tabProps?: TabProps<ElementType, {
        component?: ElementType;
    }>;
};
type HeaderTabsProps = {
    tabs: Tab[];
    onChange?: (index: number) => void;
    selectedIndex?: number;
};
/**
 * Horizontal Tabs component
 *
 * @public
 *
 */
declare function HeaderTabs(props: HeaderTabsProps): react_jsx_runtime.JSX.Element;

type ItemCardProps = {
    description?: string;
    tags?: string[];
    title: string;
    /** @deprecated Use subtitle instead */
    type?: string;
    subtitle?: ReactNode;
    label: string;
    onClick?: () => void;
    href?: string;
};
/**
 * This card type has been deprecated. Instead use plain Material UI Card and helpers
 * where appropriate.
 *
 *  @example
 * ```
 *   <Card>
 *     <CardMedia>
 *       <ItemCardHeader title="My Card" subtitle="neat!" />
 *     </CardMedia>
 *     <CardContent>
 *        Some text
 *     </CardContent>
 *     <CardActions>
 *       <Button color="primary" to="https://backstage.io">
 *         Get Started
 *       </Button>
 *     </CardActions>
 *   </Card>
 * ```
 *
 * @deprecated Use plain Material UI `<Card>` and composable helpers instead.
 * @see https://v4.mui.com/components/cards/
 */
declare function ItemCard(props: ItemCardProps): react_jsx_runtime.JSX.Element;

/** @public */
type ItemCardGridClassKey = 'root';
declare const styles$1: (theme: Theme) => _material_ui_styles.StyleRules<{}, "root">;
/** @public */
type ItemCardGridProps = Partial<WithStyles<typeof styles$1>> & {
    /**
     * The Card items of the grid.
     */
    children?: ReactNode;
};
/**
 * A default grid to use when arranging "item cards" - cards that let users
 * select among several options.
 *
 * @remarks
 * The immediate children are expected to be Material UI Card components.
 *
 * Styles for the grid can be overridden using the `classes` prop, e.g.:
 *
 * `<ItemCardGrid title="Hello" classes={{ root: myClassName }} />`
 *
 * This can be useful for e.g. overriding gridTemplateColumns to adapt the
 * minimum size of the cells to fit the content better.
 *
 * @public
 */
declare function ItemCardGrid(props: ItemCardGridProps): react_jsx_runtime.JSX.Element;

/** @public */
type ItemCardHeaderClassKey = 'root';
declare const styles: (theme: Theme) => _material_ui_styles.StyleRules<{}, "root">;
/** @public */
type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
    /**
     * A large title to show in the header, providing the main heading.
     *
     * Use this if you want to have the default styling and placement of a title.
     */
    title?: ReactNode;
    /**
     * A slightly smaller title to show in the header, providing additional
     * details.
     *
     * Use this if you want to have the default styling and placement of a
     * subtitle.
     */
    subtitle?: ReactNode;
    /**
     * Custom children to draw in the header.
     *
     * If the title and/or subtitle were specified, the children are drawn below
     * those.
     */
    children?: ReactNode;
};
/**
 * A simple card header, rendering a default look for "item cards" - cards that
 * are arranged in a grid for users to select among several options.
 *
 * @remarks
 * This component expects to be placed within a Material UI `<CardMedia>`.
 *
 * Styles for the header can be overridden using the `classes` prop, e.g.:
 *
 * `<ItemCardHeader title="Hello" classes={{ root: myClassName }} />`
 *
 * @public
 */
declare function ItemCardHeader(props: ItemCardHeaderProps): react_jsx_runtime.JSX.Element;

type PageClassKey = 'root';
type Props$3 = {
    themeId: string;
    className?: string;
    children?: ReactNode;
};
declare function Page(props: Props$3): react_jsx_runtime.JSX.Element;

type PageWithHeaderProps = ComponentProps<typeof Header> & {
    themeId: string;
};
declare function PageWithHeader(props: PropsWithChildren<PageWithHeaderProps>): react_jsx_runtime.JSX.Element;

/**
 * Props for {@link ProxiedSignInPage}.
 *
 * @public
 */
type ProxiedSignInPageProps = SignInPageProps & {
    /**
     * The provider to use, e.g. "gcpIap" or "awsalb". This must correspond to
     * a properly configured auth provider ID in the auth backend.
     */
    provider: string;
    /**
     * Optional headers which are passed along with the request to the
     * underlying provider
     */
    headers?: HeadersInit | (() => HeadersInit) | (() => Promise<HeadersInit>);
    /**
     * Error component to be rendered instead of the default error panel in case
     * sign in fails.
     */
    ErrorComponent?: ComponentType<{
        error?: Error;
    }>;
};
/**
 * A sign-in page that has no user interface of its own. Instead, it relies on
 * sign-in being performed by a reverse authenticating proxy that Backstage is
 * deployed behind, and leverages its session handling.
 *
 * @remarks
 *
 * This sign-in page is useful when you are using products such as Google
 * Identity-Aware Proxy or AWS Application Load Balancer or similar, to front
 * your Backstage installation. This sign-in page implementation will silently
 * and regularly punch through the proxy to the auth backend to refresh your
 * frontend session information, without requiring user interaction.
 *
 * @public
 */
declare const ProxiedSignInPage: (props: ProxiedSignInPageProps) => react_jsx_runtime.JSX.Element | null;

/** @public */
type SidebarOptions = {
    drawerWidthClosed?: number;
    drawerWidthOpen?: number;
};
/** @public */
type SubmenuOptions = {
    drawerWidthClosed?: number;
    drawerWidthOpen?: number;
};
declare const sidebarConfig: {
    drawerWidthClosed: number;
    drawerWidthOpen: number;
    defaultOpenDelayMs: number;
    defaultCloseDelayMs: number;
    defaultFadeDuration: number;
    logoHeight: number;
    iconContainerWidth: number;
    iconSize: number;
    iconPadding: number;
    selectedIndicatorWidth: number;
    userBadgePadding: number;
    userBadgeDiameter: number;
    mobileSidebarHeight: number;
};
declare const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";

/** @public */
type SidebarClassKey = 'drawer' | 'drawerOpen';
/** @public */
type SidebarProps = {
    openDelayMs?: number;
    closeDelayMs?: number;
    sidebarOptions?: SidebarOptions;
    submenuOptions?: SubmenuOptions;
    disableExpandOnHover?: boolean;
    children?: ReactNode;
};
/**
 * Passing children into the desktop or mobile sidebar depending on the context
 *
 * @public
 */
declare const Sidebar: (props: SidebarProps) => react_jsx_runtime.JSX.Element;

/**
 * Props of MobileSidebar
 *
 * @public
 */
type MobileSidebarProps = {
    children?: ReactNode;
};
/**
 * A navigation component for mobile screens, which sticks to the bottom.
 *
 * @remarks
 * It alternates the normal sidebar by grouping the `SidebarItems` based on provided `SidebarGroup`s
 * either rendering them as a link or an overlay menu.
 * If no `SidebarGroup`s are provided the sidebar content is wrapped in an default overlay menu.
 *
 * @public
 */
declare const MobileSidebar: (props: MobileSidebarProps) => react_jsx_runtime.JSX.Element | null;

/**
 * Props for the `SidebarGroup`
 *
 * @public
 */
interface SidebarGroupProps extends BottomNavigationActionProps {
    /**
     * If the `SidebarGroup` should be a `Link`, `to` should be a pathname to that location
     */
    to?: string;
    /**
     * If the `SidebarGroup`s should be in a different order than in the normal `Sidebar`, you can provide
     * each `SidebarGroup` it's own priority to reorder them.
     */
    priority?: number;
    /**
     * React children
     */
    children?: ReactNode;
}
/**
 * Groups items of the `Sidebar