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

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -14,9 +14,9 @@ const helpers_js_1 = require('./helpers.js');
 exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   const {
     onKeyDown: onKeyDownProp,
-    onFocus: onFocusProp,
     onClick: onClickProp,
     selectTags,
+    size,
     ...rest
   } = props;
   const {
@@ -26,13 +26,20 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     enableVirtualization,
     multiple,
     onClickHandler,
+    popover,
+    show,
+    hide,
   } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
   const dispatch = (0, index_js_2.useSafeContext)(
     helpers_js_1.ComboBoxActionContext,
   );
   const { inputRef, menuRef, optionsExtraInfoRef } = (0,
   index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-  const refs = (0, index_js_2.useMergedRefs)(inputRef, forwardedRef);
+  const refs = (0, index_js_2.useMergedRefs)(
+    inputRef,
+    popover.refs.setReference,
+    forwardedRef,
+  );
   const focusedIndexRef = React.useRef(focusedIndex ?? -1);
   React.useEffect(() => {
     focusedIndexRef.current = focusedIndex ?? -1;
@@ -44,7 +51,6 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   };
   const handleKeyDown = React.useCallback(
     (event) => {
-      onKeyDownProp?.(event);
       const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
       if (event.altKey) {
         return;
@@ -53,7 +59,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowDown': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -95,7 +101,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowUp': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -139,17 +145,17 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
               onClickHandler?.(focusedIndexRef.current);
             }
           } else {
-            dispatch({ type: 'open' });
+            show();
           }
           break;
         }
         case 'Escape': {
           event.preventDefault();
-          dispatch({ type: 'close' });
+          hide();
           break;
         }
         case 'Tab':
-          dispatch({ type: 'close' });
+          hide();
           break;
       }
     },
@@ -159,22 +165,18 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       isOpen,
       menuRef,
       onClickHandler,
-      onKeyDownProp,
       optionsExtraInfoRef,
+      show,
+      hide,
     ],
   );
-  const handleFocus = React.useCallback(
-    (event) => {
-      dispatch({ type: 'open' });
-      onFocusProp?.(event);
-    },
-    [dispatch, onFocusProp],
-  );
   const handleClick = React.useCallback(() => {
     if (!isOpen) {
-      dispatch({ type: 'open' });
+      show();
+    } else {
+      hide();
     }
-  }, [dispatch, isOpen]);
+  }, [hide, isOpen, show]);
   const [tagContainerWidthRef, tagContainerWidth] = (0,
   index_js_2.useContainerWidth)();
   return React.createElement(
@@ -182,9 +184,8 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     null,
     React.createElement(index_js_1.Input, {
       ref: refs,
-      onKeyDown: handleKeyDown,
       onClick: (0, index_js_2.mergeEventHandlers)(onClickProp, handleClick),
-      onFocus: handleFocus,
+      'aria-expanded': isOpen,
       'aria-activedescendant':
         isOpen && focusedIndex != undefined && focusedIndex > -1
           ? getIdFromIndex(focusedIndex)
@@ -197,7 +198,14 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       autoCorrect: 'off',
       style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
-      ...rest,
+      size: size,
+      ...popover.getReferenceProps({
+        onKeyDown: (0, index_js_2.mergeEventHandlers)(
+          onKeyDownProp,
+          handleKeyDown,
+        ),
+        ...rest,
+      }),
     }),
     multiple && selectTags
       ? React.createElement(

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

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

package/cjs/core/ComboBox/ComboBoxMenu.js

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

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

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

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -37,6 +37,7 @@ exports.ComboBoxMenuItem = React.memo(
     return React.createElement(
       ListItem_js_1.ListItem,
       {
+        as: 'div',
         actionable: true,
         size: size,
         active: isSelected,
@@ -68,12 +69,13 @@ exports.ComboBoxMenuItem = React.memo(
             sublabel,
           ),
       ),
-      endIcon &&
-        React.createElement(
-          ListItem_js_1.ListItem.Icon,
-          { as: 'span', 'aria-hidden': true },
-          endIcon,
-        ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem_js_1.ListItem.Icon,
+            { as: 'span', 'aria-hidden': true },
+            endIcon ?? React.createElement(index_js_1.SvgCheckmark, null),
+          )),
     );
   }),
 );

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

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

package/cjs/core/DatePicker/DatePicker.d.ts

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

package/cjs/core/DatePicker/DatePicker.js

@@ -139,6 +139,12 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     enableRangeSelect = false,
     startDate,
     endDate,
+    monthYearProps,
+    calendarProps,
+    monthProps,
+    weekDayProps,
+    dayProps,
+    weekProps,
     isDateDisabled,
     ...rest
   } = props;
