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

package/cjs/core/utils/components/Popover.js

@@ -4,129 +4,167 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.hideOnEscOrTab = exports.Popover = void 0;
+exports.Popover = exports.usePopover = void 0;
 const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const react_1 = tslib_1.__importDefault(require('@tippyjs/react'));
-const index_js_1 = require('../hooks/index.js');
-const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
-/**
- * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
- * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
- * @private
- */
-exports.Popover = React.forwardRef((props, ref) => {
-  const [mounted, setMounted] = React.useState(false);
-  const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
-  const isDomAvailable = (0, index_js_1.useIsClient)();
-  const tippyRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(tippyRef, ref);
-  // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
-  const lazyLoad = {
-    fn: () => ({
-      onShow: () => setMounted(true),
-      onHidden: () => setMounted(false),
+const react_1 = require('@floating-ui/react');
+const index_js_1 = require('../index.js');
+const Portal_js_1 = require('./Portal.js');
+const index_js_2 = require('../../Surface/index.js');
+const index_js_3 = require('../../ThemeProvider/index.js');
+// ----------------------------------------------------------------------------
+const usePopover = (options) => {
+  const {
+    placement = 'bottom-start',
+    visible,
+    onVisibleChange,
+    closeOnOutsideClick,
+    autoUpdateOptions,
+    middleware = { flip: true, shift: true },
+    matchWidth,
+    trigger = { click: true, hover: false, focus: false },
+    role,
+  } = options;
+  const [open, onOpenChange] = (0, index_js_1.useControlledState)(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = (0, react_1.useFloating)({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: (...args) =>
+      (0, react_1.autoUpdate)(...args, autoUpdateOptions),
+    middleware: [
+      middleware.offset !== undefined && (0, react_1.offset)(middleware.offset),
+      middleware.flip && (0, react_1.flip)(),
+      middleware.shift && (0, react_1.shift)(),
+      matchWidth &&
+        (0, react_1.size)({
+          apply: ({ rects }) => {
+            setReferenceWidth(rects.reference.width);
+          },
+        }),
+      middleware.autoPlacement && (0, react_1.autoPlacement)(),
+      middleware.inline && (0, react_1.inline)(),
+      middleware.hide && (0, react_1.hide)(),
+    ].filter(Boolean),
+  });
+  const interactions = (0, react_1.useInteractions)([
+    (0, react_1.useClick)(floating.context, { enabled: !!trigger.click }),
+    (0, react_1.useDismiss)(floating.context, {
+      outsidePress: closeOnOutsideClick,
     }),
-  };
-  // Plugin to remove tabindex from tippy, to prevent focus ring from unintentionally showing.
-  const removeTabIndex = {
-    fn: () => ({
-      onCreate: (instance) => {
-        instance.popper.firstElementChild?.removeAttribute('tabindex');
-      },
+    (0, react_1.useHover)(floating.context, {
+      enabled: !!trigger.hover,
+      delay: 100,
+      handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
     }),
-  };
-  const computedProps = {
-    allowHTML: true,
-    animation: false,
-    appendTo: (el) => themeInfo?.portalContainer || el.ownerDocument.body,
-    arrow: false,
-    duration: 0,
-    interactive: true,
-    role: '',
-    offset: [0, 0],
-    maxWidth: '',
-    zIndex: 99999,
-    ...props,
-    className: (0, classnames_1.default)('iui-popover', props.className),
-    // add additional check for isDomAvailable when using in controlled mode,
-    // because rootRef is not available in first render
-    visible:
-      props.visible !== undefined ? props.visible && isDomAvailable : undefined,
-    plugins: [
-      lazyLoad,
-      removeTabIndex,
-      exports.hideOnEscOrTab,
-      ...(props.plugins || []),
-    ],
-    popperOptions: {
-      strategy: 'fixed',
-      ...props.popperOptions,
-      modifiers: [
-        { name: 'flip' },
-        {
-          name: 'preventOverflow',
-          options: { padding: 0 },
+    (0, react_1.useFocus)(floating.context, { enabled: !!trigger.focus }),
+    (0, react_1.useRole)(floating.context, { role: 'dialog', enabled: !!role }),
+  ]);
+  const [referenceWidth, setReferenceWidth] = React.useState();
+  const getFloatingProps = React.useCallback(
+    (userProps) =>
+      interactions.getFloatingProps({
+        ...userProps,
+        style: {
+          ...floating.floatingStyles,
+          zIndex: 9999,
+          ...(matchWidth && referenceWidth
+            ? {
+                minInlineSize: `${referenceWidth}px`,
+                maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
+              }
+            : {}),
+          ...userProps?.style,
         },
-        ...(props.popperOptions?.modifiers || []),
-      ],
-    },
-  };
-  if (props.render) {
-    const render = props.render;
-    computedProps.render = (...args) => (mounted ? render(...args) : '');
-  } else {
-    // Fixing issue where elements below Popover gets click events.
-    // Tippy uses react Portal, which propagates events by react tree, not dom tree.
-    // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
-    const clonedContent = React.isValidElement(props.content)
-      ? React.cloneElement(props.content, {
-          onClick: (e) => {
-            e.stopPropagation();
-            props.content.props.onClick?.(e);
-          },
-        })
-      : props.content;
-    computedProps.content = mounted ? clonedContent : '';
-  }
-  return React.createElement(react_1.default, { ...computedProps, ref: refs });
-});
+      }),
+    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      ...interactions,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, interactions, getFloatingProps, floating],
+  );
+};
+exports.usePopover = usePopover;
 /**
- * Plugin to hide Popover when either Esc key is pressed,
- * or when the content inside is not tabbable and Tab key is pressed.
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
  */
-exports.hideOnEscOrTab = {
-  fn(instance) {
-    /** @returns true if none of the children are tabbable */
-    const shouldHideOnTab = () => {
-      const descendents = Array.from(instance.popper.querySelectorAll('*'));
-      return !descendents.some((el) => el?.tabIndex >= 0);
-    };
-    const onKeyDown = (event) => {
-      if (event.altKey) {
-        return;
-      }
-      switch (event.key) {
-        case 'Escape':
-          instance.hide();
-          break;
-        case 'Tab':
-          if (shouldHideOnTab()) {
-            event.shiftKey && event.preventDefault(); // focus popover target on Shift+Tab
-            instance.hide();
-          }
-          break;
-      }
-    };
-    return {
-      onShow() {
-        instance.popper.addEventListener('keydown', onKeyDown);
-      },
-      onHide() {
-        instance.popper.removeEventListener('keydown', onKeyDown);
-      },
-    };
-  },
-};
+exports.Popover = React.forwardRef((props, forwardedRef) => {
+  const {
+    portal = true,
+    //
+    // popover options
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    matchWidth,
+    //
+    // dom props
+    children,
+    content,
+    applyBackground,
+    ...rest
+  } = props;
+  const popover = (0, exports.usePopover)({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    matchWidth,
+    role: 'dialog',
+  });
+  const [popoverElement, setPopoverElement] = React.useState();
+  const popoverRef = (0, index_js_1.useMergedRefs)(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      ref: popover.refs.setReference,
+    })),
+    popover.open
+      ? React.createElement(
+          Portal_js_1.Portal,
+          { portal: portal },
+          React.createElement(
+            index_js_3.ThemeProvider,
+            { portalContainer: popoverElement },
+            React.createElement(
+              react_1.FloatingFocusManager,
+              {
+                context: popover.context,
+                modal: false,
+                initialFocus: -1,
+                returnFocus: true,
+              },
+              React.createElement(
+                index_js_1.Box,
+                {
+                  as: applyBackground ? index_js_2.Surface : 'div',
+                  ...popover.getFloatingProps(rest),
+                  ref: popoverRef,
+                },
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
+});
 exports.default = exports.Popover;

package/cjs/styles.js

@@ -219,10 +219,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-ubn95wp': '_iui3-ubn95wp',
+  'iui-ugj3ux4': '_iui3-ugj3ux4',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-ubn95xj': '_iui3-ubn95xj',
+  'iui-ugj3uxq': '_iui3-ugj3uxq',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -417,9 +417,6 @@ const styles = {
   'iui-svg-icon': '_iui3-svg-icon',
   'iui-notification-marker': '_iui3-notification-marker',
   pulse,
-  'iui-popover': '_iui3-popover',
-  'tippy-box': '_iui3-tippy-box',
-  'tippy-content': '_iui3-tippy-content',
   'iui-divider': '_iui3-divider',
   'iui-flex': '_iui3-flex',
   'iui-flex-spacer': '_iui3-flex-spacer',

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -6,11 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Button } from '../Button/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
-import {
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-  useMergedRefs,
-} from '../../utils/index.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -20,7 +16,7 @@ import {
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-export const DropdownButton = React.forwardRef((props, ref) => {
+export const DropdownButton = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     className,
@@ -31,28 +27,17 @@ export const 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 = useMergedRefs(ref, buttonRef);
-  React.useEffect(() => {
-    if (buttonRef.current) {
-      setMenuWidth(buttonRef.current.offsetWidth);
-    }
-  }, [children, size, styleType]);
   return React.createElement(
     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(
       Button,
@@ -63,8 +48,7 @@ export const DropdownButton = React.forwardRef((props, ref) => {
         endIcon: isMenuOpen
           ? React.createElement(SvgCaretUpSmall, { 'aria-hidden': true })
           : React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),
-        ref: refs,
-        'aria-label': 'Dropdown',
+        ref: forwardedRef,
         ...rest,
       },
       children,

package/esm/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/esm/core/Buttons/SplitButton/SplitButton.js

@@ -6,13 +6,16 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Button } from '../Button/index.js';
 import { IconButton } from '../IconButton/index.js';
-import { DropdownMenu } from '../../DropdownMenu/index.js';
 import {
   Box,
+  Portal,
   SvgCaretDownSmall,
   SvgCaretUpSmall,
   useId,
+  useMergedRefs,
+  usePopover,
 } from '../../utils/index.js';
+import { Menu } from '../../Menu/Menu.js';
 /**
  * Split button component with a DropdownMenu.
  *
@@ -38,21 +41,33 @@ export const 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]);
+    return menuItems;
+  }, [menuItems, close]);
+  const popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement: menuPlacement,
+    matchWidth: true,
+  });
   const labelId = useId();
   return React.createElement(
     Box,
     {
       ...wrapperProps,
+      ref: popover.refs.setPositionReference,
       className: cx(
         'iui-button-split',
         {
@@ -60,7 +75,6 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         },
         wrapperProps?.className,
       ),
-      ref: wrapperRef,
     },
     React.createElement(
       Button,
@@ -69,35 +83,46 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         styleType: styleType,
         size: size,
         onClick: onClick,
-        ref: forwardedRef,
+        ref: useMergedRefs(buttonRef, forwardedRef),
         ...rest,
         labelProps: { id: labelId, ...props.labelProps },
       },
       children,
     ),
     React.createElement(
-      DropdownMenu,
+      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(SvgCaretUpSmall, null)
+        : React.createElement(SvgCaretDownSmall, null),
+    ),
+    popover.open &&
       React.createElement(
-        IconButton,
-        {
-          styleType: styleType,
-          size: size,
-          disabled: props.disabled,
-          'aria-labelledby': props.labelProps?.id || labelId,
-          ...menuButtonProps,
-        },
-        isMenuOpen
-          ? React.createElement(SvgCaretUpSmall, null)
-          : React.createElement(SvgCaretDownSmall, null),
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  close();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuContent,
+        ),
       ),
-    ),
   );
 });
 export default SplitButton;

package/esm/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`.