@itwin/itwinui-react 3.0.11 → 3.1.0

package/esm/core/Carousel/Carousel.d.ts

@@ -42,18 +42,126 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
+            labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+                ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+            }, "as" | "children" | "content" | "portal" | keyof {
+                placement?: import("@floating-ui/utils").Placement | undefined;
+                visible?: boolean | undefined;
+                onVisibleChange?: ((visible: boolean) => void) | undefined;
+                autoUpdateOptions?: {
+                    ancestorScroll?: boolean | undefined;
+                    ancestorResize?: boolean | undefined;
+                    elementResize?: boolean | undefined;
+                    animationFrame?: boolean | undefined;
+                    layoutShift?: boolean | undefined;
+                } | undefined;
+                middleware?: {
+                    offset?: number | undefined;
+                    flip?: boolean | undefined;
+                    shift?: boolean | undefined;
+                    size?: boolean | undefined;
+                    autoPlacement?: boolean | undefined;
+                    hide?: boolean | undefined;
+                    inline?: boolean | undefined;
+                } | undefined;
+                reference?: HTMLElement | null | undefined;
+                ariaStrategy?: "label" | "description" | "none" | undefined;
+                id?: string | undefined;
+            }> & {
+                content: React.ReactNode;
+                children?: React.ReactNode;
+            } & import("../utils/index.js").PortalProps & {
+                placement?: import("@floating-ui/utils").Placement | undefined;
+                visible?: boolean | undefined;
+                onVisibleChange?: ((visible: boolean) => void) | undefined;
+                autoUpdateOptions?: {
+                    ancestorScroll?: boolean | undefined;
+                    ancestorResize?: boolean | undefined;
+                    elementResize?: boolean | undefined;
+                    animationFrame?: boolean | undefined;
+                    layoutShift?: boolean | undefined;
+                } | undefined;
+                middleware?: {
+                    offset?: number | undefined;
+                    flip?: boolean | undefined;
+                    shift?: boolean | undefined;
+                    size?: boolean | undefined;
+                    autoPlacement?: boolean | undefined;
+                    hide?: boolean | undefined;
+                    inline?: boolean | undefined;
+                } | undefined;
+                reference?: HTMLElement | null | undefined;
+                ariaStrategy?: "label" | "description" | "none" | undefined;
+                id?: string | undefined;
+            } & {
+                as?: "div" | undefined;
+            }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
         } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
+            labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+                ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+            }, "as" | "children" | "content" | "portal" | keyof {
+                placement?: import("@floating-ui/utils").Placement | undefined;
+                visible?: boolean | undefined;
+                onVisibleChange?: ((visible: boolean) => void) | undefined;
+                autoUpdateOptions?: {
+                    ancestorScroll?: boolean | undefined;
+                    ancestorResize?: boolean | undefined;
+                    elementResize?: boolean | undefined;
+                    animationFrame?: boolean | undefined;
+                    layoutShift?: boolean | undefined;
+                } | undefined;
+                middleware?: {
+                    offset?: number | undefined;
+                    flip?: boolean | undefined;
+                    shift?: boolean | undefined;
+                    size?: boolean | undefined;
+                    autoPlacement?: boolean | undefined;
+                    hide?: boolean | undefined;
+                    inline?: boolean | undefined;
+                } | undefined;
+                reference?: HTMLElement | null | undefined;
+                ariaStrategy?: "label" | "description" | "none" | undefined;
+                id?: string | undefined;
+            }> & {
+                content: React.ReactNode;
+                children?: React.ReactNode;
+            } & import("../utils/index.js").PortalProps & {
+                placement?: import("@floating-ui/utils").Placement | undefined;
+                visible?: boolean | undefined;
+                onVisibleChange?: ((visible: boolean) => void) | undefined;
+                autoUpdateOptions?: {
+                    ancestorScroll?: boolean | undefined;
+                    ancestorResize?: boolean | undefined;
+                    elementResize?: boolean | undefined;
+                    animationFrame?: boolean | undefined;
+                    layoutShift?: boolean | undefined;
+                } | undefined;
+                middleware?: {
+                    offset?: number | undefined;
+                    flip?: boolean | undefined;
+                    shift?: boolean | undefined;
+                    size?: boolean | undefined;
+                    autoPlacement?: boolean | undefined;
+                    hide?: boolean | undefined;
+                    inline?: boolean | undefined;
+                } | undefined;
+                reference?: HTMLElement | null | undefined;
+                ariaStrategy?: "label" | "description" | "none" | undefined;
+                id?: string | undefined;
+            } & {
+                as?: "div" | undefined;
+            }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
         } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -9,18 +9,126 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