@@ -420,7 +426,14 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       null,
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-calendar-month-year' },
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: (0, classnames_1.default)(
+            'iui-calendar-month-year',
+            monthYearProps?.className,
+          ),
+        },
         showYearSelection &&
           React.createElement(
             index_js_2.IconButton,
@@ -449,9 +462,13 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             index_js_1.Box,
             {
               as: 'span',
-              className: 'iui-calendar-month',
               id: dateTableId,
               title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: (0, classnames_1.default)(
+                'iui-calendar-month',
+                monthProps?.className,
+              ),
             },
             monthNames[displayedMonthIndex],
           ),
@@ -482,7 +499,14 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
       React.createElement(
         index_js_1.Box,
-        { className: 'iui-calendar-weekdays' },
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: (0, classnames_1.default)(
+            'iui-calendar-weekdays',
+            weekDayProps?.className,
+          ),
+        },
         shortDays.map((day, index) =>
           React.createElement('div', { key: day, title: longDays[index] }, day),
         ),
@@ -493,13 +517,19 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
           onKeyDown: handleCalendarKeyDown,
           role: 'listbox',
           'aria-labelledby': dateTableId,
+          ...calendarProps,
         },
         weeks.map((weekDays, weekIndex) => {
           return React.createElement(
             index_js_1.Box,
             {
+              as: 'div',
               key: `week-${displayedMonthIndex}-${weekIndex}`,
-              className: 'iui-calendar-week',
+              ...weekProps,
+              className: (0, classnames_1.default)(
+                'iui-calendar-week',
+                weekProps?.className,
+              ),
             },
             weekDays.map((weekDay, dayIndex) => {
               const dateValue = weekDay.getDate();
@@ -507,8 +537,8 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
               return React.createElement(
                 index_js_1.Box,
                 {
+                  as: 'div',
                   key: `day-${displayedMonthIndex}-${dayIndex}`,
-                  className: getDayClass(weekDay),
                   onClick: () => !isDisabled && onDayClick(weekDay),
                   role: 'option',
                   tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
@@ -517,6 +547,11 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
                     isSameDay(weekDay, focusedDay) &&
                     needFocus.current &&
                     element?.focus(),
+                  ...dayProps,
+                  className: (0, classnames_1.default)(
+                    getDayClass(weekDay),
+                    dayProps?.className,
+                  ),
                 },
                 dateValue,
               );

package/cjs/core/Dialog/Dialog.js

@@ -7,7 +7,6 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const ReactDOM = tslib_1.__importStar(require('react-dom'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const DialogTitleBar_js_1 = require('./DialogTitleBar.js');
 const DialogContent_js_1 = require('./DialogContent.js');
@@ -35,20 +34,6 @@ const DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const dialogRootRef = React.useRef(null);
-  const context = (0, index_js_1.useGlobals)();
-  const isClient = (0, index_js_1.useIsClient)();
-  const portalTo =
-    typeof portal !== 'boolean'
-      ? portal.to
-      : portal
-      ? context?.portalContainer || (0, index_js_1.getDocument)()?.body
-      : null;
-  const dialog = React.createElement(index_js_1.Box, {
-    className: (0, classnames_1.default)('iui-dialog-wrapper', className),
-    'data-iui-relative': relativeTo === 'container',
-    ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef),
-    ...rest,
-  });
   return React.createElement(
     DialogContext_js_1.DialogContext.Provider,
     {
@@ -68,7 +53,16 @@ const DialogComponent = React.forwardRef((props, ref) => {
         placement,
       },
     },
-    portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog,
+    React.createElement(
+      index_js_1.Portal,
+      { portal: portal },
+      React.createElement(index_js_1.Box, {
+        className: (0, classnames_1.default)('iui-dialog-wrapper', className),
+        'data-iui-relative': relativeTo === 'container',
+        ref: (0, index_js_1.useMergedRefs)(ref, dialogRootRef),
+        ...rest,
+      }),
+    ),
   );
 });
 /**

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

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

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
+import { Popover } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
      * You can pass function that takes argument `close` that closes the dropdown menu, or a list of MenuItems.
      */
-    menuItems: (close: () => void) => JSX.Element[] | JSX.Element[] | JSX.Element;
+    menuItems: ((close: () => void) => JSX.Element[]) | JSX.Element[] | JSX.Element;
     /**
      * ARIA role. Role of menu. For menu use 'menu', for select use 'listbox'.
      * @default 'menu'
@@ -15,10 +16,10 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Omit<PopoverProps, 'content'> & Omit<CommonProps, 'title'>;
+} & Pick<React.ComponentProps<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Built on top of the {@link Popover} component.
  * @example
  * const menuItems = (close: () => void) => [
  *   <MenuItem key={1} onClick={onClick(1, close)}>
@@ -35,5 +36,5 @@ export type DropdownMenuProps = {
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export declare const DropdownMenu: (props: DropdownMenuProps) => React.JSX.Element;
+export declare const DropdownMenu: PolymorphicForwardRefComponent<"div", DropdownMenuProps>;
 export default DropdownMenu;