@itwin/itwinui-react 3.0.11 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 3.1.1
+
+### Patch Changes
+
+- [#1738](https://github.com/iTwin/iTwinUI/pull/1738): Added missing `sideEffects` to prevent tree-shaking `styles.css` in webpack.
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1731](https://github.com/iTwin/iTwinUI/pull/1731): ThemeProvider will now correctly inherit theme changes from a v2 ancestor.
+- [#1710](https://github.com/iTwin/iTwinUI/pull/1710): Added new `middleware` and `positionReference` props to `Popover` for more control over the positioning logic.
+- [#1676](https://github.com/iTwin/iTwinUI/pull/1676): Added `size="small` prop to `Tree`, and decreased indentations on default size tree.
+- [#1707](https://github.com/iTwin/iTwinUI/pull/1707): `FileUpload`'s `onFileDropped` prop will now expose the underlying drop event as the second argument. This can be useful for accessing information about the directory structure.
+- [#1709](https://github.com/iTwin/iTwinUI/pull/1709): `IconButton`s inside a vertical `ButtonGroup` will now show tooltips on the right side by default, to avoid obscuring adjacent buttons in the group. The behavior of these tooltips can also be customized using the new `labelProps` prop, which can contain `labelProps.placement`, etc.
+
+### Patch Changes
+
+- [#1733](https://github.com/iTwin/iTwinUI/pull/1733): Fixed an overflow-related layout shift in vertical `Tabs`.
+- [#1725](https://github.com/iTwin/iTwinUI/pull/1725): Table is now scrollable horizontally even when no rows are present.
+
 ## 3.0.11
 
 ### Patch Changes

package/README.md

@@ -78,7 +78,7 @@ const Page = () => (
 
 Check out this template for a live interactive demo:
 
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
+[![Edit in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.io/github/iTwin/iTwinUI/tree/main/minimal-sandbox?file=/src/App.tsx)
 
 ---
 

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
+export declare const ButtonGroupContext: React.Context<string | undefined>;
 type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = void 0;
+exports.ButtonGroup = exports.ButtonGroupContext = void 0;
 const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
@@ -10,6 +10,10 @@ const React = tslib_1.__importStar(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 const react_1 = require("@floating-ui/react");
+// ----------------------------------------------------------------------------
+/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
+exports.ButtonGroupContext = React.createContext(undefined);
+exports.ButtonGroupContext.displayName = 'ButtonGroupContext';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -44,25 +48,26 @@ exports.ButtonGroup = React.forwardRef((props, ref) => {
     const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
     const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
     return (React.createElement(react_1.FloatingDelayGroup, { delay: { open: 50, close: 250 } },
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', {
-                'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-            }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
-            if (!(visibleCount < items.length)) {
-                return items;
-            }
-            const overflowStart = overflowPlacement === 'start'
-                ? items.length - visibleCount
-                : visibleCount - 1;
-            return (React.createElement(React.Fragment, null,
-                overflowButton &&
-                    overflowPlacement === 'start' &&
-                    overflowButton(overflowStart),
-                overflowPlacement === 'start'
-                    ? items.slice(overflowStart + 1)
-                    : items.slice(0, Math.max(0, overflowStart)),
-                overflowButton &&
-                    overflowPlacement === 'end' &&
-                    overflowButton(overflowStart)));
-        })())));
+        React.createElement(exports.ButtonGroupContext.Provider, { value: orientation },
+            React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-button-group', {
+                    'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
+                }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
+                if (!(visibleCount < items.length)) {
+                    return items;
+                }
+                const overflowStart = overflowPlacement === 'start'
+                    ? items.length - visibleCount
+                    : visibleCount - 1;
+                return (React.createElement(React.Fragment, null,
+                    overflowButton &&
+                        overflowPlacement === 'start' &&
+                        overflowButton(overflowStart),
+                    overflowPlacement === 'start'
+                        ? items.slice(overflowStart + 1)
+                        : items.slice(0, Math.max(0, overflowStart)),
+                    overflowButton &&
+                        overflowPlacement === 'end' &&
+                        overflowButton(overflowStart)));
+            })()))));
 });
 exports.default = exports.ButtonGroup;

package/cjs/core/Buttons/IconButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import type { ButtonProps } from './Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type IconButtonProps = {
@@ -11,6 +12,11 @@ export type IconButtonProps = {
      * Name of the button, shown in a tooltip and exposed to assistive technologies.
      */
     label?: React.ReactNode;
+    /**
+     * Props passed to the Tooltip that contains the `label`.
+     * Can be used for customizing the tooltip's `placement`, etc.
+     */
+    labelProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'content' | 'reference' | 'ariaStrategy' | 'children'>;
     /**
      * Passes props to IconButton icon.
      */

package/cjs/core/Buttons/IconButton.js

@@ -11,6 +11,7 @@ const React = tslib_1.__importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const Tooltip_js_1 = require("../Tooltip/Tooltip.js");
 const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
+const ButtonGroup_js_1 = require("../ButtonGroup/ButtonGroup.js");
 /**
  * Icon button
  * @example
@@ -19,10 +20,11 @@ const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 exports.IconButton = React.forwardRef((props, ref) => {
-    const { isActive, children, styleType = 'default', size, className, label, iconProps, ...rest } = props;
+    const { isActive, children, styleType = 'default', size, className, label, iconProps, labelProps, ...rest } = props;
+    const buttonGroupOrientation = React.useContext(ButtonGroup_js_1.ButtonGroupContext);
     const button = (React.createElement(index_js_1.ButtonBase, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, ...rest },
         React.createElement(index_js_1.Box, { as: 'span', "aria-hidden": true, ...iconProps, className: (0, classnames_1.default)('iui-button-icon', iconProps?.className) }, children),
         label ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, label) : null));
-    return label ? (React.createElement(Tooltip_js_1.Tooltip, { content: label, ariaStrategy: 'none' }, button)) : (button);
+    return label ? (React.createElement(Tooltip_js_1.Tooltip, { placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top', ...labelProps, content: label, ariaStrategy: 'none' }, button)) : (button);
 });
 exports.default = exports.IconButton;

package/cjs/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/cjs/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/cjs/core/ComboBox/ComboBoxInput.js

@@ -12,7 +12,7 @@ const index_js_1 = require("../utils/index.js");
 const ComboBoxMultipleContainer_js_1 = require("./ComboBoxMultipleContainer.js");
 const helpers_js_1 = require("./helpers.js");
 exports.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, } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
@@ -125,21 +125,33 @@ exports.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] = (0, index_js_1.useContainerWidth)();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input_js_1.Input, { ref: refs, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, handleClick), "aria-expanded": isOpen, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+        React.createElement(Input_js_1.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: (0, index_js_1.mergeEventHandlers)(onKeyDownProp, handleKeyDown),
                 ...rest,
+                onPointerDown: (0, index_js_1.mergeEventHandlers)(props.onPointerDown, handlePointerDown),
+                onClick: (0, index_js_1.mergeEventHandlers)(props.onClick, handleClick),
+                onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, handleKeyDown),
             }) }),
         multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });

package/cjs/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/cjs/core/FileUpload/FileUpload.js

@@ -16,11 +16,9 @@ const index_js_1 = require("../utils/index.js");
  * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
-exports.FileUpload = React.forwardRef((props, ref) => {
-    const { dragContent, children, onFileDropped, className, contentProps, ...rest } = props;
+exports.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 = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
     const onDragOverHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -37,8 +35,7 @@ exports.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);
         }
     };
@@ -47,10 +44,10 @@ exports.FileUpload = React.forwardRef((props, ref) => {
         e.stopPropagation();
         if (isDragActive) {
             setIsDragActive(false);
-            onFileDropped(e.dataTransfer?.files);
+            onFileDropped(e.dataTransfer?.files, e);
         }
     };
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
+    return (React.createElement(index_js_1.Box, { ...rest, className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, props?.className), ref: forwardedRef, onDragEnter: (0, index_js_1.mergeEventHandlers)(props.onDragEnter, onDragEnterHandler), onDragOver: (0, index_js_1.mergeEventHandlers)(props.onDragOver, onDragOverHandler), onDragLeave: (0, index_js_1.mergeEventHandlers)(props.onDragLeave, onDragLeaveHandler), onDrop: (0, index_js_1.mergeEventHandlers)(props.onDrop, onDropHandler) },
         dragContent ? (children) : (React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-content', contentProps?.className) }, children)),
         dragContent && (React.createElement(index_js_1.Box, { as: 'div', ...contentProps, className: (0, classnames_1.default)('iui-content', contentProps?.className) }, dragContent))));
 });

package/cjs/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/cjs/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.