@vidispine/vdt-mui 23.4.0-pre.2 → 23.4.0-pre.3

package/dist/cjs/event/EventListItem/EventListItem.js

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),B=require("react"),T=require("@mui/icons-material/esm/Launch"),E=require("@mui/icons-material/esm/FolderOutlined"),$=require("@mui/icons-material/esm/TextSnippetOutlined"),c=require("@mui/material/Box"),A=require("@mui/material/IconButton"),C=require("@mui/material/Tooltip"),F=require("@mui/material/Popover"),i=require("@mui/material/styles"),N=require("@vidispine/vdt-js"),V=require("../../metadata/MetadataGroupTreeView/index.js"),W=i.styled(c,{shouldForwardProp:o=>!["image","cover"].includes(o)})(({theme:o,image:e,cover:s,onClick:a})=>({position:"relative",display:"flex",flexDirection:"column",justifyContent:"space-between",padding:o.spacing(.25),margin:o.spacing(1),height:"95px",width:"168px",zIndex:5,transition:"all .3s ease-in-out",backgroundColor:"rgba(0, 0, 0, 0.8)",backgroundImage:e?`url(${e})`:"none",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:"4px",cursor:a?"pointer":"initial",...s?{backgroundSize:"cover"}:{backgroundSize:"contain"},"&:hover":{"& .VdtEventListItemActions":{opacity:1}}})),D=i.styled("div",{shouldForwardProp:o=>!["infoOpen"].includes(o)})(({theme:o,infoOpen:e})=>({display:"flex",justifyContent:"flex-end",opacity:e?1:0,transition:"opacity .15s ease-in-out",gap:o.spacing(.25)})),v=i.styled(A)(({theme:o})=>({padding:o.spacing(.25),borderRadius:"4px",backgroundColor:"rgba(0,0,0,0.5)",color:o.palette.common.white,"&:hover":{backgroundColor:"rgba(0,0,0,0.7)"},"&.MuiIconButton-root":{"& .MuiTouchRipple-child":{borderRadius:"4px"}}})),J=i.styled("div")(()=>({display:"flex",justifyContent:"space-between"})),G=i.styled("div")(()=>({position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"rgba(255,255,255,0.6)","& .MuiSvgIcon-root":{height:"1.75em",width:"1.75em"}})),y=i.styled("div")(({theme:o})=>({backgroundColor:"rgba(0,0,0,0.6)",paddingLeft:o.spacing(.5),paddingRight:o.spacing(.5),paddingTop:o.spacing(.25),paddingBottom:o.spacing(.25),borderRadius:"3px",display:"flex",alignItems:"center","& span":{fontSize:"0.75rem",fontWeight:700,color:o.palette.common.white}})),d=i.styled("span")(()=>({fontWeight:600,fontSize:".75rem"})),I=i.styled("span")(()=>({fontSize:".75rem"})),H={Root:W},S=({listItem:o,entry:e,baseUrl:s,cover:a,onClick:k,onOpenClick:l,components:R,componentsProps:q})=>{const{Root:L}=R,{thumbnail:r,group:O,start:p,end:u}=o||{},{entityType:g}=e||o,h=t=>t==="-INF"?"Start":t==="+INF"?"End":N.formatTimeCodeText(t).toSmpte(),x=h(p),m=h(u),[f,j]=B.useState(null),b=!!f,P=t=>{k(t,{...o,...e||{}})},w=t=>{t.stopPropagation(),j(t.currentTarget)},z=t=>{t.stopPropagation(),l(t,{...o,...e||{}})},M=()=>{j(null)};return n.jsxs(L,{onClick:P,cover:a,image:s&&r?`${s}/APInoauth/thumbnail/${r}`:r,...q.root,children:[!r&&n.jsx(G,{children:n.jsx(E,{})}),n.jsxs(D,{className:"VdtEventListItemActions",infoOpen:b,children:[l&&n.jsx(C,{title:g==="Item"&&"Open Item"||g==="Collection"&&"Open Collection"||"Open",children:n.jsx(v,{size:"small",onClick:z,children:n.jsx(T,{})})}),n.jsx(C,{title:"Show event info",children:n.jsx(v,{size:"small",onClick:w,children:n.jsx($,{})})})]}),n.jsxs(J,{children:[n.jsx(y,{children:n.jsx("span",{children:x})}),n.jsx(y,{children:n.jsx("span",{children:m})})]}),n.jsxs(F,{onClick:t=>t.stopPropagation(),open:b,anchorEl:f,onClose:M,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{width:400,maxWidth:400,padding:1}}},children:[n.jsxs(c,{sx:{paddingLeft:1,paddingRight:1},children:[n.jsx(d,{children:"Start timecode: "}),n.jsx(I,{children:`${x} (${p})`})]}),n.jsxs(c,{sx:{paddingLeft:1,paddingRight:1},children:[n.jsx(d,{children:"End timecode: "}),n.jsx(I,{children:`${m} (${u})`})]}),n.jsx(c,{sx:{paddingLeft:1,paddingRight:1},children:n.jsx(d,{children:"Metadata group: "})}),n.jsx(V,{group:O})]})]})};S.defaultProps={listItem:void 0,baseUrl:void 0,entry:void 0,cover:!1,onClick:void 0,onOpenClick:void 0,components:H,componentsProps:void 0};const K=S;module.exports=K;
+"use strict";const n=require("react/jsx-runtime"),B=require("react"),T=require("@mui/icons-material/esm/Launch"),E=require("@mui/icons-material/esm/FolderOutlined"),$=require("@mui/icons-material/esm/TextSnippetOutlined"),c=require("@mui/material/Box"),A=require("@mui/material/IconButton"),v=require("@mui/material/Tooltip"),F=require("@mui/material/Popover"),i=require("@mui/material/styles"),N=require("@vidispine/vdt-js"),V=require("../../metadata/MetadataGroupTreeView/index.js"),W=i.styled(c,{shouldForwardProp:o=>!["image","cover"].includes(o)})(({theme:o,image:e,cover:s,onClick:a})=>({position:"relative",display:"flex",flexDirection:"column",justifyContent:"space-between",padding:o.spacing(.25),margin:o.spacing(1),height:"95px",width:"168px",zIndex:5,transition:"all .3s ease-in-out",backgroundColor:"rgba(0, 0, 0, 0.8)",backgroundImage:e?`url(${e})`:"none",backgroundPosition:"center",backgroundRepeat:"no-repeat",borderRadius:"4px",cursor:a?"pointer":"initial",...s?{backgroundSize:"cover"}:{backgroundSize:"contain"},"&:hover":{"& .VdtEventListItemActions":{opacity:1}}})),D=i.styled("div",{shouldForwardProp:o=>!["infoOpen"].includes(o)})(({theme:o,infoOpen:e})=>({display:"flex",justifyContent:"flex-end",opacity:e?1:0,transition:"opacity .15s ease-in-out",gap:o.spacing(.25)})),y=i.styled(A)(({theme:o})=>({padding:o.spacing(.25),borderRadius:"4px",backgroundColor:"rgba(0,0,0,0.5)",color:o.palette.common.white,"&:hover":{backgroundColor:"rgba(0,0,0,0.7)"},"&.MuiIconButton-root":{"& .MuiTouchRipple-child":{borderRadius:"4px"}}})),J=i.styled("div")(()=>({display:"flex",justifyContent:"space-between"})),G=i.styled("div")(()=>({position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"rgba(255,255,255,0.6)","& .MuiSvgIcon-root":{height:"1.75em",width:"1.75em"}})),I=i.styled("div")(({theme:o})=>({backgroundColor:"rgba(0,0,0,0.6)",paddingLeft:o.spacing(.5),paddingRight:o.spacing(.5),paddingTop:o.spacing(.25),paddingBottom:o.spacing(.25),borderRadius:"3px",display:"flex",alignItems:"center","& span":{fontSize:"0.75rem",fontWeight:700,color:o.palette.common.white}})),d=i.styled("span")(()=>({fontWeight:600,fontSize:".75rem"})),S=i.styled("span")(()=>({fontSize:".75rem"})),H={Root:W},k=({listItem:o,entry:e,baseUrl:s,cover:a,onClick:l,onOpenClick:p,components:R,componentsProps:q})=>{const{Root:L}=R,{thumbnail:r,group:O,start:u,end:g}=o||{},{entityType:h}=e||o,x=t=>t==="-INF"?"Start":t==="+INF"?"End":N.formatTimeCodeText(t).toSmpte(),f=x(u),m=x(g),[j,b]=B.useState(null),C=!!j,P=t=>{l&&l(t,{...o,...e||{}})},w=t=>{t.stopPropagation(),b(t.currentTarget)},z=t=>{t.stopPropagation(),p(t,{...o,...e||{}})},M=()=>{b(null)};return n.jsxs(L,{onClick:P,cover:a,image:s&&r?`${s}/APInoauth/thumbnail/${r}`:r,...q.root,children:[!r&&n.jsx(G,{children:n.jsx(E,{})}),n.jsxs(D,{className:"VdtEventListItemActions",infoOpen:C,children:[p&&n.jsx(v,{title:h==="Item"&&"Open Item"||h==="Collection"&&"Open Collection"||"Open",children:n.jsx(y,{size:"small",onClick:z,children:n.jsx(T,{})})}),n.jsx(v,{title:"Show event info",children:n.jsx(y,{size:"small",onClick:w,children:n.jsx($,{})})})]}),n.jsxs(J,{children:[n.jsx(I,{children:n.jsx("span",{children:f})}),n.jsx(I,{children:n.jsx("span",{children:m})})]}),n.jsxs(F,{onClick:t=>t.stopPropagation(),open:C,anchorEl:j,onClose:M,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{width:400,maxWidth:400,padding:1}}},children:[n.jsxs(c,{sx:{paddingLeft:1,paddingRight:1},children:[n.jsx(d,{children:"Start timecode: "}),n.jsx(S,{children:`${f} (${u})`})]}),n.jsxs(c,{sx:{paddingLeft:1,paddingRight:1},children:[n.jsx(d,{children:"End timecode: "}),n.jsx(S,{children:`${m} (${g})`})]}),n.jsx(c,{sx:{paddingLeft:1,paddingRight:1},children:n.jsx(d,{children:"Metadata group: "})}),n.jsx(V,{group:O})]})]})};k.defaultProps={listItem:void 0,baseUrl:void 0,entry:void 0,cover:!1,onClick:void 0,onOpenClick:void 0,components:H,componentsProps:void 0};const K=k;module.exports=K;

