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

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

@@ -1 +1 @@
-{"version":3,"file":"TransparencyPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/TransparencyPopupButton.tsx"],"names":[],"mappings":"AAKA,OAAO,gCAAgC,CAAC;AAOxC,aAAa;AACb,MAAM,WAAW,4BAA4B;IAC3C,6BAA6B;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,aAAa;AACb,wBAAgB,uBAAuB,CAAC,EAAE,YAAY,EAAE,oBAAoB,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CA2DpI"}
+{"version":3,"file":"TransparencyPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/TransparencyPopupButton.tsx"],"names":[],"mappings":"AAKA,OAAO,gCAAgC,CAAC;AAKxC,aAAa;AACb,MAAM,WAAW,4BAA4B;IAC3C,6BAA6B;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,aAAa;AACb,wBAAgB,uBAAuB,CAAC,EAAE,YAAY,EAAE,oBAAoB,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CA4DpI"}

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

@@ -31,9 +31,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *--------------------------------------------------------------------------------------------*/
 require("./TransparencyPopupButton.scss");
 const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_frontend_1 = require("@itwin/core-frontend");
-const core_react_1 = require("@itwin/core-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 /** @alpha */
 function TransparencyPopupButton({ transparency, onTransparencyChange, buttonToolTip, disabled }) {
@@ -41,13 +39,9 @@ function TransparencyPopupButton({ transparency, onTransparencyChange, buttonToo
     const [defaultTransparencyLabel] = React.useState(core_frontend_1.IModelApp.localization.getLocalizedString("mapLayers:TransparencyPopup.SetTransparency"));
     const toolTipLabel = React.useMemo(() => (buttonToolTip ? buttonToolTip : defaultTransparencyLabel), [buttonToolTip, defaultTransparencyLabel]);
     const buttonRef = React.useRef(null);
-    const togglePopupDisplay = React.useCallback((event) => {
-        event.preventDefault();
-        setIsSettingsOpen((prev) => !prev);
-    }, [setIsSettingsOpen]);
-    const handleCloseSetting = React.useCallback(() => {
-        setIsSettingsOpen(false);
-    }, [setIsSettingsOpen]);
+    const togglePopupDisplay = React.useCallback(() => {
+        setIsSettingsOpen(!isSettingsOpen);
+    }, [isSettingsOpen]);
     const handleTransparencyChange = React.useCallback((values) => {
         if (values.length) {
             const newTransparency = values[0];
@@ -58,7 +52,7 @@ function TransparencyPopupButton({ transparency, onTransparencyChange, buttonToo
             }
         }
     }, [onTransparencyChange, transparency]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { disabled: disabled, size: "small", styleType: "borderless", title: toolTipLabel, className: "map-transparency-popup-button", onClick: togglePopupDisplay, ref: buttonRef, children: (0, jsx_runtime_1.jsx)("div", { className: "transparent-button", children: (0, jsx_runtime_1.jsx)("svg", { className: disabled ? "checkered-disabled" : "checkered", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "m21.00427 0h-18.00854a2.9957 2.9957 0 0 0 -2.99573 2.99567v18.0086a2.99575 2.99575 0 0 0 2.99573 2.99573h18.00854a2.99575 2.99575 0 0 0 2.99573-2.99573v-18.0086a2.9957 2.9957 0 0 0 -2.99573-2.99567zm-20.00427 21.00427v-9.00427h11v-11h9.00427a1.998 1.998 0 0 1 1.99573 1.99567v9.00433h-11v11h-9.00427a1.998 1.998 0 0 1 -1.99573-1.99573z" }) }) }) }), (0, jsx_runtime_1.jsx)(core_react_1.Popup, { isOpen: isSettingsOpen, position: appui_abstract_1.RelativePosition.BottomRight, onClose: handleCloseSetting, target: buttonRef.current, children: (0, jsx_runtime_1.jsx)("div", { className: "map-transparency-popup-panel", children: (0, jsx_runtime_1.jsx)("div", { className: "map-transparency-slider-container", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Slider, { min: 0, max: 100, values: [transparency * 100], step: 1, onChange: handleTransparencyChange }) }) }) })] }));
