@frank-auth/react/dist/cjs/components/ui/popover/popover.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),q=require("../../../theme/context.cjs"),s=require("@emotion/react"),Y=require("@emotion/styled"),d=require("react"),H=require("react-dom"),X=t=>t&&t.__esModule?t:{default:t},z=X(Y),E=X(d),W=s.keyframes`
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
`,A=s.keyframes`
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
`,F=(t,o,r,n)=>{if(!o)return{};const e={position:"absolute",zIndex:1500};switch(t){case"top":e.bottom=`${window.innerHeight-o.top+r}px`,e.left=`${o.left+o.width/2}px`,e.transform=`translateX(-50%) translateX(${n}px)`;break;case"top-start":e.bottom=`${window.innerHeight-o.top+r}px`,e.left=`${o.left+n}px`;break;case"top-end":e.bottom=`${window.innerHeight-o.top+r}px`,e.right=`${window.innerWidth-o.right-n}px`;break;case"bottom":e.top=`${o.bottom+r}px`,e.left=`${o.left+o.width/2}px`,e.transform=`translateX(-50%) translateX(${n}px)`;break;case"bottom-start":e.top=`${o.bottom+r}px`,e.left=`${o.left+n}px`;break;case"bottom-end":e.top=`${o.bottom+r}px`,e.right=`${window.innerWidth-o.right-n}px`;break;case"left":e.right=`${window.innerWidth-o.left+r}px`,e.top=`${o.top+o.height/2}px`,e.transform=`translateY(-50%) translateY(${n}px)`;break;case"left-start":e.right=`${window.innerWidth-o.left+r}px`,e.top=`${o.top+n}px`;break;case"left-end":e.right=`${window.innerWidth-o.left+r}px`,e.bottom=`${window.innerHeight-o.bottom-n}px`;break;case"right":e.left=`${o.right+r}px`,e.top=`${o.top+o.height/2}px`,e.transform=`translateY(-50%) translateY(${n}px)`;break;case"right-start":e.left=`${o.right+r}px`,e.top=`${o.top+n}px`;break;case"right-end":e.left=`${o.right+r}px`,e.bottom=`${window.innerHeight-o.bottom-n}px`;break;default:e.top=`${o.bottom+r}px`,e.left=`${o.left+o.width/2}px`,e.transform=`translateX(-50%) translateX(${n}px)`}return e},I=t=>{switch(t){case"top":case"top-start":case"top-end":return s.css`
        &::after {
          content: '';
          position: absolute;
          top: 100%;
          left: ${t==="top"?"50%":t==="top-start"?"16px":"auto"};
          right: ${t==="top-end"?"16px":"auto"};
          transform: ${t==="top"?"translateX(-50%)":"none"};
          width: 0;
          height: 0;
          border-left: ${8}px solid transparent;
          border-right: ${8}px solid transparent;
          border-top: ${8}px solid currentColor;
        }
      `;case"bottom":case"bottom-start":case"bottom-end":return s.css`
        &::after {
          content: '';
          position: absolute;
          bottom: 100%;
          left: ${t==="bottom"?"50%":t==="bottom-start"?"16px":"auto"};
          right: ${t==="bottom-end"?"16px":"auto"};
          transform: ${t==="bottom"?"translateX(-50%)":"none"};
          width: 0;
          height: 0;
          border-left: ${8}px solid transparent;
          border-right: ${8}px solid transparent;
          border-bottom: ${8}px solid currentColor;
        }
      `;case"left":case"left-start":case"left-end":return s.css`
        &::after {
          content: '';
          position: absolute;
          left: 100%;
          top: ${t==="left"?"50%":t==="left-start"?"16px":"auto"};
          bottom: ${t==="left-end"?"16px":"auto"};
          transform: ${t==="left"?"translateY(-50%)":"none"};
          width: 0;
          height: 0;
          border-top: ${8}px solid transparent;
          border-bottom: ${8}px solid transparent;
          border-left: ${8}px solid currentColor;
        }
      `;case"right":case"right-start":case"right-end":return s.css`
        &::after {
          content: '';
          position: absolute;
          right: 100%;
          top: ${t==="right"?"50%":t==="right-start"?"16px":"auto"};
          bottom: ${t==="right-end"?"16px":"auto"};
          transform: ${t==="right"?"translateY(-50%)":"none"};
          width: 0;
          height: 0;
          border-top: ${8}px solid transparent;
          border-bottom: ${8}px solid transparent;
          border-right: ${8}px solid currentColor;
        }
      `;default:return s.css``}},N=t=>{const{theme:o,backdrop:r="transparent"}=t;switch(r){case"transparent":return s.css`
        background-color: transparent;
      `;case"opaque":return s.css`
        background-color: rgba(0, 0, 0, 0.1);
      `;case"blur":return s.css`
        background-color: rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(2px);
      `;default:return s.css`
        background-color: transparent;
      `}},D=z.default.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: ${t=>t.theme.zIndex.overlay};

  ${N}
