@ui5/webcomponents-react

import '@ui5/webcomponents/dist/Popover.js'; import type { PopupBeforeCloseEventDetail } from '@ui5/webcomponents/dist/Popup.js'; import type PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js'; import type PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import type PopoverVerticalAlign from '@ui5/webcomponents/dist/types/PopoverVerticalAlign.js'; import type PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js'; import type { ReactNode } from 'react'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface PopoverAttributes { /** * Defines the accessible name of the component. * @default undefined */ accessibleName?: string | undefined; /** * Defines the IDs of the elements that label the component. * * **Note:** Available since [v1.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.1.0) of **@ui5/webcomponents**. * @default undefined */ accessibleNameRef?: string | undefined; /** * Allows setting a custom role. * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. * @default "Dialog" */ accessibleRole?: PopupAccessibleRole | keyof typeof PopupAccessibleRole; /** * Determines if there is no enough space, the component can be placed * over the target. * @default false */ allowTargetOverlap?: boolean; /** * Defines the header text. * * **Note:** If `header` slot is provided, the `headerText` is ignored. * @default undefined */ headerText?: string | undefined; /** * Determines whether the component arrow is hidden. * @default false */ hideArrow?: boolean; /** * Determines the horizontal alignment of the component. * @default "Center" */ horizontalAlign?: PopoverHorizontalAlign | keyof typeof PopoverHorizontalAlign; /** * Defines the ID of the HTML Element, which will get the initial focus. * * **Note:** If an element with `autofocus` attribute is added inside the component, * `initialFocus` won't take effect. * @default undefined */ initialFocus?: string | undefined; /** * Defines whether the component should close when * clicking/tapping outside of the popover. * If enabled, it blocks any interaction with the background. * @default false */ modal?: boolean; /** * Indicates if the element is open * * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. * @default false */ open?: boolean; /** * Defines the ID or DOM Reference of the element at which the popover is shown. * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. * You can only set the `opener` attribute to a DOM Reference when using JavaScript. * * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. * @default undefined */ opener?: HTMLElement | string | undefined; /** * Determines on which side the component is placed at. * @default "End" */ placement?: PopoverPlacement | keyof typeof PopoverPlacement; /** * Defines if the focus should be returned to the previously focused element, * when the popup closes. * @default false */ preventFocusRestore?: boolean; /** * Indicates whether initial focus should be prevented. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default false */ preventInitialFocus?: boolean; /** * Determines the vertical alignment of the component. * @default "Center" */ verticalAlign?: PopoverVerticalAlign | keyof typeof PopoverVerticalAlign; } interface PopoverDomRef extends Required<PopoverAttributes>, Ui5DomRef { /** * Focuses the element denoted by `initialFocus`, if provided, * or the first focusable element otherwise. * @returns {Promise<void>} - Promise that resolves when the focus is applied */ applyFocus: () => Promise<void>; } interface PopoverPropTypes extends PopoverAttributes, Omit<CommonProps, keyof PopoverAttributes | 'children' | 'footer' | 'header' | 'onBeforeClose' | 'onBeforeOpen' | 'onClose' | 'onOpen'> { /** * Defines the content of the Popup. */ children?: ReactNode | ReactNode[]; /** * Defines the footer HTML Element. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="footer"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). */ footer?: UI5WCSlotsNode; /** * Defines the header HTML Element. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="header"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). */ header?: UI5WCSlotsNode; /** * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.** * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. */ onBeforeClose?: (event: Ui5CustomEvent<PopoverDomRef, PopupBeforeCloseEventDetail>) => void; /** * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.** * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. */ onBeforeOpen?: (event: Ui5CustomEvent<PopoverDomRef>) => void; /** * Fired after the component is closed. **This event does not bubble.** */ onClose?: (event: Ui5CustomEvent<PopoverDomRef>) => void; /** * Fired after the component is opened. **This event does not bubble.** */ onOpen?: (event: Ui5CustomEvent<PopoverDomRef>) => void; } /** * The `Popover` component displays additional information for an object * in a compact way and without leaving the page. * The Popover can contain various UI elements, such as fields, tables, images, and charts. * It can also include actions in the footer. * * ### Structure * * The popover has three main areas: * * - Header (optional) * - Content * - Footer (optional) * * **Note:** The `Popover` is closed when the user clicks * or taps outside the popover * or selects an action within the popover. You can prevent this with the * `modal` property. * * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ declare const Popover: import("react").ForwardRefExoticComponent<PopoverPropTypes & import("../../internal/withWebComponent.js").WithWebComponentPropTypes & import("react").RefAttributes<PopoverDomRef>>; export { Popover }; export type { PopoverDomRef, PopoverPropTypes };