@julien-wiegandt/open-ui 0.1.57 → 0.1.59

package/dist/open-ui.js

@@ -4729,18 +4729,18 @@ const Ld = gt(be)`
       ...e
     }), [e]);
     Ie(() => {
-      if (o?.current) {
+      if (o?.current && e.visible) {
         const { clientHeight: x, clientWidth: v } = o.current;
         u({ height: x, width: v });
       }
-    }, [o?.current]), Ie(() => {
-      if (i?.current) {
+    }, [o?.current, e.visible]), Ie(() => {
+      if (i?.current && e.visible) {
         const { clientHeight: x, clientWidth: v } = i.current;
         a({ height: x, width: v });
       }
-    }, [i?.current, e.visible]), lr(() => {
+    }, [i?.current, e.visible, e.content]), lr(() => {
       const x = () => {
-        if (!e.visible || !o.current || !i.current)
+        if (!e.visible || !o.current || !i.current || s.height === 0 || c.height === 0)
           return;
         const v = o.current.getBoundingClientRect(), k = window.scrollY, P = window.scrollX, { height: _, width: b } = s, { height: w, width: T } = c, E = 8, z = 8, I = 4;
         let L = { top: 0, left: 0 }, O = { top: 0, left: 0 };
@@ -4790,7 +4790,7 @@ const Ld = gt(be)`
         window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x);
       };
     }, [e.visible, g.placement, s, c]), Ie(() => {
-      e.visible || (a({ height: 0, width: 0 }), d({ top: 0, left: 0 }), l({ top: 0, left: 0 }));
+      e.visible || (a({ height: 0, width: 0 }), u({ height: 0, width: 0 }), d({ top: 0, left: 0 }), l({ top: 0, left: 0 }));
     }, [e.visible]);
     const p = (x) => {
       if (o.current = x, Ds(n)) {

package/dist/open-ui.umd.cjs

@@ -255,7 +255,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[bi]+=1);const Ot={none:"0px",
  * @author: Jack Doyle, jack@greensock.com
 */let Zl=typeof document<"u"?C.useLayoutEffect:C.useEffect,Jl=n=>n&&!Array.isArray(n)&&typeof n=="object",ki=[],kd={},ec=ee;const Tr=(n,e=ki)=>{let t=kd;Jl(n)?(t=n,n=null,e="dependencies"in t?t.dependencies:ki):Jl(e)&&(t=e,e="dependencies"in t?t.dependencies:ki),n&&typeof n!="function"&&console.warn("First parameter must be a function or config object");const{scope:r,revertOnUpdate:i}=t,o=C.useRef(!1),s=C.useRef(ec.context(()=>{},r)),a=C.useRef(u=>s.current.add(null,u)),c=e&&e.length&&!i;return c&&Zl(()=>(o.current=!0,()=>s.current.revert()),ki),Zl(()=>{if(n&&s.current.add(n,r),!c||!o.current)return()=>s.current.revert()},e),{context:s.current,contextSafe:a.current}};Tr.register=n=>{ec=n},Tr.headless=!0,ee.registerPlugin(Tr);const Ft={sm:{minWidth:{sm:"82%",md:"380px",lg:"380px",xl:"380px"},maxHeight:"60vh",width:"40vw",headerPy:1.5,headerPx:3,bodyPy:1,bodyPx:3,footerPy:1.5,footerPx:3},md:{minWidth:{sm:"90%",md:"400px",lg:"400px",xl:"400px"},maxHeight:"70vh",width:"50vw",headerPy:2,headerPx:3,bodyPy:1,bodyPx:3,footerPy:1.5,footerPx:3},lg:{minWidth:{sm:"96%",md:"500px",lg:"500px",xl:"500px"},maxHeight:"80vh",width:"60vw",headerPy:2,headerPx:3,bodyPy:1,bodyPx:3,footerPy:1.5,footerPx:3}},tc=C.forwardRef(({isOpen:n,fullScreen:e,children:t,style:r,closeOnClickOutside:i=!0,...o},s)=>{const a=Rt(),{breakpoint:c}=Jr(),[u,f]=C.useState(null),[d,h]=C.useState(!1),l=C.useRef(null);C.useEffect(()=>{f(document.getElementById("modal"))},[]),C.useEffect(()=>{n&&h(!0)},[n]),Tr(()=>{d&&(n?ee.timeline().fromTo(l.current,{autoAlpha:0},{autoAlpha:1,duration:.3,ease:"power2.inOut"}).fromTo(".modal-content",{autoAlpha:0,scale:.95,y:-20},{autoAlpha:1,scale:1,y:0,duration:.3,ease:"power2.out"},"-=0.2"):ee.timeline({onComplete:()=>h(!1)}).to(".modal-content",{autoAlpha:0,scale:.95,y:-20,duration:.2,ease:"power2.in"}).to(l.current,{autoAlpha:0,duration:.2,ease:"power2.inOut"},"-=0.1"))},{dependencies:[n,d],scope:l});const g={zIndex:999999,width:e?"100vw":Ft[o.size??"md"].width,height:e?"100vh":"fit-content",minWidth:e?"100vw":Ft[o.size??"md"].minWidth[c],maxHeight:e?"100vh":Ft[o.size??"md"].maxHeight,borderRadius:e?"0px":`min(24px, ${Ot[a.radius]})`,backgroundColor:"#FFFFFF",position:"relative",...r},p=A.jsx(ye,{ref:l,onClick:()=>i&&o.onClose&&o.onClose(),style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:99999,display:"flex",justifyContent:"center",alignItems:"center",backdropFilter:"blur(4px)",visibility:"hidden"},children:A.jsxs(ye,{ref:s,className:"modal-content",onClick:y=>{y.stopPropagation()},direction:"column",elevation:3,style:g,children:[o.onClose&&A.jsx(Si,{variant:"text",color:"default",starticon:A.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:Vl(g.backgroundColor??"#FFFFFF"),"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[A.jsx("path",{d:"M18 6 6 18"}),A.jsx("path",{d:"m6 6 12 12"})]}),onClick:o.onClose,style:{position:"absolute",top:"0px",right:"0px",cursor:"pointer"}}),o.title&&A.jsx(ye,{direction:"row",width:"100%",py:Ft[o.size??"md"].headerPy,px:Ft[o.size??"md"].headerPx,align:"center",justify:"between",children:A.jsx(Ql,{level:4,children:o.title})}),A.jsx(ye,{py:Ft[o.size??"md"].bodyPy,px:Ft[o.size??"md"].bodyPx,style:{overflowY:"auto"},children:t}),A.jsx(ye,{direction:"row",gap:2,width:"100%",mt:"auto",py:Ft[o.size??"md"].footerPy,px:Ft[o.size??"md"].footerPx,align:"center",justify:"end",children:o.footer})]})});return u?ws.createPortal(p,u):null});tc.displayName="Modal";const Pd=ct(ye)`
   background-color: ${({bgcolor:n,color:e,theme:t})=>n??t.palette[e].light};
-`,rc=C.forwardRef(({children:n,...e},t)=>{const r=Rt(),i=C.useRef(null),o=C.useRef(null),[s,a]=C.useState({height:0,width:0}),[c,u]=C.useState({height:0,width:0}),[f,d]=C.useState({top:0,left:0}),[h,l]=C.useState({top:0,left:0}),g=C.useMemo(()=>({...{placement:"top",zIndex:9},...e}),[e]);C.useEffect(()=>{if(o?.current){const{clientHeight:x,clientWidth:v}=o.current;u({height:x,width:v})}},[o?.current]),C.useEffect(()=>{if(i?.current){const{clientHeight:x,clientWidth:v}=i.current;a({height:x,width:v})}},[i?.current,e.visible]),C.useLayoutEffect(()=>{const x=()=>{if(!e.visible||!o.current||!i.current)return;const v=o.current.getBoundingClientRect(),k=window.scrollY,P=window.scrollX,{height:_,width:b}=s,{height:w,width:T}=c,R=8,j=8,L=4;let F={top:0,left:0},O={top:0,left:0};const U=v.left+P+T/2,H=v.top+k+w/2;switch(g.placement){case"bottom":F={top:v.top+k+w+R,left:U-b/2},O={top:v.top+k+w+L,left:U-j/2};break;case"left":F={top:H-_/2,left:v.left+P-b-R},O={top:H-j/2,left:v.left+P-j-L};break;case"right":F={top:H-_/2,left:v.left+P+T+R},O={top:H-j/2,left:v.left+P+T+L};break;case"top":default:F={top:v.top+k-_-R,left:U-b/2},O={top:v.top+k-j-L,left:U-j/2};break}d(F),l(O)};return x(),window.addEventListener("scroll",x,!0),window.addEventListener("resize",x),()=>{window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x)}},[e.visible,g.placement,s,c]),C.useEffect(()=>{e.visible||(a({height:0,width:0}),d({top:0,left:0}),l({top:0,left:0}))},[e.visible]);const p=x=>{if(o.current=x,C.isValidElement(n)){const v=n.ref;typeof v=="function"?v(x):v!=null&&typeof v=="object"&&(v.current=x)}};if(!C.isValidElement(n))return console.error("Popover children must be a single valid React element."),A.jsx(A.Fragment,{children:n});const y=A.jsxs(A.Fragment,{children:[A.jsx(Pd,{ref:i,...g,style:{position:"absolute",top:`${f.top}px`,left:`${f.left}px`,zIndex:g.zIndex,opacity:`${e.visible&&s.height!==0&&s.width!==0?1:0}`},children:e.content}),A.jsx("span",{style:{width:"8px",height:"8px",display:`${e.visible?"block":"none"}`,opacity:`${e.visible&&s.height!==0&&s.width!==0?1:0}`,transition:"opacity 0.25s ease",zIndex:`${(g.zIndex??9)-1}`,backgroundColor:`${e.arrowcolor??e.bgcolor??r.palette[e.color].light}`,rotate:"45deg",position:"absolute",top:`${h.top}px`,left:`${h.left}px`}})]});return A.jsxs(A.Fragment,{children:[C.cloneElement(n,{ref:p}),e.visible&&ws.createPortal(y,document.body)]})});rc.displayName="Popover";const Cd=({color:n,value:e,h:t,w:r,animationDurationInSeconds:i})=>{const o=Rt(),s=C.useRef(null);return C.useEffect(()=>{s.current&&ee.to(s.current,{width:`${e>100?100:e}%`,duration:i??1,ease:"power2.out"})},[e,i]),A.jsx("div",{style:{width:r??"100%",position:"relative",backgroundColor:o.palette[n].light,borderRadius:"8px",height:t??"8px",border:`2px solid ${o.palette[n].light}`},children:A.jsx("div",{ref:s,style:{position:"absolute",top:"0",left:"0",height:"100%",width:"0%",backgroundColor:o.palette[n].main,borderRadius:"8px"}})})},nc=({option:n,handleChange:e})=>{const t=Rt();return A.jsx(ye,{onClick:()=>e&&n&&e(n),px:1.5,py:1,height:"37px",hoverstyle:{backgroundColor:t.palette.primary.light},children:n?.label&&A.jsx(ut,{size:"14",align:"left",children:n.label})},n?.key)},ic=C.forwardRef(n=>{const e=Rt(),[t,r]=C.useState(n.value??n.initialValue??(n.placeholder?{key:n.placeholder,label:n.placeholder}:void 0)),[i,o]=C.useState(!1),[s,a]=C.useState(void 0),c=C.useRef(null),u=C.useRef(null),f=C.useRef(null);C.useEffect(()=>{const h=l=>{c.current&&!c.current.contains(l.target)&&o(!1)};return document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)}},[]),C.useLayoutEffect(()=>{i?ee.to(f.current,{autoAlpha:1,y:0,duration:.3,ease:"power2.out"}):ee.to(f.current,{autoAlpha:0,y:-10,duration:.2,ease:"power2.in"})},[i]),C.useEffect(()=>{u.current&&a(u.current.clientHeight)},[u.current]);const d=h=>{r(h),n.onChange&&n.onChange(h),o(!1)};return A.jsxs(ye,{ref:c,direction:"column",width:"100%",justify:"start",children:[(n.label||n.required)&&A.jsxs(ye,{direction:"row",gap:.5,align:"center",mb:"4px",style:{minHeight:"1.2em"},children:[n.label&&A.jsx(ut,{size:"12",children:n.label}),n.required&&A.jsx(ut,{color:e.palette.error.main,size:"12",children:"*"})]}),A.jsxs(ye,{ref:u,elevation:1,onClick:()=>o(!i),style:{position:"relative",cursor:"pointer",...n.selectOptionStyle},children:[n.CustomOption?A.jsx(n.CustomOption,{option:t}):A.jsx(nc,{option:t}),A.jsx(ye,{ref:f,elevation:1,width:"100%",gap:.5,style:{position:"absolute",left:"0",...!n.orientation||n.orientation==="down"?{top:s?`${s+1}px`:"37px"}:{bottom:s?`${s+1}px`:"37px"},visibility:"hidden",zIndex:1,backdropFilter:"blur(6px)",maxHeight:"200px",overflowY:"auto",...n.hideScrollbar&&{scrollbarWidth:"none",msOverflowStyle:"none"},...n.optionContainerStyle},children:n.options.map(h=>n.CustomOption?A.jsx(n.CustomOption,{option:h,handleChange:d}):A.jsx(nc,{option:h,handleChange:d}))})]})]})});ic.displayName="Select";const Ed=ct.div`
+`,rc=C.forwardRef(({children:n,...e},t)=>{const r=Rt(),i=C.useRef(null),o=C.useRef(null),[s,a]=C.useState({height:0,width:0}),[c,u]=C.useState({height:0,width:0}),[f,d]=C.useState({top:0,left:0}),[h,l]=C.useState({top:0,left:0}),g=C.useMemo(()=>({...{placement:"top",zIndex:9},...e}),[e]);C.useEffect(()=>{if(o?.current&&e.visible){const{clientHeight:x,clientWidth:v}=o.current;u({height:x,width:v})}},[o?.current,e.visible]),C.useEffect(()=>{if(i?.current&&e.visible){const{clientHeight:x,clientWidth:v}=i.current;a({height:x,width:v})}},[i?.current,e.visible,e.content]),C.useLayoutEffect(()=>{const x=()=>{if(!e.visible||!o.current||!i.current||s.height===0||c.height===0)return;const v=o.current.getBoundingClientRect(),k=window.scrollY,P=window.scrollX,{height:_,width:b}=s,{height:w,width:T}=c,R=8,j=8,L=4;let F={top:0,left:0},O={top:0,left:0};const U=v.left+P+T/2,H=v.top+k+w/2;switch(g.placement){case"bottom":F={top:v.top+k+w+R,left:U-b/2},O={top:v.top+k+w+L,left:U-j/2};break;case"left":F={top:H-_/2,left:v.left+P-b-R},O={top:H-j/2,left:v.left+P-j-L};break;case"right":F={top:H-_/2,left:v.left+P+T+R},O={top:H-j/2,left:v.left+P+T+L};break;case"top":default:F={top:v.top+k-_-R,left:U-b/2},O={top:v.top+k-j-L,left:U-j/2};break}d(F),l(O)};return x(),window.addEventListener("scroll",x,!0),window.addEventListener("resize",x),()=>{window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x)}},[e.visible,g.placement,s,c]),C.useEffect(()=>{e.visible||(a({height:0,width:0}),u({height:0,width:0}),d({top:0,left:0}),l({top:0,left:0}))},[e.visible]);const p=x=>{if(o.current=x,C.isValidElement(n)){const v=n.ref;typeof v=="function"?v(x):v!=null&&typeof v=="object"&&(v.current=x)}};if(!C.isValidElement(n))return console.error("Popover children must be a single valid React element."),A.jsx(A.Fragment,{children:n});const y=A.jsxs(A.Fragment,{children:[A.jsx(Pd,{ref:i,...g,style:{position:"absolute",top:`${f.top}px`,left:`${f.left}px`,zIndex:g.zIndex,opacity:`${e.visible&&s.height!==0&&s.width!==0?1:0}`},children:e.content}),A.jsx("span",{style:{width:"8px",height:"8px",display:`${e.visible?"block":"none"}`,opacity:`${e.visible&&s.height!==0&&s.width!==0?1:0}`,transition:"opacity 0.25s ease",zIndex:`${(g.zIndex??9)-1}`,backgroundColor:`${e.arrowcolor??e.bgcolor??r.palette[e.color].light}`,rotate:"45deg",position:"absolute",top:`${h.top}px`,left:`${h.left}px`}})]});return A.jsxs(A.Fragment,{children:[C.cloneElement(n,{ref:p}),e.visible&&ws.createPortal(y,document.body)]})});rc.displayName="Popover";const Cd=({color:n,value:e,h:t,w:r,animationDurationInSeconds:i})=>{const o=Rt(),s=C.useRef(null);return C.useEffect(()=>{s.current&&ee.to(s.current,{width:`${e>100?100:e}%`,duration:i??1,ease:"power2.out"})},[e,i]),A.jsx("div",{style:{width:r??"100%",position:"relative",backgroundColor:o.palette[n].light,borderRadius:"8px",height:t??"8px",border:`2px solid ${o.palette[n].light}`},children:A.jsx("div",{ref:s,style:{position:"absolute",top:"0",left:"0",height:"100%",width:"0%",backgroundColor:o.palette[n].main,borderRadius:"8px"}})})},nc=({option:n,handleChange:e})=>{const t=Rt();return A.jsx(ye,{onClick:()=>e&&n&&e(n),px:1.5,py:1,height:"37px",hoverstyle:{backgroundColor:t.palette.primary.light},children:n?.label&&A.jsx(ut,{size:"14",align:"left",children:n.label})},n?.key)},ic=C.forwardRef(n=>{const e=Rt(),[t,r]=C.useState(n.value??n.initialValue??(n.placeholder?{key:n.placeholder,label:n.placeholder}:void 0)),[i,o]=C.useState(!1),[s,a]=C.useState(void 0),c=C.useRef(null),u=C.useRef(null),f=C.useRef(null);C.useEffect(()=>{const h=l=>{c.current&&!c.current.contains(l.target)&&o(!1)};return document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)}},[]),C.useLayoutEffect(()=>{i?ee.to(f.current,{autoAlpha:1,y:0,duration:.3,ease:"power2.out"}):ee.to(f.current,{autoAlpha:0,y:-10,duration:.2,ease:"power2.in"})},[i]),C.useEffect(()=>{u.current&&a(u.current.clientHeight)},[u.current]);const d=h=>{r(h),n.onChange&&n.onChange(h),o(!1)};return A.jsxs(ye,{ref:c,direction:"column",width:"100%",justify:"start",children:[(n.label||n.required)&&A.jsxs(ye,{direction:"row",gap:.5,align:"center",mb:"4px",style:{minHeight:"1.2em"},children:[n.label&&A.jsx(ut,{size:"12",children:n.label}),n.required&&A.jsx(ut,{color:e.palette.error.main,size:"12",children:"*"})]}),A.jsxs(ye,{ref:u,elevation:1,onClick:()=>o(!i),style:{position:"relative",cursor:"pointer",...n.selectOptionStyle},children:[n.CustomOption?A.jsx(n.CustomOption,{option:t}):A.jsx(nc,{option:t}),A.jsx(ye,{ref:f,elevation:1,width:"100%",gap:.5,style:{position:"absolute",left:"0",...!n.orientation||n.orientation==="down"?{top:s?`${s+1}px`:"37px"}:{bottom:s?`${s+1}px`:"37px"},visibility:"hidden",zIndex:1,backdropFilter:"blur(6px)",maxHeight:"200px",overflowY:"auto",...n.hideScrollbar&&{scrollbarWidth:"none",msOverflowStyle:"none"},...n.optionContainerStyle},children:n.options.map(h=>n.CustomOption?A.jsx(n.CustomOption,{option:h,handleChange:d}):A.jsx(nc,{option:h,handleChange:d}))})]})]})});ic.displayName="Select";const Ed=ct.div`
   display: inline-block;
   position: relative;
   overflow: hidden;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@julien-wiegandt/open-ui",
   "private": false,
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "The best open source react UI library",
   "type": "module",
   "main": "./dist/open-ui.umd.cjs",