@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/Overlay/Overlay.js

@@ -1,78 +1,52 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
 import { Box, polymorphic } from '../../utils/index.js';
-// --------------------------------------------------------------------------------
 const OverlayComponent = React.forwardRef((props, forwardedRef) => {
-    const { content, children, ...rest } = props;
-    return (React.createElement(OverlayWrapper, { ref: forwardedRef, ...rest },
-        React.createElement(OverlayOverlay, null, content),
-        React.createElement(OverlayHiddenContent, null, children)));
+  const { content, children, ...rest } = props;
+  return _jsxs(OverlayWrapper, {
+    ref: forwardedRef,
+    ...rest,
+    children: [
+      _jsx(OverlayOverlay, {
+        children: content,
+      }),
+      _jsx(OverlayHiddenContent, {
+        children: children,
+      }),
+    ],
+  });
 });
 OverlayComponent.displayName = 'Overlay';
-// --------------------------------------------------------------------------------
 const OverlayHiddenContent = React.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    useInertPolyfill();
-    return (React.createElement(Box, { inert: '', ref: ref, ...rest }, children));
+  const { children, ...rest } = props;
+  useInertPolyfill();
+  return _jsx(Box, {
+    inert: '',
+    ref: ref,
+    ...rest,
+    children: children,
+  });
 });
 OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
-// --------------------------------------------------------------------------------
 const OverlayOverlay = polymorphic('iui-overlay');
 OverlayOverlay.displayName = 'Overlay.Overlay';
-// --------------------------------------------------------------------------------
 const OverlayWrapper = polymorphic('iui-overlay-wrapper');
 OverlayWrapper.displayName = 'Overlay.Wrapper';
-// --------------------------------------------------------------------------------
-/**
- * The Overlay component can be used to hide some UI while its content is loading or revalidating,
- * and display a loading indicator on top of it.
- *
- * The hidden content gets blurred and becomes inert so it cannot be interacted with.
- *
- * @example
- * <Overlay content="loading…">
- *   content beneath the overlay… (text, img, etc.)
- * </Overlay>
- *
- * @example
- * <Overlay.Wrapper>
- *   <Overlay.Overlay>
- *     loading…
- *   <Overlay.Overlay>
- *   <Overlay.HiddenContent>
- *     content beneath the overlay… (text, img, etc.)
- *   <Overlay.HiddenContent />
- * </Overlay.Wrapper>
- */
 export const Overlay = Object.assign(OverlayComponent, {
-    /**
-     * The main component is a wrapper to hold the
-     * `Overlay.HiddenContent` and `Overlay.Overlay`.
-     */
-    Wrapper: OverlayWrapper,
-    /**
-     * `Overlay.HiddenContent` houses page elements that are blurred by the
-     * Overlay. These elements will become inert when the overlay is active.
-     */
-    HiddenContent: OverlayHiddenContent,
-    /**
-     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
-     * any arbitrary content like a progress indicator and loading message.
-     */
-    Overlay: OverlayOverlay,
+  Wrapper: OverlayWrapper,
+  HiddenContent: OverlayHiddenContent,
+  Overlay: OverlayOverlay,
 });
 const useInertPolyfill = () => {
-    const loaded = React.useRef(false);
-    const modulePath = 'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
-    React.useEffect(() => {
-        (async () => {
-            if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
-                await import(/* webpackIgnore: true */ /* @vite-ignore */ modulePath);
-                loaded.current = true;
-            }
-        })();
-    }, []);
+  const loaded = React.useRef(false);
+  const modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  React.useEffect(() => {
+    (async () => {
+      if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
+        await import(modulePath);
+        loaded.current = true;
+      }
+    })();
+  }, []);
 };

