@julien-wiegandt/open-ui 0.1.63 → 0.1.64

package/dist/components/modal/index.d.ts

@@ -9,6 +9,7 @@ export type ModalProps = {
     style?: React.CSSProperties;
     onClose?: () => void;
     closeOnClickOutside?: boolean;
+    bodyStyle?: React.CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const Modal: React.ForwardRefExoticComponent<{
     isOpen: boolean;
@@ -20,4 +21,5 @@ export declare const Modal: React.ForwardRefExoticComponent<{
     style?: React.CSSProperties;
     onClose?: () => void;
     closeOnClickOutside?: boolean;
+    bodyStyle?: React.CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/open-ui.js

@@ -4779,7 +4779,8 @@ const It = {
                   py: It[o.size ?? "m"].bodyPy,
                   px: It[o.size ?? "m"].bodyPx,
                   style: {
-                    overflowY: "auto"
+                    overflowY: "auto",
+                    ...o.bodyStyle
                   },
                   children: t
                 }

package/dist/open-ui.umd.cjs

@@ -263,7 +263,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[bi]+=1);const ut={none:"0px",
  * Subject to the terms at https://gsap.com/standard-license or for
  * Club GSAP members, the agreement issued with that membership.
  * @author: Jack Doyle, jack@greensock.com
-*/let Jl=typeof document<"u"?C.useLayoutEffect:C.useEffect,ec=n=>n&&!Array.isArray(n)&&typeof n=="object",ki=[],Pd={},tc=Q;const Tr=(n,e=ki)=>{let t=Pd;ec(n)?(t=n,n=null,e="dependencies"in t?t.dependencies:ki):ec(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(tc.context(()=>{},r)),a=C.useRef(u=>s.current.add(null,u)),c=e&&e.length&&!i;return c&&Jl(()=>(o.current=!0,()=>s.current.revert()),ki),Jl(()=>{if(n&&s.current.add(n,r),!c||!o.current)return()=>s.current.revert()},e),{context:s.current,contextSafe:a.current}};Tr.register=n=>{tc=n},Tr.headless=!0,Q.registerPlugin(Tr);const Ft={xs:{minWidth:{sm:"75%",md:"320px",lg:"320px",xl:"320px"},maxHeight:"50vh",width:"30vw",headerPy:1,headerPx:2.5,bodyPy:.5,bodyPx:2.5,footerPy:1,footerPx:2.5},s:{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},m:{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},l:{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},xl:{minWidth:{sm:"98%",md:"600px",lg:"600px",xl:"600px"},maxHeight:"90vh",width:"70vw",headerPy:2.5,headerPx:3.5,bodyPy:1.5,bodyPx:3.5,footerPy:2,footerPx:3.5}},rc=C.forwardRef(({isOpen:n,fullScreen:e,children:t,style:r,closeOnClickOutside:i=!0,...o},s)=>{const a=Ot(),{breakpoint:c}=Jr(),[u,f]=C.useState(null),[d,p]=C.useState(!1),l=C.useRef(null);C.useEffect(()=>{f(document.getElementById("modal"))},[]),C.useEffect(()=>{n&&p(!0)},[n]),Tr(()=>{d&&(n?Q.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"):Q.timeline({onComplete:()=>p(!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??"m"].width,height:e?"100vh":"fit-content",minWidth:e?"100vw":Ft[o.size??"m"].minWidth[c],maxHeight:e?"100vh":Ft[o.size??"m"].maxHeight,borderRadius:e?"0px":`min(24px, ${ut[a.radius]})`,backgroundColor:"#FFFFFF",position:"relative",...r},h=O.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:O.jsxs(ye,{ref:s,className:"modal-content",onClick:y=>{y.stopPropagation()},direction:"column",elevation:3,style:g,children:[o.onClose&&O.jsx(Si,{variant:"text",color:"default",starticon:O.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:Go(g.backgroundColor??"#FFFFFF"),"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[O.jsx("path",{d:"M18 6 6 18"}),O.jsx("path",{d:"m6 6 12 12"})]}),onClick:o.onClose,style:{position:"absolute",top:"0px",right:"0px",cursor:"pointer"}}),o.title&&O.jsx(ye,{direction:"row",width:"100%",py:Ft[o.size??"m"].headerPy,px:Ft[o.size??"m"].headerPx,align:"center",justify:"between",children:O.jsx(Zl,{level:4,children:o.title})}),O.jsx(ye,{py:Ft[o.size??"m"].bodyPy,px:Ft[o.size??"m"].bodyPx,style:{overflowY:"auto"},children:t}),O.jsx(ye,{direction:"row",gap:2,width:"100%",mt:"auto",py:Ft[o.size??"m"].footerPy,px:Ft[o.size??"m"].footerPx,align:"center",justify:"end",children:o.footer})]})});return u?bs.createPortal(h,u):null});rc.displayName="Modal";const Cd=ct(ye)`
+*/let Jl=typeof document<"u"?C.useLayoutEffect:C.useEffect,ec=n=>n&&!Array.isArray(n)&&typeof n=="object",ki=[],Pd={},tc=Q;const Tr=(n,e=ki)=>{let t=Pd;ec(n)?(t=n,n=null,e="dependencies"in t?t.dependencies:ki):ec(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(tc.context(()=>{},r)),a=C.useRef(u=>s.current.add(null,u)),c=e&&e.length&&!i;return c&&Jl(()=>(o.current=!0,()=>s.current.revert()),ki),Jl(()=>{if(n&&s.current.add(n,r),!c||!o.current)return()=>s.current.revert()},e),{context:s.current,contextSafe:a.current}};Tr.register=n=>{tc=n},Tr.headless=!0,Q.registerPlugin(Tr);const Ft={xs:{minWidth:{sm:"75%",md:"320px",lg:"320px",xl:"320px"},maxHeight:"50vh",width:"30vw",headerPy:1,headerPx:2.5,bodyPy:.5,bodyPx:2.5,footerPy:1,footerPx:2.5},s:{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},m:{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},l:{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},xl:{minWidth:{sm:"98%",md:"600px",lg:"600px",xl:"600px"},maxHeight:"90vh",width:"70vw",headerPy:2.5,headerPx:3.5,bodyPy:1.5,bodyPx:3.5,footerPy:2,footerPx:3.5}},rc=C.forwardRef(({isOpen:n,fullScreen:e,children:t,style:r,closeOnClickOutside:i=!0,...o},s)=>{const a=Ot(),{breakpoint:c}=Jr(),[u,f]=C.useState(null),[d,p]=C.useState(!1),l=C.useRef(null);C.useEffect(()=>{f(document.getElementById("modal"))},[]),C.useEffect(()=>{n&&p(!0)},[n]),Tr(()=>{d&&(n?Q.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"):Q.timeline({onComplete:()=>p(!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??"m"].width,height:e?"100vh":"fit-content",minWidth:e?"100vw":Ft[o.size??"m"].minWidth[c],maxHeight:e?"100vh":Ft[o.size??"m"].maxHeight,borderRadius:e?"0px":`min(24px, ${ut[a.radius]})`,backgroundColor:"#FFFFFF",position:"relative",...r},h=O.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:O.jsxs(ye,{ref:s,className:"modal-content",onClick:y=>{y.stopPropagation()},direction:"column",elevation:3,style:g,children:[o.onClose&&O.jsx(Si,{variant:"text",color:"default",starticon:O.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:Go(g.backgroundColor??"#FFFFFF"),"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[O.jsx("path",{d:"M18 6 6 18"}),O.jsx("path",{d:"m6 6 12 12"})]}),onClick:o.onClose,style:{position:"absolute",top:"0px",right:"0px",cursor:"pointer"}}),o.title&&O.jsx(ye,{direction:"row",width:"100%",py:Ft[o.size??"m"].headerPy,px:Ft[o.size??"m"].headerPx,align:"center",justify:"between",children:O.jsx(Zl,{level:4,children:o.title})}),O.jsx(ye,{py:Ft[o.size??"m"].bodyPy,px:Ft[o.size??"m"].bodyPx,style:{overflowY:"auto",...o.bodyStyle},children:t}),O.jsx(ye,{direction:"row",gap:2,width:"100%",mt:"auto",py:Ft[o.size??"m"].footerPy,px:Ft[o.size??"m"].footerPx,align:"center",justify:"end",children:o.footer})]})});return u?bs.createPortal(h,u):null});rc.displayName="Modal";const Cd=ct(ye)`
   background-color: ${({bgcolor:n,color:e,theme:t})=>n??t.palette[e].light};
 `,nc=C.forwardRef(({children:n,...e},t)=>{const r=Ot(),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}),[p,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(),S=window.scrollY,P=window.scrollX,{height:_,width:b}=s,{height:w,width:T}=c,E=e.gap??8,j=8,L=E-j/2;let F={top:0,left:0},M={top:0,left:0};const U=v.left+P+T/2,H=v.top+S+w/2;switch(g.placement){case"bottom":F={top:v.top+S+w+E,left:U-b/2},M={top:v.top+S+w+L,left:U-j/2};break;case"left":F={top:H-_/2,left:v.left+P-b-E},M={top:H-j/2,left:v.left+P-j-L};break;case"right":F={top:H-_/2,left:v.left+P+T+E},M={top:H-j/2,left:v.left+P+T+L};break;case"top":default:F={top:v.top+S-_-E,left:U-b/2},M={top:v.top+S-j-L,left:U-j/2};break}d(F),l(M)};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 h=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."),O.jsx(O.Fragment,{children:n});const y=O.jsxs(O.Fragment,{children:[O.jsx(Cd,{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}`,transition:"opacity 0.25s ease"},children:e.content}),O.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:`${p.top}px`,left:`${p.left}px`}})]});return O.jsxs(O.Fragment,{children:[C.cloneElement(n,{ref:h}),e.visible&&bs.createPortal(y,document.body)]})});nc.displayName="Popover";const Ed=({color:n,value:e,h:t,w:r,animationDurationInSeconds:i})=>{const o=Ot(),s=C.useRef(null);return C.useEffect(()=>{s.current&&Q.to(s.current,{width:`${e>100?100:e}%`,duration:i??1,ease:"power2.out"})},[e,i]),O.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:O.jsx("div",{ref:s,style:{position:"absolute",top:"0",left:"0",height:"100%",width:"0%",backgroundColor:o.palette[n].main,borderRadius:"8px"}})})},ic=({option:n,handleChange:e})=>{const t=Ot();return O.jsx(ye,{onClick:()=>e&&n&&e(n),px:1.5,py:1,height:"37px",hoverstyle:{backgroundColor:t.palette.primary.light},children:n?.label&&O.jsx(ft,{size:"14",align:"left",children:n.label})},n?.key)},oc=C.forwardRef(n=>{const e=Ot(),[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 p=l=>{c.current&&!c.current.contains(l.target)&&o(!1)};return document.addEventListener("mousedown",p),()=>{document.removeEventListener("mousedown",p)}},[]),C.useLayoutEffect(()=>{i?Q.to(f.current,{autoAlpha:1,y:0,duration:.3,ease:"power2.out"}):Q.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=p=>{r(p),n.onChange&&n.onChange(p),o(!1)};return O.jsxs(ye,{ref:c,direction:"column",width:"100%",justify:"start",children:[(n.label||n.required)&&O.jsxs(ye,{direction:"row",gap:.5,align:"center",mb:"4px",style:{minHeight:"1.2em"},children:[n.label&&O.jsx(ft,{size:"12",children:n.label}),n.required&&O.jsx(ft,{color:e.palette.error.main,size:"12",children:"*"})]}),O.jsxs(ye,{ref:u,elevation:1,onClick:()=>o(!i),style:{position:"relative",cursor:"pointer",...n.selectOptionStyle},children:[n.CustomOption?O.jsx(n.CustomOption,{option:t}):O.jsx(ic,{option:t}),O.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(p=>n.CustomOption?O.jsx(n.CustomOption,{option:p,handleChange:d}):O.jsx(ic,{option:p,handleChange:d}))})]})]})});oc.displayName="Select";const Rd=ct.div`
   display: inline-block;

package/package.json

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