@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/Overlay/Overlay.js

@@ -1,78 +1,51 @@
-/*---------------------------------------------------------------------------------------------
- * 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 * 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 React.createElement(
+    OverlayWrapper,
+    {
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(OverlayOverlay, null, content),
+    React.createElement(OverlayHiddenContent, null, 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 React.createElement(
+    Box,
+    {
+      inert: '',
+      ref: ref,
+      ...rest,
+    },
+    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 = {
     /**