+        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }, "as" | "children" | "content" | "portal" | keyof {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined;
+            id?: string | undefined;
+        }> & {
+            content: React.ReactNode;
+            children?: React.ReactNode;
+        } & import("../utils/index.js").PortalProps & {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined;
+            id?: string | undefined;
+        } & {
+            as?: "div" | undefined;
+        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
+        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }, "as" | "children" | "content" | "portal" | keyof {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined;
+            id?: string | undefined;
+        }> & {
+            content: React.ReactNode;
+            children?: React.ReactNode;
+        } & import("../utils/index.js").PortalProps & {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined;
+            id?: string | undefined;
+        } & {
+            as?: "div" | undefined;
+        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;

package/esm/core/ComboBox/ComboBoxInput.js

@@ -8,7 +8,7 @@ import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, }
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onClick: onClickProp, selectTags, size, ...rest } = props;
+    const { selectTags, size, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, popover, show, hide, } = useSafeContext(ComboBoxStateContext);
     const dispatch = useSafeContext(ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
@@ -121,21 +121,33 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         show,
         hide,
     ]);
+    /**
+     * This temporarily stores the state of `isOpen` before click event starts and resets it later.
+     * It is necessary because `isOpen` may have changed during the process of the click,
+     * e.g. because of focus, which could cause the menu to close immediately after opening.
+     */
+    const wasOpenBeforeClick = React.useRef(false);
+    const handlePointerDown = React.useCallback(() => {
+        wasOpenBeforeClick.current = isOpen;
+    }, [isOpen]);
     const handleClick = React.useCallback(() => {
-        if (!isOpen) {
+        if (!wasOpenBeforeClick.current) {
             show();
         }
         else {
             hide();
         }
-    }, [hide, isOpen, show]);
+        wasOpenBeforeClick.current = false;
+    }, [hide, show]);
     const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { ref: refs, onClick: mergeEventHandlers(onClickProp, handleClick), "aria-expanded": isOpen, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+        React.createElement(Input, { ref: refs, "aria-expanded": isOpen, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
                 : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, size: size, ...popover.getReferenceProps({
-                onKeyDown: mergeEventHandlers(onKeyDownProp, handleKeyDown),
                 ...rest,
+                onPointerDown: mergeEventHandlers(props.onPointerDown, handlePointerDown),
+                onClick: mergeEventHandlers(props.onClick, handleClick),
+                onKeyDown: mergeEventHandlers(props.onKeyDown, handleKeyDown),
             }) }),
         multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });

package/esm/core/FileUpload/FileUpload.d.ts