+    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", { className: "map-transparency-popup-panel", children: (0, jsx_runtime_1.jsx)("div", { className: "map-transparency-slider-container", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Slider, { min: 0, max: 100, values: [transparency * 100], step: 1, onChange: handleTransparencyChange }) }) }), visible: isSettingsOpen, onVisibleChange: setIsSettingsOpen, placement: "bottom-end", applyBackground: true, positionReference: buttonRef.current ?? undefined, children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { disabled: disabled, size: "small", styleType: "borderless", title: toolTipLabel, className: "map-transparency-popup-button", onClick: togglePopupDisplay, ref: buttonRef, children: (0, jsx_runtime_1.jsx)("div", { className: "transparent-button", children: (0, jsx_runtime_1.jsx)("svg", { className: disabled ? "checkered-disabled" : "checkered", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "m21.00427 0h-18.00854a2.9957 2.9957 0 0 0 -2.99573 2.99567v18.0086a2.99575 2.99575 0 0 0 2.99573 2.99573h18.00854a2.99575 2.99575 0 0 0 2.99573-2.99573v-18.0086a2.9957 2.9957 0 0 0 -2.99573-2.99567zm-20.00427 21.00427v-9.00427h11v-11h9.00427a1.998 1.998 0 0 1 1.99573 1.99567v9.00433h-11v11h-9.00427a1.998 1.998 0 0 1 -1.99573-1.99573z" }) }) }) }) }) }));
 }
 exports.TransparencyPopupButton = TransparencyPopupButton;
 //# sourceMappingURL=TransparencyPopupButton.js.map

