@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/esm/core/List/ListItem.js

@@ -6,8 +6,26 @@ import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../utils/index.js';
 const ListItemComponent = React.forwardRef((props, ref) => {
-    const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
-    return (React.createElement(Box, { as: 'li', className: cx('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
+  const {
+    size = 'default',
+    disabled = false,
+    active = false,
+    actionable = false,
+    focused = false,
+    className,
+    ...rest
+  } = props;
+  return React.createElement(Box, {
+    as: 'li',
+    className: cx('iui-list-item', className),
+    'data-iui-active': active ? 'true' : undefined,
+    'data-iui-disabled': disabled ? 'true' : undefined,
+    'data-iui-size': size === 'large' ? 'large' : undefined,
+    'data-iui-actionable': actionable ? 'true' : undefined,
+    'data-iui-focused': focused ? 'true' : undefined,
+    ref: ref,
+    ...rest,
+  });
 });
 ListItemComponent.displayName = 'ListItem';
 // ----------------------------------------------------------------------------
@@ -35,30 +53,30 @@ ListItemDescription.displayName = 'ListItem.Description';
  * </List>
  */
 export const ListItem = Object.assign(ListItemComponent, {
-    /**
-     * Icon to be placed at the beginning or end of the ListItem.
-     */
-    Icon: ListItemIcon,
-    /**
-     * Wrapper for the main content of the ListItem.
-     *
-     * For basic list items, this wrapper is not needed, but it can be useful for two cases:
-     * - When using an end icon. The `ListItem.Content` will fill the available space
-     *   and push the icon to the end
-     * - When using `ListItem.Description`.
-     */
-    Content: ListItemContent,
-    /**
-     * Description to be used in addition to the main label of the ListItem.
-     * Should be used as a child of `ListItem.Content`.
-     *
-     * @example
-     * <ListItem>
-     *  <ListItem.Content>
-     *   <div>some list item</div>
-     *   <ListItem.Description>description for this item</ListItem.Description>
-     *  </ListItem.Content>
-     * </ListItem>
-     */
-    Description: ListItemDescription,
+  /**
+   * Icon to be placed at the beginning or end of the ListItem.
+   */
+  Icon: ListItemIcon,
+  /**
+   * Wrapper for the main content of the ListItem.
+   *
+   * For basic list items, this wrapper is not needed, but it can be useful for two cases:
+   * - When using an end icon. The `ListItem.Content` will fill the available space
+   *   and push the icon to the end
+   * - When using `ListItem.Description`.
+   */
+  Content: ListItemContent,
+  /**
+   * Description to be used in addition to the main label of the ListItem.
+   * Should be used as a child of `ListItem.Content`.
+   *
+   * @example
+   * <ListItem>
+   *  <ListItem.Content>
+   *   <div>some list item</div>
+   *   <ListItem.Description>description for this item</ListItem.Description>
+   *  </ListItem.Content>
+   * </ListItem>
+   */
+  Description: ListItemDescription,
 });

package/esm/core/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type MenuProps = {
+type MenuProps = {
     /**
      * Menu items. Recommended to use `MenuItem` components.
      *
@@ -17,5 +17,5 @@ declare type MenuProps = {
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
-export declare const Menu: PolymorphicForwardRefComponent<"ul", MenuProps>;
+export declare const Menu: PolymorphicForwardRefComponent<"div", MenuProps>;
 export default Menu;

package/esm/core/Menu/Menu.js

@@ -4,58 +4,73 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, getFocusableElements, Box } from '../utils/index.js';
+import {
+  useMergedRefs,
+  getFocusableElements,
+  Box,
+  mergeEventHandlers,
+} from '../utils/index.js';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
 export const Menu = React.forwardRef((props, ref) => {
-    const { setFocus = true, className, ...rest } = props;
-    const [focusedIndex, setFocusedIndex] = React.useState();
-    const menuRef = React.useRef(null);
-    const refs = useMergedRefs(menuRef, ref);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = getFocusableElements(menuRef.current);
-        // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    React.useEffect(() => {
-        var _a;
-        const items = getFocusableNodes();
-        if (focusedIndex != null) {
-            (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
-        if (setFocus) {
-            setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
-        }
-    }, [setFocus, focusedIndex, getFocusableNodes]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return;
-        }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
-        switch (event.key) {
-            case 'ArrowDown': {
-                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            case 'ArrowUp': {
-                setFocusedIndex(Math.max(currentIndex - 1, 0));
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    return (React.createElement(Box, { as: 'ul', className: cx('iui-menu', className), role: 'menu', onKeyDown: onKeyDown, ref: refs, ...rest }));
+  const { setFocus = true, className, ...rest } = props;
+  const [focusedIndex, setFocusedIndex] = React.useState();
+  const menuRef = React.useRef(null);
+  const refs = useMergedRefs(menuRef, ref);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = getFocusableElements(menuRef.current);
+    // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  React.useEffect(() => {
+    const items = getFocusableNodes();
+    if (focusedIndex != null) {
+      items?.[focusedIndex]?.focus();
+      return;
+    }
+    const selectedIndex = items.findIndex(
+      (el) => el.getAttribute('aria-selected') === 'true',
+    );
+    if (setFocus) {
+      setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
+    }
+  }, [setFocus, focusedIndex, getFocusableNodes]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (!items?.length) {
+      return;
+    }
+    const currentIndex = focusedIndex ?? 0;
+    switch (event.key) {
+      case 'ArrowDown': {
+        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case 'ArrowUp': {
+        setFocusedIndex(Math.max(currentIndex - 1, 0));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  return React.createElement(Box, {
+    as: 'div',
+    className: cx('iui-menu', className),
+    role: 'menu',
+    ref: refs,
+    ...rest,
+    onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
+  });
 });
 export default Menu;

package/esm/core/Menu/MenuDivider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Divider between menu items. Should be used inside `Menu`.
  * @example
@@ -13,5 +14,5 @@
  *   ]}
  * </Menu>
  */
-export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
+export declare const MenuDivider: import("../utils/props.js").PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 export default MenuDivider;

package/esm/core/Menu/MenuDivider.js

@@ -18,7 +18,7 @@ import { polymorphic } from '../utils/index.js';
  *   ]}
  * </Menu>
  */
-export const MenuDivider = polymorphic.li('iui-menu-divider', {
-    role: 'separator',
+export const MenuDivider = polymorphic('iui-menu-divider', {
+  role: 'separator',
 });
 export default MenuDivider;

package/esm/core/Menu/MenuExtraContent.js

@@ -24,6 +24,6 @@ import { polymorphic } from '../utils/index.js';
  * </Menu>
  */
 export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-    role: 'presentation',
+  role: 'presentation',
 });
 export default MenuExtraContent;

package/esm/core/Menu/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { ListItemOwnProps } from '../List/ListItem.js';
-export declare type MenuItemProps = {
+export type MenuItemProps = {
     /**
      * Item is selected.
      */
@@ -64,5 +64,5 @@ export declare type MenuItemProps = {
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export declare const MenuItem: PolymorphicForwardRefComponent<"li", MenuItemProps>;
+export declare const MenuItem: PolymorphicForwardRefComponent<"div", MenuItemProps>;
 export default MenuItem;

package/esm/core/Menu/MenuItem.js

@@ -3,78 +3,182 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, useMergedRefs, SvgCaretRightSmall } from '../utils/index.js';
+import {
+  SvgCaretRightSmall,
+  Portal,
+  useMergedRefs,
+  useId,
+} from '../utils/index.js';
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
+import { flushSync } from 'react-dom';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({ ref: undefined });
+const MenuItemContext = React.createContext({
+  ref: undefined,
+  setIsNestedSubmenuVisible: () => {},
+});
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export const MenuItem = React.forwardRef((props, ref) => {
-    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', startIcon: startIconProp, icon, endIcon: endIconProp, badge, role = 'menuitem', subMenuItems = [], ...rest } = props;
-    const menuItemRef = React.useRef(null);
-    const refs = useMergedRefs(menuItemRef, ref);
-    const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
-    const subMenuRef = React.useRef(null);
-    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-    const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
-    const endIcon = endIconProp !== null && endIconProp !== void 0 ? endIconProp : badge;
-    const onKeyDown = (event) => {
-        var _a;
-        if (event.altKey) {
-            return;
+export const MenuItem = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    isSelected,
+    disabled,
+    value,
+    onClick,
+    sublabel,
+    size = !!sublabel ? 'large' : 'default',
+    icon,
+    startIcon = icon,
+    badge,
+    endIcon = badge,
+    role = 'menuitem',
+    subMenuItems = [],
+    ...rest
+  } = props;
+  const menuItemRef = React.useRef(null);
+  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+  const submenuId = useId();
+  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+  const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] =
+    React.useState(false);
+  const parent = React.useContext(MenuItemContext);
+  const onVisibleChange = (open) => {
+    setIsSubmenuVisible(open);
+    // we don't want parent to close when mouse goes into a nested submenu,
+    // so we need to let the parent know whether the submenu is still open.
+    parent.setIsNestedSubmenuVisible(open);
+  };
+  const popover = usePopover({
+    visible: isSubmenuVisible || isNestedSubmenuVisible,
+    onVisibleChange,
+    placement: 'right-start',
+    trigger: { hover: true, focus: true },
+  });
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        !disabled && onClick?.(value);
+        event.preventDefault();
+        break;
+      }
+      case 'ArrowRight': {
+        if (subMenuItems.length > 0) {
+          setIsSubmenuVisible(true);
+          // flush and reset state so we are ready to focus again next time
+          flushSync(() => setFocusOnSubmenu(true));
+          setFocusOnSubmenu(false);
+          event.preventDefault();
+          event.stopPropagation();
         }
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-            case 'Spacebar': {
-                !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value));
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowRight': {
-                if (subMenuItems.length > 0) {
-                    setIsSubmenuVisible(true);
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                event.stopPropagation();
-                event.preventDefault();
-                break;
-            }
-            default:
-                break;
+        break;
+      }
+      case 'ArrowLeft': {
+        if (parent.ref) {
+          parent.ref.current?.focus();
+          parent.setIsNestedSubmenuVisible(false);
         }
-    };
-    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
-            var _a;
-            if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
-                setIsSubmenuVisible(false);
-            }
-        }, ...rest },
-        startIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
-        React.createElement(ListItem.Content, null,
-            React.createElement("div", null, children),
-            sublabel && React.createElement(ListItem.Description, null, sublabel)),
-        !endIcon && subMenuItems.length > 0 && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true },
-            React.createElement(SvgCaretRightSmall, null))),
-        endIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
-    return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
-                    var _a, _b;
-                    !!(e.relatedTarget instanceof Node) &&
-                        !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
-                        !((_b = subMenuRef.current) === null || _b === void 0 ? void 0 : _b.isEqualNode(e.relatedTarget)) &&
-                        setIsSubmenuVisible(false);
-                } },
-                React.createElement(Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      }
+      case 'Escape': {
+        // focus might get lost if submenu closes so move it back to parent
+        parent.ref?.current?.focus();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const handlers = {
+    onClick: () => !disabled && onClick?.(value),
+    onKeyDown,
+  };
+  return React.createElement(
+    ListItem,
+    {
+      as: 'div',
+      actionable: true,
+      size: size,
+      active: isSelected,
+      disabled: disabled,
+      ref: useMergedRefs(
+        menuItemRef,
+        forwardedRef,
+        subMenuItems.length > 0 ? popover.refs.setReference : null,
+      ),
+      role: role,
+      tabIndex: disabled || role === 'presentation' ? undefined : -1,
+      'aria-selected': isSelected,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
+      'aria-expanded': subMenuItems.length > 0 ? popover.open : undefined,
+      'aria-disabled': disabled,
+      ...(subMenuItems.length === 0
+        ? { ...handlers, ...rest }
+        : popover.getReferenceProps({ ...handlers, ...rest })),
+    },
+    startIcon &&
+      React.createElement(
+        ListItem.Icon,
+        { as: 'span', 'aria-hidden': true },
+        startIcon,
+      ),
+    React.createElement(
+      ListItem.Content,
+      null,
+      React.createElement('div', null, children),
+      sublabel && React.createElement(ListItem.Description, null, sublabel),
+    ),
+    !endIcon &&
+      subMenuItems.length > 0 &&
+      React.createElement(
+        ListItem.Icon,
+        { as: 'span', 'aria-hidden': true },
+        React.createElement(SvgCaretRightSmall, null),
+      ),
+    endIcon &&
+      React.createElement(
+        ListItem.Icon,
+        { as: 'span', 'aria-hidden': true },
+        endIcon,
+      ),
+    subMenuItems.length > 0 &&
+      popover.open &&
+      React.createElement(
+        Portal,
+        null,
+        React.createElement(
+          MenuItemContext.Provider,
+          { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
+          React.createElement(
+            Menu,
+            {
+              setFocus: focusOnSubmenu,
+              ref: popover.refs.setFloating,
+              ...popover.getFloatingProps({
+                id: submenuId,
+                onPointerMove: () => {
+                  // pointer might move into a nested submenu and set isSubmenuVisible to false,
+                  // so we need to flip it back to true when pointer re-enters this submenu.
+                  setIsSubmenuVisible(true);
+                },
+              }),
+            },
+            subMenuItems,
+          ),
+        ),
+      ),
+  );
 });
 export default MenuItem;

