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

package/esm/core/ComboBox/ComboBox.js

@@ -12,6 +12,7 @@ import {
   useLatestRef,
   useIsomorphicLayoutEffect,
   AutoclearingHiddenLiveRegion,
+  usePopover,
 } from '../utils/index.js';
 import {
   ComboBoxActionContext,
@@ -19,7 +20,6 @@ import {
   ComboBoxRefsContext,
   ComboBoxStateContext,
 } from './helpers.js';
-import { ComboBoxDropdown } from './ComboBoxDropdown.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 import { ComboBoxInput } from './ComboBoxInput.js';
 import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
@@ -62,8 +62,8 @@ export const ComboBox = (props) => {
     itemRenderer,
     enableVirtualization = false,
     multiple = false,
-    onShow,
-    onHide,
+    onShow: onShowProp,
+    onHide: onHideProp,
     ...rest
   } = props;
   // Generate a stateful random id if not specified
@@ -121,6 +121,16 @@ export const ComboBox = (props) => {
       focusedIndex: -1,
     },
   );
+  const onShowRef = useLatestRef(onShowProp);
+  const onHideRef = useLatestRef(onHideProp);
+  const show = React.useCallback(() => {
+    dispatch({ type: 'open' });
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = React.useCallback(() => {
+    dispatch({ type: 'close' });
+    onHideRef.current?.();
+  }, [onHideRef]);
   useIsomorphicLayoutEffect(() => {
     // When the dropdown opens
     if (isOpen) {
@@ -145,13 +155,6 @@ export const ComboBox = (props) => {
       }
     }
   }, [isOpen, multiple, optionsRef, selected]);
-  // Set min-width of menu to be same as input
-  const [minWidth, setMinWidth] = React.useState(0);
-  React.useEffect(() => {
-    if (inputRef.current) {
-      setMinWidth(inputRef.current.offsetWidth);
-    }
-  }, [isOpen]);
   // Update filtered options to the latest value options according to input value
   const [filteredOptions, setFilteredOptions] = React.useState(options);
   React.useEffect(() => {
@@ -178,7 +181,7 @@ export const ComboBox = (props) => {
     (event) => {
       const { value } = event.currentTarget;
       setInputValue(value);
-      dispatch({ type: 'open' }); // reopen when typing
+      show(); // reopen when typing
       setFilteredOptions(
         filterFunction?.(optionsRef.current, value) ??
           optionsRef.current.filter((option) =>
@@ -190,7 +193,7 @@ export const ComboBox = (props) => {
       }
       inputProps?.onChange?.(event);
     },
-    [filterFunction, focusedIndex, inputProps, optionsRef],
+    [filterFunction, focusedIndex, inputProps, optionsRef, show],
   );
   // When the value prop changes, update the selected index/indices
   React.useEffect(() => {
@@ -280,7 +283,7 @@ export const ComboBox = (props) => {
         );
       } else {
         dispatch({ type: 'select', value: __originalIndex });
-        dispatch({ type: 'close' });
+        hide();
         onChangeHandler(__originalIndex);
       }
     },
@@ -291,6 +294,7 @@ export const ComboBox = (props) => {
       onChangeHandler,
       selected,
       optionsRef,
+      hide,
     ],
   );
   const getMenuItem = React.useCallback(
@@ -366,6 +370,13 @@ export const ComboBox = (props) => {
       ),
     [emptyStateMessage],
   );
+  const popover = usePopover({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    trigger: { focus: true },
+  });
   return React.createElement(
     ComboBoxRefsContext.Provider,
     { value: { inputRef, menuRef, optionsExtraInfoRef } },
@@ -377,7 +388,6 @@ export const ComboBox = (props) => {
         {
           value: {
             id,
-            minWidth,
             isOpen,
             focusedIndex,
             onClickHandler,
@@ -385,11 +395,14 @@ export const ComboBox = (props) => {
             filteredOptions,
             getMenuItem,
             multiple,
+            popover,
+            show,
+            hide,
           },
         },
         React.createElement(
           ComboBoxInputContainer,
-          { ...rest },
+          { disabled: inputProps?.disabled, ...rest },
           React.createElement(
             React.Fragment,
             null,
@@ -420,15 +433,11 @@ export const ComboBox = (props) => {
             : null,
         ),
         React.createElement(
-          ComboBoxDropdown,
-          { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-          React.createElement(
-            ComboBoxMenu,
-            null,
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-          ),
+          ComboBoxMenu,
+          { as: 'div', ...dropdownMenuProps },
+          filteredOptions.length > 0 && !enableVirtualization
+            ? filteredOptions.map(getMenuItem)
+            : emptyContent,
         ),
       ),
     ),

package/esm/core/ComboBox/ComboBoxInput.js

@@ -19,9 +19,9 @@ import {
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   const {
     onKeyDown: onKeyDownProp,
-    onFocus: onFocusProp,
     onClick: onClickProp,
     selectTags,
+    size,
     ...rest
   } = props;
   const {
@@ -31,11 +31,14 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     enableVirtualization,
     multiple,
     onClickHandler,
+    popover,
+    show,
+    hide,
   } = useSafeContext(ComboBoxStateContext);
   const dispatch = useSafeContext(ComboBoxActionContext);
   const { inputRef, menuRef, optionsExtraInfoRef } =
     useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(inputRef, forwardedRef);
+  const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
   const focusedIndexRef = React.useRef(focusedIndex ?? -1);
   React.useEffect(() => {
     focusedIndexRef.current = focusedIndex ?? -1;
@@ -47,7 +50,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   };
   const handleKeyDown = React.useCallback(
     (event) => {
-      onKeyDownProp?.(event);
       const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
       if (event.altKey) {
         return;
@@ -56,7 +58,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowDown': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -98,7 +100,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowUp': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -142,17 +144,17 @@ export const 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;
       }
     },
@@ -162,31 +164,26 @@ export const 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] = useContainerWidth();
   return React.createElement(
     React.Fragment,
     null,
     React.createElement(Input, {
       ref: refs,
-      onKeyDown: handleKeyDown,
       onClick: mergeEventHandlers(onClickProp, handleClick),
-      onFocus: handleFocus,
+      'aria-expanded': isOpen,
       'aria-activedescendant':
         isOpen && focusedIndex != undefined && focusedIndex > -1
           ? getIdFromIndex(focusedIndex)
@@ -199,7 +196,11 @@ export const 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: mergeEventHandlers(onKeyDownProp, handleKeyDown),
+        ...rest,
+      }),
     }),
     multiple && selectTags
       ? React.createElement(ComboBoxMultipleContainer, {

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -5,109 +5,89 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
-import { Surface } from '../Surface/index.js';
 import {
   useSafeContext,
   useMergedRefs,
   useVirtualization,
-  mergeRefs,
-  getWindow,
+  Portal,
+  Box,
 } from '../utils/index.js';
 import { ComboBoxStateContext, ComboBoxRefsContext } from './helpers.js';
-const isOverflowOverlaySupported = () =>
-  getWindow()?.CSS?.supports?.('overflow: overlay');
-const VirtualizedComboBoxMenu = React.forwardRef(
-  ({ children, className, style, ...rest }, forwardedRef) => {
-    const { minWidth, id, filteredOptions, getMenuItem, focusedIndex } =
-      useSafeContext(ComboBoxStateContext);
-    const { menuRef } = useSafeContext(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 } =
+    useSafeContext(ComboBoxStateContext);
+  const { menuRef } = useSafeContext(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 } = 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(
-      Surface,
-      { style: surfaceStyles },
-      React.createElement(
-        'div',
-        { ...outerProps },
-        React.createElement(
-          Menu,
-          {
-            id: `${id}-list`,
-            setFocus: false,
-            role: 'listbox',
-            ref: 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 } = 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(
+    Box,
+    { as: 'div', ...outerProps, ...rest },
+    React.createElement(
+      'div',
+      { ...innerProps, ref: innerProps.ref },
+      visibleChildren,
+    ),
+  );
+};
 export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
-  const { className, style, ...rest } = props;
-  const { minWidth, id, enableVirtualization } =
+  const { className, children, style, ...rest } = props;
+  const { id, enableVirtualization, popover } =
     useSafeContext(ComboBoxStateContext);
   const { menuRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(menuRef, forwardedRef);
-  const styles = React.useMemo(
-    () => ({
-      minInlineSize: minWidth,
-      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
-    }),
-    [minWidth],
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    !enableVirtualization
-      ? React.createElement(Menu, {
+  const refs = useMergedRefs(popover.refs.setFloating, forwardedRef, menuRef);
+  return (
+    popover.open &&
+    React.createElement(
+      Portal,
+      { portal: true },
+      React.createElement(
+        Menu,
+        {
           id: `${id}-list`,
-          style: { ...styles, ...style },
           setFocus: false,
           role: 'listbox',
           ref: refs,
           className: cx('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),
+      ),
+    )
   );
 });
 ComboBoxMenu.displayName = 'ComboBoxMenu';

package/esm/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[];
@@ -33,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/esm/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;

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,11 +3,20 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Popover, mergeRefs } from '../utils/index.js';
+import {
+  Popover,
+  useMergedRefs,
+  usePopover,
+  Portal,
+  cloneElementWithRef,
+  useControlledState,
+  mergeRefs,
+  mergeEventHandlers,
+} from '../utils/index.js';
 import { Menu } from '../Menu/index.js';
 /**
  * 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)}>
@@ -24,74 +33,73 @@ import { Menu } from '../Menu/index.js';
  *   <Button>Menu</Button>
  * </DropdownMenu>
  */
-export const DropdownMenu = (props) => {
+export const DropdownMenu = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     children,
-    className,
-    style,
     role = 'menu',
-    visible,
+    visible: visibleProp,
     placement = 'bottom-start',
-    onShow,
-    onHide,
-    trigger,
-    id,
+    matchWidth = false,
+    onVisibleChange,
+    portal = true,
     ...rest
   } = props;
-  const [isVisible, setIsVisible] = React.useState(visible ?? false);
-  React.useEffect(() => {
-    setIsVisible(visible ?? false);
-  }, [visible]);
-  const open = React.useCallback(() => setIsVisible(true), []);
-  const close = React.useCallback(() => setIsVisible(false), []);
+  const [visible, setVisible] = 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 targetRef = React.useRef(null);
-  const onShowHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(true);
-      onShow?.(instance);
-    },
-    [onShow],
-  );
-  const onHideHandler = React.useCallback(
-    (instance) => {
-      setIsVisible(false);
-      targetRef.current?.focus();
-      onHide?.(instance);
-    },
-    [onHide],
-  );
+  const popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement,
+    matchWidth,
+  });
+  const popoverRef = useMergedRefs(forwardedRef, popover.refs.setFloating);
   return React.createElement(
-    Popover,
-    {
-      content: React.createElement(
-        Menu,
-        { className: className, style: style, role: role, id: id },
-        menuContent,
-      ),
-      visible: trigger === undefined ? isVisible : undefined,
-      onClickOutside: close,
-      placement: placement,
-      onShow: onShowHandler,
-      onHide: onHideHandler,
-      trigger: visible === undefined ? trigger : undefined,
-      ...rest,
-    },
-    React.isValidElement(children)
-      ? React.cloneElement(children, {
-          ref: mergeRefs(targetRef, props.children.ref),
-          onClick: (args) => {
-            trigger === undefined && (isVisible ? close() : open());
-            children.props.onClick?.(args);
+    React.Fragment,
+    null,
+    cloneElementWithRef(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      'aria-expanded': popover.open,
+      ref: mergeRefs(triggerRef, popover.refs.setReference),
+    })),
+    popover.open &&
+      React.createElement(
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              role,
+              ...rest,
+              onKeyDown: mergeEventHandlers(props.onKeyDown, (e) => {
+                if (e.defaultPrevented) {
+                  return;
+                }
+                if (e.key === 'Tab') {
+                  close();
+                }
+              }),
+            }),
+            ref: popoverRef,
           },
-        })
-      : React.createElement(React.Fragment, null),
+          menuContent,
+        ),
+      ),
   );
-};
+});
 export default DropdownMenu;

package/esm/core/Header/HeaderDropdownButton.js

@@ -27,8 +27,7 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
     {
       menuItems: menuItems,
       style: { minInlineSize: menuWidth },
-      onShow: () => setIsMenuOpen(true),
-      onHide: () => setIsMenuOpen(false),
+      onVisibleChange: (open) => setIsMenuOpen(open),
     },
     React.createElement(
       HeaderBasicButton,

package/esm/core/Header/HeaderSplitButton.js

@@ -46,8 +46,7 @@ export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
         placement: menuPlacement,
         menuItems: menuItems,
         style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        onVisibleChange: (open) => setIsMenuOpen(open),
       },
       React.createElement(
         ButtonBase,