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

package/esm/core/Dialog/Dialog.js

@@ -3,6 +3,7 @@
  * 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';
@@ -10,11 +11,18 @@ import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import { useMergedRefs, Box } from '../utils/index.js';
+import { useMergedRefs, Box, useGlobals, getDocument, useIsClient, } from '../utils/index.js';
 const DialogComponent = React.forwardRef((props, ref) => {
-    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, ...rest } = props;
+    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, portal = false, ...rest } = props;
     const dialogRootRef = React.useRef(null);
-    const refs = useMergedRefs(ref, dialogRootRef);
+    const context = useGlobals();
+    const isClient = useIsClient();
+    const portalTo = typeof portal !== 'boolean'
+        ? portal.to
+        : portal
+            ? context?.portalContainerRef?.current ?? 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, { value: {
             isOpen,
             onClose,
@@ -29,8 +37,7 @@ const DialogComponent = React.forwardRef((props, ref) => {
             relativeTo,
             dialogRootRef,
             placement,
-        } },
-        React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
+        } }, portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog));
 });
 /**
  * Dialog component.

package/esm/core/Dialog/DialogBackdrop.js

@@ -27,7 +27,7 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
         if (isDismissible && closeOnExternalClick && onClose) {
             onClose(event);
         }
-        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        onMouseDown?.(event);
     };
     return (React.createElement(Backdrop, { isVisible: isVisible, className: cx({ 'iui-backdrop-fixed': relativeTo === 'viewport' }, className), ref: refs, onMouseDown: handleMouseDown, style: {
             pointerEvents: 'auto',

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

@@ -61,6 +61,17 @@ export declare type DialogContextProps = {
      * @default 'viewport'
      */
     relativeTo?: 'container' | 'viewport';
+    /**
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     * Recommended to set to true when for modal dialogs that use `relativeTo='viewport'`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default false
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Dialog root ref. For internal use.
      */

package/esm/core/Dialog/DialogMain.js