package/esm/core/Menu/MenuItemSkeleton.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type MenuItemSkeletonProps = {
+type MenuItemSkeletonProps = {
     /**
      * Flag whether to show skeleton for sub-label.
      */
@@ -26,5 +26,5 @@ declare type MenuItemSkeletonProps = {
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"li", MenuItemSkeletonProps>;
+export declare const MenuItemSkeleton: PolymorphicForwardRefComponent<"div", MenuItemSkeletonProps>;
 export default MenuItemSkeleton;

package/esm/core/Menu/MenuItemSkeleton.js

@@ -4,22 +4,54 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, VisuallyHidden } from '../utils/index.js';
+import { Box } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
 export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
-    const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
-    return (React.createElement(Box, { as: 'li', className: cx('iui-menu-item-skeleton', className), "data-iui-size": hasSublabel && 'large', style: {
-            ...{
-                '--iui-menu-item-content-skeleton-max-width': contentWidth,
-            },
-            ...style,
-        }, ref: forwardedRef, ...rest },
-        hasIcon && React.createElement(Box, { className: 'iui-icon iui-skeleton', "aria-hidden": true }),
-        React.createElement(Box, { as: 'span', className: 'iui-content' },
-            React.createElement(Box, { className: 'iui-menu-label iui-skeleton', "aria-hidden": true }),
-            hasSublabel && (React.createElement(Box, { className: 'iui-menu-description iui-skeleton', "aria-hidden": true })),
-            React.createElement(VisuallyHidden, null, translatedStrings.loading))));
+  const {
+    hasSublabel,
+    hasIcon,
+    contentWidth,
+    translatedStrings = { loading: 'Loading…' },
+    className,
+    style,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-menu-item-skeleton', className),
+      'data-iui-size': hasSublabel && 'large',
+      style: {
+        ...{
+          '--iui-menu-item-content-skeleton-max-width': contentWidth,
+        },
+        ...style,
+      },
+      ref: forwardedRef,
+      ...rest,
+    },
+    hasIcon &&
+      React.createElement(Box, {
+        className: 'iui-icon iui-skeleton',
+        'aria-hidden': true,
+      }),
+    React.createElement(
+      Box,
+      { as: 'span', className: 'iui-content' },
+      React.createElement(Box, {
+        className: 'iui-menu-label iui-skeleton',
+        'aria-hidden': true,
+      }),
+      hasSublabel &&
+        React.createElement(Box, {
+          className: 'iui-menu-description iui-skeleton',
+          'aria-hidden': true,
+        }),
+      React.createElement(VisuallyHidden, null, translatedStrings.loading),
+    ),
+  );
 });
 export default MenuItemSkeleton;

package/esm/core/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DialogMainProps } from '../Dialog/DialogMain.js';
-declare type ModalProps = {
+type ModalProps = {
     /**
      * Modal title.
      */
@@ -30,16 +30,15 @@ declare type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * Id of the root where the modal will be rendered in.
-     * @default 'iui-react-portal-container'
-     */
-    modalRootId?: string;
-    /**
-     * Document where the modal will be rendered.
-     * Can be specified to render in a different document (e.g. a popup window).
-     * @default document
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default true
      */
-    ownerDocument?: Document;
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Content of the modal.
      */