@itwin/itwinui-react 3.17.4 → 3.18.1

package/DEV-esm/core/Buttons/IconButton.js

@@ -21,7 +21,12 @@ export const IconButton = React.forwardRef((props, ref) => {
   let buttonGroupOrientation = React.useContext(ButtonGroupContext);
   let hasPopoverOpen = React.useContext(PopoverOpenContext);
   let logWarning = useWarningLogger();
-  if (!label && !props['aria-label'] && !props['aria-labelledby'])
+  if (
+    'development' === process.env.NODE_ENV &&
+    !label &&
+    !props['aria-label'] &&
+    !props['aria-labelledby']
+  )
     logWarning('IconButton is missing the `label` prop.');
   let button = React.createElement(
     ButtonBase,
@@ -60,4 +65,5 @@ export const IconButton = React.forwardRef((props, ref) => {
       )
     : button;
 });
-IconButton.displayName = 'IconButton';
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';

package/DEV-esm/core/Buttons/IdeasButton.js

@@ -19,4 +19,5 @@ export const IdeasButton = React.forwardRef((props, ref) => {
     feedbackLabel,
   );
 });
-IdeasButton.displayName = 'IdeasButton';
+if ('development' === process.env.NODE_ENV)
+  IdeasButton.displayName = 'IdeasButton';

package/DEV-esm/core/Buttons/SplitButton.js

@@ -103,4 +103,5 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-SplitButton.displayName = 'SplitButton';
+if ('development' === process.env.NODE_ENV)
+  SplitButton.displayName = 'SplitButton';

package/DEV-esm/core/Carousel/Carousel.js

@@ -62,7 +62,8 @@ let CarouselComponent = React.forwardRef((props, ref) => {
     ),
   );
 });
-CarouselComponent.displayName = 'Carousel';
+if ('development' === process.env.NODE_ENV)
+  CarouselComponent.displayName = 'Carousel';
 export const Carousel = Object.assign(CarouselComponent, {
   Slider: CarouselSlider,
   Slide: CarouselSlide,

package/DEV-esm/core/Carousel/CarouselContext.js

@@ -1,3 +1,4 @@
 import * as React from 'react';
 export const CarouselContext = React.createContext(void 0);
-CarouselContext.displayName = 'CarouselContext';
+if ('development' === process.env.NODE_ENV)
+  CarouselContext.displayName = 'CarouselContext';

package/DEV-esm/core/Carousel/CarouselDot.js

@@ -20,4 +20,5 @@ export const CarouselDot = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-CarouselDot.displayName = 'Carousel.Dot';
+if ('development' === process.env.NODE_ENV)
+  CarouselDot.displayName = 'Carousel.Dot';

package/DEV-esm/core/Carousel/CarouselDotsList.js

@@ -148,4 +148,5 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
     ),
   );
 });
-CarouselDotsList.displayName = 'Carousel.DotsList';
+if ('development' === process.env.NODE_ENV)
+  CarouselDotsList.displayName = 'Carousel.DotsList';

package/DEV-esm/core/Carousel/CarouselNavigation.js

@@ -35,7 +35,8 @@ let CarouselNavigationComponent = React.forwardRef((props, ref) => {
       ),
   );
 });
-CarouselNavigationComponent.displayName = 'Carousel.Navigation';
+if ('development' === process.env.NODE_ENV)
+  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
 let PreviousButton = React.forwardRef((props, ref) => {
   let context = React.useContext(CarouselContext);
   if (!context)
@@ -62,7 +63,8 @@ let PreviousButton = React.forwardRef((props, ref) => {
     React.createElement(SvgChevronLeft, null),
   );
 });
-PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
+if ('development' === process.env.NODE_ENV)
+  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
 let NextButton = React.forwardRef((props, ref) => {
   let context = React.useContext(CarouselContext);
   if (!context)
@@ -89,7 +91,8 @@ let NextButton = React.forwardRef((props, ref) => {
     React.createElement(SvgChevronRight, null),
   );
 });
-NextButton.displayName = 'Carousel.Navigation.NextButton';
+if ('development' === process.env.NODE_ENV)
+  NextButton.displayName = 'Carousel.Navigation.NextButton';
 export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,
   NextButton,

package/DEV-esm/core/Carousel/CarouselSlide.js

@@ -42,4 +42,5 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
     children,
   );
 });
-CarouselSlide.displayName = 'Carousel.Slide';
+if ('development' === process.env.NODE_ENV)
+  CarouselSlide.displayName = 'Carousel.Slide';

