@itwin/map-layers 6.0.0-dev.0 → 6.0.0-dev.2

package/lib/cjs/ui/hooks/useCrossOriginPopup.d.ts

@@ -0,0 +1,7 @@
+/** Hook that will show a popup window
+ * @internal
+ * Reference: https://github.com/iTwin/appui/commit/b8c0ac6eec4b8f1551cde3b7913df135ccd0f4f5
+ * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useCrossOriginPopup.tsx
+ */
+export declare function useCrossOriginPopup(visible: boolean, url: string | undefined, title: string, width: number, height: number, onClose: () => void): void;
+//# sourceMappingURL=useCrossOriginPopup.d.ts.map

package/lib/cjs/ui/hooks/useCrossOriginPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossOriginPopup.d.ts","sourceRoot":"","sources":["../../../../src/ui/hooks/useCrossOriginPopup.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,IAAI,QAsGpB"}

package/lib/cjs/ui/hooks/useCrossOriginPopup.js

@@ -0,0 +1,123 @@
+"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.useCrossOriginPopup = 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 useInterval_1 = require("./useInterval");
+/** Hook that will show a popup window
+ * @internal
+ * Reference: https://github.com/iTwin/appui/commit/b8c0ac6eec4b8f1551cde3b7913df135ccd0f4f5
+ * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useCrossOriginPopup.tsx
+ */
+function useCrossOriginPopup(visible, url, title, width, height, onClose) {
+    const [checkPopupAliveDelay, setCheckPopupAliveDelay] = React.useState();
+    // ONLY re-render the popup when visibility changes, any other changes get deferred until next visibility change
+    // hence the massive use of 'useRef'
+    const popupWindow = React.useRef();
+    const savedUrl = React.useRef(url);
+    const savedTitle = React.useRef(title);
+    const savedWidth = React.useRef(width);
+    const savedHeight = React.useRef(height);
+    const savedOnClose = React.useRef(onClose);
+    React.useEffect(() => {
+        savedUrl.current = url;
+    }, [url]);
+    React.useEffect(() => {
+        savedTitle.current = title;
+    }, [title]);
+    React.useEffect(() => {
+        savedWidth.current = width;
+    }, [width]);
+    React.useEffect(() => {
+        savedHeight.current = height;
+    }, [height]);
+    React.useEffect(() => {
+        savedOnClose.current = onClose;
+    }, [onClose]);
+    // Cleanup method after a popup closure.  Also calls the OnClose callback.
+    const handleClosedPopup = React.useCallback(() => {
+        savedOnClose.current();
+        setCheckPopupAliveDelay(undefined);
+        popupWindow.current = undefined;
+    }, []);
+    const closePopup = React.useCallback(() => {
+        if (popupWindow.current !== undefined) {
+            popupWindow.current.close(); // Manually close the popup
+            handleClosedPopup();
+        }
+    }, [handleClosedPopup]);
+    const checkPopupClosed = React.useCallback(() => {
+        if (popupWindow.current?.closed) {
+            // Popup has been closed by end-user, inform our host and cleanup
+            handleClosedPopup();
+        }
+    }, [handleClosedPopup]);
+    //  Close popup when parent window get closed
+    React.useEffect(() => {
+        window.onbeforeunload = (_event) => {
+            closePopup();
+        };
+        return () => {
+            window.onbeforeunload = null;
+        };
+    }, [closePopup]);
+    // Whenever the hook is unloaded, make sure the underlying popup get closed.
+    // Note: An interval is used to check if popup was closed by user: because we access
+    // a cross domain resource inside the popup, we don't have access to popup window events.
+    // As a workaround, we periodically check if popup is still alive.
+    // Reference: https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript/48240128#48240128
+    React.useEffect(() => {
+        return () => {
+            closePopup();
+        };
+    }, [closePopup]);
+    // Timer that checks if popup was closed by end-user
+    (0, useInterval_1.useInterval)(checkPopupClosed, checkPopupAliveDelay);
+    // ==> Main render effect
+    // Monitors visibility changes and open/close the popup accordingly.
+    React.useEffect(() => {
+        // If visible and a popup window is not already open, open a new popup window
+        if (visible && popupWindow.current === undefined) {
+            const popup = window.open(savedUrl.current, savedTitle.current, `width=${savedWidth.current},height=${savedHeight.current}`);
+            if (popup) {
+                popup.focus();
+                popupWindow.current = popup;
+                // Start and interval that will check if popup got closed by user
+                setCheckPopupAliveDelay(1000);
+            }
+        }
+        // If not visible but a previous popup window is still open, close it.
+        if (!visible && popupWindow.current !== undefined) {
+            popupWindow.current.close();
+            handleClosedPopup();
+        }
+    }, [handleClosedPopup, visible]);
+}
+exports.useCrossOriginPopup = useCrossOriginPopup;
+//# sourceMappingURL=useCrossOriginPopup.js.map

