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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.0.0-dev.9
+
+### Major Changes
+
+- [#1506](https://github.com/iTwin/iTwinUI/pull/1506): Replaced `tippy.js` with `floating-ui` in all popover-based components. While the basic usage is unchanged, all advanced props from tippy are no longer available.
+
+  Components affected: Select, ComboBox, DropdownMenu, DropdownButton, SplitButton.
+
+### Minor Changes
+
+- [#1506](https://github.com/iTwin/iTwinUI/pull/1506): Added new `Popover` component for public use.
+
 ## 3.0.0-dev.8
 
 ### Major Changes

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -20,7 +20,7 @@ const index_js_3 = require('../../utils/index.js');
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-exports.DropdownButton = React.forwardRef((props, ref) => {
+exports.DropdownButton = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     className,
@@ -31,28 +31,17 @@ exports.DropdownButton = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const buttonRef = React.useRef(null);
-  const refs = (0, index_js_3.useMergedRefs)(ref, buttonRef);
-  React.useEffect(() => {
-    if (buttonRef.current) {
-      setMenuWidth(buttonRef.current.offsetWidth);
-    }
-  }, [children, size, styleType]);
   return React.createElement(
     index_js_2.DropdownMenu,
     {
       menuItems: menuItems,
+      matchWidth: true,
+      visible: isMenuOpen,
       ...dropdownMenuProps,
-      onShow: (i) => {
-        setIsMenuOpen(true);
-        dropdownMenuProps?.onShow?.(i);
+      onVisibleChange: (open) => {
+        setIsMenuOpen(open);
+        dropdownMenuProps?.onVisibleChange?.(open);
       },
-      onHide: (i) => {
-        setIsMenuOpen(false);
-        dropdownMenuProps?.onHide?.(i);
-      },
-      style: { minInlineSize: menuWidth, ...dropdownMenuProps?.style },
     },
     React.createElement(
       index_js_1.Button,
@@ -67,8 +56,7 @@ exports.DropdownButton = React.forwardRef((props, ref) => {
           : React.createElement(index_js_3.SvgCaretDownSmall, {
               'aria-hidden': true,
             }),
-        ref: refs,
-        'aria-label': 'Dropdown',
+        ref: forwardedRef,
         ...rest,
       },
       children,

package/cjs/core/Buttons/SplitButton/SplitButton.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
 import { IconButton } from '../IconButton/index.js';
-import type { Placement } from 'tippy.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import type { Placement } from '@floating-ui/react';
 export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
@@ -26,8 +26,8 @@ export type SplitButtonProps = ButtonProps & {
     /**
      * Passes props to SplitButton menu button.
      */
-    menuButtonProps?: React.ComponentProps<typeof IconButton>;
-};
+    menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
+} & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.
  *

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -10,8 +10,8 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../Button/index.js');
 const index_js_2 = require('../IconButton/index.js');
-const index_js_3 = require('../../DropdownMenu/index.js');
-const index_js_4 = require('../../utils/index.js');
+const index_js_3 = require('../../utils/index.js');
+const Menu_js_1 = require('../../Menu/Menu.js');
 /**
  * Split button component with a DropdownMenu.
  *
@@ -37,21 +37,33 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
     children,
     wrapperProps,
     menuButtonProps,
+    portal = true,
     ...rest
   } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const wrapperRef = React.useRef(null);
-  React.useEffect(() => {
-    if (wrapperRef.current) {
-      setMenuWidth(wrapperRef.current.offsetWidth);
+  const buttonRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(false);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    buttonRef.current?.focus({ preventScroll: true });
+  }, []);
+  const menuContent = React.useMemo(() => {
+    if (typeof menuItems === 'function') {
+      return menuItems(close);
     }
-  }, [children, size]);
-  const labelId = (0, index_js_4.useId)();
+    return menuItems;
+  }, [menuItems, close]);
+  const popover = (0, index_js_3.usePopover)({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement: menuPlacement,
+    matchWidth: true,
+  });
+  const labelId = (0, index_js_3.useId)();
   return React.createElement(
-    index_js_4.Box,
+    index_js_3.Box,
     {
       ...wrapperProps,
+      ref: popover.refs.setPositionReference,
       className: (0, classnames_1.default)(
         'iui-button-split',
         {
@@ -59,7 +71,6 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
         },
         wrapperProps?.className,
       ),
-      ref: wrapperRef,
     },
     React.createElement(
       index_js_1.Button,
@@ -68,35 +79,46 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
         styleType: styleType,
         size: size,
         onClick: onClick,
-        ref: forwardedRef,
+        ref: (0, index_js_3.useMergedRefs)(buttonRef, forwardedRef),
         ...rest,
         labelProps: { id: labelId, ...props.labelProps },
       },
       children,
     ),
     React.createElement(
-      index_js_3.DropdownMenu,
+      index_js_2.IconButton,
       {
-        placement: menuPlacement,
-        menuItems: menuItems,
-        style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        styleType: styleType,
+        size: size,
+        disabled: props.disabled,
+        'aria-labelledby': props.labelProps?.id || labelId,
+        'aria-expanded': popover.open,
+        ref: popover.refs.setReference,
+        ...popover.getReferenceProps(menuButtonProps),
       },
+      visible
+        ? React.createElement(index_js_3.SvgCaretUpSmall, null)
+        : React.createElement(index_js_3.SvgCaretDownSmall, null),
+    ),
+    popover.open &&
       React.createElement(
-        index_js_2.IconButton,
-        {
-          styleType: styleType,
-          size: size,
-          disabled: props.disabled,
-          'aria-labelledby': props.labelProps?.id || labelId,
-          ...menuButtonProps,
-        },
-        isMenuOpen
-          ? React.createElement(index_js_4.SvgCaretUpSmall, null)
-          : React.createElement(index_js_4.SvgCaretDownSmall, null),
+        index_js_3.Portal,
+        { portal: portal },
+        React.createElement(
+          Menu_js_1.Menu,
+          {
+            ...popover.getFloatingProps({
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  close();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuContent,
+        ),
       ),
-    ),
   );
 });
 exports.default = exports.SplitButton;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/index.js';
 import type { Input } from '../Input/Input.js';
-import type { PopoverProps, InputContainerProps, CommonProps } from '../utils/index.js';
+import type { InputContainerProps, CommonProps } from '../utils/index.js';
 type ActionType = 'added' | 'removed';
 type MultipleOnChangeProps<T> = {
     value: T;
@@ -48,7 +48,7 @@ export type ComboBoxProps<T> = {
     /**
      * Props to customize dropdown menu behavior.
      */
-    dropdownMenuProps?: PopoverProps;
+    dropdownMenuProps?: React.ComponentProps<'div'>;
     /**
      * 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`.

package/cjs/core/ComboBox/ComboBox.js

@@ -14,7 +14,6 @@ const SelectTag_js_1 = tslib_1.__importDefault(
 const index_js_2 = require('../Typography/index.js');
 const index_js_3 = require('../utils/index.js');
 const helpers_js_1 = require('./helpers.js');
-const ComboBoxDropdown_js_1 = require('./ComboBoxDropdown.js');
 const ComboBoxEndIcon_js_1 = require('./ComboBoxEndIcon.js');
 const ComboBoxInput_js_1 = require('./ComboBoxInput.js');
 const ComboBoxInputContainer_js_1 = require('./ComboBoxInputContainer.js');
@@ -57,8 +56,8 @@ const ComboBox = (props) => {
     itemRenderer,
     enableVirtualization = false,
     multiple = false,
-    onShow,
-    onHide,
+    onShow: onShowProp,
+    onHide: onHideProp,
     ...rest
   } = props;
   // Generate a stateful random id if not specified
@@ -116,6 +115,16 @@ const ComboBox = (props) => {
       focusedIndex: -1,
     },
   );
+  const onShowRef = (0, index_js_3.useLatestRef)(onShowProp);
+  const onHideRef = (0, index_js_3.useLatestRef)(onHideProp);
+  const show = React.useCallback(() => {
+    dispatch({ type: 'open' });
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = React.useCallback(() => {
+    dispatch({ type: 'close' });
+    onHideRef.current?.();
+  }, [onHideRef]);
   (0, index_js_3.useIsomorphicLayoutEffect)(() => {
     // When the dropdown opens
     if (isOpen) {
@@ -140,13 +149,6 @@ 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(() => {
@@ -173,7 +175,7 @@ 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) =>
@@ -185,7 +187,7 @@ 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(() => {
@@ -275,7 +277,7 @@ const ComboBox = (props) => {
         );
       } else {
         dispatch({ type: 'select', value: __originalIndex });
-        dispatch({ type: 'close' });
+        hide();
         onChangeHandler(__originalIndex);
       }
     },
@@ -286,6 +288,7 @@ const ComboBox = (props) => {
       onChangeHandler,
       selected,
       optionsRef,
+      hide,
     ],
   );
   const getMenuItem = React.useCallback(
@@ -365,6 +368,13 @@ const ComboBox = (props) => {
       ),
     [emptyStateMessage],
   );
+  const popover = (0, index_js_3.usePopover)({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    trigger: { focus: true },
+  });
   return React.createElement(
     helpers_js_1.ComboBoxRefsContext.Provider,
     { value: { inputRef, menuRef, optionsExtraInfoRef } },
@@ -376,7 +386,6 @@ const ComboBox = (props) => {
         {
           value: {
             id,
-            minWidth,
             isOpen,
             focusedIndex,
             onClickHandler,
@@ -384,11 +393,14 @@ const ComboBox = (props) => {
             filteredOptions,
             getMenuItem,
             multiple,
+            popover,
+            show,
+            hide,
           },
         },
         React.createElement(
           ComboBoxInputContainer_js_1.ComboBoxInputContainer,
-          { ...rest },
+          { disabled: inputProps?.disabled, ...rest },
           React.createElement(
             React.Fragment,
             null,
@@ -419,15 +431,11 @@ const ComboBox = (props) => {
             : null,
         ),
         React.createElement(
-          ComboBoxDropdown_js_1.ComboBoxDropdown,
-          { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-          React.createElement(
-            ComboBoxMenu_js_1.ComboBoxMenu,
-            null,
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-          ),
+          ComboBoxMenu_js_1.ComboBoxMenu,
+          { as: 'div', ...dropdownMenuProps },
+          filteredOptions.length > 0 && !enableVirtualization
+            ? filteredOptions.map(getMenuItem)
+            : emptyContent,
         ),
       ),
     ),

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(