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

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

@@ -3,126 +3,183 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import cx from 'classnames';
-import Tippy from '@tippyjs/react';
-import { useMergedRefs, useIsClient } from '../hooks/index.js';
-import { ThemeContext } from '../../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
- */
-export const Popover = React.forwardRef((props, ref) => {
-  const [mounted, setMounted] = React.useState(false);
-  const themeInfo = React.useContext(ThemeContext);
-  const isDomAvailable = useIsClient();
-  const tippyRef = React.useRef(null);
-  const refs = 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),
-    }),
-  };
-  // Plugin to remove tabindex from tippy, to prevent focus ring from unintentionally showing.
-  const removeTabIndex = {
-    fn: () => ({
-      onCreate: (instance) => {
-        instance.popper.firstElementChild?.removeAttribute('tabindex');
-      },
+import {
+  useFloating,
+  useClick,
+  useDismiss,
+  useInteractions,
+  size,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  autoPlacement,
+  inline,
+  hide,
+  FloatingFocusManager,
+  useHover,
+  useFocus,
+  safePolygon,
+  useRole,
+} from '@floating-ui/react';
+import {
+  Box,
+  cloneElementWithRef,
+  useControlledState,
+  useMergedRefs,
+} from '../index.js';
+import { Portal } from './Portal.js';
+import { Surface } from '../../Surface/index.js';
+import { ThemeProvider } from '../../ThemeProvider/index.js';
+// ----------------------------------------------------------------------------
+export 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] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: (...args) => autoUpdate(...args, autoUpdateOptions),
+    middleware: [
+      middleware.offset !== undefined && offset(middleware.offset),
+      middleware.flip && flip(),
+      middleware.shift && shift(),
+      matchWidth &&
+        size({
+          apply: ({ rects }) => {
+            setReferenceWidth(rects.reference.width);
+          },
+        }),
+      middleware.autoPlacement && autoPlacement(),
+      middleware.inline && inline(),
+      middleware.hide && hide(),
+    ].filter(Boolean),
+  });
+  const interactions = useInteractions([
+    useClick(floating.context, { enabled: !!trigger.click }),
+    useDismiss(floating.context, { outsidePress: closeOnOutsideClick }),
+    useHover(floating.context, {
+      enabled: !!trigger.hover,
+      delay: 100,
+      handleClose: 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: cx('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,
-      hideOnEscOrTab,
-      ...(props.plugins || []),
-    ],
-    popperOptions: {
-      strategy: 'fixed',
-      ...props.popperOptions,
-      modifiers: [
-        { name: 'flip' },
-        {
-          name: 'preventOverflow',
-          options: { padding: 0 },
+    useFocus(floating.context, { enabled: !!trigger.focus }),
+    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(Tippy, { ...computedProps, ref: refs });
-});
+      }),
+    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      ...interactions,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, interactions, getFloatingProps, floating],
+  );
+};
 /**
- * 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/)
  */
