iguazio.dashboard-react-controls 3.0.1 → 3.0.2

package/dist/components/PopUpDialog/PopUpDialog.d.ts

@@ -1,12 +1,13 @@
 export default PopUpDialog;
-declare function PopUpDialog({ children, className, closePopUp, customPosition, headerIsHidden, headerText, showPopUpDialog, style, tooltipText }: {
+declare function PopUpDialog({ children, className, closePopUp, customPosition, headerIsHidden, headerText, isOpen, onResolve, style, tooltipText }: {
     children: any;
     className?: string;
-    closePopUp?: () => void;
+    closePopUp?: any;
     customPosition?: {};
     headerIsHidden?: boolean;
     headerText?: string;
-    showPopUpDialog?: boolean;
+    isOpen?: boolean;
+    onResolve?: any;
     style?: {};
     tooltipText?: string;
 }, ref: any): import("react").ReactPortal;
@@ -17,8 +18,10 @@ declare namespace PopUpDialog {
         export let className: any;
         export let closePopUp: any;
         export { POP_UP_CUSTOM_POSITION as customPosition };
+        export let isOpen: any;
         export let headerIsHidden: any;
         export let headerText: any;
+        export let onResolve: any;
         export let showPopUpDialog: any;
         export let style: any;
         export let tooltipText: any;

package/dist/components/PopUpDialog/PopUpDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopUpDialog.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PopUpDialog/PopUpDialog.jsx"],"names":[],"mappings":";AA+BA;;;;;;;;;;0CAkJC;;;;;;;;;;;;;;;uCAvJsC,aAAa"}
+{"version":3,"file":"PopUpDialog.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PopUpDialog/PopUpDialog.jsx"],"names":[],"mappings":";AA+BA;;;;;;;;;;;0CAkJC;;;;;;;;;;;;;;;;;uCAvJsC,aAAa"}

package/dist/components/PopUpDialog/PopUpDialog.mjs

@@ -1,48 +1,48 @@
-import { jsx as n, jsxs as _ } from "react/jsx-runtime";
-import { useState as I, useRef as $, useCallback as C, useLayoutEffect as B, useEffect as D, forwardRef as F } from "react";
+import { jsx as p, jsxs as U } from "react/jsx-runtime";
+import { useRef as H, useCallback as x, useLayoutEffect as I, useEffect as $, forwardRef as B } from "react";
 import l from "prop-types";
-import L from "classnames";
-import { createPortal as j } from "react-dom";
-import { throttle as M } from "lodash";
-import k from "../RoundedIcon/RoundedIcon.mjs";
-import W from "../Tooltip/Tooltip.mjs";
-import q from "../TooltipTemplate/TextTooltipTemplate.mjs";
-import { POP_UP_CUSTOM_POSITION as V } from "../../types.mjs";
-import A from "../../images/close.svg.mjs";
+import D from "classnames";
+import { createPortal as F } from "react-dom";
+import { throttle as L } from "lodash";
+import j from "../RoundedIcon/RoundedIcon.mjs";
+import M from "../Tooltip/Tooltip.mjs";
+import k from "../TooltipTemplate/TextTooltipTemplate.mjs";
+import { POP_UP_CUSTOM_POSITION as W } from "../../types.mjs";
+import q from "../../images/close.svg.mjs";
 /* empty css                  */
-let h = ({
-  children: R,
-  className: x = "",
-  closePopUp: f = () => {
-  },
+let m = ({
+  children: E,
+  className: R = "",
+  closePopUp: f = null,
   customPosition: i = {},
-  headerIsHidden: E = !1,
+  headerIsHidden: T = !1,
   headerText: w = "",
-  showPopUpDialog: T = !0,
-  style: m = {},
+  isOpen: v = !0,
+  onResolve: b = null,
+  style: u = {},
   tooltipText: y = ""
 }, o) => {
-  const [v, N] = I(T ?? !0), S = $(null);
-  o ?? (o = S);
-  const O = L(
-    x,
+  const N = H(null);
+  o ?? (o = N);
+  const S = D(
+    R,
     "pop-up-dialog__overlay",
     i.element && "custom-position"
-  ), z = C(() => {
-    f && f(), N(!1);
-  }, [f]), u = C(() => {
+  ), z = x(() => {
+    f && f(), b && b();
+  }, [f, b]), h = x(() => {
     var r;
     if ((r = i == null ? void 0 : i.element) != null && r.current && (o != null && o.current)) {
-      const e = i.element.current.getBoundingClientRect(), t = o.current.getBoundingClientRect(), [b, H] = i.position.split("-"), p = 15, s = 5, g = e.right >= t.width + p, d = window.innerWidth - e.left >= t.width + p, P = e.top > t.height + p + s, U = e.bottom + t.height + p + s <= window.innerHeight;
-      let a = H === "left" ? e.right - t.width : e.left, c;
-      b === "top" ? c = P ? e.top - t.height - s : p : c = U ? e.bottom + s : window.innerHeight - t.height - p, i.autoVerticalPosition && (b === "top" ? !P && U && (c = e.bottom + s) : P && !U && (c = e.top - t.height - s)), i.autoHorizontalPosition && (b === "left" ? !g && d ? a = e.left : !g && !d && (a = p) : g && !d ? a = e.right - t.width : !g && !d && (a = window.innerWidth - t.width - p)), o.current.style.top = `${c}px`, m.left && !(i.autoHorizontalPosition && d) ? o.current.style.left = `calc(${a}px + ${m.left})` : o.current.style.left = `${a}px`;
+      const e = i.element.current.getBoundingClientRect(), t = o.current.getBoundingClientRect(), [_, O] = i.position.split("-"), n = 15, a = 5, g = e.right >= t.width + n, d = window.innerWidth - e.left >= t.width + n, C = e.top > t.height + n + a, P = e.bottom + t.height + n + a <= window.innerHeight;
+      let s = O === "left" ? e.right - t.width : e.left, c;
+      _ === "top" ? c = C ? e.top - t.height - a : n : c = P ? e.bottom + a : window.innerHeight - t.height - n, i.autoVerticalPosition && (_ === "top" ? !C && P && (c = e.bottom + a) : C && !P && (c = e.top - t.height - a)), i.autoHorizontalPosition && (_ === "left" ? !g && d ? s = e.left : !g && !d && (s = n) : g && !d ? s = e.right - t.width : !g && !d && (s = window.innerWidth - t.width - n)), o.current.style.top = `${c}px`, u.left && !(i.autoHorizontalPosition && d) ? o.current.style.left = `calc(${s}px + ${u.left})` : o.current.style.left = `${s}px`;
     }
-  }, [i, m.left, o]);
-  return B(() => {
-    u();
-  }, [u]), D(() => {
+  }, [i, u.left, o]);
+  return I(() => {
+    h();
+  }, [h]), $(() => {
     if (v) {
-      const r = M(u, 100, {
+      const r = L(h, 100, {
         trailing: !0,
         leading: !0
       }), e = new ResizeObserver(r), t = o.current;
@@ -50,41 +50,43 @@ let h = ({
         e.unobserve(t), window.removeEventListener("resize", r);
       };
     }
-  }, [u, o, v]), v ? j(
-    /* @__PURE__ */ n("div", { ref: o, className: O, style: m, children: /* @__PURE__ */ _("div", { "data-testid": "pop-up-dialog", className: "pop-up-dialog", children: [
-      !E && /* @__PURE__ */ _("div", { className: "pop-up-dialog__header", children: [
-        w && /* @__PURE__ */ n("div", { "data-testid": "pop-up-dialog-header", className: "pop-up-dialog__header-text", children: /* @__PURE__ */ n(W, { template: /* @__PURE__ */ n(q, { text: y || w }), children: /* @__PURE__ */ n("span", { children: w }) }) }),
-        /* @__PURE__ */ n(
-          k,
+  }, [h, o, v]), v ? F(
+    /* @__PURE__ */ p("div", { ref: o, className: S, style: u, children: /* @__PURE__ */ U("div", { "data-testid": "pop-up-dialog", className: "pop-up-dialog", children: [
+      !T && /* @__PURE__ */ U("div", { className: "pop-up-dialog__header", children: [
+        w && /* @__PURE__ */ p("div", { "data-testid": "pop-up-dialog-header", className: "pop-up-dialog__header-text", children: /* @__PURE__ */ p(M, { template: /* @__PURE__ */ p(k, { text: y || w }), children: /* @__PURE__ */ p("span", { children: w }) }) }),
+        /* @__PURE__ */ p(
+          j,
           {
             className: "pop-up-dialog__btn_close",
             onClick: z,
             tooltipText: "Close",
             "data-testid": "pop-up-close-btn",
-            children: /* @__PURE__ */ n(A, {})
+            children: /* @__PURE__ */ p(q, {})
           }
         )
       ] }),
-      R
+      E
     ] }) }),
     document.getElementById("overlay_container")
   ) : null;
 };
-h = F(h);
-h.displayName = "PopUpDialog";
-h.propTypes = {
+m = B(m);
+m.displayName = "PopUpDialog";
+m.propTypes = {
   children: l.node.isRequired,
   className: l.string,
   closePopUp: l.func,
-  customPosition: V,
+  customPosition: W,
+  isOpen: l.bool,
   headerIsHidden: l.bool,
   headerText: l.string,
+  onResolve: l.func,
   showPopUpDialog: l.bool,
   style: l.object,
   tooltipText: l.string
 };
-const le = h;
+const ie = m;
 export {
-  le as default
+  ie as default
 };
 //# sourceMappingURL=PopUpDialog.mjs.map

package/dist/components/PopUpDialog/PopUpDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopUpDialog.mjs","sources":["../../../src/lib/components/PopUpDialog/PopUpDialog.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { createPortal } from 'react-dom'\nimport { throttle } from 'lodash'\n\nimport RoundedIcon from '../RoundedIcon/RoundedIcon'\nimport Tooltip from '../Tooltip/Tooltip'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\n\nimport { POP_UP_CUSTOM_POSITION } from '../../types'\nimport CloseIcon from '../../images/close.svg?react'\n\nimport './popUpDialog.scss'\n\nlet PopUpDialog = (\n  {\n    children,\n    className = '',\n    closePopUp = () => {},\n    customPosition = {},\n    headerIsHidden = false,\n    headerText = '',\n    showPopUpDialog = true,\n    style = {},\n    tooltipText = ''\n  },\n  ref\n) => {\n  const [showPopUp, setShowPopUp] = useState(showPopUpDialog ?? true)\n  const popUpOverlayRef = useRef(null)\n  ref ??= popUpOverlayRef\n  const popUpClassNames = classnames(\n    className,\n    'pop-up-dialog__overlay',\n    customPosition.element && 'custom-position'\n  )\n\n  const handleClosePopUp = useCallback(() => {\n    closePopUp && closePopUp()\n    setShowPopUp(false)\n  }, [closePopUp])\n\n  const calculateCustomPopUpPosition = useCallback(() => {\n    if (customPosition?.element?.current && ref?.current) {\n      const elementRect = customPosition.element.current.getBoundingClientRect()\n      const popUpRect = ref.current.getBoundingClientRect()\n      const [verticalPosition, horizontalPosition] = customPosition.position.split('-')\n      const popupMargin = 15\n      const elementMargin = 5\n      const isEnoughSpaceFromLeft = elementRect.right >= popUpRect.width + popupMargin\n      const isEnoughSpaceFromRight =\n        window.innerWidth - elementRect.left >= popUpRect.width + popupMargin\n      const isEnoughSpaceFromTop = elementRect.top > popUpRect.height + popupMargin + elementMargin\n      const isEnoughSpaceFromBottom =\n        elementRect.bottom + popUpRect.height + popupMargin + elementMargin <= window.innerHeight\n      let leftPosition =\n        horizontalPosition === 'left' ? elementRect.right - popUpRect.width : elementRect.left\n\n      let topPosition\n\n      if (verticalPosition === 'top') {\n        topPosition = isEnoughSpaceFromTop\n          ? elementRect.top - popUpRect.height - elementMargin\n          : popupMargin\n      } else {\n        topPosition = isEnoughSpaceFromBottom\n          ? elementRect.bottom + elementMargin\n          : window.innerHeight - popUpRect.height - popupMargin\n      }\n\n      if (customPosition.autoVerticalPosition) {\n        if (verticalPosition === 'top') {\n          if (!isEnoughSpaceFromTop && isEnoughSpaceFromBottom) {\n            topPosition = elementRect.bottom + elementMargin\n          }\n        } else {\n          if (isEnoughSpaceFromTop && !isEnoughSpaceFromBottom) {\n            topPosition = elementRect.top - popUpRect.height - elementMargin\n          }\n        }\n      }\n\n      if (customPosition.autoHorizontalPosition) {\n        if (verticalPosition === 'left') {\n          if (!isEnoughSpaceFromLeft && isEnoughSpaceFromRight) {\n            leftPosition = elementRect.left\n          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {\n            leftPosition = popupMargin\n          }\n        } else {\n          if (isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {\n            leftPosition = elementRect.right - popUpRect.width\n          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {\n            leftPosition = window.innerWidth - popUpRect.width - popupMargin\n          }\n        }\n      }\n\n      ref.current.style.top = `${topPosition}px`\n\n      if (style.left && !(customPosition.autoHorizontalPosition && isEnoughSpaceFromRight)) {\n        ref.current.style.left = `calc(${leftPosition}px + ${style.left})`\n      } else {\n        ref.current.style.left = `${leftPosition}px`\n      }\n    }\n  }, [customPosition, style.left, ref])\n\n  useLayoutEffect(() => {\n    calculateCustomPopUpPosition()\n  }, [calculateCustomPopUpPosition])\n\n  useEffect(() => {\n    if (showPopUp) {\n      const throttledCalculatedCustomPopUpPosition = throttle(calculateCustomPopUpPosition, 100, {\n        trailing: true,\n        leading: true\n      })\n      const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition)\n      const popupElement = ref.current\n\n      popupObserver.observe(popupElement)\n      window.addEventListener('resize', throttledCalculatedCustomPopUpPosition)\n\n      return () => {\n        popupObserver.unobserve(popupElement)\n        window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition)\n      }\n    }\n  }, [calculateCustomPopUpPosition, ref, showPopUp])\n\n  return showPopUp\n    ? createPortal(\n        <div ref={ref} className={popUpClassNames} style={style}>\n          <div data-testid=\"pop-up-dialog\" className=\"pop-up-dialog\">\n            {!headerIsHidden && (\n              <div className=\"pop-up-dialog__header\">\n                {headerText && (\n                  <div data-testid=\"pop-up-dialog-header\" className=\"pop-up-dialog__header-text\">\n                    <Tooltip template={<TextTooltipTemplate text={tooltipText || headerText} />}>\n                      <span>{headerText}</span>\n                    </Tooltip>\n                  </div>\n                )}\n                <RoundedIcon\n                  className=\"pop-up-dialog__btn_close\"\n                  onClick={handleClosePopUp}\n                  tooltipText=\"Close\"\n                  data-testid=\"pop-up-close-btn\"\n                >\n                  <CloseIcon />\n                </RoundedIcon>\n              </div>\n            )}\n            {children}\n          </div>\n        </div>,\n        document.getElementById('overlay_container')\n      )\n    : null\n}\n\nPopUpDialog = forwardRef(PopUpDialog)\n\nPopUpDialog.displayName = 'PopUpDialog'\n\nPopUpDialog.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n  closePopUp: PropTypes.func,\n  customPosition: POP_UP_CUSTOM_POSITION,\n  headerIsHidden: PropTypes.bool,\n  headerText: PropTypes.string,\n  showPopUpDialog: PropTypes.bool,\n  style: PropTypes.object,\n  tooltipText: PropTypes.string\n}\n\nexport default PopUpDialog\n"],"names":["PopUpDialog","children","className","closePopUp","customPosition","headerIsHidden","headerText","showPopUpDialog","style","tooltipText","ref","showPopUp","setShowPopUp","useState","popUpOverlayRef","useRef","popUpClassNames","classnames","handleClosePopUp","useCallback","calculateCustomPopUpPosition","_a","elementRect","popUpRect","verticalPosition","horizontalPosition","popupMargin","elementMargin","isEnoughSpaceFromLeft","isEnoughSpaceFromRight","isEnoughSpaceFromTop","isEnoughSpaceFromBottom","leftPosition","topPosition","useLayoutEffect","useEffect","throttledCalculatedCustomPopUpPosition","throttle","popupObserver","popupElement","createPortal","jsx","jsxs","Tooltip","TextTooltipTemplate","RoundedIcon","CloseIcon","forwardRef","PropTypes","POP_UP_CUSTOM_POSITION","PopUpDialog$1"],"mappings":"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"}
+{"version":3,"file":"PopUpDialog.mjs","sources":["../../../src/lib/components/PopUpDialog/PopUpDialog.jsx"],"sourcesContent":["/*\nCopyright 2022 Iguazio Systems Ltd.\nLicensed under the Apache License, Version 2.0 (the \"License\") with\nan addition restriction as set forth herein. You may not use this\nfile except in compliance with the License. You may obtain a copy of\nthe License at http://www.apache.org/licenses/LICENSE-2.0.\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing\npermissions and limitations under the License.\nIn addition, you may not use the software for any purposes that are\nillegal under applicable law, and the grant of the foregoing license\nunder the Apache 2.0 license is conditioned upon your compliance with\nsuch restriction.\n*/\nimport React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { createPortal } from 'react-dom'\nimport { throttle } from 'lodash'\n\nimport RoundedIcon from '../RoundedIcon/RoundedIcon'\nimport Tooltip from '../Tooltip/Tooltip'\nimport TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'\n\nimport { POP_UP_CUSTOM_POSITION } from '../../types'\nimport CloseIcon from '../../images/close.svg?react'\n\nimport './popUpDialog.scss'\n\nlet PopUpDialog = (\n  {\n    children,\n    className = '',\n    closePopUp = null,\n    customPosition = {},\n    headerIsHidden = false,\n    headerText = '',\n    isOpen = true,\n    onResolve = null,\n    style = {},\n    tooltipText = ''\n  },\n  ref\n) => {\n  const popUpOverlayRef = useRef(null)\n  ref ??= popUpOverlayRef\n  const popUpClassNames = classnames(\n    className,\n    'pop-up-dialog__overlay',\n    customPosition.element && 'custom-position'\n  )\n\n  const handleClosePopUp = useCallback(() => {\n    closePopUp && closePopUp()\n    onResolve && onResolve()\n  }, [closePopUp, onResolve])\n\n  const calculateCustomPopUpPosition = useCallback(() => {\n    if (customPosition?.element?.current && ref?.current) {\n      const elementRect = customPosition.element.current.getBoundingClientRect()\n      const popUpRect = ref.current.getBoundingClientRect()\n      const [verticalPosition, horizontalPosition] = customPosition.position.split('-')\n      const popupMargin = 15\n      const elementMargin = 5\n      const isEnoughSpaceFromLeft = elementRect.right >= popUpRect.width + popupMargin\n      const isEnoughSpaceFromRight =\n        window.innerWidth - elementRect.left >= popUpRect.width + popupMargin\n      const isEnoughSpaceFromTop = elementRect.top > popUpRect.height + popupMargin + elementMargin\n      const isEnoughSpaceFromBottom =\n        elementRect.bottom + popUpRect.height + popupMargin + elementMargin <= window.innerHeight\n      let leftPosition =\n        horizontalPosition === 'left' ? elementRect.right - popUpRect.width : elementRect.left\n\n      let topPosition\n\n      if (verticalPosition === 'top') {\n        topPosition = isEnoughSpaceFromTop\n          ? elementRect.top - popUpRect.height - elementMargin\n          : popupMargin\n      } else {\n        topPosition = isEnoughSpaceFromBottom\n          ? elementRect.bottom + elementMargin\n          : window.innerHeight - popUpRect.height - popupMargin\n      }\n\n      if (customPosition.autoVerticalPosition) {\n        if (verticalPosition === 'top') {\n          if (!isEnoughSpaceFromTop && isEnoughSpaceFromBottom) {\n            topPosition = elementRect.bottom + elementMargin\n          }\n        } else {\n          if (isEnoughSpaceFromTop && !isEnoughSpaceFromBottom) {\n            topPosition = elementRect.top - popUpRect.height - elementMargin\n          }\n        }\n      }\n\n      if (customPosition.autoHorizontalPosition) {\n        if (verticalPosition === 'left') {\n          if (!isEnoughSpaceFromLeft && isEnoughSpaceFromRight) {\n            leftPosition = elementRect.left\n          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {\n            leftPosition = popupMargin\n          }\n        } else {\n          if (isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {\n            leftPosition = elementRect.right - popUpRect.width\n          } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {\n            leftPosition = window.innerWidth - popUpRect.width - popupMargin\n          }\n        }\n      }\n\n      ref.current.style.top = `${topPosition}px`\n\n      if (style.left && !(customPosition.autoHorizontalPosition && isEnoughSpaceFromRight)) {\n        ref.current.style.left = `calc(${leftPosition}px + ${style.left})`\n      } else {\n        ref.current.style.left = `${leftPosition}px`\n      }\n    }\n  }, [customPosition, style.left, ref])\n\n  useLayoutEffect(() => {\n    calculateCustomPopUpPosition()\n  }, [calculateCustomPopUpPosition])\n\n  useEffect(() => {\n    if (isOpen) {\n      const throttledCalculatedCustomPopUpPosition = throttle(calculateCustomPopUpPosition, 100, {\n        trailing: true,\n        leading: true\n      })\n      const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition)\n      const popupElement = ref.current\n\n      popupObserver.observe(popupElement)\n      window.addEventListener('resize', throttledCalculatedCustomPopUpPosition)\n\n      return () => {\n        popupObserver.unobserve(popupElement)\n        window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition)\n      }\n    }\n  }, [calculateCustomPopUpPosition, ref, isOpen])\n\n  return isOpen\n    ? createPortal(\n        <div ref={ref} className={popUpClassNames} style={style}>\n          <div data-testid=\"pop-up-dialog\" className=\"pop-up-dialog\">\n            {!headerIsHidden && (\n              <div className=\"pop-up-dialog__header\">\n                {headerText && (\n                  <div data-testid=\"pop-up-dialog-header\" className=\"pop-up-dialog__header-text\">\n                    <Tooltip template={<TextTooltipTemplate text={tooltipText || headerText} />}>\n                      <span>{headerText}</span>\n                    </Tooltip>\n                  </div>\n                )}\n                <RoundedIcon\n                  className=\"pop-up-dialog__btn_close\"\n                  onClick={handleClosePopUp}\n                  tooltipText=\"Close\"\n                  data-testid=\"pop-up-close-btn\"\n                >\n                  <CloseIcon />\n                </RoundedIcon>\n              </div>\n            )}\n            {children}\n          </div>\n        </div>,\n        document.getElementById('overlay_container')\n      )\n    : null\n}\n\nPopUpDialog = forwardRef(PopUpDialog)\n\nPopUpDialog.displayName = 'PopUpDialog'\n\nPopUpDialog.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n  closePopUp: PropTypes.func,\n  customPosition: POP_UP_CUSTOM_POSITION,\n  isOpen: PropTypes.bool,\n  headerIsHidden: PropTypes.bool,\n  headerText: PropTypes.string,\n  onResolve: PropTypes.func,\n  showPopUpDialog: PropTypes.bool,\n  style: PropTypes.object,\n  tooltipText: PropTypes.string\n}\n\nexport default PopUpDialog\n"],"names":["PopUpDialog","children","className","closePopUp","customPosition","headerIsHidden","headerText","isOpen","onResolve","style","tooltipText","ref","popUpOverlayRef","useRef","popUpClassNames","classnames","handleClosePopUp","useCallback","calculateCustomPopUpPosition","_a","elementRect","popUpRect","verticalPosition","horizontalPosition","popupMargin","elementMargin","isEnoughSpaceFromLeft","isEnoughSpaceFromRight","isEnoughSpaceFromTop","isEnoughSpaceFromBottom","leftPosition","topPosition","useLayoutEffect","useEffect","throttledCalculatedCustomPopUpPosition","throttle","popupObserver","popupElement","createPortal","jsx","jsxs","Tooltip","TextTooltipTemplate","RoundedIcon","CloseIcon","forwardRef","PropTypes","POP_UP_CUSTOM_POSITION","PopUpDialog$1"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "module": "./dist/index.mjs",
     "main": "./dist/index.mjs",