@itwin/core-react 3.7.16 → 3.8.0-dev.1

package/lib/esm/core-react/utils/hooks/useResizeObserver.d.ts

@@ -1,40 +1,40 @@
-/** @packageDocumentation
- * @module Utilities
- */
-import * as React from "react";
-/** Uses ResizeObserver API to notify about element bound changes.
-  * @internal
-  */
-export declare function useResizeObserver<T extends Element>(onResize?: (width: number, height: number) => void): (instance: Element | null) => void;
-/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector
- * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly
- * handles observing element in pop-out/child windows.
-  * @internal
-  */
-export declare function useLayoutResizeObserver(inElement: HTMLElement | null, onResize?: (width?: number, height?: number) => void): (number | undefined)[];
-/** Prop the ElementResizeObserver sends to the render function.
- *  @public
- */
-export interface RenderPropsArgs {
-    width?: number;
-    height?: number;
-}
-/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles
- * observing element in pop-out/child windows.
- *  @public
- */
-export declare function ElementResizeObserver({ watchedElement, render }: {
-    watchedElement: HTMLElement | null;
-    render: (props: RenderPropsArgs) => JSX.Element;
-}): JSX.Element;
-/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when
- * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then
- * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report
- * size changes from its parent container.
- * @public
- */
-export declare function ResizableContainerObserver({ onResize, children }: {
-    onResize: (width: number, height: number) => void;
-    children?: React.ReactNode;
-}): JSX.Element;
+/** @packageDocumentation
+ * @module Utilities
+ */
+import * as React from "react";
+/** Uses ResizeObserver API to notify about element bound changes.
+  * @internal
+  */
+export declare function useResizeObserver<T extends Element>(onResize?: (width: number, height: number) => void): (instance: Element | null) => void;
+/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector
+ * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly
+ * handles observing element in pop-out/child windows.
+  * @internal
+  */
+export declare function useLayoutResizeObserver(inElement: HTMLElement | null, onResize?: (width?: number, height?: number) => void): (number | undefined)[];
+/** Prop the ElementResizeObserver sends to the render function.
+ *  @public
+ */
+export interface RenderPropsArgs {
+    width?: number;
+    height?: number;
+}
+/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles
+ * observing element in pop-out/child windows.
+ *  @public
+ */
+export declare function ElementResizeObserver({ watchedElement, render }: {
+    watchedElement: HTMLElement | null;
+    render: (props: RenderPropsArgs) => React.JSX.Element;
+}): React.JSX.Element;
+/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when
+ * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then
+ * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report
+ * size changes from its parent container.
+ * @public
+ */
+export declare function ResizableContainerObserver({ onResize, children }: {
+    onResize: (width: number, height: number) => void;
+    children?: React.ReactNode;
+}): React.JSX.Element;
 //# sourceMappingURL=useResizeObserver.d.ts.map

package/lib/esm/core-react/utils/hooks/useResizeObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../src/core-react/utils/hooks/useResizeObserver.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;IAEI;AACJ,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,sCAiFtG;AAED;;;;IAII;AACJ,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,0BAgF1H;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE;IAAE,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAA;CAAE,eAGxJ;AAED;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,eA6BnJ"}
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../src/core-react/utils/hooks/useResizeObserver.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;IAEI;AACJ,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,sCAiFtG;AAED;;;;IAII;AACJ,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,0BAgF1H;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE;IAAE,cAAc,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;CAAE,qBAG9J;AAED;;;;;GAKG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBA6BnJ"}

package/lib/esm/core-react/utils/hooks/useResizeObserver.js

