@itwin/itwinui-react 3.11.0 → 3.11.2

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -72,10 +72,13 @@ const Root = React.forwardRef((props, forwardedRef) => {
     const shouldApplyDark = theme === 'dark' || (theme === 'os' && prefersDark);
     const shouldApplyHC = themeOptions?.highContrast ?? prefersHighContrast;
     const shouldApplyBackground = themeOptions?.applyBackground;
-    const setOwnerDocument = useScopedSetAtom(ownerDocumentAtom);
-    return (React.createElement(Box, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: useMergedRefs(forwardedRef, (el) => {
-            setOwnerDocument(el?.ownerDocument);
-        }), ...rest }, children));
+    const [ownerDocument, setOwnerDocument] = useScopedAtom(ownerDocumentAtom);
+    const findOwnerDocumentFromRef = React.useCallback((el) => {
+        if (el && el.ownerDocument !== ownerDocument) {
+            setOwnerDocument(el.ownerDocument);
+        }
+    }, [ownerDocument, setOwnerDocument]);
+    return (React.createElement(Box, { className: cx('iui-root', { 'iui-root-background': shouldApplyBackground }, className), "data-iui-theme": shouldApplyDark ? 'dark' : 'light', "data-iui-contrast": shouldApplyHC ? 'high' : 'default', ref: useMergedRefs(forwardedRef, findOwnerDocumentFromRef), ...rest }, children));
 });
 // ----------------------------------------------------------------------------
 /**
@@ -130,33 +133,40 @@ const useParentThemeAndContext = (rootElement) => {
  */
 const PortalContainer = React.memo(({ portalContainerProp, portalContainerFromParent, isInheritingTheme, }) => {
     const [ownerDocument] = useScopedAtom(ownerDocumentAtom);
-    const [portalContainer, setPortalContainer] = useScopedAtom(portalContainerAtom);
+    const setPortalContainer = useScopedSetAtom(portalContainerAtom);
     // bail if not hydrated, because portals don't work on server
     const isHydrated = useHydration() === 'hydrated';
     if (!isHydrated) {
         return null;
     }
+    if (portalContainerProp) {
+        return React.createElement(PortaledToaster, { target: portalContainerProp });
+    }
     // Create a new portal container only if necessary:
     // - not inheriting theme
     // - no parent portal container to portal into
     // - parent portal container is in a different window (#2006)
-    if (!portalContainerProp && // bail if portalContainerProp is set, because it takes precedence
-        (!isInheritingTheme ||
-            !portalContainerFromParent ||
+    if (!isInheritingTheme ||
+        !portalContainerFromParent ||
+        (!!ownerDocument &&
             portalContainerFromParent.ownerDocument !== ownerDocument)) {
         return (React.createElement("div", { style: { display: 'contents' }, ref: setPortalContainer },
             React.createElement(Toaster, null)));
     }
-    const portalTarget = portalContainerProp || portalContainerFromParent;
-    // Synchronize atom with the correct portal container if necessary.
-    if (portalTarget && portalTarget !== portalContainer) {
-        setPortalContainer(portalTarget);
-    }
-    return portalTarget
-        ? ReactDOM.createPortal(React.createElement(Toaster, null), portalTarget)
-        : null;
+    return React.createElement(PortaledToaster, { target: portalContainerFromParent });
 });
 // ----------------------------------------------------------------------------
+const PortaledToaster = ({ target }) => {
+    const [portalContainer, setPortalContainer] = useScopedAtom(portalContainerAtom);
+    // Synchronize atom with the correct portal target if necessary.
+    React.useEffect(() => {
+        if (target && target !== portalContainer) {
+            setPortalContainer(target);
+        }
+    });
+    return target ? ReactDOM.createPortal(React.createElement(Toaster, null), target) : null;
+};
+// ----------------------------------------------------------------------------
 /**
  * When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
  * dynamically import it (if possible) and fallback to loading it from a CDN.

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

@@ -249,7 +249,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      */
     IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "loading" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -323,7 +323,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
             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"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }, "ref">>;
     /**

package/esm/utils/providers/ScopeProvider.js

@@ -33,9 +33,11 @@ export const useScopedAtom = (atom) => {
     const setAtom = useScopedSetAtom(atom);
     const value = useAtomValue(atom, { store });
     const inheritedValue = useAtomValue(atom, { store: parentStore || store });
-    if (value == undefined && inheritedValue != undefined) {
-        setAtom(inheritedValue);
-    }
+    React.useEffect(() => {
+        if (value == undefined && inheritedValue != undefined) {
+            setAtom(inheritedValue);
+        }
+    });
     return [value, setAtom];
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.11.0",
+  "version": "3.11.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,12 @@
       }
     },
     "./react-table": {
+      "import": {
+        "types": "./esm/react-table/react-table.d.ts"
+      },
+      "require": {
+        "types": "./cjs/react-table/react-table.d.ts"
+      },
       "types": "./react-table.d.ts"
     },
     "./styles.css": "./styles.css",