package/lib/cjs/ui/hooks/useCrossOriginPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossOriginPopup.js","sourceRoot":"","sources":["../../../../src/ui/hooks/useCrossOriginPopup.tsx"],"names":[],"mappings":"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","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 *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { useInterval } from \"./useInterval\";\n\n/** Hook that will show a popup window\n * @internal\n * Reference: https://github.com/iTwin/appui/commit/b8c0ac6eec4b8f1551cde3b7913df135ccd0f4f5\n * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useCrossOriginPopup.tsx\n */\nexport function useCrossOriginPopup(\n  visible: boolean,\n  url: string | undefined,\n  title: string,\n  width: number,\n  height: number,\n  onClose: () => void\n) {\n  const [checkPopupAliveDelay, setCheckPopupAliveDelay] = React.useState<\n    number | undefined\n  >();\n\n  // ONLY re-render the popup when visibility changes, any other changes get deferred until next visibility change\n  // hence the massive use of 'useRef'\n  const popupWindow = React.useRef<Window>();\n  const savedUrl = React.useRef(url);\n  const savedTitle = React.useRef(title);\n  const savedWidth = React.useRef(width);\n  const savedHeight = React.useRef(height);\n  const savedOnClose = React.useRef(onClose);\n\n  React.useEffect(() => {\n    savedUrl.current = url;\n  }, [url]);\n  React.useEffect(() => {\n    savedTitle.current = title;\n  }, [title]);\n  React.useEffect(() => {\n    savedWidth.current = width;\n  }, [width]);\n  React.useEffect(() => {\n    savedHeight.current = height;\n  }, [height]);\n  React.useEffect(() => {\n    savedOnClose.current = onClose;\n  }, [onClose]);\n\n  // Cleanup method after a popup closure.  Also calls the OnClose callback.\n  const handleClosedPopup = React.useCallback(() => {\n    savedOnClose.current();\n    setCheckPopupAliveDelay(undefined);\n    popupWindow.current = undefined;\n  }, []);\n\n  const closePopup = React.useCallback(() => {\n    if (popupWindow.current !== undefined) {\n      popupWindow.current.close(); // Manually close the popup\n      handleClosedPopup();\n    }\n  }, [handleClosedPopup]);\n\n  const checkPopupClosed = React.useCallback(() => {\n    if (popupWindow.current?.closed) {\n      // Popup has been closed by end-user, inform our host and cleanup\n      handleClosedPopup();\n    }\n  }, [handleClosedPopup]);\n\n  //  Close popup when parent window get closed\n  React.useEffect(() => {\n    window.onbeforeunload = (_event) => {\n      closePopup();\n    };\n    return () => {\n      window.onbeforeunload = null;\n    };\n  }, [closePopup]);\n\n  // Whenever the hook is unloaded, make sure the underlying popup get closed.\n  // Note: An interval is used to check if popup was closed by user: because we access\n  // a cross domain resource inside the popup, we don't have access to popup window events.\n  // As a workaround, we periodically check if popup is still alive.\n  // Reference: https://stackoverflow.com/questions/9388380/capture-the-close-event-of-popup-window-in-javascript/48240128#48240128\n  React.useEffect(() => {\n    return () => {\n      closePopup();\n    };\n  }, [closePopup]);\n\n  // Timer that checks if popup was closed by end-user\n  useInterval(checkPopupClosed, checkPopupAliveDelay);\n\n  // ==> Main render effect\n  // Monitors visibility changes and open/close the popup accordingly.\n  React.useEffect(() => {\n    // If visible and a popup window is not already open, open a new popup window\n    if (visible && popupWindow.current === undefined) {\n      const popup = window.open(\n        savedUrl.current,\n        savedTitle.current,\n        `width=${savedWidth.current},height=${savedHeight.current}`\n      );\n      if (popup) {\n        popup.focus();\n        popupWindow.current = popup;\n\n        // Start and interval that will check if popup got closed by user\n        setCheckPopupAliveDelay(1000);\n      }\n    }\n\n    // If not visible but a previous popup window is still open, close it.\n    if (!visible && popupWindow.current !== undefined) {\n      popupWindow.current.close();\n\n      handleClosedPopup();\n    }\n  }, [handleClosedPopup, visible]);\n}\n"]}