@@ -1,202 +1,202 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Utilities
- */
-import * as React from "react";
-import { ResizeObserver } from "./ResizeObserverPolyfill";
-import { useRefEffect } from "./useRefEffect";
-import { useRefs } from "./useRefs";
-/** Uses ResizeObserver API to notify about element bound changes.
-  * @internal
-  */
-export function useResizeObserver(onResize) {
-    const [bounds, setBounds] = React.useState({ width: 0, height: 0 });
-    const resizeObserver = React.useRef(null);
-    const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active
-    const isMountedRef = React.useRef(false);
-    const owningWindowRef = React.useRef(null);
-    // istanbul ignore next
-    const resizeObserverCleanup = () => {
-        var _a;
-        if (rafRef.current)
-            owningWindowRef.current.cancelAnimationFrame(rafRef.current);
-        (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        resizeObserver.current = null;
-    };
-    React.useEffect(() => {
-        isMountedRef.current = true;
-        return () => {
-            var _a;
-            isMountedRef.current = false;
-            if (rafRef.current)
-                owningWindowRef.current.cancelAnimationFrame(rafRef.current);
-            (_a = owningWindowRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("beforeunload", resizeObserverCleanup);
-        };
-    }, []);
-    const processResize = React.useCallback((target) => {
-        const newBounds = target.getBoundingClientRect();
-        // istanbul ignore else
-        if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {
-            setBounds(newBounds);
-            onResize && onResize(newBounds.width, newBounds.height);
-        }
-    }, [onResize, bounds.height, bounds.width]);
-    const handleResize = React.useCallback((entries) => {
-        // istanbul ignore if
-        if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {
-            return;
-        }
-        const target = entries[0].target;
-        // istanbul ignore next
-        owningWindowRef.current && owningWindowRef.current.removeEventListener("beforeunload", resizeObserverCleanup);
-        owningWindowRef.current = target.ownerDocument.defaultView;
-        // istanbul ignore else
-        if (owningWindowRef.current) {
-            owningWindowRef.current.addEventListener("unload", resizeObserverCleanup);
-            // using requestAnimationFrame to stop the "ResizeObserver loop completed with undelivered notifications." and
-            // "ResizeObserver loop limit exceeded" messages reported to window.onError
-            rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));
-        }
-    }, [processResize]);
-    const observerRef = useRefEffect((instance) => {
-        resizeObserver.current = new ResizeObserver(handleResize);
-        if (instance) {
-            resizeObserver.current.observe(instance);
-            const newBounds = instance.getBoundingClientRect();
-            onResize && onResize(newBounds.width, newBounds.height);
-            setBounds(newBounds);
-        }
-        return () => {
-            var _a;
-            instance && ( /* istanbul ignore next */(_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.unobserve(instance));
-            resizeObserver.current = null;
-        };
-    }, [handleResize, onResize]);
-    const handleRef = React.useCallback((instance) => {
-        const newBounds = instance && instance.getBoundingClientRect();
-        // istanbul ignore if
-        if (newBounds && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {
-            setBounds(newBounds);
-            onResize && onResize(newBounds.width, newBounds.height);
-        }
-    }, [bounds.height, bounds.width, onResize]);
-    const ref = useRefs(handleRef, observerRef);
-    return ref;
-}
-/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector
- * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly
- * handles observing element in pop-out/child windows.
-  * @internal
-  */
-export function useLayoutResizeObserver(inElement, onResize) {
-    const inBoundingRect = inElement === null || inElement === void 0 ? void 0 : inElement.getBoundingClientRect();
-    const [bounds, setBounds] = React.useState({ width: inBoundingRect === null || inBoundingRect === void 0 ? void 0 : inBoundingRect.width, height: inBoundingRect === null || inBoundingRect === void 0 ? void 0 : inBoundingRect.height });
-    const [watchedElement, setWatchedElement] = React.useState(inElement);
-    const resizeObserver = React.useRef(null);
-    const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active
-    const isMountedRef = React.useRef(false);
-    const owningWindowRef = React.useRef(null);
-    // istanbul ignore next
-    const resizeObserverCleanup = () => {
-        var _a;
-        if (rafRef.current)
-            owningWindowRef.current.cancelAnimationFrame(rafRef.current);
-        (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-        resizeObserver.current = null;
-    };
-    React.useEffect(() => {
-        isMountedRef.current = true;
-        setWatchedElement(inElement);
-        // istanbul ignore next
-        if (inElement) {
-            const newBounds = inElement.getBoundingClientRect();
-            onResize && onResize(newBounds.width, newBounds.height);
-            setBounds(newBounds);
-        }
-        return () => {
-            isMountedRef.current = false;
-            (rafRef.current && owningWindowRef.current) && owningWindowRef.current.cancelAnimationFrame(rafRef.current);
-            owningWindowRef.current && owningWindowRef.current.removeEventListener("beforeunload", resizeObserverCleanup);
-        };
-    }, [onResize, inElement]);
-    const processResize = React.useCallback((target) => {
-        const newBounds = target.getBoundingClientRect();
-        // istanbul ignore next
-        if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {
-            onResize && onResize(newBounds.width, newBounds.height);
-            setBounds(newBounds);
-        }
-    }, [bounds.height, bounds.width, onResize]);
-    const handleResize = React.useCallback((entries) => {
-        // istanbul ignore next
-        if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {
-            return;
-        }
-        const target = entries[0].target;
-        // istanbul ignore next
-        if (owningWindowRef.current)
-            owningWindowRef.current.removeEventListener("beforeunload", resizeObserverCleanup);
-        owningWindowRef.current = target.ownerDocument.defaultView;
-        // istanbul ignore else
-        if (owningWindowRef.current) {
-            owningWindowRef.current.addEventListener("unload", resizeObserverCleanup);
-            // using requestAnimationFrame to stop the "ResizeObserver loop completed with undelivered notifications." and
-            // "ResizeObserver loop limit exceeded" messages reported to window.onError
-            rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));
-        }
-    }, [processResize]);
-    React.useLayoutEffect(() => {
-        if (!watchedElement) {
-            return;
-        }
-        resizeObserver.current = new ResizeObserver(handleResize);
-        resizeObserver.current.observe(watchedElement);
-        return () => {
-            var _a;
-            // istanbul ignore next
-            (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-            resizeObserver.current = null;
-        };
-    }, [handleResize, watchedElement]);
-    return [bounds.width, bounds.height];
-}
-/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles
- * observing element in pop-out/child windows.
- *  @public
- */
-export function ElementResizeObserver({ watchedElement, render }) {
-    const [width, height] = useLayoutResizeObserver(watchedElement);
-    return render({ width, height });
-}
-/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when
- * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then
- * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report
- * size changes from its parent container.
- * @public
- */
-export function ResizableContainerObserver({ onResize, children }) {
-    const containerRef = React.useRef(null); // set to non-zero when requestAnimationFrame processing is active
-    const [containerElement, setContainerElement] = React.useState(null);
-    const isMountedRef = React.useRef(false);
-    const hasChildren = React.Children.count(children) !== 0;
-    // if no children are specified then monitor size of parent element.
-    React.useEffect(() => {
-        // istanbul ignore next
-        if (!isMountedRef.current && containerRef.current) {
-            isMountedRef.current = true;
-            const hasParent = !!containerRef.current.parentElement;
-            setContainerElement(hasChildren && hasParent ? containerRef.current : containerRef.current.parentElement);
-        }
-    }, [hasChildren]);
-    const processResize = React.useCallback((width, height) => {
-        // istanbul ignore next
-        onResize(width !== null && width !== void 0 ? width : 0, height !== null && height !== void 0 ? height : 0);
-    }, [onResize]);
-    useLayoutResizeObserver(containerElement, processResize);
-    const style = hasChildren ? { width: "100%", height: "100%" } : { display: "none" };
-    return (React.createElement("div", { ref: containerRef, className: "uicore-resizable-container", style: style }, hasChildren && children));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+import * as React from "react";
+import { ResizeObserver } from "./ResizeObserverPolyfill";
+import { useRefEffect } from "./useRefEffect";
+import { useRefs } from "./useRefs";
+/** Uses ResizeObserver API to notify about element bound changes.
+  * @internal
+  */
+export function useResizeObserver(onResize) {
+    const [bounds, setBounds] = React.useState({ width: 0, height: 0 });
+    const resizeObserver = React.useRef(null);
+    const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active
+    const isMountedRef = React.useRef(false);
+    const owningWindowRef = React.useRef(null);
+    // istanbul ignore next
+    const resizeObserverCleanup = () => {
+        var _a;
+        if (rafRef.current)
+            owningWindowRef.current.cancelAnimationFrame(rafRef.current);
+        (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        resizeObserver.current = null;
+    };
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            var _a;
+            isMountedRef.current = false;
+            if (rafRef.current)
+                owningWindowRef.current.cancelAnimationFrame(rafRef.current);
+            (_a = owningWindowRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("beforeunload", resizeObserverCleanup);
+        };
+    }, []);
+    const processResize = React.useCallback((target) => {
+        const newBounds = target.getBoundingClientRect();
+        // istanbul ignore else
+        if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {
+            setBounds(newBounds);
+            onResize && onResize(newBounds.width, newBounds.height);
+        }
+    }, [onResize, bounds.height, bounds.width]);
+    const handleResize = React.useCallback((entries) => {
+        // istanbul ignore if
+        if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {
+            return;
+        }
+        const target = entries[0].target;
+        // istanbul ignore next
+        owningWindowRef.current && owningWindowRef.current.removeEventListener("beforeunload", resizeObserverCleanup);
+        owningWindowRef.current = target.ownerDocument.defaultView;
+        // istanbul ignore else
+        if (owningWindowRef.current) {
+            owningWindowRef.current.addEventListener("unload", resizeObserverCleanup);
+            // using requestAnimationFrame to stop the "ResizeObserver loop completed with undelivered notifications." and
+            // "ResizeObserver loop limit exceeded" messages reported to window.onError
+            rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));
+        }
+    }, [processResize]);
+    const observerRef = useRefEffect((instance) => {
+        resizeObserver.current = new ResizeObserver(handleResize);
+        if (instance) {
+            resizeObserver.current.observe(instance);
+            const newBounds = instance.getBoundingClientRect();
+            onResize && onResize(newBounds.width, newBounds.height);
+            setBounds(newBounds);
+        }
+        return () => {
+            var _a;
+            instance && ( /* istanbul ignore next */(_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.unobserve(instance));
+            resizeObserver.current = null;
+        };
+    }, [handleResize, onResize]);
+    const handleRef = React.useCallback((instance) => {
+        const newBounds = instance && instance.getBoundingClientRect();
+        // istanbul ignore if
+        if (newBounds && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {
+            setBounds(newBounds);
+            onResize && onResize(newBounds.width, newBounds.height);
+        }
+    }, [bounds.height, bounds.width, onResize]);
+    const ref = useRefs(handleRef, observerRef);
+    return ref;
+}
+/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector
+ * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly
+ * handles observing element in pop-out/child windows.
+  * @internal
+  */
+export function useLayoutResizeObserver(inElement, onResize) {
+    const inBoundingRect = inElement === null || inElement === void 0 ? void 0 : inElement.getBoundingClientRect();
+    const [bounds, setBounds] = React.useState({ width: inBoundingRect === null || inBoundingRect === void 0 ? void 0 : inBoundingRect.width, height: inBoundingRect === null || inBoundingRect === void 0 ? void 0 : inBoundingRect.height });
+    const [watchedElement, setWatchedElement] = React.useState(inElement);
+    const resizeObserver = React.useRef(null);
+    const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active
+    const isMountedRef = React.useRef(false);
+    const owningWindowRef = React.useRef(null);
+    // istanbul ignore next
+    const resizeObserverCleanup = () => {
+        var _a;
+        if (rafRef.current)
+            owningWindowRef.current.cancelAnimationFrame(rafRef.current);
+        (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        resizeObserver.current = null;
+    };
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        setWatchedElement(inElement);
+        // istanbul ignore next
+        if (inElement) {
+            const newBounds = inElement.getBoundingClientRect();
+            onResize && onResize(newBounds.width, newBounds.height);
+            setBounds(newBounds);
+        }
+        return () => {
+            isMountedRef.current = false;
+            (rafRef.current && owningWindowRef.current) && owningWindowRef.current.cancelAnimationFrame(rafRef.current);
+            owningWindowRef.current && owningWindowRef.current.removeEventListener("beforeunload", resizeObserverCleanup);
+        };
+    }, [onResize, inElement]);
+    const processResize = React.useCallback((target) => {
+        const newBounds = target.getBoundingClientRect();
+        // istanbul ignore next
+        if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {
+            onResize && onResize(newBounds.width, newBounds.height);
+            setBounds(newBounds);
+        }
+    }, [bounds.height, bounds.width, onResize]);
+    const handleResize = React.useCallback((entries) => {
+        // istanbul ignore next
+        if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {
+            return;
+        }
+        const target = entries[0].target;
+        // istanbul ignore next
+        if (owningWindowRef.current)
+            owningWindowRef.current.removeEventListener("beforeunload", resizeObserverCleanup);
+        owningWindowRef.current = target.ownerDocument.defaultView;
+        // istanbul ignore else
+        if (owningWindowRef.current) {
+            owningWindowRef.current.addEventListener("unload", resizeObserverCleanup);
+            // using requestAnimationFrame to stop the "ResizeObserver loop completed with undelivered notifications." and
+            // "ResizeObserver loop limit exceeded" messages reported to window.onError
+            rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));
+        }
+    }, [processResize]);
+    React.useLayoutEffect(() => {
+        if (!watchedElement) {
+            return;
+        }
+        resizeObserver.current = new ResizeObserver(handleResize);
+        resizeObserver.current.observe(watchedElement);
+        return () => {
+            var _a;
+            // istanbul ignore next
+            (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            resizeObserver.current = null;
+        };
+    }, [handleResize, watchedElement]);
+    return [bounds.width, bounds.height];
+}
+/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles
+ * observing element in pop-out/child windows.
+ *  @public
+ */
+export function ElementResizeObserver({ watchedElement, render }) {
+    const [width, height] = useLayoutResizeObserver(watchedElement);
+    return render({ width, height });
+}
+/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when
+ * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then
+ * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report
+ * size changes from its parent container.
+ * @public
+ */
+export function ResizableContainerObserver({ onResize, children }) {
+    const containerRef = React.useRef(null); // set to non-zero when requestAnimationFrame processing is active
+    const [containerElement, setContainerElement] = React.useState(null);
+    const isMountedRef = React.useRef(false);
+    const hasChildren = React.Children.count(children) !== 0;
+    // if no children are specified then monitor size of parent element.
+    React.useEffect(() => {
+        // istanbul ignore next
+        if (!isMountedRef.current && containerRef.current) {
+            isMountedRef.current = true;
+            const hasParent = !!containerRef.current.parentElement;
+            setContainerElement(hasChildren && hasParent ? containerRef.current : containerRef.current.parentElement);
+        }
+    }, [hasChildren]);
+    const processResize = React.useCallback((width, height) => {
+        // istanbul ignore next
+        onResize(width !== null && width !== void 0 ? width : 0, height !== null && height !== void 0 ? height : 0);
+    }, [onResize]);
+    useLayoutResizeObserver(containerElement, processResize);
+    const style = hasChildren ? { width: "100%", height: "100%" } : { display: "none" };
+    return (React.createElement("div", { ref: containerRef, className: "uicore-resizable-container", style: style }, hasChildren && children));
+}
 //# sourceMappingURL=useResizeObserver.js.map

