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

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * 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` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.
 *
 * **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`, 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`, 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.
 *
 * #### Fullscreen
 * When the `Dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode
 * with the following keyboard shortcut:
 *
 * - [Shift] + [Ctrl] + [F] - Toggle fullscreen mode.
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [Dialog UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Dialog) | [Repository](https://github.com/UI5/webcomponents)
 */
const Dialog = withWebComponent('ui5-dialog', ['accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'], ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'showFullscreenButton', 'stretch'], ['footer', 'header'], ['before-close', 'before-open', 'close', 'open']);
Dialog.displayName = 'Dialog';
export { Dialog };