package/esm/core/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Placement, UseListNavigationProps, ReferenceType, UseFloatingOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps } from '@floating-ui/react';
+import type { Placement, UseFloatingOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps } from '@floating-ui/react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import type { PortalProps } from '../../utils/components/Portal.js';
 type PopoverOptions = {
@@ -62,29 +62,24 @@ type PopoverInternalProps = {
      * By default, only the click and dismiss interactions/triggers are enabled.
      * Explicitly pass `false` to disable the defaults.
      *
-     * Pass a boolean to enable/disable any of the supported interactions.
-     * Alternatively, pass an object to override the default props that the Popover sets for an interaction/trigger.
-     *
-     * When additional parameters are _required_ for an interaction/trigger, an object must be passed to enable it.
-     * Booleans will not be allowed in this case.
+     * Pass a boolean or an object to enable/disable any of the supported interactions.
+     * The passed objects can be used to override the default props that the Popover sets for an interaction/trigger.
      *
      * @example
-     * <Popover
-     *   interactions={{
+     * const popover = usePopover({
+     *   interactions: {
      *     click: false,
      *     focus: true,
      *     hover: { move: false },
-     *     listNavigation: { … },
-     *   }}
+     *   }
      *   // …
-     * >…</Popover>
+     * });
      */
     interactions?: {
-        click?: boolean | UseClickProps;
-        dismiss?: boolean | UseDismissProps;
-        hover?: boolean | UseHoverProps<ReferenceType>;
-        focus?: boolean | UseFocusProps;
-        listNavigation?: UseListNavigationProps;
+        click?: boolean | Omit<UseClickProps, 'enabled'>;
+        dismiss?: boolean | Omit<UseDismissProps, 'enabled'>;
+        hover?: boolean | Omit<UseHoverProps, 'enabled'>;
+        focus?: boolean | Omit<UseFocusProps, 'enabled'>;
     };
     role?: 'dialog' | 'menu' | 'listbox';
     /**
@@ -92,6 +87,8 @@ type PopoverInternalProps = {
      */
     matchWidth?: boolean;
 } & Omit<UseFloatingOptions, 'middleware' | 'placement'>;
+/** Stores the current open/closed state of the popover. */
+export declare const PopoverOpenContext: React.Context<boolean | undefined>;
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
     strategy: import("@floating-ui/utils").Strategy;
@@ -106,37 +103,33 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         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<ReferenceType>;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
         reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
-    } & import("@floating-ui/react").ExtendedElements<ReferenceType>;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
-        x: number;
-        y: number;
         placement: Placement;
         strategy: import("@floating-ui/utils").Strategy;
+        x: number;
+        y: number;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
         update: () => void;
         floatingStyles: React.CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => 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<ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<ReferenceType>;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
