@dnb/eufemia

import * as React from 'react'; import type { CloseButtonProps } from './parts/CloseButton'; import type { ButtonProps } from '../button/Button'; import type { ModalRootProps } from './ModalRoot'; export type ReactChildType = React.ReactNode | ((...args: any[]) => any); export type ModalFullscreen = 'auto' | boolean; export type ModalAlignContent = 'left' | 'center' | 'centered' | 'right'; export type ModalContainerPlacement = 'left' | 'right' | 'top' | 'bottom'; export type ModalOpenState = 'opened' | 'closed' | boolean; export type ModalTriggerVariant = 'primary' | 'secondary' | 'tertiary' | 'signal'; export type ModalTriggerIconPosition = 'left' | 'right'; export type ModalContentMinWidth = string | number; export type ModalContentMaxWidth = string | number; export type TriggeredBy = 'handler' | 'button' | 'overlay' | 'keyboard' | 'unmount'; export type CloseHandlerParams = { triggeredBy: TriggeredBy; triggeredByEvent?: Event; }; export type CloseHandler = (params?: CloseHandlerParams) => void; export interface ModalProps extends ModalRootProps { /** * The id used internal in the modal/drawer root element. Defaults to `root`, so the element id will be `dnb-modal-root`. */ id?: string; /** * Will disable the trigger button. */ disabled?: boolean; /** * Forces the modal/drawer to delay the opening. The delay is given in `ms`. */ open_delay?: string | number; /** * If set to `true` (boolean or string), then the user can't close the modal/drawer. */ prevent_close?: boolean; /** * Duration of animation open/close in ms. Defaults to 300ms. */ animation_duration?: string | number; /** * If set to `true`, no open/close animation will be shown. Defaults to false. */ no_animation?: boolean; /** * Use this prop to control the open/close state by setting either: `opened` / `closed` or `true` / `false`. */ open_state?: ModalOpenState; /** * The content which will appear when triggering the modal/drawer. */ children?: ReactChildType; /** * Omits default showing trigger button */ omit_trigger_button?: boolean; /** * This event gets triggered once the modal shows up. Returns the modal id: `{ id }`. */ on_open?: ({ id }: { id?: string; }) => void; /** * This event gets triggered once the modal gets closed. Returns the modal id: `{ id, event, triggeredBy }`. */ on_close?: ({ id, event, triggeredBy, }: { id?: string; event?: Event; triggeredBy?: string; }) => void; /** * This event gets triggered once the user tries to close the modal, but `prevent_close` is set to "true". Returns a callback `close` you can call to trigger the close mechanism. More details below. Returns the modal id: `{ id, event, close: Method, triggeredBy }` */ on_close_prevent?: ({ id, event, triggeredBy, close, }: { id?: string; event?: Event; triggeredBy?: string; close?: CloseHandler; }) => void; /** * Set a function to call the callback function, once the modal/drawer should open: `open_modal={(open) => open()}` */ open_modal?: (open?: (e: Event) => void, instance?: any) => () => void | void; /** * Set a function to call the callback function, once the modal/drawer should close: `close_modal={(close) => close()}` */ close_modal?: (close?: CloseHandler, instance?: any) => () => void | void; /** * Provide a custom trigger component. Like trigger={<Anchor href="/" />}. It will set the focus on it when the modal/drawer gets closed. */ trigger?: ReactChildType; /** * Send along custom HTML attributes or properties to the trigger button. */ trigger_attributes?: TriggerAttributes; /** * The content which will appear when triggering the modal/drawer. */ modal_content?: ReactChildType; /** * If true, the drawer will not open in a new DOM but directly in current DOM. Defaults to `false`. */ direct_dom_return?: boolean; /** * To get the inner content Element, pass in your own React ref */ content_ref?: React.RefObject<HTMLElement>; /** * To get the scroll Element, pass in your own React ref */ scroll_ref?: React.RefObject<HTMLElement>; } export interface ModalContentProps { /** * The content which will appear when triggering the modal/drawer. */ modal_content?: ReactChildType; /** * The content which will appear in the bar, above the header, and side-by-side the close button. */ bar_content?: ReactChildType; /** * The content which will appear in the header of the modal/drawer the modal/drawer. */ header_content?: ReactChildType; hide?: boolean; /** * The id used internal for the trigger button and modal component. */ id?: string; /** * The id used internal in the modal/drawer root element. Defaults to `root`, so the element id will be `dnb-modal-root`. */ root_id?: string; /** * The ID of the trigger component, describing the modal/drawer content. Defaults to the internal `trigger`, so make sure you define the trigger title. */ labelled_by?: string; /** * The Modal handles the first focus – automatically. How ever, you can defined a custom focus selector the will be used instead `focus_selector=".css-selector"`. */ focus_selector?: string; /** * Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal/drawer content wrapper. */ content_id?: string; /** * The modal/drawer title. Displays on the very top of the content. */ title?: React.ReactNode; /** * The aria label of the dialog when no labelled_by and no title is given. Defaults to `Vindu`. */ dialog_title?: string; /** * If boolean, the close button will not be shown. */ hide_close_button?: boolean; /** * Define any valid Eufemia Button property or HTML attribute inside an object. */ close_button_attributes?: CloseButtonProps; /** * If set to `false` then the modal/drawer content will be shown without any spacing. Defaults to `true`. */ spacing?: boolean; /** * By default the modal/drawer content gets added the core style class `dnb-core-style`. Use `false` to disable this behavior. */ prevent_core_style?: boolean; animation_duration?: string | number; /** * Disable clicking the background overlay to close the modal */ prevent_overlay_close?: boolean; /** * If set to `true`, no open/close animation will be shown. Defaults to false. */ no_animation?: boolean; /** * Same as `no_animation`, but gets triggered only if the viewport width is less than `40em`. Defaults to false. */ no_animation_on_mobile?: boolean; /** * The minimum Modal content width, defined by a CSS width value like `50vw` (50% of the viewport). Be careful on using fixed `min_width` so you don't break responsiveness. Defaults to `30rem` (average width is set to `60vw`). */ min_width?: ModalContentMinWidth; /** * The maximum Modal content width, defined by a CSS width value like `20rem`. Defaults to `60rem` (average width is set to `60vw`). */ max_width?: ModalContentMaxWidth; /** * If set to `true` then the modal/drawer content will be shown as fullscreen, without showing the original content behind. Can be set to `false` to omit the auto fullscreen. Defaults to `auto`. */ fullscreen?: ModalFullscreen; /** * Define the inner horizontal alignment of the content. Can be set to `left`, `center`, `right` and `centered`. If `centered`, then the content will also be centered vertically. Defaults to `left`. */ align_content?: 'right' | 'left' | 'centered' | 'center'; /** * For `drawer` mode only. Defines the placement on what side the Drawer should be opened. Can be set to `left`, `right`, `top` and `bottom`. Defaults to `right`. */ container_placement?: 'left' | 'right' | 'top' | 'bottom'; /** * Define the vertical alignment of the container. Can be set to `top` or `center`. Defaults to `center`. */ vertical_alignment?: 'top' | 'center'; /** * Give the content wrapper a custom class name (maps to `dnb-modal__content`). */ content_class?: string; /** * @deprecated – use className instead. Will be removed in v11. */ class?: string; /** * Give the page overlay a custom class name (maps to `dnb-modal__overlay`). */ overlay_class?: string; /** * Define an array with HTML class selectors (`['.element-selector']`) which should not get invalidated when the modal opens/closes. Use this in order to let some parts of your site still be accessible by screen readers. */ bypass_invalidation_selectors?: Array<string>; /** * For internal usage * Will close the modal */ close?: (...args: any[]) => any; /** * Give the inner Dialog or Drawer component a className (only works with mode) */ className?: string; /** * The content which will appear when triggering the modal/drawer. */ children?: ReactChildType; /** * The displayed text for the 'close' button. Defaults to `Lukk`. */ close_title?: string; /** * Internal */ dialog_role?: 'dialog' | 'alertdialog' | 'region'; content_ref?: React.RefObject<HTMLElement>; scroll_ref?: React.RefObject<HTMLElement>; open_state?: ModalOpenState; modalContentCloseRef?: React.MutableRefObject<any>; } export type TriggerAttributes = ButtonProps;