@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.9

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -4,43 +4,22 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  useSafeContext,
-  useMergedRefs,
-  SvgCaretDownSmall,
-  mergeEventHandlers,
-  Box,
-} from '../utils/index.js';
-import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers.js';
+import { SvgCaretDownSmall, Icon } from '../utils/index.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    onClick: onClickProp,
-    disabled,
-    isOpen,
-    ...rest
-  } = props;
-  const dispatch = useSafeContext(ComboBoxActionContext);
-  const { toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(toggleButtonRef, forwardedRef);
+  const { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(
-    Box,
+    Icon,
     {
       as: 'span',
-      ref: refs,
+      ref: forwardedRef,
       className: cx(
         'iui-end-icon',
         {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         },
         className,
       ),
-      onClick: mergeEventHandlers(onClickProp, () => {
-        dispatch({ type: isOpen ? 'close' : 'open' });
-      }),
       ...rest,
     },
     children ?? React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),

package/esm/core/ComboBox/ComboBoxInput.js

@@ -19,9 +19,9 @@ import {
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   const {
     onKeyDown: onKeyDownProp,
-    onFocus: onFocusProp,
     onClick: onClickProp,
     selectTags,
+    size,
     ...rest
   } = props;
   const {
@@ -31,11 +31,14 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     enableVirtualization,
     multiple,
     onClickHandler,
+    popover,
+    show,
+    hide,
   } = useSafeContext(ComboBoxStateContext);
   const dispatch = useSafeContext(ComboBoxActionContext);
   const { inputRef, menuRef, optionsExtraInfoRef } =
     useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(inputRef, forwardedRef);
+  const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
   const focusedIndexRef = React.useRef(focusedIndex ?? -1);
   React.useEffect(() => {
     focusedIndexRef.current = focusedIndex ?? -1;
@@ -47,7 +50,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   };
   const handleKeyDown = React.useCallback(
     (event) => {
-      onKeyDownProp?.(event);
       const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
       if (event.altKey) {
         return;
@@ -56,7 +58,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowDown': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -98,7 +100,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowUp': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -142,17 +144,17 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
               onClickHandler?.(focusedIndexRef.current);
             }
           } else {
-            dispatch({ type: 'open' });
+            show();
           }
           break;
         }
         case 'Escape': {
           event.preventDefault();
-          dispatch({ type: 'close' });
+          hide();
           break;
         }
         case 'Tab':
-          dispatch({ type: 'close' });
+          hide();
           break;
       }
     },
@@ -162,31 +164,26 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       isOpen,
       menuRef,
       onClickHandler,
-      onKeyDownProp,
       optionsExtraInfoRef,
+      show,
+      hide,
     ],
   );