+    open: boolean;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
-        active?: boolean | undefined;
-        selected?: boolean | undefined;
-    }) | undefined) => Record<string, unknown>;
-    open: boolean | undefined;
-    onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
 type PopoverPublicProps = {
     /**

package/esm/core/Popover/Popover.js

@@ -1,175 +1,282 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
 import * as React from 'react';
 import cx from 'classnames';
-import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, useFloatingTree, useListNavigation, } from '@floating-ui/react';
-import { Box, ShadowRoot, cloneElementWithRef, useControlledState, useId, useLayoutEffect, useMergedRefs, } from '../../utils/index.js';
+import {
+  useFloating,
+  useClick,
+  useDismiss,
+  useInteractions,
+  size,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  autoPlacement,
+  inline,
+  hide,
+  FloatingFocusManager,
+  useHover,
+  useFocus,
+  safePolygon,
+  useRole,
+  FloatingPortal,
+  useFloatingTree,
+} from '@floating-ui/react';
+import {
+  Box,
+  ShadowRoot,
+  cloneElementWithRef,
+  mergeEventHandlers,
+  useControlledState,
+  useId,
+  useLayoutEffect,
+  useMergedRefs,
+} from '../../utils/index.js';
 import { usePortalTo } from '../../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
-// ----------------------------------------------------------------------------
+export const PopoverOpenContext = React.createContext(undefined);
 export const usePopover = (options) => {
-    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
-    const mergedInteractions = {
-        ...{
-            click: true,
-            dismiss: true,
-            hover: false,
-            focus: false,
-            listNavigation: undefined,
-        },
-        ...interactionsProp,
-    };
-    const tree = useFloatingTree();
-    const middleware = React.useMemo(() => ({ flip: true, shift: true, ...options.middleware }), [options.middleware]);
-    const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
-    const floating = useFloating({
-        placement,
-        open,
-        onOpenChange,
-        whileElementsMounted: React.useMemo(() => 
-        // autoUpdate is expensive and should only be called when the popover is open
-        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined, [autoUpdateOptions, open]),
-        ...rest,
-        middleware: React.useMemo(() => [
-            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), [matchWidth, middleware]),
-    });
-    const interactions = useInteractions([
-        useClick(floating.context, {
-            enabled: !!mergedInteractions.click,
-            ...mergedInteractions.click,
-        }),
-        useDismiss(floating.context, {
-            enabled: !!mergedInteractions.dismiss,
-            outsidePress: closeOnOutsideClick,
-            bubbles: tree != null,
-            ...mergedInteractions.dismiss,
-        }),
-        useHover(floating.context, {
-            enabled: !!mergedInteractions.hover,
-            delay: 100,
-            handleClose: safePolygon({
-                buffer: 1,
-                blockPointerEvents: true,
+  const {
+    placement = 'bottom-start',
+    visible,
+    onVisibleChange,
+    closeOnOutsideClick,
+    autoUpdateOptions,
+    matchWidth,
+    interactions: interactionsProp,
+    role,
+    ...rest
+  } = options;
+  const mergedInteractions = React.useMemo(
+    () => ({
+      ...{
+        click: true,
+        dismiss: true,
+        hover: false,
+        focus: false,
+      },
+      ...interactionsProp,
+    }),
+    [interactionsProp],
+  );
+  const tree = useFloatingTree();
+  const middleware = React.useMemo(
+    () => ({
+      flip: true,
+      shift: true,
+      ...options.middleware,
+    }),
+    [options.middleware],
+  );
+  const [open, onOpenChange] = useControlledState(
+    false,
+    visible,
+    onVisibleChange,
+  );
+  const floating = useFloating({
+    placement,
+    open,
+    onOpenChange,
+    whileElementsMounted: React.useMemo(
+      () =>
+        open ? (...args) => autoUpdate(...args, autoUpdateOptions) : undefined,
+      [autoUpdateOptions, open],
+    ),
+    ...rest,
+    middleware: React.useMemo(
+      () =>
+        [
+          middleware.offset !== undefined && offset(middleware.offset),
+          middleware.flip && flip(),
+          middleware.shift && shift(),
+          matchWidth &&
+            size({
+              apply: ({ rects }) => {
+                setReferenceWidth(rects.reference.width);
+              },
             }),
-            move: false,
-            ...mergedInteractions.hover,
-        }),
-        useFocus(floating.context, {
-            enabled: !!mergedInteractions.focus,
-            ...mergedInteractions.focus,
-        }),
-        useRole(floating.context, { role: 'dialog', enabled: !!role }),
-        useListNavigation(floating.context, {
-            enabled: !!mergedInteractions.listNavigation,
-            ...mergedInteractions.listNavigation,
-        }),
-    ]);
-    const [referenceWidth, setReferenceWidth] = React.useState();
-    const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
+          middleware.autoPlacement && autoPlacement(),
+          middleware.inline && inline(),
+          middleware.hide && hide(),
+        ].filter(Boolean),
+      [matchWidth, middleware],
+    ),
+  });
+  const interactions = useInteractions([
+    useClick(floating.context, {
+      enabled: !!mergedInteractions.click,
+      ...mergedInteractions.click,
+    }),
+    useDismiss(floating.context, {
+      enabled: !!mergedInteractions.dismiss,
+      outsidePress: closeOnOutsideClick,
+      bubbles: tree != null,
+      ...mergedInteractions.dismiss,
+    }),
+    useHover(floating.context, {
+      enabled: !!mergedInteractions.hover,
+      delay: 100,
+      handleClose: safePolygon({
+        buffer: 1,
+        blockPointerEvents: true,
+      }),
+      move: false,
+      ...mergedInteractions.hover,
+    }),
+    useFocus(floating.context, {
+      enabled: !!mergedInteractions.focus,
+      ...mergedInteractions.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,
+          ...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]);
+      }),
+    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+  );
+  const getReferenceProps = React.useCallback(
+    (userProps) =>
+      interactions.getReferenceProps({
+        ...userProps,
+        onClick: mergeEventHandlers(userProps?.onClick, () => {
+          if (!!mergedInteractions.click && visible) {
+            onOpenChange(false);
+          }
+        }),
+      }),
+    [interactions, mergedInteractions.click, visible, onOpenChange],
+  );
+  return React.useMemo(
+    () => ({
+      open,
+      onOpenChange,
+      getReferenceProps,
+      getFloatingProps,
+      ...floating,
+    }),
+    [open, onOpenChange, getFloatingProps, floating, getReferenceProps],
+  );
 };
-/**
- * A utility component to help with positioning of floating content relative to a trigger.
- * Built on top of [`floating-ui`](https://floating-ui.com/).
- *
- * @see https://itwinui.bentley.com/docs/popover
- *
- * @example
- * <Popover content='This is a popover'>
- *   <Button>Show popover</Button>
- * </Popover>
- */
 export const Popover = React.forwardRef((props, forwardedRef) => {
-    const { portal = true, 
-    //
-    // popover options
-    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, 
-    //
-    // extra props
-    positionReference, 
-    //
-    // dom props
-    className, children, content, applyBackground = false, ...rest } = props;
-    const popover = usePopover({
-        visible,
-        placement,
-        onVisibleChange,
-        closeOnOutsideClick,
-        role: 'dialog',
-        middleware,
-    });
-    const [popoverElement, setPopoverElement] = React.useState();
-    const popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
-    const triggerId = `${useId()}-trigger`;
-    const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-    useLayoutEffect(() => {
-        if (!positionReference) {
-            return;
-        }
-        popover.refs.setPositionReference(positionReference);
-        return () => void popover.refs.setPositionReference(null);
-    }, [popover.refs, positionReference]);
-    return (React.createElement(React.Fragment, null,
-        cloneElementWithRef(children, (children) => ({
-            id: children.props.id || triggerId,
-            ...popover.getReferenceProps(children.props),
-            ref: popover.refs.setReference,
+  const {
+    portal = true,
+    visible,
+    placement = 'bottom-start',
+    onVisibleChange,
+    closeOnOutsideClick = true,
+    middleware,
+    positionReference,
+    className,
+    children,
+    content,
+    applyBackground = false,
+    ...rest
+  } = props;
+  const popover = usePopover({
+    visible,
+    placement,
+    onVisibleChange,
+    closeOnOutsideClick,
+    role: 'dialog',
+    middleware,
+  });
+  const [popoverElement, setPopoverElement] = React.useState();
+  const popoverRef = useMergedRefs(
+    popover.refs.setFloating,
+    forwardedRef,
+    setPopoverElement,
+  );
+  const triggerId = `${useId()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+  useLayoutEffect(() => {
+    if (!positionReference) {
+      return;
+    }
+    popover.refs.setPositionReference(positionReference);
+    return () => void popover.refs.setPositionReference(null);
+  }, [popover.refs, positionReference]);
+  return _jsxs(_Fragment, {
+    children: [
+      _jsx(PopoverOpenContext.Provider, {
+        value: popover.open,
+        children: cloneElementWithRef(children, (children) => ({
+          id: children.props.id || triggerId,
+          ...popover.getReferenceProps(children.props),
+          ref: popover.refs.setReference,
         })),
-        popover.open ? (React.createElement(PopoverPortal, { portal: portal },
-            React.createElement(ThemeProvider, { portalContainer: popoverElement },
-                React.createElement(DisplayContents, null),
-                React.createElement(FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
-                    React.createElement(Box, { className: cx({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
-                            ? popover.refs.domReference.current?.id
-                            : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content))))) : null));
+      }),
+      popover.open
+        ? _jsx(PopoverPortal, {
+            portal: portal,
+            children: _jsxs(ThemeProvider, {
+              portalContainer: popoverElement,
+              children: [
+                _jsx(DisplayContents, {}),
+                _jsx(FloatingFocusManager, {
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
+                  children: _jsx(Box, {
+                    className: cx(
+                      {
+                        'iui-popover-surface': applyBackground,
+                      },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                    children: content,
+                  }),
+                }),
+              ],
+            }),
+          })
+        : null,
+    ],
+  });
 });
-// ----------------------------------------------------------------------------
-const PopoverPortal = ({ children, portal = true, }) => {
-    const portalTo = usePortalTo(portal);
-    return (React.createElement(FloatingPortal, { root: portalTo },
-        React.createElement(DisplayContents, null),
-        children));
+const PopoverPortal = ({ children, portal = true }) => {
+  const portalTo = usePortalTo(portal);
+  return _jsxs(
+    FloatingPortal,
+    {
+      root: portalTo,
+      children: [_jsx(DisplayContents, {}), children],
+    },
+    portalTo?.id,
+  );
 };
-// ----------------------------------------------------------------------------
-/** Applies `display: contents` to the parent div. */
 const DisplayContents = React.memo(() => {
-    return (React.createElement(ShadowRoot, { css: `
+  return _jsx(ShadowRoot, {
+    css: `
         :host {
           display: contents;
         }
-      ` },
-        React.createElement("slot", null)));
+      `,
+    children: _jsx('slot', {}),
+  });
 });