package/lib/cjs/ui/widget/TransparencyPopupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencyPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/TransparencyPopupButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAEhG,0CAAwC;AACxC,6CAA+B;AAC/B,0DAAyD;AACzD,wDAAiD;AACjD,kDAA0C;AAC1C,wDAAsD;AAatD,aAAa;AACb,SAAgB,uBAAuB,CAAC,EAAE,YAAY,EAAE,oBAAoB,EAAE,aAAa,EAAE,QAAQ,EAAgC;IACnI,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,yBAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,6CAA6C,CAAC,CAAC,CAAC;IAC5I,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAE,CAAC,aAAa,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAEhJ,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,KAAsD,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,MAAyB,EAAE,EAAE;QAC5B,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,eAAe,KAAK,YAAY,EAAE,CAAC;gBACrC,IAAI,oBAAoB,EAAE,CAAC;oBACzB,oBAAoB,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,oBAAoB,EAAE,YAAY,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,6DACE,uBAAC,sBAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,SAAS,YAEd,gCAAK,SAAS,EAAC,oBAAoB,YACjC,gCAAK,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,EAAC,WAAW,YAChF,iCAAM,CAAC,EAAC,iVAAiV,GAAG,GACxV,GACF,GACC,EAET,uBAAC,kBAAK,IAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,iCAAgB,CAAC,WAAW,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,YAC3H,gCAAK,SAAS,EAAC,8BAA8B,YAC3C,gCAAK,SAAS,EAAC,mCAAmC,YAChD,uBAAC,sBAAM,IAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,YAAY,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,wBAAwB,GAAI,GACnG,GACF,GACA,IACP,CACJ,CAAC;AACJ,CAAC;AA3DD,0DA2DC","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\nimport \"./TransparencyPopupButton.scss\";\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Popup } from \"@itwin/core-react\";\nimport { Button, Slider } from \"@itwin/itwinui-react\";\n\n/** @alpha */\nexport interface TransparencyPopupButtonProps {\n  /** initialValue range 0-1 */\n  transparency: number;\n  /** function called when value changes. Returned value range 0-1 */\n  onTransparencyChange: (value: number) => void;\n  /** optional tooltip */\n  buttonToolTip?: string;\n  disabled?: boolean;\n}\n\n/** @alpha */\nexport function TransparencyPopupButton({ transparency, onTransparencyChange, buttonToolTip, disabled }: TransparencyPopupButtonProps) {\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const [defaultTransparencyLabel] = React.useState(IModelApp.localization.getLocalizedString(\"mapLayers:TransparencyPopup.SetTransparency\"));\n  const toolTipLabel = React.useMemo(() => (buttonToolTip ? buttonToolTip : defaultTransparencyLabel), [buttonToolTip, defaultTransparencyLabel]);\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault();\n      setIsSettingsOpen((prev) => !prev);\n    },\n    [setIsSettingsOpen],\n  );\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const handleTransparencyChange = React.useCallback(\n    (values: readonly number[]) => {\n      if (values.length) {\n        const newTransparency = values[0];\n        if (newTransparency !== transparency) {\n          if (onTransparencyChange) {\n            onTransparencyChange(newTransparency / 100);\n          }\n        }\n      }\n    },\n    [onTransparencyChange, transparency],\n  );\n\n  return (\n    <>\n      <Button\n        disabled={disabled}\n        size=\"small\"\n        styleType=\"borderless\"\n        title={toolTipLabel}\n        className=\"map-transparency-popup-button\"\n        onClick={togglePopupDisplay}\n        ref={buttonRef}\n      >\n        <div className=\"transparent-button\">\n          <svg className={disabled ? \"checkered-disabled\" : \"checkered\"} viewBox=\"0 0 24 24\">\n            <path d=\"m21.00427 0h-18.00854a2.9957 2.9957 0 0 0 -2.99573 2.99567v18.0086a2.99575 2.99575 0 0 0 2.99573 2.99573h18.00854a2.99575 2.99575 0 0 0 2.99573-2.99573v-18.0086a2.9957 2.9957 0 0 0 -2.99573-2.99567zm-20.00427 21.00427v-9.00427h11v-11h9.00427a1.998 1.998 0 0 1 1.99573 1.99567v9.00433h-11v11h-9.00427a1.998 1.998 0 0 1 -1.99573-1.99573z\" />\n          </svg>\n        </div>\n      </Button>\n      {/*eslint-disable-next-line @typescript-eslint/no-deprecated */}\n      <Popup isOpen={isSettingsOpen} position={RelativePosition.BottomRight} onClose={handleCloseSetting} target={buttonRef.current}>\n        <div className=\"map-transparency-popup-panel\">\n          <div className=\"map-transparency-slider-container\">\n            <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />\n          </div>\n        </div>\n      </Popup>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"TransparencyPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/TransparencyPopupButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAEhG,0CAAwC;AACxC,6CAA+B;AAC/B,wDAAiD;AACjD,wDAA+D;AAa/D,aAAa;AACb,SAAgB,uBAAuB,CAAC,EAAE,YAAY,EAAE,oBAAoB,EAAE,aAAa,EAAE,QAAQ,EAAgC;IACnI,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,yBAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,6CAA6C,CAAC,CAAC,CAAC;IAC5I,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAE,CAAC,aAAa,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAEhJ,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC9C,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,MAAyB,EAAE,EAAE;QAC5B,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,eAAe,KAAK,YAAY,EAAE,CAAC;gBACrC,IAAI,oBAAoB,EAAE,CAAC;oBACzB,oBAAoB,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,oBAAoB,EAAE,YAAY,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,2DACE,uBAAC,uBAAO,IACN,OAAO,EACL,gCAAK,SAAS,EAAC,8BAA8B,YAC3C,gCAAK,SAAS,EAAC,mCAAmC,YAChD,uBAAC,sBAAM,IAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,YAAY,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,wBAAwB,GAAI,GACnG,GACF,EAER,OAAO,EAAE,cAAc,EACvB,eAAe,EAAE,iBAAiB,EAClC,SAAS,EAAC,YAAY,EACtB,eAAe,QACf,iBAAiB,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,YAEjD,uBAAC,sBAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,SAAS,YAEd,gCAAK,SAAS,EAAC,oBAAoB,YACjC,gCAAK,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,EAAC,WAAW,YAChF,iCAAM,CAAC,EAAC,iVAAiV,GAAG,GACxV,GACF,GACC,GACD,GACT,CACJ,CAAC;AACJ,CAAC;AA5DD,0DA4DC","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\nimport \"./TransparencyPopupButton.scss\";\nimport * as React from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Button, Popover, Slider } from \"@itwin/itwinui-react\";\n\n/** @alpha */\nexport interface TransparencyPopupButtonProps {\n  /** initialValue range 0-1 */\n  transparency: number;\n  /** function called when value changes. Returned value range 0-1 */\n  onTransparencyChange: (value: number) => void;\n  /** optional tooltip */\n  buttonToolTip?: string;\n  disabled?: boolean;\n}\n\n/** @alpha */\nexport function TransparencyPopupButton({ transparency, onTransparencyChange, buttonToolTip, disabled }: TransparencyPopupButtonProps) {\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const [defaultTransparencyLabel] = React.useState(IModelApp.localization.getLocalizedString(\"mapLayers:TransparencyPopup.SetTransparency\"));\n  const toolTipLabel = React.useMemo(() => (buttonToolTip ? buttonToolTip : defaultTransparencyLabel), [buttonToolTip, defaultTransparencyLabel]);\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback(() => {\n      setIsSettingsOpen(!isSettingsOpen);\n    },\n    [isSettingsOpen],\n  );\n\n  const handleTransparencyChange = React.useCallback(\n    (values: readonly number[]) => {\n      if (values.length) {\n        const newTransparency = values[0];\n        if (newTransparency !== transparency) {\n          if (onTransparencyChange) {\n            onTransparencyChange(newTransparency / 100);\n          }\n        }\n      }\n    },\n    [onTransparencyChange, transparency],\n  );\n\n  return (\n    <>\n      <Popover\n        content={\n          <div className=\"map-transparency-popup-panel\">\n            <div className=\"map-transparency-slider-container\">\n              <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />\n            </div>\n          </div>\n        }\n        visible={isSettingsOpen}\n        onVisibleChange={setIsSettingsOpen}\n        placement=\"bottom-end\"\n        applyBackground\n        positionReference={buttonRef.current ?? undefined}\n      >\n        <Button\n          disabled={disabled}\n          size=\"small\"\n          styleType=\"borderless\"\n          title={toolTipLabel}\n          className=\"map-transparency-popup-button\"\n          onClick={togglePopupDisplay}\n          ref={buttonRef}\n        >\n          <div className=\"transparent-button\">\n            <svg className={disabled ? \"checkered-disabled\" : \"checkered\"} viewBox=\"0 0 24 24\">\n              <path d=\"m21.00427 0h-18.00854a2.9957 2.9957 0 0 0 -2.99573 2.99567v18.0086a2.99575 2.99575 0 0 0 2.99573 2.99573h18.00854a2.99575 2.99575 0 0 0 2.99573-2.99573v-18.0086a2.9957 2.9957 0 0 0 -2.99573-2.99567zm-20.00427 21.00427v-9.00427h11v-11h9.00427a1.998 1.998 0 0 1 1.99573 1.99567v9.00433h-11v11h-9.00427a1.998 1.998 0 0 1 -1.99573-1.99573z\" />\n            </svg>\n          </div>\n        </Button>\n      </Popover>\n    </>\n  );\n}\n"]}