-  const handleFocus = React.useCallback(
-    (event) => {
-      dispatch({ type: 'open' });
-      onFocusProp?.(event);
-    },
-    [dispatch, onFocusProp],
-  );
   const handleClick = React.useCallback(() => {
     if (!isOpen) {
-      dispatch({ type: 'open' });
+      show();
+    } else {
+      hide();
     }
-  }, [dispatch, isOpen]);
+  }, [hide, isOpen, show]);
   const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
   return React.createElement(
     React.Fragment,
     null,
     React.createElement(Input, {
       ref: refs,
-      onKeyDown: handleKeyDown,
       onClick: mergeEventHandlers(onClickProp, handleClick),
-      onFocus: handleFocus,
+      'aria-expanded': isOpen,
       'aria-activedescendant':
         isOpen && focusedIndex != undefined && focusedIndex > -1
           ? getIdFromIndex(focusedIndex)
@@ -199,7 +196,11 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       autoCorrect: 'off',
       style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
-      ...rest,
+      size: size,
+      ...popover.getReferenceProps({
+        onKeyDown: mergeEventHandlers(onKeyDownProp, handleKeyDown),
+        ...rest,
+      }),
     }),
     multiple && selectTags
       ? React.createElement(ComboBoxMultipleContainer, {

package/esm/core/ComboBox/ComboBoxMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'ul'>;
-export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"ul", ComboBoxMenuProps>;
+type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'div'>;
+export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"div", ComboBoxMenuProps>;
 export {};

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -5,109 +5,89 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
-import { Surface } from '../Surface/index.js';
 import {
   useSafeContext,
   useMergedRefs,
   useVirtualization,
-  mergeRefs,
-  getWindow,
+  Portal,
+  Box,
 } from '../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
-const isOverflowOverlaySupported = () =>
-  getWindow()?.CSS?.supports?.('overflow: overlay');
-const VirtualizedComboBoxMenu = React.forwardRef(
-  ({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } =
-      useSafeContext(ComboBoxStateContext);
-    const { menuRef } = useSafeContext(ComboBoxRefsContext);
-    const virtualItemRenderer = React.useCallback(
-      (index) =>
-        filteredOptions.length > 0
-          ? getMenuItem(filteredOptions[index], index)
-          : children, // Here is expected empty state content
-      [filteredOptions, getMenuItem, children],
+const VirtualizedComboBoxMenu = (props) => {
+  const { children, ...rest } = props;
+  const { filteredOptions, getMenuItem, focusedIndex } =
+    useSafeContext(ComboBoxStateContext);
+  const { menuRef } = useSafeContext(ComboBoxRefsContext);
+  const virtualItemRenderer = React.useCallback(
+    (index) =>
+      filteredOptions.length > 0
+        ? getMenuItem(filteredOptions[index], index)
+        : children, // Here is expected empty state content
+    [filteredOptions, getMenuItem, children],
+  );
+  const focusedVisibleIndex = React.useMemo(() => {
+    const currentElement = menuRef.current?.querySelector(
+      `[data-iui-index="${focusedIndex}"]`,
     );
-    const focusedVisibleIndex = React.useMemo(() => {
-      const currentElement = menuRef.current?.querySelector(
-        `[data-iui-index="${focusedIndex}"]`,
-      );
-      if (!currentElement) {
-        return focusedIndex;
-      }
-      return Number(
-        currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
-      );
-    }, [focusedIndex, menuRef]);
-    const { outerProps, innerProps, visibleChildren } = useVirtualization({
-      // 'Fool' VirtualScroll by passing length 1
-      // whenever there is no elements, to show empty state message
-      itemsLength: filteredOptions.length || 1,
-      itemRenderer: virtualItemRenderer,
-      scrollToIndex: focusedVisibleIndex,
-    });
-    const surfaceStyles = {
-      minInlineSize: minWidth,
-      // set as constant because we don't want it shifting when items are unmounted
-      maxInlineSize: minWidth,
-      // max-height must be on the outermost element for virtual scroll
-      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
-      overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
-      ...style,
-    };
-    return React.createElement(
-      Surface,
-      { style: surfaceStyles },
-      React.createElement(
-        'div',
-        { ...outerProps },
-        React.createElement(
-          Menu,
-          {
-            id: `${id}-list`,
-            setFocus: false,
-            role: 'listbox',
-            ref: mergeRefs(menuRef, innerProps.ref, forwardedRef),
-            className: className,
-            style: innerProps.style,
-            ...rest,
-          },
-          visibleChildren,
-        ),
-      ),
+    if (!currentElement) {
+      return focusedIndex;
+    }
+    return Number(
+      currentElement.getAttribute('data-iui-filtered-index') ?? focusedIndex,
     );
-  },
-);
+  }, [focusedIndex, menuRef]);
+  const { outerProps, innerProps, visibleChildren } = useVirtualization({
+    // 'Fool' VirtualScroll by passing length 1
+    // whenever there is no elements, to show empty state message
+    itemsLength: filteredOptions.length || 1,
+    itemRenderer: virtualItemRenderer,
+    scrollToIndex: focusedVisibleIndex,
+  });
+  return React.createElement(
+    Box,
+    { as: 'div', ...outerProps, ...rest },
+    React.createElement(
+      'div',
+      { ...innerProps, ref: innerProps.ref },
+      visibleChildren,
+    ),
+  );
+};
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { className, style, ...rest } = props;
-  const { minWidth, id, enableVirtualization } =
+  const { className, children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } =
     useSafeContext(ComboBoxStateContext);
   const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(menuRef, forwardedRef);
-  const styles = React.useMemo(
-    () => ({
-      minInlineSize: minWidth,
-      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
-    }),
-    [minWidth],
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    !enableVirtualization
-      ? React.createElement(Menu, {
+  const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+  return (
+    popover.open &&
+    React.createElement(
+      Portal,
+      { portal: true },
+      React.createElement(
+        Menu,
+        {
           id: `${id}-list`,
-          style: { ...styles, ...style },
           setFocus: false,
           role: 'listbox',
           ref: refs,
           className: cx('iui-scroll', className),
-          ...rest,
-        })
-      : React.createElement(VirtualizedComboBoxMenu, {
-          ref: forwardedRef,
-          ...props,
-        }),
+          ...popover.getFloatingProps({
+            style: !enableVirtualization
+              ? style
+              : {
+                  // set as constant because we don't want it shifting when items are unmounted
+                  maxInlineSize: 0,
+                  ...style,
+                },
+            ...rest,
+          }),
+        },
+        !enableVirtualization
+          ? children
+          : React.createElement(VirtualizedComboBoxMenu, null, children),
+      ),
+    )
   );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -4,5 +4,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
 };
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"li", ComboBoxMenuItemProps>>;
+export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", ComboBoxMenuItemProps>>;
 export {};

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useSafeContext, useMergedRefs } from '../utils/index.js';
+import { useSafeContext, useMergedRefs, SvgCheckmark } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 import { ListItem } from '../List/ListItem.js';
 export const ComboBoxMenuItem = React.memo(
@@ -33,6 +33,7 @@ export const ComboBoxMenuItem = React.memo(
     return React.createElement(
       ListItem,
       {
+        as: 'div',
         actionable: true,
         size: size,
         active: isSelected,
@@ -59,12 +60,13 @@ export const ComboBoxMenuItem = React.memo(
         children,
         sublabel && React.createElement(ListItem.Description, null, sublabel),
       ),
-      endIcon &&
-        React.createElement(
-          ListItem.Icon,
-          { as: 'span', 'aria-hidden': true },
-          endIcon,
-        ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem.Icon,
+            { as: 'span', 'aria-hidden': true },
+            endIcon ?? React.createElement(SvgCheckmark, null),
+          )),
     );
   }),
 );

package/esm/core/ComboBox/helpers.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
+import type { usePopover } from '../utils/index.js';
 type ComboBoxAction = {
     type: 'multiselect';
     value: number[];
@@ -25,8 +26,7 @@ export declare const comboBoxReducer: (state: {
 };
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLUListElement>;
-    toggleButtonRef: React.RefObject<HTMLSpanElement>;
+    menuRef: React.RefObject<HTMLElement>;
     optionsExtraInfoRef: React.MutableRefObject<Record<string, {
         __originalIndex: number;
     }>>;
@@ -34,13 +34,15 @@ export declare const ComboBoxRefsContext: React.Context<{
 type ComboBoxStateContextProps<T = unknown> = {
     isOpen: boolean;
     id: string;
-    minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
     getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: number;
     multiple?: boolean;
+    popover: ReturnType<typeof usePopover>;
+    show: () => void;
+    hide: () => void;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;
 export declare const ComboBoxActionContext: React.Context<((x: ComboBoxAction) => void) | undefined>;

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,14 +1,14 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TimePickerProps } from '../TimePicker/TimePicker.js';
+export type DatePickerLocalizedNames = {
+    [key in 'months' | 'shortDays' | 'days']: string[];
+};
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string) => {
-    months: string[];
-    shortDays: string[];
-    days: string[];
-};
+export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
 export type DateRangePickerProps = {
     /**
      * Enable date range support.
@@ -42,9 +42,7 @@ type DatePickerProps = {
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
      */
-    localizedNames?: {
-        [key in 'months' | 'shortDays' | 'days']: string[];
-    };
+    localizedNames?: DatePickerLocalizedNames;
     /**
      * Set focus on selected day or today.
      * @default false
@@ -60,6 +58,30 @@ type DatePickerProps = {
      * @default false
      */
     showYearSelection?: boolean;
+    /**
+     * Allows props to be passed for calendar month year, referring to the div that wraps around the month/year and the next/previous buttons.
+     */
+    monthYearProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for only month, referring to span that wraps around the month title.
+     */
+    monthProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for week days, referring to div that wraps around the week day title.
+     */
+    weekDayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for individual day , referring to div element the wraps around single day number.
+     */
+    dayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for calendar, referring to div that is used for listbox for wraping days and weeks.
+     */
+    calendarProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for weeks, referring to div that wraps around weeks.
+     */
+    weekProps?: React.ComponentProps<'div'>;
     /**
      * Will disable dates for which this function returns true.
      * Disabled dates cannot be selected.

package/esm/core/DatePicker/DatePicker.js

@@ -142,6 +142,12 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     enableRangeSelect = false,
     startDate,
     endDate,
+    monthYearProps,
+    calendarProps,
+    monthProps,
+    weekDayProps,
+    dayProps,
+    weekProps,
     isDateDisabled,
     ...rest
   } = props;
@@ -419,7 +425,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       null,
       React.createElement(
         Box,
-        { className: 'iui-calendar-month-year' },
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: cx('iui-calendar-month-year', monthYearProps?.className),
+        },
         showYearSelection &&
           React.createElement(
             IconButton,
@@ -448,9 +458,10 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
             Box,
             {
               as: 'span',
-              className: 'iui-calendar-month',
               id: dateTableId,
               title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: cx('iui-calendar-month', monthProps?.className),
             },
             monthNames[displayedMonthIndex],
           ),
@@ -481,7 +492,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
       React.createElement(
         Box,
-        { className: 'iui-calendar-weekdays' },
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: cx('iui-calendar-weekdays', weekDayProps?.className),
+        },
         shortDays.map((day, index) =>
           React.createElement('div', { key: day, title: longDays[index] }, day),
         ),
@@ -492,13 +507,16 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
           onKeyDown: handleCalendarKeyDown,
           role: 'listbox',
           'aria-labelledby': dateTableId,
+          ...calendarProps,
         },
         weeks.map((weekDays, weekIndex) => {
           return React.createElement(
             Box,
             {
+              as: 'div',
               key: `week-${displayedMonthIndex}-${weekIndex}`,
-              className: 'iui-calendar-week',
+              ...weekProps,
+              className: cx('iui-calendar-week', weekProps?.className),
             },
             weekDays.map((weekDay, dayIndex) => {
               const dateValue = weekDay.getDate();
@@ -506,8 +524,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
               return React.createElement(
                 Box,
                 {
+                  as: 'div',
                   key: `day-${displayedMonthIndex}-${dayIndex}`,
-                  className: getDayClass(weekDay),
                   onClick: () => !isDisabled && onDayClick(weekDay),
                   role: 'option',
                   tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
@@ -516,6 +534,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
                     isSameDay(weekDay, focusedDay) &&
                     needFocus.current &&
                     element?.focus(),
+                  ...dayProps,
+                  className: cx(getDayClass(weekDay), dayProps?.className),
                 },
                 dateValue,
               );

package/esm/core/Dialog/Dialog.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { DialogTitleBar } from './DialogTitleBar.js';
 import { DialogContent } from './DialogContent.js';
@@ -11,13 +10,7 @@ import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import {
-  useMergedRefs,
-  Box,
-  useGlobals,
-  getDocument,
-  useIsClient,
-} from '../utils/index.js';
+import { useMergedRefs, Box, Portal } from '../utils/index.js';
 const DialogComponent = React.forwardRef((props, ref) => {
   const {
     trapFocus = false,
@@ -37,20 +30,6 @@ const DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const dialogRootRef = React.useRef(null);
-  const context = useGlobals();
-  const isClient = useIsClient();
-  const portalTo =
-    typeof portal !== 'boolean'
-      ? portal.to
-      : portal
-      ? context?.portalContainer || getDocument()?.body
-      : null;
-  const dialog = React.createElement(Box, {
-    className: cx('iui-dialog-wrapper', className),
-    'data-iui-relative': relativeTo === 'container',
-    ref: useMergedRefs(ref, dialogRootRef),
-    ...rest,
-  });
   return React.createElement(
     DialogContext.Provider,
     {
@@ -70,7 +49,16 @@ const DialogComponent = React.forwardRef((props, ref) => {
         placement,
       },
     },
-    portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog,
+    React.createElement(
+      Portal,
+      { portal: portal },
+      React.createElement(Box, {
+        className: cx('iui-dialog-wrapper', className),
+        'data-iui-relative': relativeTo === 'container',
+        ref: useMergedRefs(ref, dialogRootRef),
+        ...rest,
+      }),
+    ),
   );
 });
 /**

package/esm/core/Dialog/DialogContext.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PortalProps } from '../utils/index.js';
 export type DialogContextProps = {
     /**
      * Flag whether dialog should be shown.
@@ -67,11 +68,9 @@ export type DialogContextProps = {
      *
      * Can be set to an object with a `to` property to portal into a specific element.
      *
-     * @default false
+     * Defaults to false if using `Dialog` and true if using `Modal`.
      */
-    portal?: boolean | {
-        to: HTMLElement;
-    };
+    portal?: PortalProps['portal'];
     /**
      * Dialog root ref. For internal use.
      */