@itwin/itwinui-react 3.7.3 → 3.8.0

package/cjs/core/utils/hooks/useSyncExternalStore.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncExternalStore = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const _React = React; // prevent bundlers from stripping the namespace import
+/**
+ * Wrapper around `React.useSyncExternalStore` that uses a shim for React 17.
+ */
+exports.useSyncExternalStore = _React.useSyncExternalStore || useSyncExternalStoreShim;
+// ----------------------------------------------------------------------------
+/**
+ * The shim below is adapted from React's source to make it ESM-compatible.
+ *
+ * Note: This does not use `getServerSnapshot` at all, because there is
+ * apparently no way to check "hydrating" state in pre-18.
+ *
+ * @see https://github.com/facebook/react/tree/main/packages/use-sync-external-store
+ */
+function useSyncExternalStoreShim(subscribe, getSnapshot) {
+    const value = getSnapshot();
+    const [{ instance }, forceUpdate] = React.useState({
+        instance: { value, getSnapshot },
+    });
+    React.useLayoutEffect(() => {
+        instance.value = value;
+        instance.getSnapshot = getSnapshot;
+        if (!Object.is(value, getSnapshot())) {
+            forceUpdate({ instance });
+        }
+    }, [subscribe, value, getSnapshot]); // eslint-disable-line
+    React.useEffect(() => {
+        const synchronize = () => {
+            if (!Object.is(instance.value, instance.getSnapshot())) {
+                forceUpdate({ instance });
+            }
+        };
+        synchronize();
+        return subscribe(synchronize);
+    }, [subscribe]); // eslint-disable-line
+    return value;
+}

package/cjs/core/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './props.js';
 export * from './color/index.js';
 export * from './icons/index.js';
 export * from './types.js';
+export * from './providers/index.js';

package/cjs/core/utils/index.js

@@ -25,3 +25,4 @@ __exportStar(require("./props.js"), exports);
 __exportStar(require("./color/index.js"), exports);
 __exportStar(require("./icons/index.js"), exports);
 __exportStar(require("./types.js"), exports);
+__exportStar(require("./providers/index.js"), exports);

package/cjs/core/utils/providers/HydrationProvider.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * Hook that returns the hydration status of the app.
+ *
+ * @returns one of the following values:
+ * - `"hydrated"` after hydration is *definitely* complete (or is a pure client render)
+ * - `"hydrating"` if we know for sure that hydration is happening (in React 18)
+ * - `undefined` if the hydration status is unknown
+ *
+ * @private
+ */
+export declare const useHydration: () => "hydrated" | "hydrating" | undefined;
+/** @private */
+export declare const HydrationProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/cjs/core/utils/providers/HydrationProvider.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HydrationProvider = exports.useHydration = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const index_js_1 = require("../hooks/index.js");
+const HydrationContext = React.createContext(false);
+const noopSubscribe = () => () => { };
+const isServer = typeof window === 'undefined';
+/**
+ * Hook that returns the hydration status of the app.
+ *
+ * @returns one of the following values:
+ * - `"hydrated"` after hydration is *definitely* complete (or is a pure client render)
+ * - `"hydrating"` if we know for sure that hydration is happening (in React 18)
+ * - `undefined` if the hydration status is unknown
+ *
+ * @private
+ */
+const useHydration = () => {
+    // Returns true only if getServerSnapshot is called on the client.
+    // In React 18, this is true during hydration.
+    const hydrating = (0, index_js_1.useSyncExternalStore)(noopSubscribe, () => false, () => !isServer);
+    // Returns true after hydration is complete (in all React versions).
+    const hydrated = React.useContext(HydrationContext);
+    const hydratedFallback = (0, index_js_1.useIsClient)();
+    if (hydrated || hydratedFallback) {
+        return 'hydrated';
+    }
+    else if (hydrating) {
+        return 'hydrating';
+    }
+    return undefined;
+};
+exports.useHydration = useHydration;
+/** @private */
+const HydrationProvider = ({ children, }) => {
+    const [isHydrated, setIsHydrated] = React.useState(React.useContext(HydrationContext));
+    const onHydrate = React.useCallback(() => setIsHydrated(true), []);
+    return (React.createElement(HydrationContext.Provider, { value: isHydrated },
+        !isHydrated ? React.createElement(HydrationCheck, { onHydrate: onHydrate }) : null,
+        children));
+};
+exports.HydrationProvider = HydrationProvider;
+/** This is extracted into a child component to ensure it runs first. */
+const HydrationCheck = ({ onHydrate }) => {
+    React.useEffect(() => void onHydrate(), [onHydrate]);
+    return null;
+};

package/cjs/core/utils/providers/index.d.ts

@@ -0,0 +1 @@
+export * from './HydrationProvider.js';

package/cjs/core/utils/providers/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+__exportStar(require("./HydrationProvider.js"), exports);

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