package/lib/cjs/ui/hooks/useInterval.d.ts

@@ -0,0 +1,7 @@
+/** Hook that create an interval and clears it when unloaded
+ * Reference: https://github.com/gaearon/overreacted.io/blob/master/src/pages/making-setinterval-declarative-with-react-hooks/index.md
+ * @internal
+ * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useInterval.tsx
+ */
+export declare function useInterval(callback: (...args: any[]) => void, delay: number | undefined): void;
+//# sourceMappingURL=useInterval.d.ts.map

package/lib/cjs/ui/hooks/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../../../src/ui/hooks/useInterval.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAClC,KAAK,EAAE,MAAM,GAAG,SAAS,QAuB1B"}

package/lib/cjs/ui/hooks/useInterval.js

@@ -0,0 +1,60 @@
+"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.useInterval = 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"));
+/** Hook that create an interval and clears it when unloaded
+ * Reference: https://github.com/gaearon/overreacted.io/blob/master/src/pages/making-setinterval-declarative-with-react-hooks/index.md
+ * @internal
+ * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useInterval.tsx
+ */
+function useInterval(callback, delay) {
+    const savedCallback = React.useRef(callback);
+    // Remember the latest function.
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    React.useEffect(() => {
+        function tick() {
+            savedCallback.current();
+        }
+        if (delay !== undefined) {
+            const id = setInterval(tick, delay);
+            return () => {
+                clearInterval(id);
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [delay]);
+}
+exports.useInterval = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/lib/cjs/ui/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"","sources":["../../../../src/ui/hooks/useInterval.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAChG,6CAA+B;AAE/B;;;;GAIG;AACH,SAAgB,WAAW,CACzB,QAAkC,EAClC,KAAyB;IAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAA2B,QAAQ,CAAC,CAAC;IAEvE,gCAAgC;IAChC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,uBAAuB;IACvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,SAAS,IAAI;YACX,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,CAAC;QACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACpC,OAAO,GAAG,EAAE;gBACV,aAAa,CAAC,EAAE,CAAC,CAAC;YACpB,CAAC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,SAAS,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC;AAzBD,kCAyBC","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 *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\n\n/** Hook that create an interval and clears it when unloaded\n * Reference: https://github.com/gaearon/overreacted.io/blob/master/src/pages/making-setinterval-declarative-with-react-hooks/index.md\n * @internal\n * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useInterval.tsx\n */\nexport function useInterval(\n  callback: (...args: any[]) => void,\n  delay: number | undefined\n) {\n  const savedCallback = React.useRef<(...args: any[]) => void>(callback);\n\n  // Remember the latest function.\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n\n  // Set up the interval.\n  React.useEffect(() => {\n    function tick() {\n      savedCallback.current();\n    }\n    if (delay !== undefined) {\n      const id = setInterval(tick, delay);\n      return () => {\n        clearInterval(id);\n      };\n    } else {\n      return undefined;\n    }\n  }, [delay]);\n}\n"]}

package/lib/cjs/ui/hooks/useResizeObserver.d.ts

@@ -0,0 +1,2 @@
+export declare const useResizeObserver: <T extends HTMLElement>(onResize: (size: DOMRectReadOnly) => void) => readonly [(element: T | null | undefined) => void, ResizeObserver | undefined];
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/lib/cjs/ui/hooks/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../src/ui/hooks/useResizeObserver.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,iBAAiB,2CACX,eAAe,KAAK,IAAI,yBAK7B,CAAC,GAAG,IAAI,GAAG,SAAS,sCA2BjC,CAAC"}

package/lib/cjs/ui/hooks/useResizeObserver.js

@@ -0,0 +1,66 @@
+"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.useResizeObserver = 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"));
+/** Hook that will observe Window Resize
+ * @internal
+ * Reference: https://github.com/iTwin/iTwinUI/blob/87bbc99316c17bd2b763a730135fbb45c84b0e82/packages/itwinui-react/src/utils/hooks/useResizeObserver.tsx
+ * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useResizeObserver.tsx
+ */
+const getWindow = () => {
+    return typeof window === "undefined" ? undefined : window;
+};
+const useResizeObserver = (onResize) => {
+    const resizeObserver = React.useRef();
+    const elementRef = React.useCallback((element) => {
+        if (!getWindow()?.ResizeObserver) {
+            return;
+        }
+        resizeObserver.current?.disconnect?.();
+        if (element) {
+            resizeObserver.current = new ResizeObserver((entries) => {
+                // We wrap onResize with requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
+                // See: https://github.com/iTwin/iTwinUI/issues/1317
+                // See: https://stackoverflow.com/a/58701523/11547064
+                window.requestAnimationFrame(() => {
+                    if (!Array.isArray(entries) || !entries.length) {
+                        return;
+                    }
+                    const [{ contentRect }] = entries;
+                    return onResize(contentRect);
+                });
+            });
+            resizeObserver.current?.observe?.(element);
+        }
+    }, [onResize]);
+    return [elementRef, resizeObserver.current];
+};
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.js.map

