@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/cjs/core/utils/components/Popover.d.ts

@@ -1,40 +1,125 @@
 import * as React from 'react';
-import type { TippyProps } from '@tippyjs/react';
-import type { Placement, Instance } from 'tippy.js';
-export declare type PopoverInstance = Instance;
-import '@itwin/itwinui-css/css/utils.css';
-export declare type PopoverProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../index.js';
+import type { PortalProps } from './Portal.js';
+type PopoverOptions = {
+    /**
+     * Placement of the popover content.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
     /**
      * Controlled flag for whether the popover is visible.
      */
     visible?: boolean;
     /**
-     * Determines the events that cause the popover to show.
-     * Should not be used when `visible` is set.
-     * @see [tippy.js trigger prop](https://atomiks.github.io/tippyjs/v6/all-props/#trigger)
+     * Callback invoked every time the popover visibility changes as a result
+     * of internal logic. Should be used alongside `visible` prop.
      */
-    trigger?: string;
+    onVisibleChange?: (visible: boolean) => void;
     /**
-     * Placement of the popover content.
-     * @default 'bottom-start'
-     * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
+     * If true, the popover will close when clicking outside it.
      */
-    placement?: Placement;
-} & Omit<TippyProps, 'placement' | 'trigger' | 'visible'>;
-/**
- * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
- * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
- * @private
- */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "className" | "role" | "offset" | "children" | "content" | "plugins" | "theme" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
-/**
- * Plugin to hide Popover when either Esc key is pressed,
- * or when the content inside is not tabbable and Tab key is pressed.
- */
-export declare const hideOnEscOrTab: {
-    fn(instance: Instance): {
-        onShow(): void;
-        onHide(): void;
+    closeOnOutsideClick?: boolean;
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
+};
+type PopoverInternalProps = {
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want popover to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Middleware options.
+     *
+     * @see https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
     };
+    /**
+     * By default, the popover will only open on click.
+     * `hover` and `focus` can be manually specified as triggers.
+     */
+    trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
+    role?: 'dialog' | 'menu' | 'listbox';
+};
+export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null; /**
+         * Middleware options.
+         *
+         * @see https://floating-ui.com/docs/offset
+         */
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    open: boolean | undefined;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
+type PopoverPublicProps = {
+    content?: React.ReactNode;
+    children?: React.ReactNode;
+    applyBackground?: boolean;
+} & PortalProps & PopoverOptions;
+/**
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
+ */
+export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;

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

@@ -1,158 +1,170 @@
-"use strict";
+'use strict';
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Popover = exports.usePopover = void 0;
+const tslib_1 = require('tslib');
+const React = tslib_1.__importStar(require('react'));
+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,
+    }),
+    (0, react_1.useHover)(floating.context, {
+      enabled: !!trigger.hover,
+      delay: 100,
+      handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
+    }),
+    (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,
+        },
+      }),
+    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      ...interactions,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, interactions, getFloatingProps, floating],
+  );
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hideOnEscOrTab = exports.Popover = void 0;
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("@tippyjs/react"));
-const index_js_1 = require("../hooks/index.js");
-require("@itwin/itwinui-css/css/utils.css");
-const ThemeContext_js_1 = require("../../ThemeProvider/ThemeContext.js");
+exports.usePopover = usePopover;
 /**
- * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
- * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
- * @private
+ * A utility component to help with positioning of floating content.
+ * Built on top of [`floating-ui`](https://floating-ui.com/)
  */
-exports.Popover = React.forwardRef((props, ref) => {
-    var _a;
-    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),
-        }),
-    };
-    // Plugin to remove tabindex from tippy, to prevent focus ring from unintentionally showing.
-    const removeTabIndex = {
-        fn: () => ({
-            onCreate: (instance) => {
-                var _a;
-                (_a = instance.popper.firstElementChild) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
-            },
-        }),
-    };
-    const computedProps = {
-        allowHTML: true,
-        animation: false,
-        appendTo: (el) => (themeInfo === null || themeInfo === void 0 ? void 0 : themeInfo.rootRef.current) || 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 } },
-                ...(((_a = props.popperOptions) === null || _a === void 0 ? void 0 : _a.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) => {
-                    var _a, _b;
-                    e.stopPropagation();
-                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+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,
                 },
-            })
-            : props.content;
-        computedProps.content = mounted ? clonedContent : '';
-    }
-    return React.createElement(react_1.default, { ...computedProps, ref: refs });
+                content,
+              ),
+            ),
+          ),
+        )
+      : null,
+  );
 });
-/**
- * Plugin to hide Popover when either Esc key is pressed,
- * or when the content inside is not tabbable and Tab key is pressed.
- */
-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 === null || el === void 0 ? void 0 : 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.default = exports.Popover;

package/cjs/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/cjs/core/utils/components/Portal.js

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Portal = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * 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 ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
+const dom_js_1 = require('../functions/dom.js');
+const useIsClient_js_1 = require('../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
+ */
+const Portal = (props) => {
+  const { portal = true, children } = props;
+  const isClient = (0, useIsClient_js_1.useIsClient)();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+exports.Portal = Portal;
+// ----------------------------------------------------------------------------
+const usePortalTo = (portal) => {
+  const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
+  if (typeof portal === 'boolean') {
+    return portal
+      ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body
+      : null;
+  }
+  return typeof portal.to === 'function' ? portal.to() : portal.to;
+};

package/cjs/core/utils/components/Resizer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ResizerProps = {
+export type ResizerProps = {
     /**
      * Ref of the element that is being resized.
      */
@@ -32,5 +32,5 @@ export declare type ResizerProps = {
  *   </div>
  * );
  */
-export declare const Resizer: (props: ResizerProps) => JSX.Element;
+export declare const Resizer: (props: ResizerProps) => React.JSX.Element;
 export default Resizer;