abaabil.popover
Advanced tools
Comparing version 0.1.4 to 0.1.5
@@ -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" | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4324
3
2
0