package/dist/cjs/general/Sort/Sort.js

@@ -1 +1 @@
-"use strict";const g=require("react/jsx-runtime"),f=require("react"),T=require("@mui/material/Box"),L=require("@mui/material/Menu"),s=require("@mui/material/styles"),z=require("./components/ButtonBase.js"),E=require("./components/MenuItem.js"),r={descending:"descending",ascending:"ascending"},W=s.styled(T)(({theme:t})=>{var e;return{color:(e=t.palette)==null?void 0:e.secondary.main,paddingLeft:9,paddingRight:9,borderRadius:4}}),A=s.styled(L)(()=>({minWidth:150,marginTop:4})),D=s.styled(E)(({theme:t})=>{var e,i,n,l;return{"&$selected":{backgroundColor:t.palette&&s.alpha((i=(e=t.palette)==null?void 0:e.secondary)==null?void 0:i.main,.16),color:(l=(n=t.palette)==null?void 0:n.secondary)==null?void 0:l.main}}}),F=s.styled(z,{shouldForwardProp:t=>t!=="descending"})(({theme:t,descending:e})=>{var i,n;return{"& .MuiBox-root":{marginRight:"-2px",marginLeft:"4px",color:(n=(i=t.palette)==null?void 0:i.secondary)==null?void 0:n.main,transition:"transform .2s ease-out",transform:"rotate(180deg)",...e&&{transform:"rotate(0deg)"}}}}),V={Root:W,Menu:A,MenuItem:D,ButtonBase:F},b=({caption:t,options:e,initialSort:i,onChange:n,components:l,componentsProps:a})=>{var p,y;const{Root:B,Menu:S,MenuItem:x,ButtonBase:C}=l,[m,v]=f.useState(null),q=o=>{v(o.currentTarget)},h=()=>{v(null)},[d,R]=f.useState(i||{option:{value:void 0,label:void 0},direction:r.descending}),I=(o,M)=>{let{option:c,direction:u}=d;M!==c.value?c=e.find(k=>k.value===M):u=u===r.descending?r.ascending:r.descending,R({option:c,direction:u}),n&&n(o,{value:c.value,direction:u}),h()},O=e===void 0||e.length===0,j=d.direction!==r.ascending;return g.jsxs(B,{...a.root,children:[g.jsx(C,{onClick:q,disabled:O,label:t,optionLabel:d.option.label||"",descending:j,...a.buttonBase}),g.jsx(S,{anchorEl:m,keepMounted:!0,open:!!m,onClose:h,elevation:1,marginThreshold:0,PaperProps:{style:{minWidth:150,marginTop:4}},...a.menu,anchorOrigin:{vertical:"bottom",horizontal:"left",...((p=a.menu)==null?void 0:p.anchorOrigin)||{}},transformOrigin:{vertical:"top",horizontal:"left",...((y=a.menu)==null?void 0:y.transformOrigin)||{}},children:e.map(o=>g.jsx(x,{value:o.value,label:o.label,onClick:I,selected:o.value===d.option.value,...a.menuItem},o.value))})]})};b.defaultProps={caption:"Sort by",onChange:void 0,initialSort:void 0,options:[],components:V,componentsProps:void 0};const $=b;module.exports=$;
+"use strict";const g=require("react/jsx-runtime"),b=require("react"),T=require("@mui/material/Box"),L=require("@mui/material/Menu"),l=require("@mui/material/styles"),z=require("./components/ButtonBase.js"),E=require("./components/MenuItem.js"),r={descending:"descending",ascending:"ascending"},W=l.styled(T)(({theme:t})=>{var e;return{color:(e=t.palette)==null?void 0:e.secondary.main,paddingLeft:9,paddingRight:9,borderRadius:4}}),A=l.styled(L)(()=>({minWidth:150,marginTop:4})),D=l.styled(E)(({theme:t})=>{var e,i,n,s;return{"&$selected":{backgroundColor:t.palette&&l.alpha((i=(e=t.palette)==null?void 0:e.secondary)==null?void 0:i.main,.16),color:(s=(n=t.palette)==null?void 0:n.secondary)==null?void 0:s.main}}}),F=l.styled(z,{shouldForwardProp:t=>t!=="descending"})(({theme:t,descending:e})=>{var i,n;return{"& .MuiBox-root":{marginRight:"-2px",marginLeft:"4px",color:(n=(i=t.palette)==null?void 0:i.secondary)==null?void 0:n.main,transition:"transform .2s ease-out",transform:"rotate(180deg)",...e&&{transform:"rotate(0deg)"}}}}),V={Root:W,Menu:A,MenuItem:D,ButtonBase:F},f=({caption:t,options:e,initialSort:i,onChange:n,components:s,componentsProps:a})=>{var p,y;const{Root:B,Menu:S,MenuItem:x,ButtonBase:C}=s,[m,v]=b.useState(null),q=o=>{v(o.currentTarget)},h=()=>{v(null)},[d,R]=b.useState(i||{option:{value:void 0,label:void 0},direction:r.descending}),I=(o,M)=>{let{option:c,direction:u}=d;M!==c.value?c=e.find(k=>k.value===M):u=u===r.descending?r.ascending:r.descending,R({option:c,direction:u}),n&&n(o,{value:c.value,direction:u}),h()},O=e===void 0||e.length===0,j=d.direction!==r.ascending;return g.jsxs(B,{...a.root,children:[g.jsx(C,{onClick:q,disabled:O,label:t,optionLabel:d.option.label||"",descending:j,role:"button",...a.buttonBase}),g.jsx(S,{anchorEl:m,keepMounted:!0,open:!!m,onClose:h,elevation:1,marginThreshold:0,PaperProps:{style:{minWidth:150,marginTop:4}},...a.menu,anchorOrigin:{vertical:"bottom",horizontal:"left",...((p=a.menu)==null?void 0:p.anchorOrigin)||{}},transformOrigin:{vertical:"top",horizontal:"left",...((y=a.menu)==null?void 0:y.transformOrigin)||{}},children:e.map(o=>g.jsx(x,{value:o.value,label:o.label,onClick:I,selected:o.value===d.option.value,...a.menuItem},o.value))})]})};f.defaultProps={caption:"Sort by",onChange:void 0,initialSort:void 0,options:[],components:V,componentsProps:void 0};const $=f;module.exports=$;