package/DEV-esm/core/Carousel/CarouselSlider.js

@@ -60,4 +60,5 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
     items,
   );
 });
-CarouselSlider.displayName = 'Carousel.Slider';
+if ('development' === process.env.NODE_ENV)
+  CarouselSlider.displayName = 'Carousel.Slider';

package/DEV-esm/core/Checkbox/Checkbox.js

@@ -78,4 +78,4 @@ export const Checkbox = React.forwardRef((props, ref) => {
       )
     : checkbox;
 });
-Checkbox.displayName = 'Checkbox';
+if ('development' === process.env.NODE_ENV) Checkbox.displayName = 'Checkbox';

package/DEV-esm/core/ColorPicker/ColorBuilder.js

@@ -318,4 +318,5 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       }),
   );
 });
-ColorBuilder.displayName = 'ColorBuilder';
+if ('development' === process.env.NODE_ENV)
+  ColorBuilder.displayName = 'ColorBuilder';

package/DEV-esm/core/ColorPicker/ColorInputPanel.js

@@ -75,7 +75,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     );
   let handleColorInputChange = () => {
     let color;
-    if ('hex' === currentFormat)
+    if ('hex' === currentFormat) {
       try {
         let value = input[0].replace(/ /g, '').toLowerCase();
         color = ColorValue.create(value);
@@ -85,6 +85,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         setValidHexInput(false);
         return;
       }
+    }
     if ('hsl' === currentFormat) {
       let [h, s, l, a] = input.map(Number);
       if (
@@ -430,4 +431,5 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     ),
   );
 });
-ColorInputPanel.displayName = 'ColorInputPanel';
+if ('development' === process.env.NODE_ENV)
+  ColorInputPanel.displayName = 'ColorInputPanel';

package/DEV-esm/core/ColorPicker/ColorPalette.js

@@ -60,4 +60,5 @@ export const ColorPalette = React.forwardRef((props, ref) => {
     ),
   );
 });
-ColorPalette.displayName = 'ColorPalette';
+if ('development' === process.env.NODE_ENV)
+  ColorPalette.displayName = 'ColorPalette';

package/DEV-esm/core/ColorPicker/ColorPicker.js

@@ -74,4 +74,5 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ColorPicker.displayName = 'ColorPicker';
+if ('development' === process.env.NODE_ENV)
+  ColorPicker.displayName = 'ColorPicker';

package/DEV-esm/core/ColorPicker/ColorSwatch.js

@@ -34,4 +34,5 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
       React.createElement(VisuallyHidden, null, colorString.toUpperCase()),
   );
 });
-ColorSwatch.displayName = 'ColorSwatch';
+if ('development' === process.env.NODE_ENV)
+  ColorSwatch.displayName = 'ColorSwatch';

package/DEV-esm/core/ComboBox/ComboBox.js

@@ -67,7 +67,9 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
   let getSelectedIndexes = React.useCallback(
     (value) => {
       if (void 0 === value) return;
-      if (isMultipleEnabled(value, multiple)) {
+      if (!isMultipleEnabled(value, multiple))
+        return options.findIndex((option) => option.value === value);
+      {
         let indexArray = [];
         value?.forEach((value) => {
           let indexToAdd = options.findIndex(
@@ -77,7 +79,6 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         });
         return indexArray;
       }
-      return options.findIndex((option) => option.value === value);
     },
     [multiple, options],
   );
@@ -195,7 +196,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     },
     [multiple, onChangeProp, optionsRef],
   );