package/lib/esm/core-react/utils/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../../src/core-react/utils/hooks/useResizeObserver.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\nimport * as React from \"react\";\r\nimport { ResizeObserver } from \"./ResizeObserverPolyfill\";\r\nimport { useRefEffect } from \"./useRefEffect\";\r\nimport { useRefs } from \"./useRefs\";\r\n\r\n/** Uses ResizeObserver API to notify about element bound changes.\r\n  * @internal\r\n  */\r\nexport function useResizeObserver<T extends Element>(onResize?: (width: number, height: number) => void) {\r\n  const [bounds, setBounds] = React.useState({ width: 0, height: 0 });\r\n  const resizeObserver = React.useRef<ResizeObserver | null>(null);\r\n  const rafRef = React.useRef(0);  // set to non-zero when requestAnimationFrame processing is active\r\n  const isMountedRef = React.useRef(false);\r\n  const owningWindowRef = React.useRef<any>(null);\r\n\r\n  // istanbul ignore next\r\n  const resizeObserverCleanup = () => {\r\n    if (rafRef.current)\r\n      owningWindowRef.current.cancelAnimationFrame(rafRef.current);\r\n\r\n    resizeObserver.current?.disconnect();\r\n    resizeObserver.current = null;\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    isMountedRef.current = true;\r\n    return () => {\r\n      isMountedRef.current = false;\r\n      if (rafRef.current)\r\n        owningWindowRef.current.cancelAnimationFrame(rafRef.current);\r\n      owningWindowRef.current?.removeEventListener(\"beforeunload\", resizeObserverCleanup);\r\n    };\r\n  }, []);\r\n\r\n  const processResize = React.useCallback((target: HTMLElement) => {\r\n    const newBounds = target.getBoundingClientRect();\r\n    // istanbul ignore else\r\n    if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {\r\n      setBounds(newBounds);\r\n      onResize && onResize(newBounds.width, newBounds.height);\r\n    }\r\n  }, [onResize, bounds.height, bounds.width]);\r\n\r\n  const handleResize = React.useCallback((entries: any[]) => {\r\n    // istanbul ignore if\r\n    if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {\r\n      return;\r\n    }\r\n    const target = entries[0].target as HTMLElement;\r\n    // istanbul ignore next\r\n    owningWindowRef.current && owningWindowRef.current.removeEventListener(\"beforeunload\", resizeObserverCleanup);\r\n\r\n    owningWindowRef.current = target.ownerDocument.defaultView;\r\n    // istanbul ignore else\r\n    if (owningWindowRef.current) {\r\n      owningWindowRef.current.addEventListener(\"unload\", resizeObserverCleanup);\r\n\r\n      // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\r\n      // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\r\n      rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));\r\n    }\r\n  }, [processResize]);\r\n\r\n  const observerRef = useRefEffect((instance: T | null) => {\r\n    resizeObserver.current = new ResizeObserver(handleResize);\r\n    if (instance) {\r\n      resizeObserver.current.observe(instance);\r\n      const newBounds = instance.getBoundingClientRect();\r\n      onResize && onResize(newBounds.width, newBounds.height);\r\n      setBounds(newBounds);\r\n    }\r\n\r\n    return () => {\r\n      instance && ( /* istanbul ignore next */resizeObserver.current?.unobserve(instance));\r\n      resizeObserver.current = null;\r\n    };\r\n  }, [handleResize, onResize]);\r\n\r\n  const handleRef = React.useCallback((instance: Element | null) => {\r\n    const newBounds = instance && instance.getBoundingClientRect();\r\n    // istanbul ignore if\r\n    if (newBounds && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {\r\n      setBounds(newBounds);\r\n      onResize && onResize(newBounds.width, newBounds.height);\r\n    }\r\n  }, [bounds.height, bounds.width, onResize]);\r\n\r\n  const ref = useRefs(handleRef, observerRef);\r\n  return ref;\r\n}\r\n\r\n/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector\r\n * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly\r\n * handles observing element in pop-out/child windows.\r\n  * @internal\r\n  */\r\nexport function useLayoutResizeObserver(inElement: HTMLElement | null, onResize?: (width?: number, height?: number) => void) {\r\n  const inBoundingRect = inElement?.getBoundingClientRect();\r\n  const [bounds, setBounds] = React.useState<{ width?: number, height?: number }>({ width: inBoundingRect?.width, height: inBoundingRect?.height });\r\n  const [watchedElement, setWatchedElement] = React.useState(inElement);\r\n  const resizeObserver = React.useRef<ResizeObserver | null>(null);\r\n  const rafRef = React.useRef(0);  // set to non-zero when requestAnimationFrame processing is active\r\n  const isMountedRef = React.useRef(false);\r\n  const owningWindowRef = React.useRef<any>(null);\r\n\r\n  // istanbul ignore next\r\n  const resizeObserverCleanup = () => {\r\n    if (rafRef.current)\r\n      owningWindowRef.current.cancelAnimationFrame(rafRef.current);\r\n\r\n    resizeObserver.current?.disconnect();\r\n    resizeObserver.current = null;\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    isMountedRef.current = true;\r\n    setWatchedElement(inElement);\r\n\r\n    // istanbul ignore next\r\n    if (inElement) {\r\n      const newBounds = inElement.getBoundingClientRect();\r\n      onResize && onResize(newBounds.width, newBounds.height);\r\n      setBounds(newBounds);\r\n    }\r\n\r\n    return () => {\r\n      isMountedRef.current = false;\r\n      (rafRef.current && owningWindowRef.current) && owningWindowRef.current.cancelAnimationFrame(rafRef.current);\r\n      owningWindowRef.current && owningWindowRef.current.removeEventListener(\"beforeunload\", resizeObserverCleanup);\r\n    };\r\n  }, [onResize, inElement]);\r\n\r\n  const processResize = React.useCallback((target: HTMLElement) => {\r\n    const newBounds = target.getBoundingClientRect();\r\n    // istanbul ignore next\r\n    if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {\r\n      onResize && onResize(newBounds.width, newBounds.height);\r\n      setBounds(newBounds);\r\n    }\r\n  }, [bounds.height, bounds.width, onResize]);\r\n\r\n  const handleResize = React.useCallback((entries: any[]) => {\r\n    // istanbul ignore next\r\n    if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {\r\n      return;\r\n    }\r\n    const target = entries[0].target as HTMLElement;\r\n    // istanbul ignore next\r\n    if (owningWindowRef.current)\r\n      owningWindowRef.current.removeEventListener(\"beforeunload\", resizeObserverCleanup);\r\n\r\n    owningWindowRef.current = target.ownerDocument.defaultView;\r\n    // istanbul ignore else\r\n    if (owningWindowRef.current) {\r\n      owningWindowRef.current.addEventListener(\"unload\", resizeObserverCleanup);\r\n\r\n      // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\r\n      // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\r\n      rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));\r\n    }\r\n  }, [processResize]);\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (!watchedElement) {\r\n      return;\r\n    }\r\n    resizeObserver.current = new ResizeObserver(handleResize);\r\n    resizeObserver.current.observe(watchedElement);\r\n    return () => {\r\n      // istanbul ignore next\r\n      resizeObserver.current?.disconnect();\r\n      resizeObserver.current = null;\r\n    };\r\n  }, [handleResize, watchedElement]);\r\n\r\n  return [bounds.width, bounds.height];\r\n}\r\n\r\n/** Prop the ElementResizeObserver sends to the render function.\r\n *  @public\r\n */\r\nexport interface RenderPropsArgs {\r\n  width?: number;\r\n  height?: number;\r\n}\r\n\r\n/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles\r\n * observing element in pop-out/child windows.\r\n *  @public\r\n */\r\nexport function ElementResizeObserver({ watchedElement, render }: { watchedElement: HTMLElement | null, render: (props: RenderPropsArgs) => JSX.Element }) {\r\n  const [width, height] = useLayoutResizeObserver(watchedElement);\r\n  return render({ width, height });\r\n}\r\n\r\n/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when\r\n * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then\r\n * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report\r\n * size changes from its parent container.\r\n * @public\r\n */\r\nexport function ResizableContainerObserver({ onResize, children }: { onResize: (width: number, height: number) => void, children?: React.ReactNode }) {\r\n  const containerRef = React.useRef<HTMLDivElement>(null);  // set to non-zero when requestAnimationFrame processing is active\r\n  const [containerElement, setContainerElement] = React.useState<HTMLElement | null>(null);\r\n  const isMountedRef = React.useRef(false);\r\n  const hasChildren = React.Children.count(children) !== 0;\r\n\r\n  // if no children are specified then monitor size of parent element.\r\n  React.useEffect(() => {\r\n    // istanbul ignore next\r\n    if (!isMountedRef.current && containerRef.current) {\r\n      isMountedRef.current = true;\r\n      const hasParent = !!containerRef.current.parentElement;\r\n      setContainerElement(hasChildren && hasParent ? containerRef.current : containerRef.current.parentElement);\r\n    }\r\n  }, [hasChildren]);\r\n\r\n  const processResize = React.useCallback((width?: number, height?: number) => {\r\n    // istanbul ignore next\r\n    onResize(width ?? 0, height ?? 0);\r\n  }, [onResize]);\r\n\r\n  useLayoutResizeObserver(containerElement, processResize);\r\n  const style: React.CSSProperties = hasChildren ? { width: \"100%\", height: \"100%\" } : { display: \"none\" };\r\n\r\n  return (\r\n    <div ref={containerRef} className=\"uicore-resizable-container\" style={style}>\r\n      {hasChildren && children}\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../../src/core-react/utils/hooks/useResizeObserver.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;;IAEI;AACJ,MAAM,UAAU,iBAAiB,CAAoB,QAAkD;IACrG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IACpE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IACjE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAE,kEAAkE;IACnG,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAM,IAAI,CAAC,CAAC;IAEhD,uBAAuB;IACvB,MAAM,qBAAqB,GAAG,GAAG,EAAE;;QACjC,IAAI,MAAM,CAAC,OAAO;YAChB,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE/D,MAAA,cAAc,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;QACrC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;IAChC,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,OAAO,GAAG,EAAE;;YACV,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAC7B,IAAI,MAAM,CAAC,OAAO;gBAChB,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC/D,MAAA,eAAe,CAAC,OAAO,0CAAE,mBAAmB,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;QACtF,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,MAAmB,EAAE,EAAE;QAC9D,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACjD,uBAAuB;QACvB,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,EAAE;YACpG,SAAS,CAAC,SAAS,CAAC,CAAC;YACrB,QAAQ,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;SACzD;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAc,EAAE,EAAE;QACxD,qBAAqB;QACrB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,MAAM,EAAE;YAC5E,OAAO;SACR;QACD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAqB,CAAC;QAChD,uBAAuB;QACvB,eAAe,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,mBAAmB,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;QAE9G,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC;QAC3D,uBAAuB;QACvB,IAAI,eAAe,CAAC,OAAO,EAAE;YAC3B,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;YAE1E,8GAA8G;YAC9G,2EAA2E;YAC3E,MAAM,CAAC,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;SAC7F;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,QAAkB,EAAE,EAAE;QACtD,cAAc,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;QAC1D,IAAI,QAAQ,EAAE;YACZ,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACzC,MAAM,SAAS,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YACnD,QAAQ,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;YACxD,SAAS,CAAC,SAAS,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;;YACV,QAAQ,IAAI,EAAE,0BAA0B,MAAA,cAAc,CAAC,OAAO,0CAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;YACrF,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAwB,EAAE,EAAE;QAC/D,MAAM,SAAS,GAAG,QAAQ,IAAI,QAAQ,CAAC,qBAAqB,EAAE,CAAC;QAC/D,qBAAqB;QACrB,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,EAAE;YACzF,SAAS,CAAC,SAAS,CAAC,CAAC;YACrB,QAAQ,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;SACzD;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAC5C,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;IAII;AACJ,MAAM,UAAU,uBAAuB,CAAC,SAA6B,EAAE,QAAoD;IACzH,MAAM,cAAc,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,qBAAqB,EAAE,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsC,EAAE,KAAK,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,EAAE,MAAM,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,EAAE,CAAC,CAAC;IAClJ,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IACjE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAE,kEAAkE;IACnG,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAM,IAAI,CAAC,CAAC;IAEhD,uBAAuB;IACvB,MAAM,qBAAqB,GAAG,GAAG,EAAE;;QACjC,IAAI,MAAM,CAAC,OAAO;YAChB,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAE/D,MAAA,cAAc,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;QACrC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;IAChC,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAE7B,uBAAuB;QACvB,IAAI,SAAS,EAAE;YACb,MAAM,SAAS,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YACpD,QAAQ,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;YACxD,SAAS,CAAC,SAAS,CAAC,CAAC;SACtB;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAC7B,CAAC,MAAM,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC5G,eAAe,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,CAAC,mBAAmB,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;QAChH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,MAAmB,EAAE,EAAE;QAC9D,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACjD,uBAAuB;QACvB,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,CAAC,EAAE;YACpG,QAAQ,IAAI,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;YACxD,SAAS,CAAC,SAAS,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAc,EAAE,EAAE;QACxD,uBAAuB;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,MAAM,EAAE;YAC5E,OAAO;SACR;QACD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAqB,CAAC;QAChD,uBAAuB;QACvB,IAAI,eAAe,CAAC,OAAO;YACzB,eAAe,CAAC,OAAO,CAAC,mBAAmB,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;QAErF,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC;QAC3D,uBAAuB;QACvB,IAAI,eAAe,CAAC,OAAO,EAAE;YAC3B,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;YAE1E,8GAA8G;YAC9G,2EAA2E;YAC3E,MAAM,CAAC,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;SAC7F;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QACD,cAAc,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;QAC1D,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE;;YACV,uBAAuB;YACvB,MAAA,cAAc,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAC;YACrC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;AACvC,CAAC;AAUD;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,cAAc,EAAE,MAAM,EAAiG;IAC7J,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,uBAAuB,CAAC,cAAc,CAAC,CAAC;IAChE,OAAO,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;AACnC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,0BAA0B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAqF;IAClJ,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC,CAAE,kEAAkE;IAC5H,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACzF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEzD,oEAAoE;IACpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,uBAAuB;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE;YACjD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,MAAM,SAAS,GAAG,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC;YACvD,mBAAmB,CAAC,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;SAC3G;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAc,EAAE,MAAe,EAAE,EAAE;QAC1E,uBAAuB;QACvB,QAAQ,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,uBAAuB,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;IACzD,MAAM,KAAK,GAAwB,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAEzG,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,KAAK,IACxE,WAAW,IAAI,QAAQ,CACpB,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Utilities\n */\nimport * as React from \"react\";\nimport { ResizeObserver } from \"./ResizeObserverPolyfill\";\nimport { useRefEffect } from \"./useRefEffect\";\nimport { useRefs } from \"./useRefs\";\n\n/** Uses ResizeObserver API to notify about element bound changes.\n  * @internal\n  */\nexport function useResizeObserver<T extends Element>(onResize?: (width: number, height: number) => void) {\n  const [bounds, setBounds] = React.useState({ width: 0, height: 0 });\n  const resizeObserver = React.useRef<ResizeObserver | null>(null);\n  const rafRef = React.useRef(0);  // set to non-zero when requestAnimationFrame processing is active\n  const isMountedRef = React.useRef(false);\n  const owningWindowRef = React.useRef<any>(null);\n\n  // istanbul ignore next\n  const resizeObserverCleanup = () => {\n    if (rafRef.current)\n      owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n\n    resizeObserver.current?.disconnect();\n    resizeObserver.current = null;\n  };\n\n  React.useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n      if (rafRef.current)\n        owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n      owningWindowRef.current?.removeEventListener(\"beforeunload\", resizeObserverCleanup);\n    };\n  }, []);\n\n  const processResize = React.useCallback((target: HTMLElement) => {\n    const newBounds = target.getBoundingClientRect();\n    // istanbul ignore else\n    if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {\n      setBounds(newBounds);\n      onResize && onResize(newBounds.width, newBounds.height);\n    }\n  }, [onResize, bounds.height, bounds.width]);\n\n  const handleResize = React.useCallback((entries: any[]) => {\n    // istanbul ignore if\n    if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {\n      return;\n    }\n    const target = entries[0].target as HTMLElement;\n    // istanbul ignore next\n    owningWindowRef.current && owningWindowRef.current.removeEventListener(\"beforeunload\", resizeObserverCleanup);\n\n    owningWindowRef.current = target.ownerDocument.defaultView;\n    // istanbul ignore else\n    if (owningWindowRef.current) {\n      owningWindowRef.current.addEventListener(\"unload\", resizeObserverCleanup);\n\n      // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\n      // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\n      rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));\n    }\n  }, [processResize]);\n\n  const observerRef = useRefEffect((instance: T | null) => {\n    resizeObserver.current = new ResizeObserver(handleResize);\n    if (instance) {\n      resizeObserver.current.observe(instance);\n      const newBounds = instance.getBoundingClientRect();\n      onResize && onResize(newBounds.width, newBounds.height);\n      setBounds(newBounds);\n    }\n\n    return () => {\n      instance && ( /* istanbul ignore next */resizeObserver.current?.unobserve(instance));\n      resizeObserver.current = null;\n    };\n  }, [handleResize, onResize]);\n\n  const handleRef = React.useCallback((instance: Element | null) => {\n    const newBounds = instance && instance.getBoundingClientRect();\n    // istanbul ignore if\n    if (newBounds && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {\n      setBounds(newBounds);\n      onResize && onResize(newBounds.width, newBounds.height);\n    }\n  }, [bounds.height, bounds.width, onResize]);\n\n  const ref = useRefs(handleRef, observerRef);\n  return ref;\n}\n\n/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector\n * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly\n * handles observing element in pop-out/child windows.\n  * @internal\n  */\nexport function useLayoutResizeObserver(inElement: HTMLElement | null, onResize?: (width?: number, height?: number) => void) {\n  const inBoundingRect = inElement?.getBoundingClientRect();\n  const [bounds, setBounds] = React.useState<{ width?: number, height?: number }>({ width: inBoundingRect?.width, height: inBoundingRect?.height });\n  const [watchedElement, setWatchedElement] = React.useState(inElement);\n  const resizeObserver = React.useRef<ResizeObserver | null>(null);\n  const rafRef = React.useRef(0);  // set to non-zero when requestAnimationFrame processing is active\n  const isMountedRef = React.useRef(false);\n  const owningWindowRef = React.useRef<any>(null);\n\n  // istanbul ignore next\n  const resizeObserverCleanup = () => {\n    if (rafRef.current)\n      owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n\n    resizeObserver.current?.disconnect();\n    resizeObserver.current = null;\n  };\n\n  React.useEffect(() => {\n    isMountedRef.current = true;\n    setWatchedElement(inElement);\n\n    // istanbul ignore next\n    if (inElement) {\n      const newBounds = inElement.getBoundingClientRect();\n      onResize && onResize(newBounds.width, newBounds.height);\n      setBounds(newBounds);\n    }\n\n    return () => {\n      isMountedRef.current = false;\n      (rafRef.current && owningWindowRef.current) && owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n      owningWindowRef.current && owningWindowRef.current.removeEventListener(\"beforeunload\", resizeObserverCleanup);\n    };\n  }, [onResize, inElement]);\n\n  const processResize = React.useCallback((target: HTMLElement) => {\n    const newBounds = target.getBoundingClientRect();\n    // istanbul ignore next\n    if (isMountedRef.current && (bounds.width !== newBounds.width || bounds.height !== newBounds.height)) {\n      onResize && onResize(newBounds.width, newBounds.height);\n      setBounds(newBounds);\n    }\n  }, [bounds.height, bounds.width, onResize]);\n\n  const handleResize = React.useCallback((entries: any[]) => {\n    // istanbul ignore next\n    if (!isMountedRef.current || !Array.isArray(entries) || 0 === entries.length) {\n      return;\n    }\n    const target = entries[0].target as HTMLElement;\n    // istanbul ignore next\n    if (owningWindowRef.current)\n      owningWindowRef.current.removeEventListener(\"beforeunload\", resizeObserverCleanup);\n\n    owningWindowRef.current = target.ownerDocument.defaultView;\n    // istanbul ignore else\n    if (owningWindowRef.current) {\n      owningWindowRef.current.addEventListener(\"unload\", resizeObserverCleanup);\n\n      // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\n      // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\n      rafRef.current = owningWindowRef.current.requestAnimationFrame(() => processResize(target));\n    }\n  }, [processResize]);\n\n  React.useLayoutEffect(() => {\n    if (!watchedElement) {\n      return;\n    }\n    resizeObserver.current = new ResizeObserver(handleResize);\n    resizeObserver.current.observe(watchedElement);\n    return () => {\n      // istanbul ignore next\n      resizeObserver.current?.disconnect();\n      resizeObserver.current = null;\n    };\n  }, [handleResize, watchedElement]);\n\n  return [bounds.width, bounds.height];\n}\n\n/** Prop the ElementResizeObserver sends to the render function.\n *  @public\n */\nexport interface RenderPropsArgs {\n  width?: number;\n  height?: number;\n}\n\n/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles\n * observing element in pop-out/child windows.\n *  @public\n */\nexport function ElementResizeObserver({ watchedElement, render }: { watchedElement: HTMLElement | null, render: (props: RenderPropsArgs) => React.JSX.Element }) {\n  const [width, height] = useLayoutResizeObserver(watchedElement);\n  return render({ width, height });\n}\n\n/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when\n * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then\n * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report\n * size changes from its parent container.\n * @public\n */\nexport function ResizableContainerObserver({ onResize, children }: { onResize: (width: number, height: number) => void, children?: React.ReactNode }) {\n  const containerRef = React.useRef<HTMLDivElement>(null);  // set to non-zero when requestAnimationFrame processing is active\n  const [containerElement, setContainerElement] = React.useState<HTMLElement | null>(null);\n  const isMountedRef = React.useRef(false);\n  const hasChildren = React.Children.count(children) !== 0;\n\n  // if no children are specified then monitor size of parent element.\n  React.useEffect(() => {\n    // istanbul ignore next\n    if (!isMountedRef.current && containerRef.current) {\n      isMountedRef.current = true;\n      const hasParent = !!containerRef.current.parentElement;\n      setContainerElement(hasChildren && hasParent ? containerRef.current : containerRef.current.parentElement);\n    }\n  }, [hasChildren]);\n\n  const processResize = React.useCallback((width?: number, height?: number) => {\n    // istanbul ignore next\n    onResize(width ?? 0, height ?? 0);\n  }, [onResize]);\n\n  useLayoutResizeObserver(containerElement, processResize);\n  const style: React.CSSProperties = hasChildren ? { width: \"100%\", height: \"100%\" } : { display: \"none\" };\n\n  return (\n    <div ref={containerRef} className=\"uicore-resizable-container\" style={style}>\n      {hasChildren && children}\n    </div>\n  );\n}\n"]}

package/lib/esm/core-react/utils/hooks/useTargeted.d.ts

@@ -1,9 +1,9 @@
-/** @packageDocumentation
- * @module Utilities
- */
-import * as React from "react";
-/** Returns a stateful value that indicates if the component is targeted/hovered.
- * @internal
- */
-export declare const useTargeted: (ref: React.RefObject<Element>) => boolean;
+/** @packageDocumentation
+ * @module Utilities
+ */
+import * as React from "react";
+/** Returns a stateful value that indicates if the component is targeted/hovered.
+ * @internal
+ */
+export declare const useTargeted: (ref: React.RefObject<Element>) => boolean;
 //# sourceMappingURL=useTargeted.d.ts.map