`,V=z.default.div`
  background-color: ${t=>t.theme.colors.background.primary};
  border: 1px solid ${t=>t.theme.colors.border.primary};
  border-radius: ${t=>t.theme.borderRadius.lg};
  box-shadow: ${t=>t.theme.shadows.lg};
  padding: ${t=>t.theme.spacing[4]};
  max-width: 320px;
  animation: ${t=>t.isClosing?A:W} 
    ${t=>t.theme.transitions.fast};
  color: ${t=>t.theme.colors.background.primary};

  ${t=>t.showArrow&&I(t.placement)}

  /* Custom CSS prop */
  ${t=>t.css}
`,G=z.default.div`
  display: inline-block;
  cursor: pointer;

  /* Custom CSS prop */
  ${t=>t.css}
`,T=E.default.createContext(null),C=({children:t,isOpen:o,defaultOpen:r=!1,onOpenChange:n,placement:e="bottom",trigger:i="click",showArrow:c=!0,offset:a=8,crossOffset:h=0,shouldCloseOnBlur:p=!0,shouldCloseOnInteractOutside:b=!0,backdrop:f="transparent",className:x,css:w,portalContainer:v,...y})=>{const[S,L]=d.useState(r),g=d.useRef(null),P=o!==void 0,m=P?o:S,$=d.useCallback(l=>{P||L(l),n?.(l)},[P,n]);d.useEffect(()=>{if(!m||!b)return;const l=k=>{if(g.current&&!g.current.contains(k.target)){const j=document.querySelector("[data-popover-content]");j&&!j.contains(k.target)&&$(!1)}};return document.addEventListener("mousedown",l),()=>document.removeEventListener("mousedown",l)},[m,b,$]),d.useEffect(()=>{if(!m)return;const l=k=>{k.key==="Escape"&&$(!1)};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[m,$]);const M={isOpen:m,onOpenChange:$,triggerRef:g,placement:e,trigger:i,showArrow:c,offset:a,crossOffset:h};return u.jsx(T.Provider,{value:M,children:u.jsx("div",{className:x,...y,children:t})})},_=({children:t,className:o,css:r,...n})=>{const{theme:e}=q.useTheme(),i=E.default.useContext(T);if(!i)throw new Error("PopoverTrigger must be used within a Popover");const{isOpen:c,onOpenChange:a,triggerRef:h,trigger:p}=i,b=()=>{p==="click"&&a(!c)},f=()=>{p==="hover"&&a(!0)},x=()=>{p==="hover"&&a(!1)},w=()=>{p==="focus"&&a(!0)},v=()=>{p==="focus"&&a(!1)};return u.jsx(G,{ref:h,theme:e,className:o,css:r,onClick:b,onMouseEnter:f,onMouseLeave:x,onFocus:w,onBlur:v,...n,children:t})},B=({children:t,className:o,css:r,...n})=>{const{theme:e}=q.useTheme(),i=E.default.useContext(T);if(!i)throw new Error("PopoverContent must be used within a Popover");const{isOpen:c,triggerRef:a,placement:h,showArrow:p,offset:b,crossOffset:f}=i,[x,w]=d.useState(null);if(d.useEffect(()=>{c&&a.current&&w(a.current.getBoundingClientRect())},[c,a]),!c)return null;const v=F(h,x,b,f),y=document.body,S=u.jsxs(u.Fragment,{children:[i&&u.jsx(D,{theme:e}),u.jsx(V,{theme:e,"data-popover-content":!0,className:o,css:r,placement:h,showArrow:p,style:v,...n,children:t})]});return H.createPortal(S,y)};C.Trigger=_;C.Content=B;C.displayName="Popover";_.displayName="PopoverTrigger";B.displayName="PopoverContent";exports.Popover=C;
//# sourceMappingURL=popover.cjs.map