import { default as React } from 'react';
import { AlertAppearances, AlertRoles, AlertSizes } from '@viasat/beam-shared/components/alert';
import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
/**
 * TODO:
 * 0. Write a11y docs inside of the storybook and give an example for each
 *    - Need to make sure we all agree with screen reader users not being able to tab to dismissible,
 *      alerts, when we disable auto focus for them.
 *        - They can close with esc if they want
 *        - We can give teams a way to allow the focus of the button no matter what for a11y
 * 0.5 Update last focus code to go back the previously focused element as the documents focus changes
 * 1. Set up new SB infra and new CICD to test 3.0
 * 2. Add spacing props
 * 7. Add tests
 * 3. Add accessibility testing via storybook, axe, or cypress
 */
/**
 * # A11y things that a user must do:
 * - role
 *   - It defaults ot be an alert, but you can change it:
 *      1. alert: used for urgent and important messages
 *      2. status: used for less important messages same as aria-live="polite" role="log"
 *        - Will read all the message in the area over as a new message comes in
 *      3. log: used for less important messages same as aria-live="polite" role="status"
 *        - Will read only the new message as it comes in
 *        - The first 3 types attract the user’s attention without receiving focus to communicate the message.
 *        - That includes a close button as well!
 *      4. alertdialog: used when when the alert has actions or when the alert opens like a dialog/modal
 * - arial-live: for alerts that appear dynamically, (like in response to a user action)
 *   - polite: the screen reader will announce the message when the user is idle
 *   - assertive: the screen reader will announce the message immediately
 * - aria-labelledby: to associate the alert with the heading slot
 * - aria-describedby: to associate the alert with the body slot
 *
 *
 * # A11y things that we should do:
 * - When an alert appears move the focus to that alert?
 * - When an alert is closed, make sure the focus goes to the next focusable element
 *   or make the focus got to the element that triggered the alert?
 * - aria-labelledby: to associate the alert with the heading
 * - aria-describedby: to associate the alert with the body
 *
 *
 * # More things to test:
 * - Test with various screen readers like JAWS, NVDA, VoiceOver (for macOS and iOS),
 *   and TalkBack (for Android) and browsers to ensure the alerts are announced as expected.
 * - Test with keyboard-only navigation to ensure the alerts are announced as expected.
 *
 * # Things to tell users in docs:
 * - The 2 roles we support and why only these two roles are supported
 * - The difference between the 2 roles
 * - How you can use role status and role log to make the alert less intrusive
 * - The difference between the 2 roles
 * - If want to add a close button your self you must make sure that alert goes back to the previous focusable element
 *
 * # Other Notes:
 * - If you want the alert to be dismissible but also be a low priority alert (this means it doesn't)
 * distribute the flow of screen readers then set `disableAutoFocus` to true, this will explicitly turn
 * off Beams auto role="alert-dialog" when actions or an `Alert` is `dismissible`
     
 *
 * # Resources:
 * - https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/
 * - https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/
 *
 *
 */
/**
 *

 * # A11y things that a user must do:
 * - role
 *   - It defaults ot be an alert, but you can change it:
 *      1. alert: used for urgent and important messages
 *      2. status: used for less important messages
 *      3. alertdialog: used when when the alert has actions or when the alert opens like a dialog/modal
 * - arial-live: for alerts that appear dynamically, (like in response to a user action). This is set by default
 *     when using role alert or alertdialog.
 *   - polite: the screen reader will announce the message when the user is idle
 *   - assertive: the screen reader will announce the message immediately
 *
 *
 * # A11y things that we should do:
 * - When an alert appears move the focus to that alert?
 * - When an alert is closed, make sure the focus goes to the next focusable element
 *   or make the focus got to the element that triggered the alert?
 * - aria-labelledby: to associate the alert with the heading and heading slot
 * - aria-describedby: to associate the alert with the body and body slot
 *
 * # More things to test:
 * - Test with various screen readers like JAWS, NVDA, VoiceOver (for macOS and iOS),
 *   and TalkBack (for Android) and browsers to ensure the alerts are announced as expected.
 * - Test with keyboard-only navigation to ensure the alerts are announced as expected.
 *
 * # Resources:
 * - https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/
 * - https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/
 *
 */
export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
    /**
     * Specify the heading text for Alert
     */
    heading?: React.ReactNode;
    /**
     * Specify the body text for Alert
     */
    body?: React.ReactNode;
    /**
     * Specify if actions display on the Alert
     */
    actions?: React.ReactNode;
    /**
     * Specify the size of the Alert
     * @default 'sm'
     */
    size?: AlertSizes;
    /**
     * Specify if the Alert has no border radius
     * @default false
     */
    fullWidth?: boolean;
    /**
     * Specify the theme of the Alert. By default it inherits the theme from the parent
     */
    theme?: ThemeTypes;
    /**
     * Specify the appearance of the Alert
     * @default 'infoPrimary'
     */
    appearance?: AlertAppearances;
    /**
     * Specify if the Alert is hidden
     * @default false
     */
    hidden?: boolean;
    /**
     * Specify a different icon for the Alert
     *
     */
    icon?: React.ReactNode;
    /**
     * Specify if the icon displays on the Alert
     * @default false
     */
    hideIcon?: boolean;
    /**
     * Specify if the Alert can be dismissed
     * @default false
     */
    dismissible?: boolean;
    /**
     * Specify a callback function for when the close button is activated
     */
    onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
    /**
     * Specify the role of the Alert
     */
    role?: AlertRoles;
    /**
     * Specify if the Alert should not autofocus the first focusable element
     * @default false
     */
    disableAutoFocus?: boolean;
    /**
     * Specify if the Alert should not close when the escape key is pressed
     * @default false
     */
    disableCloseOnEscape?: boolean;
}
export declare function Alert({ heading, body, children, actions, theme, icon, size, fullWidth, appearance, className: _className, hidden, hideIcon, dismissible, disableAutoFocus, disableCloseOnEscape, role: _role, id: _id, onDismiss, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;