package/dist/cjs/inputs/BooleanInput/BooleanInput.js

@@ -1 +1 @@
-"use strict";const l=require("react/jsx-runtime"),A=require("@mui/material/FormControl"),z=require("@mui/material/FormControlLabel"),B=require("@mui/material/FormHelperText"),I=require("@mui/material/Switch"),E=require("@mui/material/Checkbox"),p=require("@mui/material/styles"),P=p.styled(z,{shouldForwardProp:o=>o!=="size"})(({theme:o,size:e,labelPlacement:t})=>({"& .MuiTypography-root":{...e==="small"&&{fontSize:"0.8rem"}},"&.Mui-error":{color:o.palette.error.main},...t==="end"?{marginRight:0}:{},...t==="start"?{marginLeft:0}:{},...["bottom","top"].includes(t)?{marginRight:0,marginLeft:0}:{}})),V=p.styled(B,{shouldForwardProp:o=>!["fullWidth","textAlign"].includes(o)})(({fullWidth:o,textAlign:e})=>o?{textAlign:e}:{}),W={Root:A,FormControlLabel:P,FormHelperText:V,Switch:I,Checkbox:E},C=({name:o,label:e,value:t,defaultValue:g,helperText:c,error:s,required:d,disabled:b,labelPlacement:a,size:u,fullWidth:m,type:f,onChange:F,onBlur:v,onFocus:k,components:y,componentsProps:r})=>{const{Root:T,FormControlLabel:L,FormHelperText:q,Switch:w,Checkbox:M}=y,S={end:"left",start:"right",top:"center",bottom:"center"},j=n=>{var x;F(n,{value:(x=n==null?void 0:n.target)==null?void 0:x.checked})},i=!!s,h=(s||"").trim(),[H,R]=f==="switch"?[w,r.switch]:[M,r.checkbox];return l.jsxs(T,{error:i,required:d,disabled:b,fullWidth:m,...r.root,children:[l.jsx(L,{label:d?`${e} *`:e,labelPlacement:e?a:"end",size:u,control:l.jsx(H,{id:o,name:o,checked:t,size:u,type:"checkbox",defaultChecked:g,...i?{color:"error"}:{},onChange:j,onBlur:v,onFocus:k,...R}),...r.formControlLabel}),(h||c)&&l.jsx(q,{fullWidth:m,textAlign:S[a],...r.formHelperText,children:i?h:c})]})};C.defaultProps={name:void 0,label:void 0,value:void 0,defaultValue:void 0,helperText:void 0,error:void 0,required:!1,disabled:!1,fullWidth:!1,labelPlacement:"end",size:"medium",type:"checkbox",onChange:()=>null,onBlur:void 0,onFocus:void 0,components:W,componentsProps:void 0};const $=C;module.exports=$;
+"use strict";const l=require("react/jsx-runtime"),B=require("@mui/material/FormControl"),I=require("@mui/material/FormControlLabel"),D=require("@mui/material/FormHelperText"),E=require("@mui/material/Switch"),P=require("@mui/material/Checkbox"),C=require("@mui/material/styles"),V=C.styled(I,{shouldForwardProp:e=>e!=="size"})(({theme:e,size:o,labelPlacement:t})=>({"& .MuiTypography-root":{...o==="small"&&{fontSize:"0.8rem"}},"&.Mui-error":{color:e.palette.error.main},...t==="end"?{marginRight:0}:{},...t==="start"?{marginLeft:0}:{},...["bottom","top"].includes(t)?{marginRight:0,marginLeft:0}:{}})),W=C.styled(D,{shouldForwardProp:e=>!["fullWidth","textAlign"].includes(e)})(({fullWidth:e,textAlign:o})=>e?{textAlign:o}:{}),$={Root:B,FormControlLabel:V,FormHelperText:W,Switch:E,Checkbox:P},b=({name:e,label:o,value:t,defaultValue:i,helperText:d,error:u,required:m,disabled:F,labelPlacement:h,size:x,fullWidth:p,type:y,onChange:k,onBlur:v,onFocus:T,components:L,componentsProps:r})=>{const{Root:q,FormControlLabel:w,FormHelperText:M,Switch:S,Checkbox:j}=L,H={end:"left",start:"right",top:"center",bottom:"center"};let s,c;typeof i=="string"?s=i==="true":s=i,typeof t=="string"?c=t==="true":c=t;const R=n=>{var g;k(n,{value:(g=n==null?void 0:n.target)==null?void 0:g.checked})},a=!!u,f=(u||"").trim(),[A,z]=y==="switch"?[S,r.switch]:[j,r.checkbox];return l.jsxs(q,{error:a,required:m,disabled:F,fullWidth:p,...r.root,children:[l.jsx(w,{label:m?`${o} *`:o,labelPlacement:o?h:"end",size:x,control:l.jsx(A,{id:e,name:e,checked:c,size:x,type:"checkbox",defaultChecked:s,...a?{color:"error"}:{},onChange:R,onBlur:v,onFocus:T,...z}),...r.formControlLabel}),(f||d)&&l.jsx(M,{fullWidth:p,textAlign:H[h],...r.formHelperText,children:a?f:d})]})};b.defaultProps={name:void 0,label:void 0,value:void 0,defaultValue:void 0,helperText:void 0,error:void 0,required:!1,disabled:!1,fullWidth:!1,labelPlacement:"end",size:"medium",type:"checkbox",onChange:()=>null,onBlur:void 0,onFocus:void 0,components:$,componentsProps:void 0};const G=b;module.exports=G;

