Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

abaabil.popover

Package Overview
Dependencies
Maintainers
0
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

abaabil.popover - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

2

dist/index.esm.min.js

@@ -1,1 +0,1 @@

import*as e from"react";import y from"react-dom";import E from"classnames";import C from"abaabil.button";const k=({label:p,children:h,buttonClassName:m,position:i="top",...g})=>{const[a,l]=e.useState(!1),[w,c]=e.useState(!1),[u,v]=e.useState({x:0,y:0}),o=e.useRef(null),s=e.useRef(null),r=e.useCallback(()=>{if(o.current&&s.current){const t=o.current.getBoundingClientRect(),n=s.current.getBoundingClientRect(),b={top:{x:t.left+t.width/2-n.width/2,y:t.top-n.height-10},bottom:{x:t.left+t.width/2-n.width/2,y:t.bottom+10},left:{x:t.left-n.width-10,y:t.top+t.height/2-n.height/2},right:{x:t.right+10,y:t.top+t.height/2-n.height/2}}[i];v(b),c(!0)}},[i]),f=e.useCallback(t=>{t.key==="Escape"&&l(!1)},[]),d=e.useCallback(t=>{s.current&&!s.current.contains(t.target)&&!o.current.contains(t.target)&&l(!1)},[]);e.useEffect(()=>(a?(r(),document.addEventListener("keydown",f),document.addEventListener("mousedown",d),window.addEventListener("scroll",r),window.addEventListener("resize",r)):c(!1),()=>{document.removeEventListener("keydown",f),document.removeEventListener("mousedown",d),window.removeEventListener("scroll",r),window.removeEventListener("resize",r)}),[a,r,f,d]);const x=a&&e.createElement("div",{ref:s,role:"dialog",id:`popover-${o.current?.id||"content"}`,style:{left:`${u.x}px`,top:`${u.y}px`},className:`fixed text-df z-popover p-4 rounded-df shadow-floating bg-floating text-on-floating ${w?"opacity-100":"opacity-0"}`,...g},e.createElement("i",{className:E("overflow-hidden absolute",'after:absolute after:content-[""] after:w-6 after:h-6 after:bg-floating after:rounded-[3px] after:rotate-45 after:origin-center after:shadow-[0_0_4px_4px_rgba(0,0,0,0.03)]',["top","bottom"].includes(i)?"w-14 h-6 left-1/2 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2":"w-6 h-14 top-1/2 -translate-y-1/2 after:top-1/2 after:-translate-y-1/2",{top:"top-full after:bottom-4",bottom:"bottom-full after:top-4",left:"left-full after:right-4",right:"right-full after:left-4"}[i])}),h);return e.createElement(e.Fragment,null,e.createElement(C,{ref:o,onClick:()=>l(!a),className:m,"aria-expanded":a,"aria-controls":`popover-${o.current?.id||"content"}`},p),typeof document<"u"?y.createPortal(x,document.body):null)};var $=k;export{$ as default};
import*as e from"react";import y from"react-dom";import E from"classnames";import C from"abaabil.button";const k=({label:p,children:h,buttonClassName:m,position:l="top",...g})=>{const[a,i]=e.useState(!1),[w,c]=e.useState(!1),[u,v]=e.useState({x:0,y:0}),o=e.useRef(null),s=e.useRef(null),r=e.useCallback(()=>{if(o.current&&s.current){const t=o.current.getBoundingClientRect(),n=s.current.getBoundingClientRect(),b={top:{x:t.left+t.width/2-n.width/2,y:t.top-n.height-10},bottom:{x:t.left+t.width/2-n.width/2,y:t.bottom+10},left:{x:t.left-n.width-10,y:t.top+t.height/2-n.height/2},right:{x:t.right+10,y:t.top+t.height/2-n.height/2}}[l];v(b),c(!0)}},[l]),f=e.useCallback(t=>{t.key==="Escape"&&i(!1)},[]),d=e.useCallback(t=>{s.current&&!s.current.contains(t.target)&&!o.current.contains(t.target)&&i(!1)},[]);e.useEffect(()=>(a?(r(),document.addEventListener("keydown",f),document.addEventListener("mousedown",d),window.addEventListener("scroll",r),window.addEventListener("resize",r)):c(!1),()=>{document.removeEventListener("keydown",f),document.removeEventListener("mousedown",d),window.removeEventListener("scroll",r),window.removeEventListener("resize",r)}),[a,r,f,d]);const x=a&&e.createElement("div",{ref:s,role:"dialog",id:`popover-${o.current?.id||"content"}`,style:{left:`${u.x}px`,top:`${u.y}px`},className:`fixed text-default z-popover p-4 rounded-default shadow-floating bg-floating text-on-floating ${w?"opacity-100":"opacity-0"}`,...g},e.createElement("i",{className:E("overflow-hidden absolute",'after:absolute after:content-[""] after:w-6 after:h-6 after:bg-floating after:rounded-[3px] after:rotate-45 after:origin-center after:shadow-[0_0_4px_4px_rgba(0,0,0,0.03)]',["top","bottom"].includes(l)?"w-14 h-6 left-1/2 -translate-x-1/2 after:left-1/2 after:-translate-x-1/2":"w-6 h-14 top-1/2 -translate-y-1/2 after:top-1/2 after:-translate-y-1/2",{top:"top-full after:bottom-4",bottom:"bottom-full after:top-4",left:"left-full after:right-4",right:"right-full after:left-4"}[l])}),h);return e.createElement(e.Fragment,null,e.createElement(C,{ref:o,onClick:()=>i(!a),className:m,"aria-expanded":a,"aria-controls":`popover-${o.current?.id||"content"}`},p),typeof document<"u"?y.createPortal(x,document.body):null)};var $=k;export{$ as default};
{
"name": "abaabil.popover",
"author": "Abaabil",
"version": "0.1.4",
"version": "0.1.5",
"main": "dist/index.esm.min.js",

@@ -35,3 +35,3 @@ "files": [

],
"gitHead": "fd05a64346401ea62d6b0b7ffcf3e8c99d30b6fd"
"gitHead": "c1e41159e3f282e52e4f2d520611ab9da3634960"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc