@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/Dialog/DialogMain.js

@@ -1,20 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogMain = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const DialogContext_js_1 = require('./DialogContext.js');
-const react_transition_group_1 = require('react-transition-group');
-const DialogDragContext_js_1 = require('./DialogDragContext.js');
-const useDragAndDrop_js_1 = tslib_1.__importDefault(
-  require('../utils/hooks/useDragAndDrop.js'),
-);
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const DialogContext_js_1 = require("./DialogContext.js");
+const react_transition_group_1 = require("react-transition-group");
+const DialogDragContext_js_1 = require("./DialogDragContext.js");
+const useDragAndDrop_js_1 = tslib_1.__importDefault(require("../utils/hooks/useDragAndDrop.js"));
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -36,178 +34,134 @@ const useDragAndDrop_js_1 = tslib_1.__importDefault(
  * </Dialog.Main>
  */
 exports.DialogMain = React.forwardRef((props, ref) => {
-  const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-  const {
-    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,
-    onKeyDown,
-    isDraggable = dialogContext.isDraggable,
-    isResizable = dialogContext.isResizable,
-    style: propStyle,
-    placement = dialogContext.placement,
-    ...rest
-  } = props;
-  const [style, setStyle] = React.useState();
-  const dialogRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
-  const hasBeenResized = React.useRef(false);
-  const previousFocusedElement = React.useRef();
-  const originalBodyOverflow = React.useRef('');
-  React.useEffect(() => {
-    if (isOpen) {
-      originalBodyOverflow.current = document.body.style.overflow;
-    }
-  }, [isOpen]);
-  // Prevents document from scrolling when the dialog is open.
-  React.useEffect(() => {
-    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 ||
-      !preventDocumentScroll ||
-      originalBodyOverflow.current === 'hidden'
-    ) {
-      return;
-    }
-    if (isOpen) {
-      ownerDocument.body.style.overflow = 'hidden';
-    } else {
-      ownerDocument.body.style.overflow = originalBodyOverflow.current;
-    }
-    return () => {
-      ownerDocument.body.style.overflow = originalBodyOverflow.current;
+    const dialogContext = (0, DialogContext_js_1.useDialogContext)();
+    const { 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, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
+    const [style, setStyle] = React.useState();
+    const dialogRef = React.useRef(null);
+    const [dialogElement, setDialogElement] = React.useState();
+    const hasBeenResized = React.useRef(false);
+    const previousFocusedElement = React.useRef();
+    const originalBodyOverflow = React.useRef('');
+    React.useEffect(() => {
+        if (isOpen) {
+            originalBodyOverflow.current = document.body.style.overflow;
+        }
+    }, [isOpen]);
+    // Prevents document from scrolling when the dialog is open.
+    React.useEffect(() => {
+        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 ||
+            !preventDocumentScroll ||
+            originalBodyOverflow.current === 'hidden') {
+            return;
+        }
+        if (isOpen) {
+            ownerDocument.body.style.overflow = 'hidden';
+        }
+        else {
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        }
+        return () => {
+            ownerDocument.body.style.overflow = originalBodyOverflow.current;
+        };
+    }, [isOpen, preventDocumentScroll]);
+    const handleKeyDown = (event) => {
+        if (event.altKey) {
+            return;
+        }
+        // Prevents React from resetting its properties
+        event.persist();
+        if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
+            onClose(event);
+        }
+        onKeyDown?.(event);
     };
-  }, [isOpen, preventDocumentScroll]);
-  const handleKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    // Prevents React from resetting its properties
-    event.persist();
-    if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
-      onClose(event);
-    }
-    onKeyDown?.(event);
-  };
-  const { onPointerDown, transform } = (0, useDragAndDrop_js_1.default)(
-    dialogRef,
-    dialogContext.dialogRootRef,
-    isDraggable,
-  );
-  const handlePointerDown = React.useCallback(
-    (event) => {
-      if (isDraggable) {
-        onPointerDown(event);
-      }
-    },
-    [isDraggable, onPointerDown],
-  );
-  // Prevents dialog from moving when window is being resized
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    if (!isDraggable || !isOpen) {
-      return;
-    }
-    const rect = dialogRef.current?.getBoundingClientRect();
-    const [translateX, translateY] = (0, index_js_1.getTranslateValues)(
-      dialogRef.current,
-    );
-    setStyle((oldStyle) => ({
-      ...oldStyle,
-      inlineSize: rect?.width,
-      blockSize: rect?.height,
-      insetInlineStart: dialogRef.current?.offsetLeft,
-      insetBlockStart: dialogRef.current?.offsetTop,
-      transform: `translate(${translateX}px,${translateY}px)`,
-    }));
-  }, [isDraggable, isOpen]);
-  const setResizeStyle = React.useCallback((newStyle) => {
-    setStyle((oldStyle) => ({
-      ...oldStyle,
-      ...newStyle,
-    }));
-  }, []);
-  const content = React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-dialog',
-        {
-          'iui-dialog-default': styleType === 'default',
-          'iui-dialog-full-page': styleType === 'fullPage',
-          'iui-dialog-visible': isOpen,
-          'iui-dialog-draggable': isDraggable,
-        },
-        className,
-      ),
-      role: 'dialog',
-      ref: refs,
-      onKeyDown: handleKeyDown,
-      tabIndex: -1,
-      'data-iui-placement': placement,
-      style: {
-        transform,
-        ...style,
-        ...propStyle,
-      },
-      ...rest,
-    },
-    isResizable &&
-      React.createElement(index_js_1.Resizer, {
-        elementRef: dialogRef,
-        containerRef: dialogContext.dialogRootRef,
-        onResizeStart: () => {
-          if (!hasBeenResized.current) {
-            hasBeenResized.current = true;
-            setResizeStyle({ maxInlineSize: '100%' });
-          }
-        },
-        onResizeEnd: setResizeStyle,
-      }),
-    children,
-  );
-  return React.createElement(
-    react_transition_group_1.CSSTransition,
-    {
-      in: isOpen,
-      classNames: {
-        enter: 'iui-dialog-animation-enter',
-        enterActive: 'iui-dialog-animation-enter-active',
-      },
-      timeout: { exit: 600 },
-      // Focuses dialog when opened
-      onEntered: () => {
-        previousFocusedElement.current =
-          dialogRef.current?.ownerDocument.activeElement;
-        setFocus && dialogRef.current?.focus({ preventScroll: true });
-      },
-      // Brings back focus to the previously focused element when closed
-      onExit: () => {
-        if (
-          dialogRef.current?.contains(
-            dialogRef.current?.ownerDocument.activeElement,
-          )
-        ) {
-          previousFocusedElement.current?.focus();
+    const { onPointerDown, transform } = (0, useDragAndDrop_js_1.default)(dialogRef, dialogContext.dialogRootRef, isDraggable);
+    const handlePointerDown = React.useCallback((event) => {
+        if (isDraggable) {
+            onPointerDown(event);
+        }
+    }, [isDraggable, onPointerDown]);
+    // Prevents dialog from moving when window is being resized
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        if (!isDraggable || !isOpen) {
+            return;
         }
-      },
-      unmountOnExit: true,
-      nodeRef: dialogRef,
-    },
-    React.createElement(
-      DialogDragContext_js_1.DialogDragContext.Provider,
-      { value: { onPointerDown: handlePointerDown } },
-      trapFocus && React.createElement(index_js_1.FocusTrap, null, content),
-      !trapFocus && content,
-    ),
-  );
+        const rect = dialogRef.current?.getBoundingClientRect();
+        const [translateX, translateY] = (0, index_js_1.getTranslateValuesFromElement)(dialogRef.current);
+        setStyle((oldStyle) => ({
+            ...oldStyle,
+            inlineSize: rect?.width,
+            blockSize: rect?.height,
+            insetInlineStart: dialogRef.current?.offsetLeft,
+            insetBlockStart: dialogRef.current?.offsetTop,
+            transform: `translate(${translateX}px,${translateY}px)`,
+        }));
+    }, [isDraggable, isOpen]);
+    const setResizeStyle = React.useCallback((newStyle) => {
+        setStyle((oldStyle) => ({
+            ...oldStyle,
+            ...newStyle,
+        }));
+    }, []);
+    const roundedTransform = useRoundedTransform({
+        element: dialogElement,
+        transform,
+    });
+    const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
+            'iui-dialog-default': styleType === 'default',
+            'iui-dialog-full-page': styleType === 'fullPage',
+            'iui-dialog-visible': isOpen,
+            'iui-dialog-draggable': isDraggable,
+        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform: roundedTransform,
+            ...style,
+            ...propStyle,
+        }, ...rest },
+        isResizable && (React.createElement(index_js_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: () => {
+                if (!hasBeenResized.current) {
+                    hasBeenResized.current = true;
+                    setResizeStyle({ maxInlineSize: '100%' });
+                }
+            }, onResizeEnd: setResizeStyle })),
+        children));
+    return (React.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: {
+            enter: 'iui-dialog-animation-enter',
+            enterActive: 'iui-dialog-animation-enter-active',
+        }, timeout: { exit: 600 }, 
+        // Focuses dialog when opened
+        onEntered: () => {
+            previousFocusedElement.current = dialogRef.current?.ownerDocument
+                .activeElement;
+            setFocus && dialogRef.current?.focus({ preventScroll: true });
+        }, 
+        // Brings back focus to the previously focused element when closed
+        onExit: () => {
+            if (dialogRef.current?.contains(dialogRef.current?.ownerDocument.activeElement)) {
+                previousFocusedElement.current?.focus();
+            }
+        }, unmountOnExit: true, nodeRef: dialogRef },
+        React.createElement(DialogDragContext_js_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },
+            trapFocus && React.createElement(index_js_1.FocusTrap, null, content),
+            !trapFocus && content)));
 });
 exports.default = exports.DialogMain;
+// ----------------------------------------------------------------------------
+/**
+ * Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
+ */
+const useRoundedTransform = ({ element, transform, }) => {
+    const [roundedStyles, setRoundedStyles] = React.useState(transform);
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        if (!element || typeof DOMMatrix === 'undefined') {
+            return;
+        }
+        const [x, y] = transform
+            ? (0, index_js_1.getTranslateValues)(transform)
+            : (0, index_js_1.getTranslateValuesFromElement)(element);
+        setRoundedStyles(`translate(${(0, index_js_1.roundByDPR)(x)}px, ${(0, index_js_1.roundByDPR)(y)}px)`);
+    }, [element, transform]);
+    return roundedStyles;
+};

package/cjs/core/Dialog/DialogTitleBar.js

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogTitleBar = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
-const DialogContext_js_1 = require('./DialogContext.js');
-const DialogTitleBarTitle_js_1 = require('./DialogTitleBarTitle.js');
-const DialogDragContext_js_1 = require('./DialogDragContext.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
+const DialogContext_js_1 = require("./DialogContext.js");
+const DialogTitleBarTitle_js_1 = require("./DialogTitleBarTitle.js");
+const DialogDragContext_js_1 = require("./DialogDragContext.js");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
@@ -30,64 +30,17 @@ const DialogDragContext_js_1 = require('./DialogDragContext.js');
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-exports.DialogTitleBar = Object.assign(
-  React.forwardRef((props, ref) => {
+exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const {
-      children,
-      titleText,
-      isDismissible = dialogContext.isDismissible,
-      onClose = dialogContext.onClose,
-      isDraggable = dialogContext.isDraggable,
-      className,
-      onPointerDown: onPointerDownProp,
-      ...rest
-    } = props;
-    const { onPointerDown } = (0,
-    DialogDragContext_js_1.useDialogDragContext)();
-    return React.createElement(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)(
-          'iui-dialog-title-bar',
-          className,
-          {
+    const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
+    const { onPointerDown } = (0, DialogDragContext_js_1.useDialogDragContext)();
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
-          },
-        ),
-        ref: ref,
-        onPointerDown: (0, index_js_1.mergeEventHandlers)(
-          onPointerDownProp,
-          onPointerDown,
-        ),
-        ...rest,
-      },
-      children
-        ? children
-        : React.createElement(
-            React.Fragment,
-            null,
-            React.createElement(
-              DialogTitleBarTitle_js_1.DialogTitleBarTitle,
-              null,
-              titleText,
-            ),
-            isDismissible &&
-              React.createElement(
-                IconButton_js_1.IconButton,
-                {
-                  size: 'small',
-                  styleType: 'borderless',
-                  onClick: onClose,
-                  'aria-label': 'Close',
-                },
-                React.createElement(index_js_1.SvgClose, null),
-              ),
-          ),
-    );
-  }),
-  {
+        }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
+        React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),
+        isDismissible && (React.createElement(IconButton_js_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+            React.createElement(index_js_1.SvgClose, null)))))));
+}), {
     Title: DialogTitleBarTitle_js_1.DialogTitleBarTitle,
-  },
-);
+});
 exports.default = exports.DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogTitleBarTitle = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Divider/Divider.js