package/dist/es/_utils/withOverrides.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface OverridesProps {
     className: string;
     components: any;

package/dist/es/event/EventListItem/EventListItem.js

@@ -5,7 +5,7 @@ import A from "@mui/icons-material/esm/FolderOutlined";
 import F from "@mui/icons-material/esm/TextSnippetOutlined";
 import d from "@mui/material/Box";
 import V from "@mui/material/IconButton";
-import I from "@mui/material/Tooltip";
+import S from "@mui/material/Tooltip";
 import N from "@mui/material/Popover";
 import { styled as e } from "@mui/material/styles";
 import { formatTimeCodeText as W } from "@vidispine/vdt-js";
@@ -55,7 +55,7 @@ const G = e(d, {
   opacity: i ? 1 : 0,
   transition: "opacity .15s ease-in-out",
   gap: o.spacing(0.25)
-})), S = e(V)(({
+})), k = e(V)(({
   theme: o
 }) => ({
   padding: o.spacing(0.25),
@@ -83,7 +83,7 @@ const G = e(d, {
     height: "1.75em",
     width: "1.75em"
   }
-})), k = e("div")(({
+})), y = e("div")(({
   theme: o
 }) => ({
   backgroundColor: "rgba(0,0,0,0.6)",
@@ -102,17 +102,17 @@ const G = e(d, {
 })), s = e("span")(() => ({
   fontWeight: 600,
   fontSize: ".75rem"
-})), y = e("span")(() => ({
+})), R = e("span")(() => ({
   fontSize: ".75rem"
 })), K = {
   Root: G
-}, R = ({
+}, w = ({
   listItem: o,
   entry: i,
   baseUrl: a,
   cover: l,
-  onClick: w,
-  onOpenClick: p,
+  onClick: p,
+  onOpenClick: g,
   components: L,
   componentsProps: O
 }) => {
@@ -121,36 +121,36 @@ const G = e(d, {
   } = L, {
     thumbnail: c,
     group: z,
-    start: g,
-    end: u
+    start: u,
+    end: m
   } = o || {}, {
-    entityType: m
-  } = i || o, h = (t) => t === "-INF" ? "Start" : t === "+INF" ? "End" : W(t).toSmpte(), f = h(g), b = h(u), [x, C] = $(null), v = !!x, M = (t) => {
-    w(t, {
+    entityType: h
+  } = i || o, f = (t) => t === "-INF" ? "Start" : t === "+INF" ? "End" : W(t).toSmpte(), b = f(u), x = f(m), [C, v] = $(null), I = !!C, M = (t) => {
+    p && p(t, {
       ...o,
       ...i || {}
     });
   }, T = (t) => {
-    t.stopPropagation(), C(t.currentTarget);
+    t.stopPropagation(), v(t.currentTarget);
   }, B = (t) => {
-    t.stopPropagation(), p(t, {
+    t.stopPropagation(), g(t, {
       ...o,
       ...i || {}
     });
   }, E = () => {
-    C(null);
+    v(null);
   };
   return /* @__PURE__ */ r(P, { onClick: M, cover: l, image: a && c ? `${a}/APInoauth/thumbnail/${c}` : c, ...O.root, children: [
     !c && /* @__PURE__ */ n(J, { children: /* @__PURE__ */ n(A, {}) }),
-    /* @__PURE__ */ r(q, { className: "VdtEventListItemActions", infoOpen: v, children: [
-      p && /* @__PURE__ */ n(I, { title: m === "Item" && "Open Item" || m === "Collection" && "Open Collection" || "Open", children: /* @__PURE__ */ n(S, { size: "small", onClick: B, children: /* @__PURE__ */ n(j, {}) }) }),
-      /* @__PURE__ */ n(I, { title: "Show event info", children: /* @__PURE__ */ n(S, { size: "small", onClick: T, children: /* @__PURE__ */ n(F, {}) }) })
+    /* @__PURE__ */ r(q, { className: "VdtEventListItemActions", infoOpen: I, children: [
+      g && /* @__PURE__ */ n(S, { title: h === "Item" && "Open Item" || h === "Collection" && "Open Collection" || "Open", children: /* @__PURE__ */ n(k, { size: "small", onClick: B, children: /* @__PURE__ */ n(j, {}) }) }),
+      /* @__PURE__ */ n(S, { title: "Show event info", children: /* @__PURE__ */ n(k, { size: "small", onClick: T, children: /* @__PURE__ */ n(F, {}) }) })
     ] }),
     /* @__PURE__ */ r(H, { children: [
-      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n("span", { children: f }) }),
-      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n("span", { children: b }) })
+      /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n("span", { children: b }) }),
+      /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n("span", { children: x }) })
     ] }),
-    /* @__PURE__ */ r(N, { onClick: (t) => t.stopPropagation(), open: v, anchorEl: x, onClose: E, anchorOrigin: {
+    /* @__PURE__ */ r(N, { onClick: (t) => t.stopPropagation(), open: I, anchorEl: C, onClose: E, anchorOrigin: {
       vertical: "bottom",
       horizontal: "right"
     }, transformOrigin: {
@@ -170,14 +170,14 @@ const G = e(d, {
         paddingRight: 1
       }, children: [
         /* @__PURE__ */ n(s, { children: "Start timecode: " }),
-        /* @__PURE__ */ n(y, { children: `${f} (${g})` })
+        /* @__PURE__ */ n(R, { children: `${b} (${u})` })
       ] }),
       /* @__PURE__ */ r(d, { sx: {
         paddingLeft: 1,
         paddingRight: 1
       }, children: [
         /* @__PURE__ */ n(s, { children: "End timecode: " }),
-        /* @__PURE__ */ n(y, { children: `${b} (${u})` })
+        /* @__PURE__ */ n(R, { children: `${x} (${m})` })
       ] }),
       /* @__PURE__ */ n(d, { sx: {
         paddingLeft: 1,
@@ -187,7 +187,7 @@ const G = e(d, {
     ] })
   ] });
 };
-R.defaultProps = {
+w.defaultProps = {
   listItem: void 0,
   baseUrl: void 0,
   entry: void 0,
@@ -197,7 +197,7 @@ R.defaultProps = {
   components: K,
   componentsProps: void 0
 };
-const ao = R;
+const ao = w;
 export {
   ao as default
 };

package/dist/es/general/CalendarPicker/components/PickersDay.d.ts

@@ -10,5 +10,5 @@ export interface VdtPickersDayProps extends CustomPickerDayProps {
     } | string | number;
     locale?: string;
 }
-declare const VdtPickersDay: import("react").ForwardRefExoticComponent<Pick<VdtPickersDayProps, keyof VdtPickersDayProps> & import("react").RefAttributes<any>>;
+declare const VdtPickersDay: import("react").ForwardRefExoticComponent<Omit<VdtPickersDayProps, "ref"> & import("react").RefAttributes<any>>;
 export default VdtPickersDay;

package/dist/es/general/Sort/Sort.js

@@ -93,7 +93,7 @@ const r = {
     }), f();
   }, k = e === void 0 || e.length === 0, T = d.direction !== r.ascending;
   return /* @__PURE__ */ V(S, { ...i.root, children: [
-    /* @__PURE__ */ m(C, { onClick: I, disabled: k, label: t, optionLabel: d.option.label || "", descending: T, ...i.buttonBase }),
+    /* @__PURE__ */ m(C, { onClick: I, disabled: k, label: t, optionLabel: d.option.label || "", descending: T, role: "button", ...i.buttonBase }),
     /* @__PURE__ */ m(y, { anchorEl: g, keepMounted: !0, open: !!g, onClose: f, elevation: 1, marginThreshold: 0, PaperProps: {
       style: {
         minWidth: 150,

package/dist/es/general/ThemeContext/ThemeContext.d.ts

@@ -24,7 +24,7 @@ export interface ThemeProviderProps<TLightKey extends string = 'light', TDarkKey
     children?: ReactNode;
 }
 declare const ThemeProvider: {
-    ({ themes, muiLocale, defaultPaletteKey, lightPaletteKey, darkPaletteKey, systemPaletteKey, localStoragePaletteKey, MuiThemeProviderProps, CssBaselineProps, children, ...props }: PropsWithChildren<ThemeProviderProps>): JSX.Element;
+    ({ themes, muiLocale, defaultPaletteKey, lightPaletteKey, darkPaletteKey, systemPaletteKey, localStoragePaletteKey, MuiThemeProviderProps, CssBaselineProps, children, ...props }: PropsWithChildren<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
     defaultProps: ThemeProviderProps<"light", "dark">;
 };
 declare const useThemeContext: () => ThemeContextValue<"light", "dark">;

package/dist/es/general/index.d.ts

@@ -13,4 +13,4 @@ export { default as ScrubLine } from './ScrubLine';
 export { default as Sort } from './Sort';
 export { default as TablePagination } from './TablePagination';
 export { default as Form } from './Form';
-export { ThemeProvider, useThemeContext } from './ThemeContext';
+export * from './ThemeContext';

package/dist/es/inputs/BooleanInput/BooleanInput.d.ts

@@ -25,11 +25,11 @@ export interface BooleanInputProps extends WithOverrideProps<typeof defaultCompo
     /**
      * Value of input
      */
-    value?: boolean;
+    value?: boolean | '' | 'true' | 'false';
     /**
      * Default value of input (use for uncontrolled)
      */
-    defaultValue?: boolean;
+    defaultValue?: boolean | '' | 'true' | 'false';
     /**
      * Label to use
      */

package/dist/es/inputs/BooleanInput/BooleanInput.js

@@ -1,92 +1,95 @@
-import { jsxs as z, jsx as i } from "react/jsx-runtime";
-import B from "@mui/material/FormControl";
-import I from "@mui/material/FormControlLabel";
-import E from "@mui/material/FormHelperText";
-import P from "@mui/material/Switch";
-import V from "@mui/material/Checkbox";
-import { styled as f } from "@mui/material/styles";
-const W = f(I, {
+import { jsxs as I, jsx as c } from "react/jsx-runtime";
+import D from "@mui/material/FormControl";
+import E from "@mui/material/FormControlLabel";
+import P from "@mui/material/FormHelperText";
+import V from "@mui/material/Switch";
+import W from "@mui/material/Checkbox";
+import { styled as C } from "@mui/material/styles";
+const $ = C(E, {
   shouldForwardProp: (o) => o !== "size"
 })(({
   theme: o,
-  size: t,
-  labelPlacement: e
+  size: e,
+  labelPlacement: t
 }) => ({
   "& .MuiTypography-root": {
-    ...t === "small" && {
+    ...e === "small" && {
       fontSize: "0.8rem"
     }
   },
   "&.Mui-error": {
     color: o.palette.error.main
   },
-  ...e === "end" ? {
+  ...t === "end" ? {
     marginRight: 0
   } : {},
-  ...e === "start" ? {
+  ...t === "start" ? {
     marginLeft: 0
   } : {},
-  ...["bottom", "top"].includes(e) ? {
+  ...["bottom", "top"].includes(t) ? {
     marginRight: 0,
     marginLeft: 0
   } : {}
-})), $ = f(E, {
+})), q = C(P, {
   shouldForwardProp: (o) => !["fullWidth", "textAlign"].includes(o)
 })(({
   fullWidth: o,
-  textAlign: t
+  textAlign: e
 }) => o ? {
-  textAlign: t
-} : {}), q = {
-  Root: B,
-  FormControlLabel: W,
-  FormHelperText: $,
-  Switch: P,
-  Checkbox: V
-}, x = ({
+  textAlign: e
+} : {}), G = {
+  Root: D,
+  FormControlLabel: $,
+  FormHelperText: q,
+  Switch: V,
+  Checkbox: W
+}, b = ({
   name: o,
-  label: t,
-  value: e,
-  defaultValue: C,
-  helperText: m,
-  error: a,
-  required: c,
-  disabled: g,
-  labelPlacement: d,
-  size: s,
-  fullWidth: h,
-  type: b,
-  onChange: F,
-  onBlur: v,
-  onFocus: k,
-  components: T,
+  label: e,
+  value: t,
+  defaultValue: l,
+  helperText: d,
+  error: s,
+  required: h,
+  disabled: F,
+  labelPlacement: p,
+  size: u,
+  fullWidth: f,
+  type: k,
+  onChange: v,
+  onBlur: y,
+  onFocus: T,
+  components: L,
   componentsProps: r
 }) => {
   const {
-    Root: L,
-    FormControlLabel: w,
-    FormHelperText: y,
-    Switch: M,
-    Checkbox: S
-  } = T, H = {
+    Root: w,
+    FormControlLabel: M,
+    FormHelperText: S,
+    Switch: H,
+    Checkbox: R
+  } = L, A = {
     end: "left",
     start: "right",
     top: "center",
     bottom: "center"
-  }, R = (n) => {
-    var p;
-    F(n, {
-      value: (p = n == null ? void 0 : n.target) == null ? void 0 : p.checked
+  };
+  let i, m;
+  typeof l == "string" ? i = l === "true" : i = l, typeof t == "string" ? m = t === "true" : m = t;
+  const j = (n) => {
+    var g;
+    v(n, {
+      value: (g = n == null ? void 0 : n.target) == null ? void 0 : g.checked
     });
-  }, l = !!a, u = (a || "").trim(), [A, j] = b === "switch" ? [M, r.switch] : [S, r.checkbox];
-  return /* @__PURE__ */ z(L, { error: l, required: c, disabled: g, fullWidth: h, ...r.root, children: [
-    /* @__PURE__ */ i(w, { label: c ? `${t} *` : t, labelPlacement: t ? d : "end", size: s, control: /* @__PURE__ */ i(A, { id: o, name: o, checked: e, size: s, type: "checkbox", defaultChecked: C, ...l ? {
+  }, a = !!s, x = (s || "").trim(), [z, B] = k === "switch" ? [H, r.switch] : [R, r.checkbox];
+  return /* @__PURE__ */ I(w, { error: a, required: h, disabled: F, fullWidth: f, ...r.root, children: [
+    /* @__PURE__ */ c(M, { label: h ? `${e} *` : e, labelPlacement: e ? p : "end", size: u, control: /* @__PURE__ */ c(z, { id: o, name: o, checked: m, size: u, type: "checkbox", defaultChecked: i, ...a ? {
       color: "error"
-    } : {}, onChange: R, onBlur: v, onFocus: k, ...j }), ...r.formControlLabel }),
-    (u || m) && /* @__PURE__ */ i(y, { fullWidth: h, textAlign: H[d], ...r.formHelperText, children: l ? u : m })
+    } : {}, onChange: j, onBlur: y, onFocus: T, ...B }), ...r.formControlLabel }),
+    (x || d) && /* @__PURE__ */ c(S, { fullWidth: f, textAlign: A[p], ...r.formHelperText, children: a ? x : d })
   ] });
 };
-x.defaultProps = {
+b.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -102,10 +105,10 @@ x.defaultProps = {
   onChange: () => null,
   onBlur: void 0,
   onFocus: void 0,
-  components: q,
+  components: G,
   componentsProps: void 0
 };
-const X = x;
+const Z = b;
 export {
-  X as default
+  Z as default
 };

package/dist/es/inputs/CheckboxGroupInput/components/CheckboxGroup.d.ts

@@ -37,5 +37,5 @@ export interface CheckboxGroupProps extends Omit<MuiFormGroupProps, 'onChange'>
     rows: boolean;
     type: string;
 }
-declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Pick<CheckboxGroupProps, keyof CheckboxGroupProps> & import("react").RefAttributes<unknown>>;
+declare const CheckboxGroup: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
 export default CheckboxGroup;

package/dist/es/inputs/RadioGroupInput/components/RadioGroup.d.ts

@@ -37,5 +37,5 @@ export interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'onChange'> {
     rows: boolean;
     type: string;
 }
-declare const RadioGroup: import("react").ForwardRefExoticComponent<Pick<RadioGroupProps, keyof RadioGroupProps> & import("react").RefAttributes<unknown>>;
+declare const RadioGroup: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
 export default RadioGroup;

package/dist/es/inputs/SliderInput/components/Slider.d.ts

@@ -25,5 +25,5 @@ export interface SliderProps extends Omit<MuiSliderProps, 'onChange'> {
     rows?: boolean;
     type?: string;
 }
-declare const Slider: import("react").ForwardRefExoticComponent<Pick<SliderProps, keyof SliderProps> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Slider: import("react").ForwardRefExoticComponent<Omit<SliderProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Slider;

package/dist/es/metadata/MetadataForm/hooks/UseMetadataFormInputs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MetadataType, MetadataFieldType } from '@vidispine/types';
 declare const useMetadataFormInputs: ({ fieldList, metadata, dataToPropsMap, errorMessages, inputsProps, }: {
     fieldList?: MetadataFieldType[];

package/dist/es/search/SearchFilterForm/hooks/UseSearchFilterFormInputs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { FacetType, MetadataFieldType } from '@vidispine/types';
 declare const useSearchFilterFormInputs: ({ fieldList, facetList, includeFacetsAsOptions, dataToPropsMap, errorMessages, inputsProps, }: {
     fieldList?: MetadataFieldType[];

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@vidispine/vdt-mui",
-  "version": "23.4.0-pre.2",
+  "version": "23.4.0-pre.3",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "description": "Mui (v5) library for VidiCore",
   "homepage": "https://vidispine.github.io/vdt/?path=/docs/vdt-mui",
@@ -39,40 +40,41 @@
     "new:component": "hygen new component"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.14.8",
-    "@mui/lab": "^5.0.0-alpha.120",
-    "@mui/material": "^5.14.8",
-    "@vidispine/proptypes": "23.4.0-pre.2",
-    "@vidispine/types": "23.4.0-pre.2",
-    "@vidispine/vdt-api": "23.4.0-pre.2",
-    "@vidispine/vdt-js": "23.4.0-pre.2",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/lab": "^5.0.0-alpha.155",
+    "@mui/material": "^5.14.20",
+    "@vidispine/types": "23.4.0-pre.3",
+    "@vidispine/vdt-api": "23.4.0-pre.3",
+    "@vidispine/vdt-js": "23.4.0-pre.3",
     "clsx": "^1.2.1"
   },
   "peerDependencies": {
     "@mui/x-date-pickers": "^5.0.0",
     "@tanstack/react-virtual": "3.0.0-beta.30",
     "dayjs": "^1.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-hook-form": "^7.0.0",
     "react-imask": "^6.4.3"
   },
   "devDependencies": {
-    "@vidispine/eslint-config-mdx": "23.4.0-pre.2",
-    "@vidispine/eslint-config-react": "23.4.0-pre.2",
-    "@vidispine/eslint-config-storybook": "23.4.0-pre.2",
-    "@vidispine/eslint-config-typescript": "23.4.0-pre.2",
-    "@vidispine/prettier-config": "23.4.0-pre.2",
-    "@vidispine/proptypes": "23.4.0-pre.2",
-    "@vidispine/tests": "23.4.0-pre.2",
-    "@vitejs/plugin-react": "3.1.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@vidispine/eslint-config-mdx": "23.4.0-pre.3",
+    "@vidispine/eslint-config-react": "23.4.0-pre.3",
+    "@vidispine/eslint-config-storybook": "23.4.0-pre.3",
+    "@vidispine/prettier-config": "23.4.0-pre.3",
+    "@vidispine/proptypes": "23.4.0-pre.3",
+    "@vidispine/tests": "23.4.0-pre.3",
+    "@vitejs/plugin-react": "4.2.1",
     "babel-plugin-transform-import": "1.5.4",
-    "eslint": "8.48.0",
+    "eslint": "8.55.0",
     "hygen": "6.2.11",
-    "prettier": "2.8.8",
-    "rimraf": "3.0.2",
-    "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.3"
+    "prettier": "3.1.0",
+    "rimraf": "5.0.5",
+    "typescript": "5.0.4",
+    "vite": "4.5.1",
+    "vite-plugin-dts": "3.6.4"
   },
   "eslintConfig": {
     "extends": [