@itwin/itwinui-react 3.17.0-dev.1 → 3.17.0

package/cjs/core/Checkbox/Checkbox.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'Checkbox', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
 const _index = require('../../utils/index.js');
 const Checkbox = _react.forwardRef((props, ref) => {
@@ -33,8 +35,9 @@ const Checkbox = _react.forwardRef((props, ref) => {
   _react.useEffect(() => {
     if (inputElementRef.current) {
       inputElementRef.current.indeterminate = indeterminate;
-      inputElementRef.current.checked =
-        !indeterminate && inputElementRef.current.checked;
+      inputElementRef.current.checked = indeterminate
+        ? false
+        : inputElementRef.current.checked;
     }
   });
   let checkbox = _react.createElement(

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'ColorBuilder', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _index = require('../../utils/index.js');
 const _Slider = require('../Slider/Slider.js');
 const _ColorPickerContext = require('./ColorPickerContext.js');
@@ -32,7 +34,7 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
     hueSliderProps,
     ...rest
   } = props;
-  let builderRef = _react.useRef();
+  let builderRef = _react.useRef(void 0);
   let refs = (0, _index.useMergedRefs)(builderRef, ref);
   let {
     activeColor,

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'ColorInputPanel', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _IconButton = require('../Buttons/IconButton.js');
 const _Input = require('../Input/Input.js');
 const _index = require('../../utils/index.js');

package/cjs/core/ColorPicker/ColorPalette.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'ColorPalette', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _index = require('../../utils/index.js');
 const _ColorPicker = require('./ColorPicker.js');
 const _ColorSwatch = require('./ColorSwatch.js');

package/cjs/core/ColorPicker/ColorPicker.js

@@ -19,9 +19,11 @@ _export(exports, {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
-const _classnames = _interop_require_default._(require('classnames'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _ColorPickerContext = require('./ColorPickerContext.js');
 const getColorValue = (color) => {
   if (color instanceof _index.ColorValue) return color;

package/cjs/core/ColorPicker/ColorPickerContext.js

@@ -18,7 +18,7 @@ _export(exports, {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const ColorPickerContext = _react.createContext(void 0);
 const useColorPickerContext = () => {
   let context = _react.useContext(ColorPickerContext);

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'ColorSwatch', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _index = require('../../utils/index.js');
 const _ColorPicker = require('./ColorPicker.js');
 const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -80,7 +80,7 @@ export type ComboBoxProps<T> = {
     endIconProps?: React.ComponentProps<typeof ComboBoxEndIcon>;
     /**
      * Message shown when no options are available.
-     * If `JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`.
+     * If `React.JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`.
      * @default 'No options found'
      */
     emptyStateMessage?: React.ReactNode;
@@ -96,7 +96,7 @@ export type ComboBoxProps<T> = {
         isFocused: boolean;
         id: string;
         index: number;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     /**
      * If enabled, virtualization is used for the scrollable dropdown list.
      * Use it if you expect a very long list of items.
@@ -128,5 +128,5 @@ export type ComboBoxProps<T> = {
  */
 export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
     ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export {};

package/cjs/core/ComboBox/ComboBox.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, 'ComboBox', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _MenuExtraContent = require('../Menu/MenuExtraContent.js');
 const _SelectTag = require('../Select/SelectTag.js');
 const _Text = require('../Typography/Text.js');

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'ComboBoxEndIcon', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _Icon = require('../Icon/Icon.js');
 const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {

package/cjs/core/ComboBox/ComboBoxInput.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Input } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type ComboBoxInputProps = {
-    selectTags?: JSX.Element[];
+    selectTags?: React.JSX.Element[];
 } & React.ComponentProps<typeof Input>;
 export declare const ComboBoxInput: PolymorphicForwardRefComponent<"input", ComboBoxInputProps>;
 export {};

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, 'ComboBoxInput', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _Input = require('../Input/Input.js');
 const _index = require('../../utils/index.js');
 const _ComboBoxMultipleContainer = require('./ComboBoxMultipleContainer.js');

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, 'ComboBoxInputContainer', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _StatusMessage = require('../StatusMessage/StatusMessage.js');
 const _index = require('../../utils/index.js');
 const _helpers = require('./helpers.js');

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'ComboBoxMenu', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _index = require('../../utils/index.js');
 const _helpers = require('./helpers.js');
 const _List = require('../List/List.js');

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

@@ -1,8 +1,20 @@
 import * as React from 'react';
-import type { MenuItemProps } from '../Menu/MenuItem.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ComboBoxMenuItemProps = MenuItemProps & {
+export declare const ComboBoxMenuItem: React.NamedExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "as" | "role" | "onClick" | "size" | "icon" | "disabled" | "value" | "startIcon" | "endIcon" | "index" | "focused" | "isSelected" | "sublabel" | "badge" | "subMenuItems"> & {
+    isSelected?: boolean;
+    disabled?: boolean;
+    value?: unknown;
+    onClick?: (value?: unknown) => void;
+    size?: "default" | "large";
+    sublabel?: React.ReactNode;
+    startIcon?: React.JSX.Element;
+    icon?: React.JSX.Element;
+    endIcon?: React.JSX.Element;
+    badge?: React.JSX.Element;
+    role?: string;
+    subMenuItems?: React.JSX.Element[];
+    children?: React.ReactNode;
+} & Pick<import("../List/ListItem.js").ListItemOwnProps, "focused"> & {
     index: number;
-};
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", ComboBoxMenuItemProps>>;
-export {};
+} & {
+    as?: "div" | undefined;
+}>;

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, 'ComboBoxMenuItem', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _helpers = require('./helpers.js');
 const _ListItem = require('../List/ListItem.js');

package/cjs/core/ComboBox/ComboBoxMultipleContainer.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, 'ComboBoxMultipleContainer', {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _SelectTagContainer = require('../Select/SelectTagContainer.js');
 const ComboBoxMultipleContainer = _react.forwardRef((props, ref) => {
   let { selectedItems = [], ...rest } = props;

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
 import type { usePopover } from '../Popover/Popover.js';
 export declare const ComboBoxRefsContext: React.Context<{
-    inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    menuRef: React.RefObject<HTMLElement | null>;
     optionsExtraInfo: Record<string, {
         __originalIndex: number;
     }>;
@@ -14,7 +14,7 @@ type ComboBoxStateContextProps<T = unknown> = {
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
     onClickHandler?: (prop: number) => void;
-    getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
+    getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => React.JSX.Element;
     focusedIndex: number;
     setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
     multiple?: boolean;

package/cjs/core/ComboBox/helpers.js

@@ -18,6 +18,6 @@ _export(exports, {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const ComboBoxRefsContext = _react.createContext(void 0);
 const ComboBoxStateContext = _react.createContext(void 0);

package/cjs/core/DatePicker/DatePicker.js

@@ -19,8 +19,10 @@ _export(exports, {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _TimePicker = require('../TimePicker/TimePicker.js');

package/cjs/core/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ type DialogProps = {
      * Dialog content.
      */
     children: React.ReactNode;
-} & Omit<DialogContextProps, 'dialogRootRef'>;
+} & DialogContextProps;
 /**
  * Dialog component.
  * @example

package/cjs/core/Dialog/Dialog.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, 'Dialog', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _DialogTitleBar = require('./DialogTitleBar.js');
 const _DialogContent = require('./DialogContent.js');
 const _DialogBackdrop = require('./DialogBackdrop.js');
@@ -19,7 +21,6 @@ const _DialogContext = require('./DialogContext.js');
 const _DialogButtonBar = require('./DialogButtonBar.js');
 const _DialogMain = require('./DialogMain.js');
 const _index = require('../../utils/index.js');
-const _reacttransitiongroup = require('react-transition-group');
 const DialogComponent = _react.forwardRef((props, ref) => {
   let {
     trapFocus = false,
@@ -39,49 +40,43 @@ const DialogComponent = _react.forwardRef((props, ref) => {
     ...rest
   } = props;
   let dialogRootRef = _react.useRef(null);
-  return _react.createElement(
-    _reacttransitiongroup.Transition,
-    {
-      in: isOpen,
-      timeout: {
-        exit: 600,
-      },
-      mountOnEnter: true,
-      unmountOnExit: true,
-    },
-    _react.createElement(
-      _DialogContext.DialogContext.Provider,
-      {
-        value: {
-          isOpen,
-          onClose,
-          closeOnEsc,
-          closeOnExternalClick,
-          isDismissible,
-          preventDocumentScroll,
-          trapFocus,
-          setFocus,
-          isDraggable,
-          isResizable,
-          relativeTo,
-          dialogRootRef,
-          placement,
-        },
-      },
-      _react.createElement(
-        _index.Portal,
+  let mergedRefs = (0, _index.useMergedRefs)(ref, dialogRootRef);
+  return isOpen
+    ? _react.createElement(
+        _DialogContext.DialogContext.Provider,
         {
-          portal: portal,
+          value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            placement,
+          },
         },
-        _react.createElement(_index.Box, {
-          className: (0, _classnames.default)('iui-dialog-wrapper', className),
-          'data-iui-relative': 'container' === relativeTo,
-          ref: (0, _index.useMergedRefs)(ref, dialogRootRef),
-          ...rest,
-        }),
-      ),
-    ),
-  );
+        _react.createElement(
+          _index.Portal,
+          {
+            portal: portal,
+          },
+          _react.createElement(_index.Box, {
+            className: (0, _classnames.default)(
+              'iui-dialog-wrapper',
+              className,
+            ),
+            'data-iui-relative': 'container' === relativeTo,
+            ref: mergedRefs,
+            ...rest,
+          }),
+        ),
+      )
+    : null;
 });
 const Dialog = Object.assign(DialogComponent, {
   Backdrop: _DialogBackdrop.DialogBackdrop,

package/cjs/core/Dialog/DialogBackdrop.d.ts

@@ -1,6 +1,6 @@
 import type { BackdropProps } from '../Backdrop/Backdrop.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { DialogContextProps } from './DialogContext.js';
+import { type DialogContextProps } from './DialogContext.js';
 type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' | 'isDismissible' | 'closeOnExternalClick' | 'relativeTo'>;
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`

package/cjs/core/Dialog/DialogBackdrop.js

@@ -10,13 +10,17 @@ Object.defineProperty(exports, 'DialogBackdrop', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _Backdrop = require('../Backdrop/Backdrop.js');
 const _index = require('../../utils/index.js');
 const _DialogContext = require('./DialogContext.js');
-const _classnames = _interop_require_default._(require('classnames'));
+const _DialogMainContext = require('./DialogMainContext.js');
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const DialogBackdrop = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
+  let dialogMainContext = (0, _DialogMainContext.useDialogMainContext)();
   let {
     isVisible = dialogContext.isOpen,
     isDismissible = dialogContext.isDismissible,
@@ -33,7 +37,10 @@ const DialogBackdrop = _react.forwardRef((props, ref) => {
   let handleMouseDown = (event) => {
     event.persist();
     if (event.target !== backdropRef.current) return;
-    if (isDismissible && closeOnExternalClick && onClose) onClose(event);
+    if (isDismissible && closeOnExternalClick && onClose) {
+      dialogMainContext?.beforeClose();
+      onClose(event);
+    }
     onMouseDown?.(event);
   };
   return _react.createElement(_Backdrop.Backdrop, {

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

@@ -83,7 +83,7 @@ export type DialogContextProps = {
     /**
      * Dialog root ref. For internal use.
      */
-    dialogRootRef?: React.RefObject<HTMLDivElement>;
+    dialogRootRef?: React.RefObject<HTMLDivElement | null>;
     /**
      * Determines the positioning of Dialog on page.
      */

package/cjs/core/Dialog/DialogContext.js

@@ -18,6 +18,6 @@ _export(exports, {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const DialogContext = _react.createContext(void 0);
 const useDialogContext = () => _react.useContext(DialogContext) || {};

package/cjs/core/Dialog/DialogDragContext.js

@@ -18,7 +18,7 @@ _export(exports, {
   },
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const DialogDragContext = _react.createContext(void 0);
 const useDialogDragContext = () => {
   let context = _react.useContext(DialogDragContext);

package/cjs/core/Dialog/DialogMain.js

@@ -10,13 +10,15 @@ Object.defineProperty(exports, 'DialogMain', {
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _classnames = _interop_require_default._(require('classnames'));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
+const _classnames = /*#__PURE__*/ _interop_require_default._(
+  require('classnames'),
+);
 const _index = require('../../utils/index.js');
 const _DialogContext = require('./DialogContext.js');
-const _reacttransitiongroup = require('react-transition-group');
 const _DialogDragContext = require('./DialogDragContext.js');
 const _useDragAndDrop = require('../../utils/hooks/useDragAndDrop.js');
+const _DialogMainContext = require('./DialogMainContext.js');
 const DialogMain = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
   let {
@@ -37,12 +39,13 @@ const DialogMain = _react.forwardRef((props, ref) => {
     placement = dialogContext.placement,
     ...rest
   } = props;
-  let [style, setStyle] = _react.useState();
+  let { dialogRootRef } = dialogContext;
   let dialogRef = _react.useRef(null);
+  let previousFocusedElement = _react.useRef(null);
+  let [style, setStyle] = _react.useState();
   let hasBeenResized = _react.useRef(false);
-  let previousFocusedElement = _react.useRef();
   let originalBodyOverflow = _react.useRef('');
-  _react.useEffect(() => {
+  (0, _index.useLayoutEffect)(() => {
     if (isOpen) originalBodyOverflow.current = document.body.style.overflow;
   }, [isOpen]);
   _react.useEffect(() => {
@@ -58,17 +61,19 @@ const DialogMain = _react.forwardRef((props, ref) => {
     return () => {
       ownerDocument.body.style.overflow = originalBodyOverflow.current;
     };
-  }, [isOpen, preventDocumentScroll]);
+  }, [dialogRef, isOpen, preventDocumentScroll]);
   let handleKeyDown = (event) => {
     if (event.altKey) return;
     event.persist();
-    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose)
+    if (isDismissible && closeOnEsc && 'Escape' === event.key && onClose) {
+      beforeClose();
       onClose(event);
+    }
     onKeyDown?.(event);
   };
   let { onPointerDown, transform } = (0, _useDragAndDrop.useDragAndDrop)(
     dialogRef,
-    dialogContext.dialogRootRef,
+    dialogRootRef,
     isDraggable,
   );
   let handlePointerDown = _react.useCallback(
@@ -88,13 +93,35 @@ const DialogMain = _react.forwardRef((props, ref) => {
       insetBlockStart: dialogRef.current?.offsetTop,
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
-  }, [isDraggable, isOpen]);
+  }, [dialogRef, isDraggable, isOpen]);
   let setResizeStyle = _react.useCallback((newStyle) => {
     setStyle((oldStyle) => ({
       ...oldStyle,
       ...newStyle,
     }));
   }, []);
+  let onEnter = _react.useCallback(() => {
+    previousFocusedElement.current =
+      dialogRef.current?.ownerDocument.activeElement;
+    if (setFocus)
+      dialogRef.current?.focus({
+        preventScroll: true,
+      });
+  }, [dialogRef, previousFocusedElement, setFocus]);
+  let beforeClose = _react.useCallback(() => {
+    if (
+      dialogRef.current?.contains(
+        dialogRef.current?.ownerDocument.activeElement,
+      )
+    )
+      previousFocusedElement.current?.focus();
+  }, [dialogRef, previousFocusedElement]);
+  let mountRef = _react.useCallback(
+    (element) => {
+      if (element) onEnter();
+    },
+    [onEnter],
+  );
   let content = _react.createElement(
     _index.Box,
     {
@@ -109,7 +136,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: (0, _index.useMergedRefs)(dialogRef, ref),
+      ref: (0, _index.useMergedRefs)(dialogRef, mountRef, ref),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,
@@ -127,7 +154,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
       isResizable &&
         _react.createElement(_index.Resizer, {
           elementRef: dialogRef,
-          containerRef: dialogContext.dialogRootRef,
+          containerRef: dialogRootRef,
           onResizeStart: () => {
             if (!hasBeenResized.current) {
               hasBeenResized.current = true;
@@ -142,31 +169,14 @@ const DialogMain = _react.forwardRef((props, ref) => {
     children,
   );
   return _react.createElement(
-    _reacttransitiongroup.Transition,
+    _DialogMainContext.DialogMainContext.Provider,
     {
-      in: isOpen,
-      appear: true,
-      timeout: {
-        exit: 600,
-      },
-      onEntered: () => {
-        previousFocusedElement.current =
-          dialogRef.current?.ownerDocument.activeElement;
-        setFocus &&
-          dialogRef.current?.focus({
-            preventScroll: true,
-          });
-      },
-      onExit: () => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        )
-          previousFocusedElement.current?.focus();
-      },
-      unmountOnExit: true,
-      nodeRef: dialogRef,
+      value: _react.useMemo(
+        () => ({
+          beforeClose,
+        }),
+        [beforeClose],
+      ),
     },
     _react.createElement(
       _DialogDragContext.DialogDragContext.Provider,