@@ -8,8 +8,10 @@ type FileUploadProps = {
     dragContent?: React.ReactNode;
     /**
      * Callback fired when files are dropped onto the component.
+     *
+     * The first argument is the `files` list, and the second argument is the underlying "drop" event.
      */
-    onFileDropped: (files: FileList) => void;
+    onFileDropped: (files: FileList, event: React.DragEvent) => void;
     /**
      * Component to wrap `FileUpload` around.
      * Either pass `FileUploadCard` (for default state) or a different component to wrap.

package/esm/core/FileUpload/FileUpload.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, useMergedRefs } from '../utils/index.js';
+import { Box, mergeEventHandlers } from '../utils/index.js';
 /**
  * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
@@ -12,11 +12,9 @@ import { Box, useMergedRefs } from '../utils/index.js';
  * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
-export const FileUpload = React.forwardRef((props, ref) => {
-    const { dragContent, children, onFileDropped, className, contentProps, ...rest } = props;
+export const FileUpload = React.forwardRef((props, forwardedRef) => {
+    const { dragContent, children, onFileDropped, contentProps, ...rest } = props;
     const [isDragActive, setIsDragActive] = React.useState(false);
-    const fileUploadRef = React.useRef(null);
-    const refs = useMergedRefs(fileUploadRef, ref);
     const onDragOverHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -33,8 +31,7 @@ export const FileUpload = React.forwardRef((props, ref) => {
         e.preventDefault();
         e.stopPropagation();
         // only set inactive if secondary target is outside the component
-        if (isDragActive &&
-            !fileUploadRef.current?.contains(e.relatedTarget)) {
+        if (isDragActive && !e.currentTarget?.contains(e.relatedTarget)) {
             setIsDragActive(false);
         }
     };
@@ -43,10 +40,10 @@ export const FileUpload = React.forwardRef((props, ref) => {
         e.stopPropagation();
         if (isDragActive) {
             setIsDragActive(false);
-            onFileDropped(e.dataTransfer?.files);
+            onFileDropped(e.dataTransfer?.files, e);
         }
     };
-    return (React.createElement(Box, { className: cx('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
+    return (React.createElement(Box, { ...rest, className: cx('iui-file-upload', { 'iui-drag': isDragActive }, props?.className), ref: forwardedRef, onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler), onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler), onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler), onDrop: mergeEventHandlers(props.onDrop, onDropHandler) },
         dragContent ? (children) : (React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-content', contentProps?.className) }, children)),
         dragContent && (React.createElement(Box, { as: 'div', ...contentProps, className: cx('iui-content', contentProps?.className) }, dragContent))));
 });

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -29,9 +29,63 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
      */
     Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
+        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }, "as" | "children" | "content" | "portal" | keyof {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined;
+            id?: string | undefined;
+        }> & {
+            content: React.ReactNode;
+            children?: React.ReactNode;
+        } & import("../utils/index.js").PortalProps & {
+            placement?: import("@floating-ui/utils").Placement | undefined;
+            visible?: boolean | undefined;
+            onVisibleChange?: ((visible: boolean) => void) | undefined;
+            autoUpdateOptions?: {
+                ancestorScroll?: boolean | undefined;
+                ancestorResize?: boolean | undefined;
+                elementResize?: boolean | undefined;
+                animationFrame?: boolean | undefined;
+                layoutShift?: boolean | undefined;
+            } | undefined;
+            middleware?: {
+                offset?: number | undefined;
+                flip?: boolean | undefined;
+                shift?: boolean | undefined;
+                size?: boolean | undefined;
+                autoPlacement?: boolean | undefined;
+                hide?: boolean | undefined;
+                inline?: boolean | undefined;
+            } | undefined;
+            reference?: HTMLElement | null | undefined;
+            ariaStrategy?: "label" | "description" | "none" | undefined;
+            id?: string | undefined;
+        } & {
+            as?: "div" | undefined;
+        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;

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

@@ -23,6 +23,21 @@ type PopoverOptions = {
      * @default true
      */
     closeOnOutsideClick?: boolean;
+    /**
+     * Middleware options.
+     *
+     * By default, `flip` and `shift` are enabled.
+     *
+     * @see https://floating-ui.com/docs/middleware
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
 };
 type PopoverInternalProps = {
     /**
@@ -43,19 +58,6 @@ type PopoverInternalProps = {
         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.
@@ -96,7 +98,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         update: () => void;
         floatingStyles: React.CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -125,6 +127,12 @@ type PopoverPublicProps = {
      * @default false
      */
     applyBackground?: boolean;
+    /**
+     * This is used to position the popover relative to a different element than the trigger.
+     *
+     * Recommended to use state to store this element, rather than a ref.
+     */
+    positionReference?: HTMLElement;
 } & PortalProps & PopoverOptions;
 /**
  * A utility component to help with positioning of floating content relative to a trigger.

package/esm/core/Popover/Popover.js

@@ -5,12 +5,13 @@
 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, } from '@floating-ui/react';
-import { Box, cloneElementWithRef, useControlledState, useId, useMergedRefs, } from '../utils/index.js';
+import { Box, cloneElementWithRef, useControlledState, useId, useIsomorphicLayoutEffect, useMergedRefs, } from '../utils/index.js';
 import { Portal } from '../utils/components/Portal.js';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider.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 { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, trigger = { click: true, hover: false, focus: false }, role, } = options;
+    const middleware = { flip: true, shift: true, ...options.middleware };
     const [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
     const floating = useFloating({
         placement,
@@ -81,7 +82,10 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     const { portal = true, 
     //
     // popover options
-    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, 
+    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, 
+    //
+    // extra props
+    positionReference, 
     //
     // dom props
     className, children, content, applyBackground = false, ...rest } = props;
@@ -91,11 +95,19 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
         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'];
+    useIsomorphicLayoutEffect(() => {
+        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,

package/esm/core/Table/Table.js

@@ -3,6 +3,7 @@
  * 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 cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
@@ -461,11 +462,19 @@ export const Table = (props) => {
                         updateStickyState();
                     }
                 }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined },
+                React.createElement(ShadowTemplate, null,
+                    React.createElement("slot", null),
+                    React.createElement("div", { "aria-hidden": true, style: {
+                            // This ensures that the table-body is always the same width as the table-header,
+                            // even if the table has no rows. See https://github.com/iTwin/iTwinUI/pull/1725
+                            width: headerRef.current?.scrollWidth,
+                            height: 0.1,
+                        } })),
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map((_, index) => getPreparedRow(index))))),
                 isLoading && data.length === 0 && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-row' },
-                    React.createElement(Box, { className: 'iui-table-cell', style: { justifyContent: 'center' } },
+                isLoading && data.length !== 0 && (React.createElement(Box, { className: 'iui-table-row', "data-iui-loading": 'true' },
+                    React.createElement(Box, { className: 'iui-table-cell' },
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })))),
                 !isLoading && data.length === 0 && !areFiltersSet && (React.createElement(Box, { as: 'div', ...emptyTableContentProps, className: cx('iui-table-empty', emptyTableContentProps?.className) },
                     React.createElement("div", null, emptyTableContent))),
@@ -476,3 +485,20 @@ export const Table = (props) => {
             paginatorRenderer?.(paginatorRendererProps))));
 };
 export default Table;
+// ----------------------------------------------------------------------------
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ */
+const ShadowTemplate = ({ children }) => {
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const attachShadowRef = React.useCallback((template) => {
+        const parent = template?.parentElement;
+        if (!template || !parent || parent.shadowRoot) {
+            return;
+        }
+        setShadowRoot(parent.attachShadow({ mode: 'open' }));
+        template.remove();
+    }, []);
+    return (React.createElement("template", { ref: attachShadowRef }, shadowRoot && ReactDOM.createPortal(children, shadowRoot)));
+};

package/esm/core/Tabs/Tabs.js

@@ -33,7 +33,7 @@ const TabList = React.forwardRef((props, ref) => {
     const isClient = useIsClient();
     const tablistRef = React.useRef(null);
     const [tablistSizeRef, tabsWidth] = useContainerWidth(type !== 'default');
-    const refs = useMergedRefs(ref, tablistRef, tablistSizeRef);
+    const refs = useMergedRefs(ref, tablistRef, tablistSizeRef, useScrollbarGutter());
     return (React.createElement(Box, { className: cx('iui-tabs', `iui-${type}`, {
             'iui-green': color === 'green',
             'iui-animated': type !== 'default' && isClient,
@@ -134,7 +134,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
             setActiveValue(value);
         }
     }, [activeValue, setActiveValue, value]);
-    return (React.createElement(ButtonBase, { className: cx('iui-tab', className), role: 'tab', tabIndex: isActive ? 0 : -1, "aria-selected": isActive, "aria-controls": `${idPrefix}-panel-${value}`, ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value}`, onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)), onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown), onFocus: mergeEventHandlers(props.onFocus, () => {
+    return (React.createElement(ButtonBase, { className: cx('iui-tab', className), role: 'tab', tabIndex: isActive ? 0 : -1, "aria-selected": isActive, "aria-controls": `${idPrefix}-panel-${value.replaceAll(' ', '-')}`, ref: useMergedRefs(tabRef, forwardedRef, setInitialActiveRef), ...rest, id: `${idPrefix}-tab-${value.replaceAll(' ', '-')}`, onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)), onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown), onFocus: mergeEventHandlers(props.onFocus, () => {
             tabRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
             if (focusActivationMode === 'auto' && !props.disabled) {
                 setActiveValue(value);
@@ -174,7 +174,7 @@ TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = React.forwardRef((props, ref) => {
     const { value, className, children, ...rest } = props;
     const { activeValue, idPrefix } = useSafeContext(TabsContext);
-    return (React.createElement(Box, { className: cx('iui-tabs-content', className), "aria-labelledby": `${idPrefix}-tab-${value}`, role: 'tabpanel', hidden: activeValue !== value ? true : undefined, ref: ref, ...rest, id: `${idPrefix}-panel-${value}` }, children));
+    return (React.createElement(Box, { className: cx('iui-tabs-content', className), "aria-labelledby": `${idPrefix}-tab-${value.replaceAll(' ', '-')}`, role: 'tabpanel', hidden: activeValue !== value ? true : undefined, ref: ref, ...rest, id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}` }, children));
 });
 TabsPanel.displayName = 'Tabs.Panel';
 const LegacyTabsComponent = React.forwardRef((props, forwardedRef) => {
@@ -321,3 +321,23 @@ export const Tabs = Object.assign(LegacyTabsComponent, {
 const TabsContext = React.createContext(undefined);
 const TabListContext = React.createContext(undefined);
 export default Tabs;
+// ----------------------------------------------------------------------------
+/**
+ * This conditionally adds `scrollbar-gutter: stable` only if the content overflows.
+ * This is a workaround to prevent layout shift that happens because of scrollbar width.
+ *
+ * @see https://github.com/iTwin/iTwinUI/issues/1627
+ */
+const useScrollbarGutter = () => {
+    return React.useCallback((element) => {
+        if (element) {
+            if (element.scrollHeight > element.clientHeight) {
+                element.style.scrollbarGutter = 'stable';
+                // Safari fallback
+                if (!CSS.supports('scrollbar-gutter: stable')) {
+                    element.style.overflowY = 'scroll';
+                }
+            }
+        }
+    }, []);
+};