@@ -1,25 +1,19 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('../utils/components/Box.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("../utils/components/Box.js");
 /**
  * Shows a divider
  */
 exports.Divider = React.forwardRef((props, ref) => {
-  const { className, orientation = 'horizontal', ...rest } = props;
-  return React.createElement(Box_js_1.Box, {
-    as: 'hr',
-    className: (0, classnames_1.default)('iui-divider', className),
-    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
-    ref: ref,
-    ...rest,
-  });
+    const { className, orientation = 'horizontal', ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { as: 'hr', className: (0, classnames_1.default)('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
 });
 exports.default = exports.Divider;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const Menu_js_1 = require('../Menu/Menu.js');
-const Popover_js_1 = require('../Popover/Popover.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const Menu_js_1 = require("../Menu/Menu.js");
+const Popover_js_1 = require("../Popover/Popover.js");
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.
@@ -30,78 +30,44 @@ const Popover_js_1 = require('../Popover/Popover.js');
  * </DropdownMenu>
  */
 exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
-  const {
-    menuItems,
-    children,
-    role = 'menu',
-    visible: visibleProp,
-    placement = 'bottom-start',
-    matchWidth = false,
-    onVisibleChange,
-    portal = true,
-    ...rest
-  } = props;
-  const [visible, setVisible] = (0, index_js_1.useControlledState)(
-    false,
-    visibleProp,
-    onVisibleChange,
-  );
-  const triggerRef = React.useRef(null);
-  const close = React.useCallback(() => {
-    setVisible(false);
-    triggerRef.current?.focus({ preventScroll: true });
-  }, [setVisible]);
-  const menuContent = React.useMemo(() => {
-    if (typeof menuItems === 'function') {
-      return menuItems(close);
-    }
-    return menuItems;
-  }, [menuItems, close]);
-  const popover = (0, Popover_js_1.usePopover)({
-    visible,
-    onVisibleChange: (open) => (open ? setVisible(true) : close()),
-    placement,
-    matchWidth,
-  });
-  const popoverRef = (0, index_js_1.useMergedRefs)(
-    forwardedRef,
-    popover.refs.setFloating,
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
-      ...popover.getReferenceProps(children.props),
-      'aria-expanded': popover.open,
-      ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
-    })),
-    popover.open &&
-      React.createElement(
-        index_js_1.Portal,
-        { portal: portal },
-        React.createElement(
-          Menu_js_1.Menu,
-          {
-            ...popover.getFloatingProps({
-              role,
-              ...rest,
-              onKeyDown: (0, index_js_1.mergeEventHandlers)(
-                props.onKeyDown,
-                (e) => {
-                  if (e.defaultPrevented) {
-                    return;
-                  }
-                  if (e.key === 'Tab') {
-                    close();
-                  }
-                },
-              ),
-            }),
-            ref: popoverRef,
-          },
-          menuContent,
-        ),
-      ),
-  );
+    const { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
+    const [visible, setVisible] = (0, index_js_1.useControlledState)(false, visibleProp, onVisibleChange);
+    const triggerRef = React.useRef(null);
+    const close = React.useCallback(() => {
+        setVisible(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    }, [setVisible]);
+    const menuContent = React.useMemo(() => {
+        if (typeof menuItems === 'function') {
+            return menuItems(close);
+        }
+        return menuItems;
+    }, [menuItems, close]);
+    const popover = (0, Popover_js_1.usePopover)({
+        visible,
+        onVisibleChange: (open) => (open ? setVisible(true) : close()),
+        placement,
+        matchWidth,
+    });
+    const popoverRef = (0, index_js_1.useMergedRefs)(forwardedRef, popover.refs.setFloating);
+    return (React.createElement(React.Fragment, null,
+        (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+            ...popover.getReferenceProps(children.props),
+            'aria-expanded': popover.open,
+            ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
+        })),
+        popover.open && (React.createElement(index_js_1.Portal, { portal: portal },
+            React.createElement(Menu_js_1.Menu, { ...popover.getFloatingProps({
+                    role,
+                    ...rest,
+                    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, (e) => {
+                        if (e.defaultPrevented) {
+                            return;
+                        }
+                        if (e.key === 'Tab') {
+                            close();
+                        }
+                    }),
+                }), ref: popoverRef }, menuContent)))));
 });
 exports.default = exports.DropdownMenu;