package/lib/cjs/ui/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../src/ui/hooks/useResizeObserver.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAChG,6CAA+B;AAE/B;;;;GAIG;AACH,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;AAC5D,CAAC,CAAC;AAEK,MAAM,iBAAiB,GAAG,CAC/B,QAAyC,EACzC,EAAE;IACF,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,EAAkB,CAAC;IAEtD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,OAA6B,EAAE,EAAE;QAChC,IAAI,CAAC,SAAS,EAAE,EAAE,cAAc,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC;QACvC,IAAI,OAAO,EAAE,CAAC;YACZ,cAAc,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBACtD,uGAAuG;gBACvG,oDAAoD;gBACpD,qDAAqD;gBACrD,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;wBAC/C,OAAO;oBACT,CAAC;oBAED,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,GAAG,OAAO,CAAC;oBAClC,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YACH,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAU,CAAC;AACvD,CAAC,CAAC;AAjCW,QAAA,iBAAiB,qBAiC5B","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 *--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\n\n/** Hook that will observe Window Resize\n * @internal\n * Reference: https://github.com/iTwin/iTwinUI/blob/87bbc99316c17bd2b763a730135fbb45c84b0e82/packages/itwinui-react/src/utils/hooks/useResizeObserver.tsx\n * Copied from: https://github.com/iTwin/appui/blob/master/ui/core-react/src/core-react/utils/hooks/useResizeObserver.tsx\n */\nconst getWindow = () => {\n  return typeof window === \"undefined\" ? undefined : window;\n};\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  onResize: (size: DOMRectReadOnly) => void,\n) => {\n  const resizeObserver = React.useRef<ResizeObserver>();\n\n  const elementRef = React.useCallback(\n    (element: T | null | undefined) => {\n      if (!getWindow()?.ResizeObserver) {\n        return;\n      }\n\n      resizeObserver.current?.disconnect?.();\n      if (element) {\n        resizeObserver.current = new ResizeObserver((entries) => {\n          // We wrap onResize with requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded\n          // See: https://github.com/iTwin/iTwinUI/issues/1317\n          // See: https://stackoverflow.com/a/58701523/11547064\n          window.requestAnimationFrame(() => {\n            if (!Array.isArray(entries) || !entries.length) {\n              return;\n            }\n\n            const [{ contentRect }] = entries;\n            return onResize(contentRect);\n          });\n        });\n        resizeObserver.current?.observe?.(element);\n      }\n    },\n    [onResize],\n  );\n\n  return [elementRef, resizeObserver.current] as const;\n};\n"]}