@@ -45,8 +45,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
     }, [isOpen]);
     // Prevents document from scrolling when the dialog is open.
     React.useEffect(() => {
-        var _a;
-        const ownerDocument = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument;
+        const ownerDocument = dialogRef.current?.ownerDocument;
         // If there is no `ownerDocument` or `preventDocumentScroll` is false or
         // document body originally has `overflow: hidden` (possibly from other/parent dialog), then do nothing.
         if (!ownerDocument ||
@@ -73,7 +72,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
             onClose(event);
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
     };
     const { onPointerDown, transform } = useDragAndDrop(dialogRef, dialogContext.dialogRootRef, isDraggable);
     const handlePointerDown = React.useCallback((event) => {
@@ -83,23 +82,19 @@ export const DialogMain = React.forwardRef((props, ref) => {
     }, [isDraggable, onPointerDown]);
     // Prevents dialog from moving when window is being resized
     useIsomorphicLayoutEffect(() => {
-        var _a;
         if (!isDraggable || !isOpen) {
             return;
         }
-        const rect = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const rect = dialogRef.current?.getBoundingClientRect();
         const [translateX, translateY] = getTranslateValues(dialogRef.current);
-        setStyle((oldStyle) => {
-            var _a, _b;
-            return ({
-                ...oldStyle,
-                width: rect === null || rect === void 0 ? void 0 : rect.width,
-                height: rect === null || rect === void 0 ? void 0 : rect.height,
-                left: (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft,
-                top: (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop,
-                transform: `translate(${translateX}px,${translateY}px)`,
-            });
-        });
+        setStyle((oldStyle) => ({
+            ...oldStyle,
+            width: rect?.width,
+            height: rect?.height,
+            left: dialogRef.current?.offsetLeft,
+            top: dialogRef.current?.offsetTop,
+            transform: `translate(${translateX}px,${translateY}px)`,
+        }));
     }, [isDraggable, isOpen]);
     const setResizeStyle = React.useCallback((newStyle) => {
         setStyle((oldStyle) => ({
@@ -131,15 +126,14 @@ export const DialogMain = React.forwardRef((props, ref) => {
         }, timeout: { exit: 600 }, 
         // Focuses dialog when opened
         onEntered: () => {
-            var _a, _b;
-            previousFocusedElement.current = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement;
-            setFocus && ((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true }));
+            previousFocusedElement.current = dialogRef.current?.ownerDocument
+                .activeElement;
+            setFocus && dialogRef.current?.focus({ preventScroll: true });
         }, 
         // Brings back focus to the previously focused element when closed
         onExit: () => {
-            var _a, _b, _c;
-            if ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.activeElement)) {
-                (_c = previousFocusedElement.current) === null || _c === void 0 ? void 0 : _c.focus();
+            if (dialogRef.current?.contains(dialogRef.current?.ownerDocument.activeElement)) {
+                previousFocusedElement.current?.focus();
             }
         }, unmountOnExit: true, nodeRef: dialogRef },
         React.createElement(DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -26,29 +26,27 @@ import { Menu } from '../Menu/index.js';
  */
 export const DropdownMenu = (props) => {
     const { menuItems, children, className, style, role = 'menu', visible, placement = 'bottom-start', onShow, onHide, trigger, id, ...rest } = props;
-    const [isVisible, setIsVisible] = React.useState(visible !== null && visible !== void 0 ? visible : false);
+    const [isVisible, setIsVisible] = React.useState(visible ?? false);
     React.useEffect(() => {
-        setIsVisible(visible !== null && visible !== void 0 ? visible : false);
+        setIsVisible(visible ?? false);
     }, [visible]);
     const open = React.useCallback(() => setIsVisible(true), []);
     const close = React.useCallback(() => setIsVisible(false), []);
     const targetRef = React.useRef(null);
     const onShowHandler = React.useCallback((instance) => {
         setIsVisible(true);
-        onShow === null || onShow === void 0 ? void 0 : onShow(instance);
+        onShow?.(instance);
     }, [onShow]);
     const onHideHandler = React.useCallback((instance) => {
-        var _a;
         setIsVisible(false);
-        (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        onHide === null || onHide === void 0 ? void 0 : onHide(instance);
+        targetRef.current?.focus();
+        onHide?.(instance);
     }, [onHide]);
     return (React.createElement(Popover, { content: React.createElement(Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: mergeRefs(targetRef, props.children.ref),
         onClick: (args) => {
-            var _a, _b;
             trigger === undefined && (isVisible ? close() : open());
-            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+            children.props.onClick?.(args);
         },
     })));
 };

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -16,7 +16,7 @@ import { StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, Box, } from '.
  */
 export const ExpandableBlock = React.forwardRef((props, ref) => {
     const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
-    const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
+    const icon = endIcon ?? (status && StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         setExpanded(isExpanded);
@@ -26,7 +26,7 @@ export const ExpandableBlock = React.forwardRef((props, ref) => {
             return;
         }
         setExpanded(!expanded);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
+        onToggle?.(!expanded);
     };
     const onKeyDown = (event) => {
         if (event.altKey || disabled) {

package/esm/core/FileUpload/FileEmptyCard.js

@@ -18,7 +18,7 @@ const FileEmptyCardText = polymorphic.span('iui-file-card-empty-action');
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { className: cx('iui-file-card-empty', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
         React.createElement(FileEmptyCard.Icon, null),
         React.createElement(FileEmptyCard.Text, null,
             React.createElement(FileUploadCard.InputLabel, null, "Choose a file"),

package/esm/core/FileUpload/FileUpload.js

@@ -22,31 +22,28 @@ export const FileUpload = React.forwardRef((props, ref) => {
         e.stopPropagation();
     };
     const onDragEnterHandler = (e) => {
-        var _a, _b, _c;
         e.preventDefault();
         e.stopPropagation();
         // only set active if a file is dragged over
-        if (!isDragActive && ((_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.kind) === 'file') {
+        if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
             setIsDragActive(true);
         }
     };
     const onDragLeaveHandler = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         // only set inactive if secondary target is outside the component
         if (isDragActive &&
-            !((_a = fileUploadRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            !fileUploadRef.current?.contains(e.relatedTarget)) {
             setIsDragActive(false);
         }
     };
     const onDropHandler = (e) => {
-        var _a;
         e.preventDefault();
         e.stopPropagation();
         if (isDragActive) {
             setIsDragActive(false);
-            onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
+            onFileDropped(e.dataTransfer?.files);
         }
     };
     return (React.createElement(Box, { className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },

package/esm/core/FileUpload/FileUploadCard.js

@@ -35,7 +35,7 @@ const FileUploadCardTitle = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { files } = useSafeContext(FileUploadCardContext);
     const title = files.length > 1 ? files.length + ' files selected' : files[0].name;
-    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : title));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-title', className), ref: ref, ...rest }, children ?? title));
 });
 FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 // ----------------------------------------------------------------------------
@@ -49,7 +49,7 @@ const FileUploadCardDescription = React.forwardRef((props, ref) => {
     if (files.length > 2) {
         description += ', and ' + (files.length - 2) + ' others';
     }
-    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : description));
+    return (React.createElement(Box, { as: 'span', className: cx('iui-file-card-description', className), ref: ref, ...rest }, children ?? description));
 });
 FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 // ----------------------------------------------------------------------------
@@ -70,8 +70,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
     const { children, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
     const setNativeFilesRef = React.useCallback((node) => {
-        var _a;
-        if (!node || !((_a = getWindow()) === null || _a === void 0 ? void 0 : _a.DataTransfer)) {
+        if (!node || !getWindow()?.DataTransfer) {
             return;
         }
         const dataTransfer = new DataTransfer();
@@ -88,19 +87,18 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: mergeEventHandlers(onChange, (e) => {
                 const _files = Array.from(e.currentTarget.files || []);
-                onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
+                onFilesChange?.(_files);
                 setInternalFiles(_files);
-            }), ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
+            }), ref: refs, id: id ?? inputId, ...rest }),
         children));
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';
 const FileUploadCardComponent = React.forwardRef((props, ref) => {
-    var _a;
     const { className, children, files: filesProp, onFilesChange, emptyCard = React.createElement(FileEmptyCard, null), input, ...rest } = props;
     const [internalFiles, setInternalFiles] = React.useState();
     const uid = useId();
     const [inputId, setInputId] = React.useState(uid);
-    const files = (_a = filesProp !== null && filesProp !== void 0 ? filesProp : internalFiles) !== null && _a !== void 0 ? _a : [];
+    const files = filesProp ?? internalFiles ?? [];
     return (React.createElement(FileUploadCardContext.Provider, { value: {
             files,
             onFilesChange,
@@ -108,13 +106,14 @@ const FileUploadCardComponent = React.forwardRef((props, ref) => {
             inputId,
             setInputId,
         } },
-        (files === null || files === void 0 ? void 0 : files.length) ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        files?.length ? (React.createElement(Box, { className: cx('iui-file-card', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
             React.createElement(FileUploadCard.Icon, null),
             React.createElement(FileUploadCard.Info, null,
                 React.createElement(FileUploadCard.Title, null),
                 React.createElement(FileUploadCard.Description, null)),
             React.createElement(FileUploadCard.Action, null,
-                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard), input !== null && input !== void 0 ? input : React.createElement(FileUploadCard.Input, null)));
+                React.createElement(FileUploadCard.InputLabel, null, "Replace")))))) : (emptyCard),
+        input ?? React.createElement(FileUploadCard.Input, null)));
 });
 /**
  * Default card to be used with the `FileUpload` wrapper component for single-file uploading.

package/esm/core/InformationPanel/InformationPanel.js

@@ -40,10 +40,7 @@ export const InformationPanel = React.forwardRef((props, ref) => {
         e.preventDefault();
         e.stopPropagation();
         infoPanelRef.current.ownerDocument.addEventListener('pointermove', onResize);
-        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => {
-            var _a;
-            return (_a = infoPanelRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.removeEventListener('pointermove', onResize);
-        }, { once: true });
+        infoPanelRef.current.ownerDocument.addEventListener('pointerup', () => infoPanelRef.current?.ownerDocument.removeEventListener('pointermove', onResize), { once: true });
     };
     const onResize = React.useCallback((e) => {
         e.preventDefault();

package/esm/core/LabeledInput/LabeledInput.js

@@ -16,7 +16,7 @@ import { StatusIconMap, InputContainer, useId } from '../utils/index.js';
 export const LabeledInput = React.forwardRef((props, ref) => {
     const uid = useId();
     const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, id = uid, ...rest } = props;
-    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
+    const icon = svgIcon ?? (status && StatusIconMap[status]());
     return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, id: id, ...rest })));
 });

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -29,7 +29,7 @@ import { Textarea } from '../Textarea/index.js';
 export const LabeledTextarea = React.forwardRef((props, ref) => {
     const uid = useId();
     const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, id = uid, ...textareaProps } = props;
-    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
+    const icon = svgIcon ?? (status && StatusIconMap[status]());
     return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style, inputId: id },
         React.createElement(Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, id: id, ...textareaProps, ref: ref })));
 });

package/esm/core/Menu/Menu.js

@@ -19,10 +19,9 @@ export const Menu = React.forwardRef((props, ref) => {
         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();
+            items?.[focusedIndex]?.focus();
             return;
         }
         const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
@@ -35,10 +34,10 @@ export const Menu = React.forwardRef((props, ref) => {
             return;
         }
         const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+        if (!items?.length) {
             return;
         }
-        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        const currentIndex = focusedIndex ?? 0;
         switch (event.key) {
             case 'ArrowDown': {
                 setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));

package/esm/core/Menu/MenuItem.js

@@ -20,10 +20,9 @@ export const MenuItem = React.forwardRef((props, 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 startIcon = startIconProp ?? icon;
+    const endIcon = endIconProp ?? badge;
     const onKeyDown = (event) => {
-        var _a;
         if (event.altKey) {
             return;
         }
@@ -31,7 +30,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
             case 'Enter':
             case ' ':
             case 'Spacebar': {
-                !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value));
+                !disabled && onClick?.(value);
                 event.preventDefault();
                 break;
             }
@@ -44,7 +43,7 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
             }
             case 'ArrowLeft': {
-                (_a = parentMenuItemRef === null || parentMenuItemRef === void 0 ? void 0 : parentMenuItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                parentMenuItemRef?.current?.focus();
                 event.stopPropagation();
                 event.preventDefault();
                 break;
@@ -53,10 +52,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
                 break;
         }
     };
-    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;
+    const listItem = (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, onClick: () => !disabled && 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) => {
             if (!(e.relatedTarget instanceof Node) ||
-                !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+                !subMenuRef.current?.contains(e.relatedTarget)) {
                 setIsSubmenuVisible(false);
             }
         }, ...rest },
@@ -69,10 +67,9 @@ export const MenuItem = React.forwardRef((props, ref) => {
         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)) &&
+                        !subMenuRef.current?.contains(e.relatedTarget) &&
+                        !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
                         setIsSubmenuVisible(false);
                 } },
                 React.createElement(Menu, { ref: subMenuRef }, subMenuItems)) }, listItem)));

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

@@ -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.
      */

package/esm/core/Modal/Modal.js

@@ -3,8 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils/index.js';
 import { Dialog } from '../Dialog/index.js';
 /**
  * Modal component which can wrap any content.
@@ -28,16 +26,11 @@ import { Dialog } from '../Dialog/index.js';
  * </Modal>
  */
 export const Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = getDocument(), ...rest } = props;
-    const [container, setContainer] = React.useState();
-    React.useEffect(() => {
-        setContainer(getContainer(modalRootId, ownerDocument));
-        return () => setContainer(undefined);
-    }, [ownerDocument, modalRootId]);
-    return !!container ? (ReactDOM.createPortal(React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, portal = true, ...rest } = props;
+    return (React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef, portal: portal },
         React.createElement(Dialog.Backdrop, null),
         React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
             React.createElement(Dialog.TitleBar, { titleText: title }),
-            children)), container)) : (React.createElement(React.Fragment, null));
+            children)));
 });
 export default Modal;

package/esm/core/SearchBox/SearchBox.js

@@ -14,16 +14,16 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
     const inputRef = React.useRef(null);
     const openButtonRef = React.useRef(null);
     const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-    const isExpanded = isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : localExpanded;
+    const isExpanded = isExpandedProp ?? localExpanded;
     const onCollapse = () => {
         setLocalExpanded(false);
-        onCollapseProp === null || onCollapseProp === void 0 ? void 0 : onCollapseProp();
-        queueMicrotask(() => { var _a; return (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        onCollapseProp?.();
+        queueMicrotask(() => openButtonRef.current?.focus({ preventScroll: true }));
     };
     const onExpand = () => {
         setLocalExpanded(true);
-        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp();
-        queueMicrotask(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        onExpandProp?.();
+        queueMicrotask(() => inputRef.current?.focus({ preventScroll: true }));
     };
     return (React.createElement(SearchBoxContext.Provider, { value: {
             size,
@@ -37,7 +37,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
             isExpanded,
             expandable,
         } },
-        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement(InputFlexContainer, { ref: ref, className: cx('iui-searchbox', { 'iui-expandable-searchbox': expandable }, className), "data-iui-size": size, isDisabled: isDisabled, "data-iui-expanded": isExpanded, ...rest }, children ?? (React.createElement(React.Fragment, null,
             React.createElement(SearchBoxCollapsedState, null,
                 React.createElement(SearchBoxExpandButton, null)),
             React.createElement(SearchBoxExpandedState, null,
@@ -51,7 +51,7 @@ const SearchBoxCollapsedState = ({ children, }) => {
     if (!expandable || isExpanded) {
         return null;
     }
-    return React.createElement(React.Fragment, null, children !== null && children !== void 0 ? children : React.createElement(SearchBoxExpandButton, null));
+    return React.createElement(React.Fragment, null, children ?? React.createElement(SearchBoxExpandButton, null));
 };
 SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
 // ----------------------------------------------------------------------------
@@ -66,7 +66,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 // ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(Icon, { "aria-hidden": true, className: cx('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
 // ----------------------------------------------------------------------------
@@ -78,28 +78,28 @@ const SearchBoxInput = React.forwardRef((props, ref) => {
             setInputId(idProp);
         }
     }, [idProp, inputId, setInputId]);
-    return (React.createElement(Box, { as: 'input', id: idProp !== null && idProp !== void 0 ? idProp : inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
+    return (React.createElement(Box, { as: 'input', id: idProp ?? inputId, ref: useMergedRefs(ref, inputRef), role: 'searchbox', type: 'text', className: cx('iui-search-input', className), disabled: isDisabled, ...rest }));
 });
 SearchBoxInput.displayName = 'SearchBox.Input';
 // ----------------------------------------------------------------------------
 const SearchBoxButton = React.forwardRef((props, ref) => {
     const { children, ...rest } = props;
     const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
-    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
 // ----------------------------------------------------------------------------
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     const { children, onClick: onClickProp, ...rest } = props;
     const { onCollapse, size: sizeContext, isDisabled, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCloseSmall, null)));
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children ?? React.createElement(SvgCloseSmall, null)));
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
     const { children, className, onClick: onClickProp, ...rest } = props;
     const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children ?? React.createElement(SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------