package/lib/esm/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/esm/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/esm/ui/hooks/useCrossOriginPopup.js

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { useInterval } from "./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
+ */
+export 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
+    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]);
+}
+//# sourceMappingURL=useCrossOriginPopup.js.map

package/lib/esm/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/esm/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/esm/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/esm/ui/hooks/useInterval.js

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+/** 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 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]);
+}
+//# sourceMappingURL=useInterval.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;GAIG;AACH,MAAM,UAAU,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","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/esm/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/esm/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/esm/ui/hooks/useResizeObserver.js

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+/** 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;
+};
+export 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];
+};
+//# sourceMappingURL=useResizeObserver.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;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;AAEF,MAAM,CAAC,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","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/esm/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/esm/ui/widget/AttachLayerPopupButton.js

@@ -4,12 +4,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
-import { RelativePosition } from "@itwin/appui-abstract";
 import { UiFramework } from "@itwin/appui-react";
 import { IModelApp, MapLayerSource, MapLayerSourceStatus, NotifyMessageDetails, OutputMessagePriority } from "@itwin/core-frontend";
-import * as UiCore from "@itwin/core-react";
 import { SvgAdd, SvgDelete, SvgEdit } from "@itwin/itwinui-icons-react";
-import { Button, IconButton, Input, List, ListItem, ProgressRadial, Text } from "@itwin/itwinui-react";
+import { Button, IconButton, Input, List, ListItem, Popover, ProgressRadial, Text } from "@itwin/itwinui-react";
 import { MapLayerPreferences } from "../../MapLayerPreferences";
 import { MapLayersUI } from "../../mapLayers";
 import { ConfirmMessageDialog } from "./ConfirmMessageDialog";
@@ -22,7 +20,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(() => {
@@ -159,6 +157,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
             validation.subLayers.length > 1);
     }, []);
     const handleModalUrlDialogOk = React.useCallback((action, sourceState) => {
+        setMapUrlModalOpen(false);
         UiFramework.dialogs.modal.close();
         if (LayerAction.New === action && sourceState && sourceState.validation.status === MapLayerSourceStatus.Valid) {
             if (needsFeatureSelection(sourceState.source, sourceState.validation)) {
@@ -171,13 +170,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);
         UiFramework.dialogs.modal.close();
         resumeOutsideClick();
-    }, [setLoading, resumeOutsideClick]);
+    }, [setLoading, resumeOutsideClick, setMapUrlModalOpen]);
     React.useEffect(() => {
         async function attemptToAddLayer() {
             if (layerNameToAdd && activeViewport) {
@@ -206,7 +206,8 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
                         else if (sourceValidation.status === MapLayerSourceStatus.RequireAuth && isMounted.current) {
                             const layer = foundSource.toLayerSettings();
                             if (layer) {
-                                UiFramework.dialogs.modal.open(_jsx(MapUrlDialog, { activeViewport: activeViewport, isOverlay: isOverlay, signInModeArgs: { layer, validation: sourceValidation, source: foundSource }, onOkResult: (sourceState) => handleModalUrlDialogOk(LayerAction.New, sourceState), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
+                                setMapUrlModalOpen(true);
+                                UiFramework.dialogs.modal.open(_jsx(MapUrlDialog, { activeViewport: activeViewport, signInModeArgs: { layer, validation: sourceValidation, source: foundSource }, onOkResult: (sourceState) => handleModalUrlDialogOk(LayerAction.New, sourceState), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
                             }
                             if (onHandleOutsideClick) {
                                 onHandleOutsideClick(false);
@@ -253,6 +254,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
         onHandleOutsideClick,
         openFeatureSelectionDialog,
         mapLayerOptions,
+        setMapUrlModalOpen,
     ]);
     const options = React.useMemo(() => sources, [sources]);
     const filteredOptions = React.useMemo(() => {
@@ -263,13 +265,14 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
             return options?.filter((option) => option.name.toLowerCase().includes(sourceFilterString?.toLowerCase()));
         }
     }, [options, sourceFilterString]);
-    const handleAddNewMapSource = React.useCallback(() => {
-        UiFramework.dialogs.modal.open(_jsx(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);
+        UiFramework.dialogs.modal.open(_jsx(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);
     }, []);
@@ -295,7 +298,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;
@@ -316,12 +319,19 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick })
         if (matchingSource === undefined) {
             return;
         }
-        UiFramework.dialogs.modal.open(_jsx(MapUrlDialog, { activeViewport: activeViewport, isOverlay: isOverlay, mapLayerSourceToEdit: matchingSource, onOkResult: (result) => handleModalUrlDialogOk(LayerAction.Edit, result), onCancelResult: handleModalUrlDialogCancel, mapLayerOptions: mapLayerOptions }));
+        setMapUrlModalOpen(true);
+        UiFramework.dialogs.modal.open(_jsx(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 (_jsxs("div", { className: "map-manager-header", children: [(loading || loadingSources) && (_jsx(ProgressRadial, { as: "div", children: _jsx(Text, { variant: 'small', children: loadingMapSources }) })), _jsxs("div", { className: "map-manager-source-listbox-header", children: [_jsx(Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: sourceFilterString, onChange: handleFilterTextChanged, size: "small" }), _jsx(Button, { className: "map-manager-add-source-button", title: addCustomLayerToolTip, onClick: handleAddNewMapSource, children: addCustomLayerLabel })] }), _jsx("div", { className: "map-manager-sources", children: _jsx(List, { id: "map-sources", as: "div", className: "map-manager-source-list", children: filteredOptions?.map((source) => (_jsxs(ListItem, { as: "div", className: "map-source-list-entry", actionable: true, onClick: () => handleAttach(source.name), onMouseEnter: () => setLayerNameUnderCursor(source.name), onMouseLeave: () => setLayerNameUnderCursor(undefined), children: [_jsx(ListItem.Content, { children: source.name }), 
+    }, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, mapLayerOptions, onHandleOutsideClick, setMapUrlModalOpen, sources]);
+    return (_jsxs("div", { className: "map-manager-header", children: [(loading || loadingSources) && (_jsx("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "grid",
+                    placeItems: "center",
+                    zIndex: 100,
+                }, children: _jsx(ProgressRadial, { as: "div", children: _jsx(Text, { variant: 'small', children: loadingMapSources }) }) })), _jsxs("div", { className: "map-manager-source-listbox-header", children: [_jsx(Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: sourceFilterString, onChange: handleFilterTextChanged, size: "small" }), _jsx(Button, { className: "map-manager-add-source-button", title: addCustomLayerToolTip, onClick: handleAddNewMapSource, children: addCustomLayerLabel })] }), _jsx("div", { className: "map-manager-sources", children: _jsx(List, { id: "map-sources", as: "div", className: "map-manager-source-list", children: filteredOptions?.map((source) => (_jsxs(ListItem, { as: "div", className: "map-source-list-entry", actionable: true, onClick: () => handleAttach(source.name), onMouseEnter: () => setLayerNameUnderCursor(source.name), onMouseLeave: () => setLayerNameUnderCursor(undefined), children: [_jsx(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 && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: editLayerDefButtonTitle, onClick: onItemEditButtonClicked, children: _jsx(SvgEdit, {}) }), _jsx(Button, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: removeLayerDefButtonTitle, onClick: (event) => {
@@ -345,6 +355,7 @@ export 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);
@@ -360,24 +371,6 @@ export 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 } = useSourceMapContext();
     const handleLayerAttached = React.useCallback(() => {
         if (!isMounted.current) {
@@ -406,7 +399,6 @@ export function AttachLayerPopupButton(props) {
         }
         return button;
     }
-    return (_jsxs(_Fragment, { children: [renderButton(), _jsx(UiCore.Popup // TODO: Replace all deprecated UiCore components with iTwinUI components
-            , { isOpen: popupOpen, position: RelativePosition.BottomRight, onClose: handleClosePopup, onOutsideClick: onHandleOutsideClick, closeOnWheel: false, target: buttonRef.current, closeOnEnter: false, closeOnContextMenu: false, children: _jsx("div", { ref: panelRef, className: "map-sources-popup-panel", children: _jsx(AttachLayerPanel, { isOverlay: props.isOverlay, onLayerAttached: handleLayerAttached, onHandleOutsideClick: setHandleOutsideClick }) }) })] }));
+    return (_jsx(_Fragment, { children: _jsx(Popover, { content: _jsx("div", { ref: panelRef, className: "map-sources-popup-panel", children: _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() }) }));
 }
 //# sourceMappingURL=AttachLayerPopupButton.js.map