package/lib/cjs/ui/widget/AttachLayerPopupButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachLayerPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/AttachLayerPopupButton.tsx"],"names":[],"mappings":"AAogBA,gBAAgB;AAChB,oBAAY,qBAAqB;IAC/B,OAAO,IAAA;IACP,IAAI,IAAA;IACJ,IAAI,IAAA;CACL;AACD,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAgIxE"}
+{"version":3,"file":"AttachLayerPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/AttachLayerPopupButton.tsx"],"names":[],"mappings":"AA8gBA,gBAAgB;AAChB,oBAAY,qBAAqB;IAC/B,OAAO,IAAA;IACP,IAAI,IAAA;IACJ,IAAI,IAAA;CACL;AACD,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAsGxE"}

package/lib/cjs/ui/widget/AttachLayerPopupButton.js

@@ -30,10 +30,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
 const appui_react_1 = require("@itwin/appui-react");
 const core_frontend_1 = require("@itwin/core-frontend");
-const UiCore = __importStar(require("@itwin/core-react"));
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const MapLayerPreferences_1 = require("../../MapLayerPreferences");
@@ -48,7 +46,7 @@ var LayerAction;
     LayerAction[LayerAction["New"] = 0] = "New";
     LayerAction[LayerAction["Edit"] = 1] = "Edit";
 })(LayerAction || (LayerAction = {}));
