@ui5/webcomponents-react/dist/webComponents/Dialog/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents/dist/Dialog.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
 * The `Dialog` component is used to temporarily display some information in a
 * size-limited window in front of the regular app screen.
 * It is used to prompt the user for an action or a confirmation.
 * The `Dialog` interrupts the current app processing as it is the only focused UI element and
 * the main screen is dimmed/blocked.
 * The dialog combines concepts known from other technologies where the windows have
 * names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.
 *
 * The `Dialog` is modal, which means that a user action is required before it is possible to return to the parent window.
 * To open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.
 * The content of the `Dialog` is fully customizable.
 *
 * ### Structure
 * A `Dialog` consists of a header, content, and a footer for action buttons.
 * The `Dialog` is usually displayed at the center of the screen.
 * Its position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.
 *
 *
 * ### Responsive Behavior
 * The `stretch` property can be used to stretch the
 * `Dialog` on full screen.
 *
 * **Note:** When a `Bar` is used in the header or in the footer, you should remove the default dialog's paddings.
 *
 * For more information see the sample "Bar in Header/Footer".
 *
 * ### Keyboard Handling
 *
 * #### Basic Navigation
 * When the `Dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog
 * with the following keyboard shortcuts:
 *
 * - [Up] or [Down] arrow keys - Move the dialog up/down.
 * - [Left] or [Right] arrow keys - Move the dialog left/right.
 *
 * #### Resizing
 * When the `Dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog
 * with the following keyboard shortcuts:
 *
 * - [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.
 * - [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.
 *
 *
 *
 * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
 */
const Dialog = withWebComponent('ui5-dialog', ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'], ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'], ['footer', 'header'], ['before-close', 'before-open', 'close', 'open']);
Dialog.displayName = 'Dialog';
export { Dialog };