@@ -48,7 +48,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             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/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -71,28 +71,10 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 ariaStrategy?: "label" | "description" | "none" | undefined;
                 id?: string | undefined;
             }> & {
-                content: React.ReactNode; /**
-                 * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
-                 * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
-                 * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
-                 *
-                 * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
-                 *
-                 * This component uses a composition approach so it should be used with the provided subcomponents.
-                 *
-                 * @example
-                 * <Carousel>
-                 *   <Carousel.Navigation />
-                 *   <Carousel.Slider>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *   </Carousel.Slider>
-                 * </Carousel>
-                 */
+                content: React.ReactNode;
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -129,7 +111,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             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/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {
@@ -152,28 +134,10 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
                 ariaStrategy?: "label" | "description" | "none" | undefined;
                 id?: string | undefined;
             }> & {
-                content: React.ReactNode; /**
-                 * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
-                 * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
-                 * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
-                 *
-                 * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
-                 *
-                 * This component uses a composition approach so it should be used with the provided subcomponents.
-                 *
-                 * @example
-                 * <Carousel>
-                 *   <Carousel.Navigation />
-                 *   <Carousel.Slider>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *     <Carousel.Slide>...</Carousel.Slide>
-                 *   </Carousel.Slider>
-                 * </Carousel>
-                 */
+                content: React.ReactNode;
                 children?: React.ReactNode;
             } & import("../utils/index.js").PortalProps & {
-                placement?: import("@floating-ui/core").Placement | undefined;
+                placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
                 autoUpdateOptions?: {

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

@@ -15,7 +15,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         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/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -41,7 +41,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -78,7 +78,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         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/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
@@ -104,7 +104,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -297,7 +297,7 @@ export declare const LabeledSelect: <T>(props: ({
     menuClassName?: string | undefined;
     menuStyle?: React.CSSProperties | undefined;
     popoverProps?: Pick<{
-        placement?: import("@floating-ui/core").Placement | undefined;
+        placement?: import("@floating-ui/utils").Placement | undefined;
         visible?: boolean | undefined;
         onVisibleChange?: ((visible: boolean) => void) | undefined;
         closeOnOutsideClick?: boolean | undefined;
@@ -427,7 +427,7 @@ export declare const LabeledSelect: <T>(props: ({
     menuClassName?: string | undefined;
     menuStyle?: React.CSSProperties | undefined;
     popoverProps?: Pick<{
-        placement?: import("@floating-ui/core").Placement | undefined;
+        placement?: import("@floating-ui/utils").Placement | undefined;
         visible?: boolean | undefined;
         onVisibleChange?: ((visible: boolean) => void) | undefined;
         closeOnOutsideClick?: boolean | undefined;

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

@@ -71,7 +71,7 @@ type PopoverInternalProps = {
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
-    strategy: import("@floating-ui/react").Strategy;
+    strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
     x: number;
     y: number;
@@ -92,7 +92,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         x: number;
         y: number;
         placement: Placement;
-        strategy: import("@floating-ui/react").Strategy;
+        strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/esm/core/Table/Table.js

@@ -7,7 +7,7 @@ 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';
 import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useLayoutEffect, Box, createWarningLogger, ShadowRoot, LineClamp, useMergedRefs, } from '../utils/index.js';
-import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
+import { TableColumnsContext, getCellStyle, getStickyStyle, getSubRowStyle, } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
 import { customFilterFunctions } from './filters/customFilterFunctions.js';
@@ -384,7 +384,7 @@ export const Table = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const isHeaderDirectClick = React.useRef(false);
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(TableColumnsContext.Provider, { value: columns },
         React.createElement(Box, { ref: useMergedRefs(tableRef, (element) => {
                 ownerDocument.current = element?.ownerDocument;
                 resizeRef(element);

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -16,7 +16,8 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Should the contents of the cell be clamped after a certain number of lines?
      *
-     * Will be enabled by default if the cell content is a string.
+     * Will be enabled by default if the cell content is a string and a custom `Cell`
+     * is not specified in the column object.
      */
     clamp?: boolean;
 } & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;

package/esm/core/Table/cells/DefaultCell.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../utils/index.js';
+import { TableColumnsContext } from '../utils.js';
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.
@@ -17,7 +18,11 @@ import { Box, LineClamp, ShadowRoot } from '../../utils/index.js';
  * }
  */
 export const DefaultCell = (props) => {
-    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = typeof cellProps.value === 'string', ...rest } = props;
+    const columnsProp = React.useContext(TableColumnsContext);
+    const isCustomCell = React.useMemo(() => columnsProp
+        .find(({ id }) => props.cellProps.column.id === id)
+        ?.hasOwnProperty('Cell'), [props.cellProps.column.id, columnsProp]);
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = typeof cellProps.value === 'string' && !isCustomCell, ...rest } = props;
     return (React.createElement(Box, { ...cellElementProps, ...rest, className: cx(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
         React.createElement(ShadowRoot, null,
             React.createElement("slot", { name: 'start' }),

package/esm/core/Table/utils.d.ts

@@ -1,4 +1,5 @@
-import type { ColumnInstance } from '../../react-table/react-table.js';
+import * as React from 'react';
+import type { ColumnInstance, Column } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
 export declare const getSubRowStyle: ({ density, depth }: {
@@ -7,3 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
+export declare const TableColumnsContext: React.Context<Column[]>;

package/esm/core/Table/utils.js

@@ -1,3 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
 export const getCellStyle = (column, isTableResizing) => {
     const style = {};
     style.flex = `1 1 145px`;
@@ -59,3 +64,4 @@ export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
         paddingInlineStart: cellPadding + depth * multiplier,
     };
 };
+export const TableColumnsContext = React.createContext([]);

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
-import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, } from '../utils/index.js';
+import { useMediaQuery, useMergedRefs, Box, useLayoutEffect, useControlledState, useLatestRef, importCss, isUnitTest, HydrationProvider, } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
 import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 /**
@@ -56,13 +56,14 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [theme, JSON.stringify(themeOptions), portalContainer]);
-    return (React.createElement(ThemeContext.Provider, { value: contextValue },
-        includeCss && rootElement ? React.createElement(FallbackStyles, { root: rootElement }) : null,
-        React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
-            React.createElement(ToastProvider, null,
-                children,
-                portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
-                    React.createElement(Toaster, null)))))));
+    return (React.createElement(HydrationProvider, null,
+        React.createElement(ThemeContext.Provider, { value: contextValue },
+            includeCss && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
+            React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
+                React.createElement(ToastProvider, null,
+                    children,
+                    portaledPortalContainer ? (ReactDOM.createPortal(React.createElement(Toaster, null), portaledPortalContainer)) : (React.createElement("div", { ref: setPortalContainer, style: { display: 'contents' } },
+                        React.createElement(Toaster, null))))))));
 });
 // ----------------------------------------------------------------------------
 const Root = React.forwardRef((props, forwardedRef) => {

package/esm/core/Tile/Tile.d.ts

@@ -255,15 +255,12 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
         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/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
                 ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined; /**
-                 * Display a loading state.
-                 * @default false
-                 */
+                ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;
@@ -284,15 +281,12 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
             content: React.ReactNode;
             children?: React.ReactNode;
         } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/core").Placement | undefined;
+            placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
             autoUpdateOptions?: {
                 ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined; /**
-                 * Display a loading state.
-                 * @default false
-                 */
+                ancestorResize?: boolean | undefined;
                 elementResize?: boolean | undefined;
                 animationFrame?: boolean | undefined;
                 layoutShift?: boolean | undefined;

package/esm/core/Tooltip/Tooltip.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useFloating, autoUpdate, offset, flip, shift, useClick, useHover, useFocus, useDismiss, useInteractions, safePolygon, size, autoPlacement, hide, inline, useDelayGroupContext, useDelayGroup, } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useInteractions, safePolygon, size, autoPlacement, hide, inline, useDelayGroupContext, useDelayGroup, } from '@floating-ui/react';
 import { Box, Portal, cloneElementWithRef, useControlledState, useId, useMergedRefs, } from '../utils/index.js';
 const useTooltip = (options = {}) => {
     const uniqueId = useId();
@@ -37,10 +37,13 @@ const useTooltip = (options = {}) => {
         useHover(floating.context, {
             delay: delay ?? { open: 50, close: 250 },
             handleClose: safePolygon({ buffer: -Infinity }),
+            move: false,
         }),
         useFocus(floating.context),
-        useClick(floating.context),
-        useDismiss(floating.context),
+        useDismiss(floating.context, {
+            referencePress: true,
+            referencePressEvent: 'click',
+        }),
     ]);
     // Manually add attributes and event handlers to external reference element,
     // because we cannot spread getReferenceProps onto it.

package/esm/core/VisuallyHidden/VisuallyHidden.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, ShadowRoot, useIsClient } from '../utils/index.js';
+import { Box, ShadowRoot, useHydration } from '../utils/index.js';
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -17,12 +17,12 @@ import { Box, ShadowRoot, useIsClient } from '../utils/index.js';
  */
 export const VisuallyHidden = React.forwardRef((props, ref) => {
     const { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
-    const isMounted = useIsClient();
+    const isHydrated = useHydration() === 'hydrated';
     // ShadowRoot is not supported on all elements, so we only use it for few common ones.
     const children = !['div', 'span', 'p'].includes(asProp) ? (childrenProp) : (React.createElement(React.Fragment, null,
         React.createElement(ShadowRoot, { css: css },
             React.createElement("slot", null)),
-        isMounted && childrenProp));
+        isHydrated && childrenProp));
     return (React.createElement(Box, { as: asProp, className: cx('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }, children));
 });
 // ----------------------------------------------------------------------------

package/esm/core/utils/components/ShadowRoot.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
+type ShadowRootProps = {
+    children: React.ReactNode;
+    css?: string;
+};
 /**
  * Wrapper around `<template>` element that attaches shadow root to its parent
  * and moves its children into the shadow root.
  *
  * @private
  */
-export declare const ShadowRoot: ({ children, css, }: {
-    children: React.ReactNode;
-    css?: string | undefined;
-}) => React.JSX.Element | null;
+export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => React.JSX.Element | null;
+export {};