-function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }) {
+function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick, setMapUrlModalOpen }) {
     const [layerNameToAdd, setLayerNameToAdd] = React.useState();
     const [sourceFilterString, setSourceFilterString] = React.useState();
     const { placeholderLabel, addCustomLayerLabel, addCustomLayerToolTip, loadingMapSources, removeLayerDefButtonTitle, editLayerDefButtonTitle, removeLayerDefDialogTitle, } = React.useMemo(() => {
@@ -185,6 +183,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
             validation.subLayers.length > 1);
     }, []);
     const handleModalUrlDialogOk = React.useCallback((action, sourceState) => {
+        setMapUrlModalOpen(false);
         appui_react_1.UiFramework.dialogs.modal.close();
         if (LayerAction.New === action && sourceState && sourceState.validation.status === core_frontend_1.MapLayerSourceStatus.Valid) {
             if (needsFeatureSelection(sourceState.source, sourceState.validation)) {
@@ -197,13 +196,14 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
         else {
             resumeOutsideClick();
         }
-    }, [attachLayer, needsFeatureSelection, openFeatureSelectionDialog, resumeOutsideClick]);
+    }, [attachLayer, needsFeatureSelection, openFeatureSelectionDialog, resumeOutsideClick, setMapUrlModalOpen]);
     const handleModalUrlDialogCancel = React.useCallback(() => {
         // close popup and refresh UI
         setLoading(false);
+        setMapUrlModalOpen(false);
         appui_react_1.UiFramework.dialogs.modal.close();
         resumeOutsideClick();
-    }, [setLoading, resumeOutsideClick]);
+    }, [setLoading, resumeOutsideClick, setMapUrlModalOpen]);
     React.useEffect(() => {
         async function attemptToAddLayer() {
             if (layerNameToAdd && activeViewport) {
@@ -232,7 +232,8 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
                         else if (sourceValidation.status === core_frontend_1.MapLayerSourceStatus.RequireAuth && isMounted.current) {
                             const layer = foundSource.toLayerSettings();
                             if (layer) {
-                                appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(MapUrlDialog_1.MapUrlDialog, { activeViewport: activeViewport, isOverlay: isOverlay, signInModeArgs: { layer, validation: sourceValidation, source: foundSource }, onOkResult: (sourceState) => handleModalUrlDialogOk(LayerAction.New, sourceState), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
+                                setMapUrlModalOpen(true);
+                                appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(MapUrlDialog_1.MapUrlDialog, { activeViewport: activeViewport, signInModeArgs: { layer, validation: sourceValidation, source: foundSource }, onOkResult: (sourceState) => handleModalUrlDialogOk(LayerAction.New, sourceState), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
                             }
                             if (onHandleOutsideClick) {
                                 onHandleOutsideClick(false);
@@ -279,6 +280,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
         onHandleOutsideClick,
         openFeatureSelectionDialog,
         mapLayerOptions,
+        setMapUrlModalOpen,
     ]);
     const options = React.useMemo(() => sources, [sources]);
     const filteredOptions = React.useMemo(() => {
@@ -289,13 +291,14 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
             return options?.filter((option) => option.name.toLowerCase().includes(sourceFilterString?.toLowerCase()));
         }
     }, [options, sourceFilterString]);
-    const handleAddNewMapSource = React.useCallback(() => {
-        appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(MapUrlDialog_1.MapUrlDialog, { activeViewport: activeViewport, isOverlay: isOverlay, onOkResult: (result) => handleModalUrlDialogOk(LayerAction.New, result), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
+    const handleAddNewMapSource = React.useCallback((event) => {
+        event.stopPropagation(); // We don't want the owning ListBox to react on mouse click.
+        setMapUrlModalOpen(true);
+        appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(MapUrlDialog_1.MapUrlDialog, { activeViewport: activeViewport, onOkResult: (result) => handleModalUrlDialogOk(LayerAction.New, result), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
         if (onHandleOutsideClick) {
             onHandleOutsideClick(false);
         }
-        return;
-    }, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, isOverlay, mapLayerOptions, onHandleOutsideClick]);
+    }, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, mapLayerOptions, onHandleOutsideClick, setMapUrlModalOpen]);
     const handleAttach = React.useCallback((mapName) => {
         setLayerNameToAdd(mapName);
     }, []);
@@ -321,7 +324,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
     }, [iTwinId, iModelId, resumeOutsideClick]);
     /*
      Handle Remove layer button clicked
-     */
+    */
     const onItemRemoveButtonClicked = React.useCallback((source, event) => {
         event.stopPropagation(); // We don't want the owning ListBox to react on mouse click.
         const layerName = source.name;
@@ -342,12 +345,19 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
         if (matchingSource === undefined) {
             return;
         }
-        appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(MapUrlDialog_1.MapUrlDialog, { activeViewport: activeViewport, isOverlay: isOverlay, mapLayerSourceToEdit: matchingSource, onOkResult: (result) => handleModalUrlDialogOk(LayerAction.Edit, result), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
+        setMapUrlModalOpen(true);
+        appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(MapUrlDialog_1.MapUrlDialog, { activeViewport: activeViewport, mapLayerSourceToEdit: matchingSource, onOkResult: (result) => handleModalUrlDialogOk(LayerAction.Edit, result), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
         if (onHandleOutsideClick) {
             onHandleOutsideClick(false);
         }
-    }, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, isOverlay, mapLayerOptions, onHandleOutsideClick, sources]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "map-manager-header", children: [(loading || loadingSources) && ((0, jsx_runtime_1.jsx)(itwinui_react_1.ProgressRadial, { as: "div", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Text, { variant: 'small', children: loadingMapSources }) })), (0, jsx_runtime_1.jsxs)("div", { className: "map-manager-source-listbox-header", children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: sourceFilterString, onChange: handleFilterTextChanged, size: "small" }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { className: "map-manager-add-source-button", title: addCustomLayerToolTip, onClick: handleAddNewMapSource, children: addCustomLayerLabel })] }), (0, jsx_runtime_1.jsx)("div", { className: "map-manager-sources", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.List, { id: "map-sources", as: "div", className: "map-manager-source-list", children: filteredOptions?.map((source) => ((0, jsx_runtime_1.jsxs)(itwinui_react_1.ListItem, { as: "div", className: "map-source-list-entry", actionable: true, onClick: () => handleAttach(source.name), onMouseEnter: () => setLayerNameUnderCursor(source.name), onMouseLeave: () => setLayerNameUnderCursor(undefined), children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.ListItem.Content, { children: source.name }), 
+    }, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, mapLayerOptions, onHandleOutsideClick, setMapUrlModalOpen, sources]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "map-manager-header", children: [(loading || loadingSources) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "grid",
+                    placeItems: "center",
+                    zIndex: 100,
+                }, children: (0, jsx_runtime_1.jsx)(itwinui_react_1.ProgressRadial, { as: "div", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Text, { variant: 'small', children: loadingMapSources }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "map-manager-source-listbox-header", children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: sourceFilterString, onChange: handleFilterTextChanged, size: "small" }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { className: "map-manager-add-source-button", title: addCustomLayerToolTip, onClick: handleAddNewMapSource, children: addCustomLayerLabel })] }), (0, jsx_runtime_1.jsx)("div", { className: "map-manager-sources", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.List, { id: "map-sources", as: "div", className: "map-manager-source-list", children: filteredOptions?.map((source) => ((0, jsx_runtime_1.jsxs)(itwinui_react_1.ListItem, { as: "div", className: "map-source-list-entry", actionable: true, onClick: () => handleAttach(source.name), onMouseEnter: () => setLayerNameUnderCursor(source.name), onMouseLeave: () => setLayerNameUnderCursor(undefined), children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.ListItem.Content, { children: source.name }), 
                             // Display the delete icon only when the mouse over a specific item
                             // otherwise list feels cluttered.
                             !!iTwinId && layerNameUnderCursor && layerNameUnderCursor === source.name && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: editLayerDefButtonTitle, onClick: onItemEditButtonClicked, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgEdit, {}) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: removeLayerDefButtonTitle, onClick: (event) => {
@@ -371,6 +381,7 @@ function AttachLayerPopupButton(props) {
         };
     }, []);
     const [handleOutsideClick, setHandleOutsideClick] = React.useState(true);
+    const [mapUrlModalOpen, setMapUrlModalOpen] = React.useState(false);
     const [popupOpen, setPopupOpen] = React.useState(false);
     const buttonRef = React.useRef(null);
     const panelRef = React.useRef(null);
@@ -386,24 +397,6 @@ function AttachLayerPopupButton(props) {
     const togglePopup = React.useCallback(() => {
         setPopupOpen(!popupOpen);
     }, [popupOpen]);
-    const handleClosePopup = React.useCallback(() => {
-        setPopupOpen(false);
-    }, []);
-    const onHandleOutsideClick = React.useCallback((event) => {
-        if (!handleOutsideClick) {
-            return;
-        }
-        // If clicking on button that open panel -  don't trigger outside click processing
-        if (buttonRef?.current && buttonRef?.current.contains(event.target)) {
-            return;
-        }
-        // If clicking the panel, this is not an outside clicked
-        if (panelRef.current && panelRef?.current.contains(event.target)) {
-            return;
-        }
-        // If we reach this point, we got an outside clicked, no close the popup
-        setPopupOpen(false);
-    }, [handleOutsideClick]);
     const { refreshFromStyle } = (0, MapLayerManager_1.useSourceMapContext)();
     const handleLayerAttached = React.useCallback(() => {
         if (!isMounted.current) {
@@ -432,8 +425,7 @@ function AttachLayerPopupButton(props) {
         }
         return button;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderButton(), (0, jsx_runtime_1.jsx)(UiCore.Popup // TODO: Replace all deprecated UiCore components with iTwinUI components
-            , { isOpen: popupOpen, position: appui_abstract_1.RelativePosition.BottomRight, onClose: handleClosePopup, onOutsideClick: onHandleOutsideClick, closeOnWheel: false, target: buttonRef.current, closeOnEnter: false, closeOnContextMenu: false, children: (0, jsx_runtime_1.jsx)("div", { ref: panelRef, className: "map-sources-popup-panel", children: (0, jsx_runtime_1.jsx)(AttachLayerPanel, { isOverlay: props.isOverlay, onLayerAttached: handleLayerAttached, onHandleOutsideClick: setHandleOutsideClick }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Popover, { content: (0, jsx_runtime_1.jsx)("div", { ref: panelRef, className: "map-sources-popup-panel", children: (0, jsx_runtime_1.jsx)(AttachLayerPanel, { isOverlay: props.isOverlay, onLayerAttached: handleLayerAttached, onHandleOutsideClick: setHandleOutsideClick, setMapUrlModalOpen: setMapUrlModalOpen }) }), applyBackground: true, visible: popupOpen || mapUrlModalOpen, onVisibleChange: setPopupOpen, closeOnOutsideClick: handleOutsideClick, placement: "bottom-end", children: renderButton() }) }));
 }
 exports.AttachLayerPopupButton = AttachLayerPopupButton;
 //# sourceMappingURL=AttachLayerPopupButton.js.map