se-design 0.0.185 → 0.0.186

package/dist/index17.js

@@ -1,38 +1,38 @@
-import R, { forwardRef as K, useState as k, useRef as I, useEffect as N, useImperativeHandle as Q } from "react";
+import S, { forwardRef as K, useState as y, useRef as _, useEffect as j, useImperativeHandle as Q } from "react";
 import U from "react-dom";
-function E() {
-  return E = Object.assign ? Object.assign.bind() : function(g) {
-    for (var v = 1; v < arguments.length; v++) {
-      var c = arguments[v];
-      for (var f in c) ({}).hasOwnProperty.call(c, f) && (g[f] = c[f]);
+function L() {
+  return L = Object.assign ? Object.assign.bind() : function(g) {
+    for (var h = 1; h < arguments.length; h++) {
+      var s = arguments[h];
+      for (var u in s) ({}).hasOwnProperty.call(s, u) && (g[u] = s[u]);
     }
     return g;
-  }, E.apply(null, arguments);
+  }, L.apply(null, arguments);
 }
 const tt = /* @__PURE__ */ K(({
   className: g = "",
-  automationId: v = "",
-  position: c = "bottom-center",
-  popoverContentAutomationId: f = "",
-  contentWidth: L = "max",
-  renderPopoverContents: x,
-  renderPopoverSrcElement: X,
-  onPopoverToggle: S,
-  isPopoverOpen: H,
-  disabled: A = !1,
-  isWithPortal: p = !1,
-  ...B
-}, W) => {
-  const [i, u] = k(!1), [b, z] = k(c), [q, $] = k(!1), s = I(null), d = I(null), [D, h] = k({
+  automationId: h = "",
+  position: s = "bottom-center",
+  popoverContentAutomationId: u = "",
+  contentWidth: x = "max",
+  renderPopoverContents: H,
+  renderPopoverSrcElement: I,
+  onPopoverToggle: B,
+  isPopoverOpen: z,
+  disabled: N = !1,
+  isWithPortal: d = !1,
+  ...A
+}, X) => {
+  const [i, m] = y(!1), [b, $] = y(s), [q, D] = y(!1), p = _(null), f = _(null), [M, w] = y({
     top: 0,
     left: 0
-  }), w = (e = "bottom-center") => {
-    if (!s.current) return {
+  }), P = (e = "bottom-center") => {
+    if (!p.current) return {
       top: 0,
       left: 0
     };
     let n = e;
-    const t = s.current.getBoundingClientRect(), l = window.innerWidth, a = window.innerHeight;
+    const t = p.current.getBoundingClientRect(), c = window.innerWidth, l = window.innerHeight;
     let o = 0, r = 0;
     switch (n) {
       case "bottom-left":
@@ -57,72 +57,72 @@ const tt = /* @__PURE__ */ K(({
         o = t.bottom, r = t.left;
         break;
     }
-    const T = d.current?.getBoundingClientRect(), _ = T?.width || 0, m = T?.height || 0;
-    if (r + _ > l && (r = Math.max(0, l - _)), r < 0 && (r = 0), o + m > a) {
-      const j = t.top, J = a - t.bottom;
-      j >= m || j > J ? (o = t.top - m, o < 0 && (o = 0)) : o = Math.max(0, a - m);
+    const v = f.current?.getBoundingClientRect(), R = v?.width || 0, a = v?.height || 0;
+    if (r + R > c && (r = Math.max(0, c - R)), r < 0 && (r = 0), o + a > l) {
+      const W = t.top, J = l - t.bottom;
+      W >= a || W > J ? (o = t.top - a, o < 0 && (o = 0)) : o = Math.max(0, l - a);
     }
-    return o < 0 && (o = t.bottom, o + m > a && (o = Math.max(0, a - m))), {
+    return o < 0 && (o = t.bottom, o + a > l && (o = Math.max(0, l - a))), {
       top: o,
       left: r
     };
   };
-  N(() => {
-    if (S && S(i), i && !p)
-      return document.body.addEventListener("click", M), F(), () => document.body.removeEventListener("click", M);
-    if (i && p) {
-      document.body.addEventListener("click", P), window.addEventListener("scroll", P), window.addEventListener("resize", O);
+  j(() => {
+    if (B && B(i), i && !d)
+      return document.body.addEventListener("click", O, !0), F(), () => document.body.removeEventListener("click", O, !0);
+    if (i && d) {
+      document.body.addEventListener("click", k, !0), window.addEventListener("scroll", k), window.addEventListener("resize", V);
       const e = setTimeout(() => {
-        const t = w(b);
-        y(), t && h(t);
+        const t = P(b);
+        E(), t && w(t);
       }, 0), n = setTimeout(() => {
-        const t = w(b);
-        t && h(t);
+        const t = P(b);
+        t && w(t);
       }, 10);
       return () => {
-        document.body.removeEventListener("click", P), window.removeEventListener("scroll", P), window.removeEventListener("resize", O), clearTimeout(e), clearTimeout(n);
+        document.body.removeEventListener("click", k, !0), window.removeEventListener("scroll", k), window.removeEventListener("resize", V), clearTimeout(e), clearTimeout(n);
       };
     }
-  }, [i, p]);
-  const y = () => {
-    if (!s.current) {
-      $(!1);
+  }, [i, d]);
+  const E = () => {
+    if (!p.current) {
+      D(!1);
       return;
     }
-    const e = s.current.getBoundingClientRect(), n = window.innerHeight, t = window.innerWidth, l = e.top < n && e.bottom > 0 && e.left < t && e.right > 0;
-    $(l);
+    const e = p.current.getBoundingClientRect(), n = window.innerHeight, t = window.innerWidth, c = e.top < n && e.bottom > 0 && e.left < t && e.right > 0;
+    D(c);
   };
-  N(() => {
-    u(H ?? !1);
-  }, [H]);
+  j(() => {
+    m(z ?? !1);
+  }, [z]);
   const F = () => {
-    if (!d.current) return;
-    const e = d.current.getBoundingClientRect(), n = window.innerHeight;
-    e?.bottom > n ? z(c.includes("left") ? "top-left" : c.includes("right") ? "top-right" : "top-center") : e?.top < 0 && z(c.includes("left") ? "bottom-left" : c.includes("right") ? "bottom-right" : "bottom-center");
-  }, M = (e) => {
-    const n = s.current;
+    if (!f.current) return;
+    const e = f.current.getBoundingClientRect(), n = window.innerHeight;
+    e?.bottom > n ? $(s.includes("left") ? "top-left" : s.includes("right") ? "top-right" : "top-center") : e?.top < 0 && $(s.includes("left") ? "bottom-left" : s.includes("right") ? "bottom-right" : "bottom-center");
+  }, O = (e) => {
+    const n = p.current;
     if (!n) return;
-    const t = e.target;
-    n.contains(t) || u(!1);
-  }, P = (e) => {
-    const n = s.current, t = d.current;
+    const t = e.target, c = n.contains(t), l = f.current?.contains(t), r = t.closest?.(".se-design-popover-wrapper");
+    (!c && !l || r && r !== n) && m(!1);
+  }, k = (e) => {
+    const n = p.current, t = f.current;
     if (!n) return;
-    if (y(), e.type === "scroll" && i) {
-      const r = w(b);
-      r && h(r);
+    if (E(), e.type === "scroll" && i) {
+      const a = P(b);
+      a && w(a);
     }
-    const l = e.target, a = n.contains(l), o = t?.contains(l);
-    !a && !o && u(!1);
-  }, O = () => {
-    if (i && p && s.current) {
-      y();
-      const e = w(b);
-      e && h(e);
+    const c = e.target, l = n.contains(c), o = t?.contains(c), v = c.closest?.(".se-design-popover-wrapper");
+    (!l && !o || v && v !== n) && m(!1);
+  }, V = () => {
+    if (i && d && p.current) {
+      E();
+      const e = P(b);
+      e && w(e);
     }
   }, C = () => {
-    u((e) => !e);
+    m((e) => !e);
   };
-  Q(W, () => ({
+  Q(X, () => ({
     togglePopover: C
   }), []);
   const G = {
@@ -152,19 +152,19 @@ const tt = /* @__PURE__ */ K(({
       transform: "translateX(-50%)",
       bottom: "100%"
     }
-  }, V = B?.noBorder ? "" : "shadow-md border rounded-md";
-  return /* @__PURE__ */ R.createElement("div", E({
-    className: "se-design-popover-wrapper cursor-pointer relative" + (g.length > 0 ? ` ${g}` : "") + (i ? " open" : "") + (A ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
-    ref: s,
+  }, T = A?.noBorder ? "" : "shadow-md border rounded-md";
+  return /* @__PURE__ */ S.createElement("div", L({
+    className: "se-design-popover-wrapper cursor-pointer relative" + (g.length > 0 ? ` ${g}` : "") + (i ? " open" : "") + (N ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
+    ref: p,
     onClick: (e) => {
       e.stopPropagation(), C();
     },
-    "data-automation-id": v
-  }, B), X({
+    "data-automation-id": h
+  }, A), I({
     displayPopover: i,
     togglePopover: C
-  }), i && !p && /* @__PURE__ */ R.createElement("div", {
-    className: `popover-content absolute ${V} z-[1000] ${L == "full" ? "w-full" : "w-max"}`,
+  }), i && !d && /* @__PURE__ */ S.createElement("div", {
+    className: `popover-content absolute ${T} z-[1000] ${x == "full" ? "w-full" : "w-max"}`,
     style: {
       borderColor: "var(--color-gray-200)",
       color: "var(--color-gray-900)",
@@ -172,26 +172,26 @@ const tt = /* @__PURE__ */ K(({
       ...G[b]
     },
     onClick: (e) => e.stopPropagation(),
-    ref: d,
-    "data-automation-id": f
-  }, x({
-    closePopoverCb: () => u(!1)
-  })), p && i && q && /* @__PURE__ */ U.createPortal(/* @__PURE__ */ R.createElement("div", {
-    className: `popover-content-with-portal ${V} ${L == "full" ? "w-full" : "w-max"}`,
+    ref: f,
+    "data-automation-id": u
+  }, H({
+    closePopoverCb: () => m(!1)
+  })), d && i && q && /* @__PURE__ */ U.createPortal(/* @__PURE__ */ S.createElement("div", {
+    className: `popover-content-with-portal ${T} ${x == "full" ? "w-full" : "w-max"}`,
     style: {
       position: "fixed",
-      top: D.top,
-      left: D.left,
+      top: M.top,
+      left: M.left,
       zIndex: 1e3,
       borderColor: "var(--color-gray-200)",
       color: "var(--color-gray-900)",
       backgroundColor: "var(--color-white)"
     },
     onClick: (e) => e.stopPropagation(),
-    ref: d,
-    "data-automation-id": f
-  }, x({
-    closePopoverCb: () => u(!1)
+    ref: f,
+    "data-automation-id": u
+  }, H({
+    closePopoverCb: () => m(!1)
   })), document.body));
 });
 export {

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean; togglePopover: () => void }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n  isPopoverOpen?: boolean;\n  disabled?: boolean;\n  isWithPortal?: boolean;\n  noBorder?: boolean;\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      isPopoverOpen,\n      disabled = false,\n      isWithPortal = false,\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const [isSrcElementVisible, setIsSrcElementVisible] = useState(false);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    const [portalPosition, setPortalPosition] = useState({ top: 0, left: 0 });\n\n    const calculatePositionOfPopover = (position: string = 'bottom-center') => {\n      if (!srcElementRef.current) return { top: 0, left: 0 };\n\n      let localPosition = position;\n\n      const srcRect = srcElementRef.current.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n\n      // Calculate position for portal\n      let top = 0;\n      let left = 0;\n\n      switch (localPosition) {\n        case 'bottom-left':\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n        case 'bottom-right':\n          top = srcRect.bottom;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'bottom-center':\n          top = srcRect.bottom;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        case 'top-left':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left;\n          break;\n        case 'top-right':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'top-center':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        default:\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n      }\n\n      // Get popover dimensions if available\n      const popoverRect = popoverContentRef.current?.getBoundingClientRect();\n      const popoverWidth = popoverRect?.width || 0;\n      const popoverHeight = popoverRect?.height || 0;\n\n      // Adjust position to keep popover within viewport bounds\n      // Horizontal adjustments\n      if (left + popoverWidth > viewportWidth) {\n        // Popover extends beyond right edge, shift it left\n        left = Math.max(0, viewportWidth - popoverWidth);\n      }\n      if (left < 0) {\n        // Popover extends beyond left edge, shift it right\n        left = 0;\n      }\n\n      // Vertical adjustments\n      if (top + popoverHeight > viewportHeight) {\n        // Popover extends beyond bottom edge\n        // Try to position it above the source element\n        const spaceAbove = srcRect.top;\n        const spaceBelow = viewportHeight - srcRect.bottom;\n        \n        if (spaceAbove >= popoverHeight || spaceAbove > spaceBelow) {\n          // Position above if there's enough space or more space above\n          top = srcRect.top - popoverHeight;\n          // Ensure it doesn't go above viewport\n          if (top < 0) {\n            top = 0;\n          }\n        } else {\n          // Keep at bottom but adjust to fit within viewport\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n      if (top < 0) {\n        // Popover extends beyond top edge, position it below the source element\n        top = srcRect.bottom;\n        // Ensure it doesn't go below viewport\n        if (top + popoverHeight > viewportHeight) {\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n\n      return { top, left };\n    };\n\n\n  \n\n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n\n      if (displayPopover && !isWithPortal) {\n        document.body.addEventListener('click', clickListener);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener);\n      } else if (displayPopover && isWithPortal) {\n        document.body.addEventListener('click', clickAndScrollListenerWithPortal);\n        window.addEventListener('scroll', clickAndScrollListenerWithPortal);\n        window.addEventListener('resize', resizeListenerWithPortal);\n\n        // Initial position calculation\n        const timeout1 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          checkSourceVisibility();\n          \n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 0);\n\n        // Recalculate after popover is rendered to get accurate dimensions\n        const timeout2 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 10);\n\n        return () => {\n          document.body.removeEventListener('click', clickAndScrollListenerWithPortal);\n          window.removeEventListener('scroll', clickAndScrollListenerWithPortal);\n          window.removeEventListener('resize', resizeListenerWithPortal);\n          clearTimeout(timeout1);\n          clearTimeout(timeout2);\n        };\n      }\n    }, [displayPopover, isWithPortal]);\n\n    const checkSourceVisibility = () => {\n      if (!srcElementRef.current) {\n        setIsSrcElementVisible(false);\n        return;\n      }\n\n      const rec = srcElementRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      const isVisible = rec.top < viewportHeight && rec.bottom > 0 && rec.left < viewportWidth && rec.right > 0;\n\n      setIsSrcElementVisible(isVisible);\n    };\n\n    useEffect(() => {\n      setDisplayPopover(isPopoverOpen ?? false);\n    }, [isPopoverOpen]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      if (!isSourcePopover) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const clickAndScrollListenerWithPortal = (event: Event) => {\n      const currentDropRef = srcElementRef.current;\n      const currentPopoverRef = popoverContentRef.current;\n      if (!currentDropRef) return;\n      checkSourceVisibility();\n\n      // Recalculate position on scroll\n      if (event.type === 'scroll' && displayPopover) {\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = currentPopoverRef?.contains(target);\n\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      if (!isSourcePopover && !isPopoverContent) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const resizeListenerWithPortal = () => {\n      if (displayPopover && isWithPortal && srcElementRef.current) {\n        checkSourceVisibility();\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n    const popoverContentClasses = props?.noBorder ? '' : 'shadow-md border rounded-md';\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '') +\n          (disabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')\n        }\n        ref={srcElementRef}\n        onClick={(e) => {\n          e.stopPropagation();\n          togglePopover();\n        }}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover, togglePopover })}\n\n        {displayPopover && !isWithPortal && (\n          <div\n            className={`popover-content absolute ${popoverContentClasses} z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n        {isWithPortal &&\n          displayPopover &&\n          isSrcElementVisible &&\n          ReactDOM.createPortal(\n            <div\n              className={`popover-content-with-portal ${popoverContentClasses} ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n              style={{\n                position: 'fixed',\n                top: portalPosition.top,\n                left: portalPosition.left,\n                zIndex: 1000,\n                borderColor: 'var(--color-gray-200)',\n                color: 'var(--color-gray-900)',\n                backgroundColor: 'var(--color-white)'\n              }}\n              onClick={(e) => e.stopPropagation()}\n              ref={popoverContentRef}\n              data-automation-id={popoverContentAutomationId}\n            >\n              {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n            </div>,\n            document.body\n          )}\n      </div>\n    );\n  }\n);\n"],"names":["Popover","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","isPopoverOpen","disabled","isWithPortal","props","ref","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","isSrcElementVisible","setIsSrcElementVisible","srcElementRef","useRef","popoverContentRef","portalPosition","setPortalPosition","top","left","calculatePositionOfPopover","current","localPosition","srcRect","getBoundingClientRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","bottom","right","width","height","popoverRect","popoverWidth","popoverHeight","Math","max","spaceAbove","spaceBelow","useEffect","document","body","addEventListener","clickListener","checkPopoverPosition","removeEventListener","clickAndScrollListenerWithPortal","resizeListenerWithPortal","timeout1","setTimeout","checkSourceVisibility","timeout2","clearTimeout","rec","isVisible","includes","event","currentDropRef","target","contains","currentPopoverRef","type","isSourcePopover","isPopoverContent","togglePopover","useImperativeHandle","popoverContentStyle","transform","popoverContentClasses","noBorder","React","createElement","_extends","length","onClick","e","stopPropagation","style","borderColor","color","backgroundColor","closePopoverCb","ReactDOM","createPortal","zIndex"],"mappings":"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"}
+{"version":3,"file":"index17.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean; togglePopover: () => void }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n  isPopoverOpen?: boolean;\n  disabled?: boolean;\n  isWithPortal?: boolean;\n  noBorder?: boolean;\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      isPopoverOpen,\n      disabled = false,\n      isWithPortal = false,\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const [isSrcElementVisible, setIsSrcElementVisible] = useState(false);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    const [portalPosition, setPortalPosition] = useState({ top: 0, left: 0 });\n\n    const calculatePositionOfPopover = (position: string = 'bottom-center') => {\n      if (!srcElementRef.current) return { top: 0, left: 0 };\n\n      let localPosition = position;\n\n      const srcRect = srcElementRef.current.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n\n      // Calculate position for portal\n      let top = 0;\n      let left = 0;\n\n      switch (localPosition) {\n        case 'bottom-left':\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n        case 'bottom-right':\n          top = srcRect.bottom;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'bottom-center':\n          top = srcRect.bottom;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        case 'top-left':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left;\n          break;\n        case 'top-right':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'top-center':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        default:\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n      }\n\n      // Get popover dimensions if available\n      const popoverRect = popoverContentRef.current?.getBoundingClientRect();\n      const popoverWidth = popoverRect?.width || 0;\n      const popoverHeight = popoverRect?.height || 0;\n\n      // Adjust position to keep popover within viewport bounds\n      // Horizontal adjustments\n      if (left + popoverWidth > viewportWidth) {\n        // Popover extends beyond right edge, shift it left\n        left = Math.max(0, viewportWidth - popoverWidth);\n      }\n      if (left < 0) {\n        // Popover extends beyond left edge, shift it right\n        left = 0;\n      }\n\n      // Vertical adjustments\n      if (top + popoverHeight > viewportHeight) {\n        // Popover extends beyond bottom edge\n        // Try to position it above the source element\n        const spaceAbove = srcRect.top;\n        const spaceBelow = viewportHeight - srcRect.bottom;\n        \n        if (spaceAbove >= popoverHeight || spaceAbove > spaceBelow) {\n          // Position above if there's enough space or more space above\n          top = srcRect.top - popoverHeight;\n          // Ensure it doesn't go above viewport\n          if (top < 0) {\n            top = 0;\n          }\n        } else {\n          // Keep at bottom but adjust to fit within viewport\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n      if (top < 0) {\n        // Popover extends beyond top edge, position it below the source element\n        top = srcRect.bottom;\n        // Ensure it doesn't go below viewport\n        if (top + popoverHeight > viewportHeight) {\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n\n      return { top, left };\n    };\n  \n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n\n      if (displayPopover && !isWithPortal) {\n        document.body.addEventListener('click', clickListener, true);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener, true);\n      } else if (displayPopover && isWithPortal) {\n        document.body.addEventListener('click', clickAndScrollListenerWithPortal, true);\n        window.addEventListener('scroll', clickAndScrollListenerWithPortal);\n        window.addEventListener('resize', resizeListenerWithPortal);\n\n        // Initial position calculation\n        const timeout1 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          checkSourceVisibility();\n          \n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 0);\n\n        // Recalculate after popover is rendered to get accurate dimensions\n        const timeout2 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 10);\n\n        return () => {\n          document.body.removeEventListener('click', clickAndScrollListenerWithPortal, true);\n          window.removeEventListener('scroll', clickAndScrollListenerWithPortal);\n          window.removeEventListener('resize', resizeListenerWithPortal);\n          clearTimeout(timeout1);\n          clearTimeout(timeout2);\n        };\n      }\n    }, [displayPopover, isWithPortal]);\n\n    const checkSourceVisibility = () => {\n      if (!srcElementRef.current) {\n        setIsSrcElementVisible(false);\n        return;\n      }\n\n      const rec = srcElementRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      const isVisible = rec.top < viewportHeight && rec.bottom > 0 && rec.left < viewportWidth && rec.right > 0;\n\n      setIsSrcElementVisible(isVisible);\n    };\n\n    useEffect(() => {\n      setDisplayPopover(isPopoverOpen ?? false);\n    }, [isPopoverOpen]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = popoverContentRef.current?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n      \n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const clickAndScrollListenerWithPortal = (event: Event) => {\n      const currentDropRef = srcElementRef.current;\n      const currentPopoverRef = popoverContentRef.current;\n      if (!currentDropRef) return;\n      checkSourceVisibility();\n\n      // Recalculate position on scroll\n      if (event.type === 'scroll' && displayPopover) {\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = currentPopoverRef?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const resizeListenerWithPortal = () => {\n      if (displayPopover && isWithPortal && srcElementRef.current) {\n        checkSourceVisibility();\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n    const popoverContentClasses = props?.noBorder ? '' : 'shadow-md border rounded-md';\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '') +\n          (disabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')\n        }\n        ref={srcElementRef}\n        onClick={(e) => {\n          e.stopPropagation();\n          togglePopover();\n        }}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover, togglePopover })}\n\n        {displayPopover && !isWithPortal && (\n          <div\n            className={`popover-content absolute ${popoverContentClasses} z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n        {isWithPortal &&\n          displayPopover &&\n          isSrcElementVisible &&\n          ReactDOM.createPortal(\n            <div\n              className={`popover-content-with-portal ${popoverContentClasses} ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n              style={{\n                position: 'fixed',\n                top: portalPosition.top,\n                left: portalPosition.left,\n                zIndex: 1000,\n                borderColor: 'var(--color-gray-200)',\n                color: 'var(--color-gray-900)',\n                backgroundColor: 'var(--color-white)'\n              }}\n              onClick={(e) => e.stopPropagation()}\n              ref={popoverContentRef}\n              data-automation-id={popoverContentAutomationId}\n            >\n              {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n            </div>,\n            document.body\n          )}\n      </div>\n    );\n  }\n);\n"],"names":["Popover","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","isPopoverOpen","disabled","isWithPortal","props","ref","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","isSrcElementVisible","setIsSrcElementVisible","srcElementRef","useRef","popoverContentRef","portalPosition","setPortalPosition","top","left","calculatePositionOfPopover","current","localPosition","srcRect","getBoundingClientRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","bottom","right","width","height","popoverRect","popoverWidth","popoverHeight","Math","max","spaceAbove","spaceBelow","useEffect","document","body","addEventListener","clickListener","checkPopoverPosition","removeEventListener","clickAndScrollListenerWithPortal","resizeListenerWithPortal","timeout1","setTimeout","checkSourceVisibility","timeout2","clearTimeout","rec","isVisible","includes","event","currentDropRef","target","isSourcePopover","contains","isPopoverContent","closestPopoverWrapper","closest","currentPopoverRef","type","togglePopover","useImperativeHandle","popoverContentStyle","transform","popoverContentClasses","noBorder","React","createElement","_extends","length","onClick","e","stopPropagation","style","borderColor","color","backgroundColor","closePopoverCb","ReactDOM","createPortal","zIndex"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "0.0.185",
+  "version": "0.0.186",
   "type": "module",
   "module": "dist/index.js",
   "exports": {