-export const 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);
-      },
-    };
-  },
-};
+export const Popover = React.forwardRef((props, forwardedRef) => {
+  const {
+    portal = true,
+    //
+    // popover options
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    matchWidth,
+    //
+    // dom props
+    children,
+    content,
+    applyBackground,
+    ...rest
+  } = props;
+  const popover = usePopover({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    matchWidth,
+    role: 'dialog',
+  });
+  const [popoverElement, setPopoverElement] = React.useState();
+  const popoverRef = useMergedRefs(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  return React.createElement(
+    React.Fragment,
+    null,
+    cloneElementWithRef(children, (children) => ({
+      ...popover.getReferenceProps(children.props),
+      ref: popover.refs.setReference,
+    })),
+    popover.open
+      ? React.createElement(
+          Portal,
+          { portal: portal },
+          React.createElement(
+            ThemeProvider,
+            { portalContainer: popoverElement },
+            React.createElement(
+              FloatingFocusManager,
+              {
+                context: popover.context,
+                modal: false,
+                initialFocus: -1,
+                returnFocus: true,
+              },
+              React.createElement(
+                Box,
+                {
+                  as: applyBackground ? Surface : 'div',
+                  ...popover.getFloatingProps(rest),
+                  ref: popoverRef,
+                },
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
+});
 export default Popover;

package/esm/core/utils/components/Portal.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PortalProps = {
+    /**
+     * Where should the element be portaled to?
+     *
+     * If true, it will portal into nearest ThemeContext.portalContainer.
+     *
+     * If false, it will not be portaled.
+     *
+     * Otherwise, it will portal to the element passed to `to`.
+     *
+     * @default true
+     */
+    portal?: boolean | {
+        to: HTMLElement | (() => HTMLElement);
+    };
+};
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;

package/esm/core/utils/components/Portal.js

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
+import { getDocument } from '../functions/dom.js';
+import { useIsClient } from '../hooks/useIsClient.js';
+// ----------------------------------------------------------------------------
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export const Portal = (props) => {
+  const { portal = true, children } = props;
+  const isClient = useIsClient();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+// ----------------------------------------------------------------------------
+const usePortalTo = (portal) => {
+  const themeInfo = React.useContext(ThemeContext);
+  if (typeof portal === 'boolean') {
+    return portal ? themeInfo?.portalContainer ?? getDocument()?.body : null;
+  }
+  return typeof portal.to === 'function' ? portal.to() : portal.to;
+};

package/esm/core/utils/components/index.d.ts

@@ -14,3 +14,4 @@ export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
+export * from './Portal.js';

package/esm/core/utils/components/index.js

@@ -18,3 +18,4 @@ export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
 export * from './ButtonBase.js';
+export * from './Portal.js';

package/esm/core/utils/functions/index.d.ts

@@ -6,3 +6,4 @@ export * from './focusable.js';
 export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
+export * from './react.js';

package/esm/core/utils/functions/index.js

@@ -10,3 +10,4 @@ export * from './focusable.js';
 export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
+export * from './react.js';

package/esm/core/utils/functions/react.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export declare const cloneElementWithRef: (children: React.ReactNode, getProps: (children: JSX.Element) => Record<string, unknown>) => string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;

package/esm/core/utils/functions/react.js

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { mergeRefs } from '../hooks/useMergedRefs.js';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export const cloneElementWithRef = (children, getProps) => {
+  if (!children) {
+    return null;
+  }
+  if (!React.isValidElement(children)) {
+    return children;
+  }
+  const props = getProps(children);
+  const ref = mergeRefs(
+    ...[
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return React.cloneElement(children, {
+    ...props,
+    // we already checked ref above and handled null, so ts-ignore is ok
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ref,
+  });
+};

package/esm/core/utils/hooks/index.d.ts

@@ -11,4 +11,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
-export * from './useUncontrolledState.js';
+export * from './useControlledState.js';

package/esm/core/utils/hooks/index.js

@@ -15,4 +15,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
-export * from './useUncontrolledState.js';
+export * from './useControlledState.js';

package/esm/core/utils/hooks/useControlledState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export declare const useControlledState: <T>(initialValue: T, controlledState: T, setControlledState?: React.Dispatch<React.SetStateAction<T>> | undefined) => readonly [T, React.Dispatch<React.SetStateAction<T>>];

package/esm/core/utils/hooks/useControlledState.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  const [uncontrolledState, setUncontrolledState] =
+    React.useState(initialValue);
+  const state =
+    controlledState !== undefined ? controlledState : uncontrolledState;
+  const setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
+};

package/esm/styles.js

@@ -33,8 +33,9 @@ const styles = {
   'iui-button-dropdown': '_iui3-button-dropdown',
   'iui-button-split': '_iui3-button-split',
   'iui-button-group': '_iui3-button-group',
-  'iui-input-container': '_iui3-input-container',
+  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-input': '_iui3-input',
+  'iui-input-grid': '_iui3-input-grid',
   'iui-disabled': '_iui3-disabled',
   'iui-button-group-vertical': '_iui3-button-group-vertical',
   'iui-button-group-overflow-x': '_iui3-button-group-overflow-x',
@@ -177,36 +178,18 @@ const styles = {
   'iui-information-body-content': '_iui3-information-body-content',
   'iui-input-label': '_iui3-input-label',
   'iui-inline': '_iui3-inline',
-  'iui-required': '_iui3-required',
   'iui-input-with-icon': '_iui3-input-with-icon',
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
-  'iui-actionable': '_iui3-actionable',
   'iui-open': '_iui3-open',
-  'iui-inline-icon': '_iui3-inline-icon',
-  'iui-with-message': '_iui3-with-message',
-  'iui-input-icon': '_iui3-input-icon',
+  'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
+  'iui-status-message': '_iui3-status-message',
+  'iui-select-button': '_iui3-select-button',
+  'iui-input-group-wrapper': '_iui3-input-group-wrapper',
   'iui-toggle-switch-wrapper': '_iui3-toggle-switch-wrapper',
   'iui-radio-wrapper': '_iui3-radio-wrapper',
-  'iui-inline-label': '_iui3-inline-label',
-  'iui-label': '_iui3-label',
-  'iui-message': '_iui3-message',
-  'iui-select-button': '_iui3-select-button',
-  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-keyboard': '_iui3-keyboard',
-  'iui-location-marker': '_iui3-location-marker',
-  'iui-location-marker-default': '_iui3-location-marker-default',
-  'iui-location-marker-default-pin': '_iui3-location-marker-default-pin',
-  'iui-location-marker-default-pin-dot':
-    '_iui3-location-marker-default-pin-dot',
-  'iui-location-marker-data-rich': '_iui3-location-marker-data-rich',
-  'iui-location-marker-data-rich-body': '_iui3-location-marker-data-rich-body',
-  'iui-location-marker-data-rich-icon': '_iui3-location-marker-data-rich-icon',
-  'iui-location-marker-data-rich-icon-monochrome':
-    '_iui3-location-marker-data-rich-icon-monochrome',
-  'iui-location-marker-me': '_iui3-location-marker-me',
-  'iui-location-marker-me-dot': '_iui3-location-marker-me-dot',
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
@@ -235,10 +218,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-u8bwhh6': '_iui3-u8bwhh6',
+  'iui-ugj3ux4': '_iui3-ugj3ux4',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-u8bwhhv': '_iui3-u8bwhhv',
+  'iui-ugj3uxq': '_iui3-ugj3uxq',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -305,6 +288,7 @@ const styles = {
   'iui-table-body': '_iui3-table-body',
   'iui-table-header-wrapper': '_iui3-table-header-wrapper',
   'iui-slot': '_iui3-slot',
+  'iui-actionable': '_iui3-actionable',
   'iui-table-filter-button': '_iui3-table-filter-button',
   'iui-table-resizer': '_iui3-table-resizer',
   'iui-table-resizer-bar': '_iui3-table-resizer-bar',
@@ -401,6 +385,7 @@ const styles = {
   'iui-placement-bottom-start': '_iui3-placement-bottom-start',
   'iui-placement-bottom-end': '_iui3-placement-bottom-end',
   'iui-status-area': '_iui3-status-area',
+  'iui-message': '_iui3-message',
   'iui-toast-anchor': '_iui3-toast-anchor',
   'iui-informational': '_iui3-informational',
   'iui-label-on-left': '_iui3-label-on-left',
@@ -408,11 +393,8 @@ const styles = {
   'iui-toggle-switch-icon': '_iui3-toggle-switch-icon',
   'iui-toggle-switch': '_iui3-toggle-switch',
   'iui-toggle-switch-label': '_iui3-toggle-switch-label',
-  'iui-tooltip-container': '_iui3-tooltip-container',
   'iui-tooltip': '_iui3-tooltip',
-  'iui-tooltip-visible': '_iui3-tooltip-visible',
   'iui-transfer-list-wrapper': '_iui3-transfer-list-wrapper',
-  'iui-transfer-list-listbox-label': '_iui3-transfer-list-listbox-label',
   'iui-transfer-list-listbox-wrapper': '_iui3-transfer-list-listbox-wrapper',
   'iui-transfer-list-listbox': '_iui3-transfer-list-listbox',
   'iui-transfer-list-toolbar': '_iui3-transfer-list-toolbar',
@@ -434,9 +416,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.0-dev.7",
+  "version": "3.0.0-dev.9",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -73,17 +73,15 @@
     "dev:styles": "yarn build:styles --watch"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.24.3",
-    "@tippyjs/react": "^4.2.6",
+    "@floating-ui/react": "^0.25.3",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",
     "react-table": "^7.1.0",
     "react-transition-group": "^4.4.2",
-    "tippy.js": "^6.3.7",
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.0.0-dev.7",
+    "@itwin/itwinui-css": "^2.0.0-dev.8",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@itwin/itwinui-variables": "3.0.0-dev.1",
     "@swc/cli": "^0.1.62",