-  let onClickHandler = React.useCallback(
+  let handleOptionSelection = React.useCallback(
     (__originalIndex) => {
       inputRef.current?.focus({
         preventScroll: true,
@@ -256,7 +257,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       return customItem
         ? React.cloneElement(customItem, {
             onClick: (e) => {
-              onClickHandler(__originalIndex);
+              handleOptionSelection(__originalIndex);
               customItem.props.onClick?.(e);
             },
             focused: focusedIndex === __originalIndex,
@@ -278,7 +279,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
               ...restOptions,
               isSelected: isMenuItemSelected(__originalIndex),
               onClick: () => {
-                onClickHandler(__originalIndex);
+                handleOptionSelection(__originalIndex);
               },
               index: __originalIndex,
               'data-iui-filtered-index': filteredIndex,
@@ -292,7 +293,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       id,
       isMenuItemSelected,
       itemRenderer,
-      onClickHandler,
+      handleOptionSelection,
       optionsExtraInfo,
     ],
   );
@@ -336,29 +337,47 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     ComboBoxRefsContext.Provider,
     {
-      value: {
-        inputRef,
-        menuRef,
-        optionsExtraInfo,
-      },
+      value: React.useMemo(
+        () => ({
+          inputRef,
+          menuRef,
+          optionsExtraInfo,
+        }),
+        [optionsExtraInfo],
+      ),
     },
     React.createElement(
       ComboBoxStateContext.Provider,
       {
-        value: {
-          id,
-          isOpen,
-          focusedIndex,
-          setFocusedIndex,
-          onClickHandler,
-          enableVirtualization,
-          filteredOptions,
-          getMenuItem,
-          multiple,
-          popover,
-          show,
-          hide,
-        },
+        value: React.useMemo(
+          () => ({
+            id,
+            isOpen,
+            focusedIndex,
+            setFocusedIndex,
+            onClickHandler: handleOptionSelection,
+            enableVirtualization,
+            filteredOptions,
+            getMenuItem,
+            multiple,
+            popover,
+            show,
+            hide,
+          }),
+          [
+            enableVirtualization,
+            filteredOptions,
+            focusedIndex,
+            getMenuItem,
+            handleOptionSelection,
+            hide,
+            id,
+            isOpen,
+            multiple,
+            popover,
+            show,
+          ],
+        ),
       },
       React.createElement(
         ComboBoxInputContainer,
@@ -372,13 +391,25 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
           disabled: inputProps?.disabled,
           ...inputProps,
           onChange: handleOnInput,
+          'aria-describedby': [
+            multiple ? `${id}-selected-live` : void 0,
+            inputProps?.['aria-describedby'],
+          ]
+            .filter(Boolean)
+            .join(' '),
           selectTags: isMultipleEnabled(selectedIndexes, multiple)
             ? selectedIndexes
                 ?.map((index) => {
-                  let item = options[index];
+                  let option = options[index];
+                  let optionId = getOptionId(option, id);
+                  let { __originalIndex } = optionsExtraInfo[optionId];
                   return React.createElement(SelectTag, {
-                    key: item.label,
-                    label: item.label,
+                    key: option.label,
+                    label: option.label,
+                    onRemove: () => {
+                      handleOptionSelection(__originalIndex);
+                      hide();
+                    },
                   });
                 })
                 .filter(Boolean)
@@ -392,6 +423,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
         multiple
           ? React.createElement(AutoclearingHiddenLiveRegion, {
               text: liveRegionSelection,
+              id: `${id}-selected-live`,
             })
           : null,
       ),
@@ -408,4 +440,4 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ComboBox.displayName = 'ComboBox';
+if ('development' === process.env.NODE_ENV) ComboBox.displayName = 'ComboBox';

package/DEV-esm/core/ComboBox/ComboBoxEndIcon.js

@@ -25,4 +25,5 @@ export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/DEV-esm/core/ComboBox/ComboBoxInput.js

@@ -154,7 +154,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         }),
         ...style,
       },
-      'aria-describedby': multiple ? `${id}-selected-live` : void 0,
       size: size,
       ...popover.getReferenceProps({
         ...rest,
@@ -170,9 +169,9 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       ? React.createElement(ComboBoxMultipleContainer, {
           ref: tagContainerWidthRef,
           selectedItems: selectTags,
-          id: `${id}-selected-live`,
         })
       : null,
   );
 });
-ComboBoxInput.displayName = 'ComboBoxInput';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInput.displayName = 'ComboBoxInput';

package/DEV-esm/core/ComboBox/ComboBoxInputContainer.js

@@ -36,4 +36,5 @@ export const ComboBoxInputContainer = React.forwardRef(
     );
   },
 );
-ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

package/DEV-esm/core/ComboBox/ComboBoxMenu.js

@@ -131,4 +131,5 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
     )
   );
 });
-ComboBoxMenu.displayName = 'ComboBoxMenu';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenu.displayName = 'ComboBoxMenu';

package/DEV-esm/core/ComboBox/ComboBoxMenuItem.js

@@ -15,7 +15,7 @@ export const ComboBoxMenuItem = React.memo(
       value,
       onClick,
       sublabel,
-      size = sublabel ? 'large' : 'default',
+      size = !!sublabel ? 'large' : 'default',
       startIcon,
       endIcon,
       role = 'option',
@@ -77,4 +77,5 @@ export const ComboBoxMenuItem = React.memo(
     );
   }),
 );
-ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/DEV-esm/core/ComboBox/ComboBoxMultipleContainer.js

@@ -8,4 +8,5 @@ export const ComboBoxMultipleContainer = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxMultipleContainer.displayName = 'ComboBoxMultipleContainer';

package/DEV-esm/core/ComboBox/helpers.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 export const ComboBoxRefsContext = React.createContext(void 0);
-ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxRefsContext.displayName = 'ComboBoxRefsContext';
 export const ComboBoxStateContext = React.createContext(void 0);
-ComboBoxStateContext.displayName = 'ComboBoxStateContext';
+if ('development' === process.env.NODE_ENV)
+  ComboBoxStateContext.displayName = 'ComboBoxStateContext';

package/DEV-esm/core/DatePicker/DatePicker.js

@@ -138,7 +138,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = useWarningLogger();
-  {
+  if ('development' === process.env.NODE_ENV) {
     let onlyOneRangePropPassed = (startDate ? 1 : 0) + (endDate ? 1 : 0) === 1;
     if (enableRangeSelect && onlyOneRangePropPassed)
       logWarning(
@@ -250,7 +250,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     setFocusedDay(getNewFocusedDate(newYear, newMonth));
   };
   let onDayClick = (day) => {
-    if (enableRangeSelect) {
+    if (enableRangeSelect)
       if (isSelectingStartDate) {
         if (day.getMonth() !== selectedStartDay?.getMonth())
           setMonthAndYear(day.getMonth(), day.getFullYear());
@@ -294,7 +294,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
           setIsSelectingStartDate(true);
         }
       }
-    } else {
+    else {
       if (day.getMonth() !== selectedDay?.getMonth())
         setMonthAndYear(day.getMonth(), day.getFullYear());
       let currentDate = selectedDay ?? new Date();
@@ -569,4 +569,5 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-DatePicker.displayName = 'DatePicker';
+if ('development' === process.env.NODE_ENV)
+  DatePicker.displayName = 'DatePicker';

package/DEV-esm/core/Dialog/Dialog.js

@@ -6,8 +6,13 @@ import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import { useMergedRefs, Box, Portal } from '../../utils/index.js';
-let DialogComponent = React.forwardRef((props, ref) => {
+import {
+  useMergedRefs,
+  Box,
+  Portal,
+  PortalContainerContext,
+} from '../../utils/index.js';
+let DialogComponent = React.forwardRef((props, forwardedRef) => {
   let {
     trapFocus = false,
     setFocus = trapFocus,
@@ -26,7 +31,8 @@ let DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = React.useRef(null);
-  let mergedRefs = useMergedRefs(ref, dialogRootRef);
+  let [dialogElement, setDialogElement] = React.useState(null);
+  let mergedRefs = useMergedRefs(forwardedRef, dialogRootRef);
   return isOpen
     ? React.createElement(
         DialogContext.Provider,
@@ -44,6 +50,8 @@ let DialogComponent = React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             placement,
+            dialogRootRef,
+            setDialogElement,
           },
         },
         React.createElement(
@@ -51,17 +59,24 @@ let DialogComponent = React.forwardRef((props, ref) => {
           {
             portal: portal,
           },
-          React.createElement(Box, {
-            className: cx('iui-dialog-wrapper', className),
-            'data-iui-relative': 'container' === relativeTo,
-            ref: mergedRefs,
-            ...rest,
-          }),
+          React.createElement(
+            PortalContainerContext.Provider,
+            {
+              value: dialogElement,
+            },
+            React.createElement(Box, {
+              className: cx('iui-dialog-wrapper', className),
+              'data-iui-relative': 'container' === relativeTo,
+              ref: mergedRefs,
+              ...rest,
+            }),
+          ),
         ),
       )
     : null;
 });
-DialogComponent.displayName = 'Dialog';
+if ('development' === process.env.NODE_ENV)
+  DialogComponent.displayName = 'Dialog';
 export const Dialog = Object.assign(DialogComponent, {
   Backdrop: DialogBackdrop,
   Main: DialogMain,

package/DEV-esm/core/Dialog/DialogBackdrop.js

@@ -8,11 +8,11 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
   let dialogContext = useDialogContext();
   let dialogMainContext = useDialogMainContext();
   let {
-    isVisible = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnExternalClick = dialogContext.closeOnExternalClick,
-    relativeTo = dialogContext.relativeTo,
+    isVisible = dialogContext?.isOpen,
+    isDismissible = dialogContext?.isDismissible,
+    onClose = dialogContext?.onClose,
+    closeOnExternalClick = dialogContext?.closeOnExternalClick,
+    relativeTo = dialogContext?.relativeTo,
     onMouseDown,
     className,
     style,
@@ -46,4 +46,5 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-DialogBackdrop.displayName = 'Dialog.Backdrop';
+if ('development' === process.env.NODE_ENV)
+  DialogBackdrop.displayName = 'Dialog.Backdrop';

package/DEV-esm/core/Dialog/DialogButtonBar.js

@@ -1,3 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');
-DialogButtonBar.displayName = 'Dialog.ButtonBar';
+if ('development' === process.env.NODE_ENV)
+  DialogButtonBar.displayName = 'Dialog.ButtonBar';

package/DEV-esm/core/Dialog/DialogContent.js

@@ -1,3 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const DialogContent = polymorphic.div('iui-dialog-content');
-DialogContent.displayName = 'Dialog.Content';
+if ('development' === process.env.NODE_ENV)
+  DialogContent.displayName = 'Dialog.Content';

package/DEV-esm/core/Dialog/DialogContext.js

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export const DialogContext = React.createContext(void 0);
-export const useDialogContext = () => React.useContext(DialogContext) || {};
+export const useDialogContext = () => React.useContext(DialogContext);

package/DEV-esm/core/Dialog/DialogMain.js

@@ -13,27 +13,27 @@ import { useDialogContext } from './DialogContext.js';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
 import { DialogMainContext } from './DialogMainContext.js';
-export const DialogMain = React.forwardRef((props, ref) => {
+export const DialogMain = React.forwardRef((props, forwardedRef) => {
   let dialogContext = useDialogContext();
   let {
     className,
     children,
     styleType = 'default',
-    isOpen = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnEsc = dialogContext.closeOnEsc,
-    trapFocus = dialogContext.trapFocus,
-    setFocus = dialogContext.setFocus,
-    preventDocumentScroll = dialogContext.preventDocumentScroll,
+    isOpen = dialogContext?.isOpen,
+    isDismissible = dialogContext?.isDismissible,
+    onClose = dialogContext?.onClose,
+    closeOnEsc = dialogContext?.closeOnEsc,
+    trapFocus = dialogContext?.trapFocus,
+    setFocus = dialogContext?.setFocus,
+    preventDocumentScroll = dialogContext?.preventDocumentScroll,
     onKeyDown,
-    isDraggable = dialogContext.isDraggable,
-    isResizable = dialogContext.isResizable,
+    isDraggable = dialogContext?.isDraggable,
+    isResizable = dialogContext?.isResizable,
     style: propStyle,
-    placement = dialogContext.placement,
+    placement = dialogContext?.placement,
     ...rest
   } = props;
-  let { dialogRootRef } = dialogContext;
+  let { dialogRootRef, setDialogElement } = dialogContext || {};
   let dialogRef = React.useRef(null);
   let previousFocusedElement = React.useRef(null);
   let [style, setStyle] = React.useState();
@@ -130,7 +130,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: useMergedRefs(dialogRef, mountRef, ref),
+      ref: useMergedRefs(dialogRef, mountRef, setDialogElement, forwardedRef),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,
@@ -184,4 +184,5 @@ export const DialogMain = React.forwardRef((props, ref) => {
     ),
   );
 });
-DialogMain.displayName = 'Dialog.Main';
+if ('development' === process.env.NODE_ENV)
+  DialogMain.displayName = 'Dialog.Main';

package/DEV-esm/core/Dialog/DialogTitleBar.js

@@ -13,9 +13,9 @@ export const DialogTitleBar = Object.assign(
     let {
       children,
       titleText,
-      isDismissible = dialogContext.isDismissible,
-      onClose = dialogContext.onClose,
-      isDraggable = dialogContext.isDraggable,
+      isDismissible = dialogContext?.isDismissible,
+      onClose = dialogContext?.onClose,
+      isDraggable = dialogContext?.isDraggable,
       className,
       onPointerDown: onPointerDownProp,
       ...rest
@@ -63,4 +63,5 @@ export const DialogTitleBar = Object.assign(
     Title: DialogTitleBarTitle,
   },
 );
-DialogTitleBar.displayName = 'Dialog.TitleBar';
+if ('development' === process.env.NODE_ENV)
+  DialogTitleBar.displayName = 'Dialog.TitleBar';