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

package/dist/cjs/_utils/isDefinedValue.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(e,{includeDateRange:r=!1}={})=>Array.isArray(e)?e.length!==0&&e.every(t=>![null,void 0].includes(t)):r&&typeof e=="object"?!!(e!=null&&e.start)||!!(e!=null&&e.end):![null,void 0].includes(e);exports.isDefinedValue=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(e,{includeDateRange:r=!1}={})=>Array.isArray(e)?e.length!==0&&e.every(t=>![null,void 0].includes(t)):r&&typeof e=="object"?!!(e!=null&&e.start)||!!(e!=null&&e.end):!["",null,void 0].includes(e);exports.isDefinedValue=i;

package/dist/cjs/general/Form/Form.js

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),k=require("react"),v=require("react-hook-form"),S=require("@mui/material/Box"),x=require("@mui/material/Button"),ot=require("@mui/material/ButtonGroup"),G=require("@mui/material/styles"),nt=G.styled(ot)(({theme:o})=>({marginTop:o.spacing(2),marginBottom:o.spacing(2),display:"flex",justifyContent:"center"})),ut=G.styled(S)(({theme:o})=>({"&:not(:first-of-type)":{paddingTop:o.spacing(2)}})),rt={Root:S,InputContainer:ut,Controller:v.Controller,ButtonGroup:nt,ClearButton:x,ResetButton:x,SubmitButton:x},M=({inputs:o,inputProps:T,formProps:E,formReturnRef:B,size:C,variant:F,clearText:D,resetText:I,submitText:w,onClear:c,onReset:l,onChange:d,onSubmit:f,onError:h,components:H,componentsProps:u})=>{const{Root:O,InputContainer:W,Controller:_,ButtonGroup:$,ClearButton:z,ResetButton:A,SubmitButton:J}=H,y=k.useRef(),b=({multiple:t,range:e})=>t||e?[]:null,K=o.reduce((t,{name:e,defaultValue:i,...s})=>({...t,[e]:i||b(s)}),{}),g=v.useForm({defaultValues:K,...E||{}});B&&(B.current=g);const{handleSubmit:L,control:N,reset:j,watch:q,formState:a}=g,{defaultValues:R}=a,Q=Object.keys((a==null?void 0:a.errors)||{}).length>0,U=t=>{const e=o.reduce((i,{name:s,defaultValue:Z,...p})=>({...i,[s]:b(p)}),{});c&&c(t,e),j(e,{keepDefaultValues:!0})},X=t=>{l&&l(t,R),j(R,{keepDefaultValues:!0})};k.useEffect(()=>{const t=d?q(e=>d(y.current,e)):void 0;return()=>t==null?void 0:t.unsubscribe()},[d,q]);const Y=t=>typeof(t==null?void 0:t.required)=="string"||(t==null?void 0:t.required)===!0;return n.jsxs(O,{component:"form",onSubmit:L((t,e)=>typeof f=="function"&&f(e,t),(t,e)=>typeof h=="function"&&h(e,t)),...u.root,children:[o==null?void 0:o.map(({Component:t,name:e,rules:i,label:s,defaultValue:Z,...p})=>n.jsx(W,{...u.inputContainer,children:n.jsx(_,{control:N,name:e,rules:i,render:({field:{onChange:P,...tt},formState:{errors:m}})=>{var V;return n.jsx(t,{onChange:(et,r)=>{y.current=et,P((r==null?void 0:r.value)!==void 0?r==null?void 0:r.value:r)},error:(V=m==null?void 0:m[e])==null?void 0:V.message,size:C,variant:F,label:Y(i)?`${s} *`:s,...tt,...T||{},...p})},...u.controller})},e)),n.jsxs($,{variant:"text",size:C,fullWidth:!0,...u.buttonGroup,children:[c&&n.jsx(z,{onClick:U,...u.clearButton,children:D}),l&&n.jsx(A,{onClick:X,...u.resetButton,children:I}),f&&n.jsx(J,{type:"submit",disabled:Q,...u.submitButton,children:w})]})]})};M.defaultProps={inputs:[],inputProps:void 0,formProps:void 0,formReturn:void 0,variant:"standard",size:"medium",clearText:"Clear",resetText:"Reset",submitText:"Submit",onClear:void 0,onReset:void 0,onChange:void 0,onSubmit:void 0,onError:void 0,components:rt,componentsProps:void 0};const it=M;module.exports=it;
+"use strict";const n=require("react/jsx-runtime"),y=require("react"),E=require("react-hook-form"),G=require("@mui/material/Box"),C=require("@mui/material/Button"),nt=require("@mui/material/ButtonGroup"),M=require("@mui/material/styles"),rt=M.styled(nt)(({theme:o})=>({marginTop:o.spacing(2),marginBottom:o.spacing(2),display:"flex",justifyContent:"center"})),ut=M.styled(G)(({theme:o})=>({"&:not(:first-of-type)":{paddingTop:o.spacing(2)}})),it={Root:G,InputContainer:ut,Controller:E.Controller,ButtonGroup:rt,ClearButton:C,ResetButton:C,SubmitButton:C},T=({inputs:o,inputProps:D,formProps:F,formReturnRef:h,size:g,variant:I,clearText:O,resetText:J,submitText:N,onClear:d,onReset:f,onChange:m,onSubmit:p,onError:b,components:w,componentsProps:r})=>{const{Root:H,InputContainer:W,Controller:_,ButtonGroup:$,ClearButton:z,ResetButton:A,SubmitButton:K}=w,j=y.useRef(),q=({multiple:t,range:e})=>t||e?[]:"",i=o.reduce((t,{name:e,defaultValue:s,...a})=>({...t,[e]:s||q(a)}),{}),R=E.useForm({defaultValues:i,...F||{}});h&&(h.current=R);const{handleSubmit:L,control:Q,reset:c,watch:V,formState:l}=R,{defaultValues:S,isDirty:v}=l,U=Object.keys((l==null?void 0:l.errors)||{}).length>0,X=t=>{const e=o.reduce((s,{name:a,defaultValue:P,...x})=>({...s,[a]:q(x)}),{});d&&d(t,e),c(e,{keepDefaultValues:!0})},Y=t=>{f&&f(t,i),c(i)};y.useEffect(()=>{const t=m?V(e=>m(j.current,e)):void 0;return()=>t==null?void 0:t.unsubscribe()},[m,V]);const Z=t=>typeof(t==null?void 0:t.required)=="string"||(t==null?void 0:t.required)===!0;return y.useEffect(()=>{JSON.stringify(i)!==JSON.stringify(S)&&c(i)},[i,S,c]),n.jsxs(H,{component:"form",onSubmit:L((t,e)=>typeof p=="function"&&p(e,t),(t,e)=>typeof b=="function"&&b(e,t)),...r.root,children:[o==null?void 0:o.map(({Component:t,name:e,rules:s,label:a,defaultValue:P,...x})=>n.jsx(W,{...r.inputContainer,children:n.jsx(_,{control:Q,name:e,rules:s,render:({field:{onChange:tt,...et},formState:{errors:B}})=>{var k;return n.jsx(t,{onChange:(ot,u)=>{j.current=ot,tt((u==null?void 0:u.value)!==void 0?u==null?void 0:u.value:u)},error:(k=B==null?void 0:B[e])==null?void 0:k.message,size:g,variant:I,label:Z(s)?`${a} *`:a,...et,...D||{},...x})},...r.controller})},e)),n.jsxs($,{variant:"text",size:g,fullWidth:!0,...r.buttonGroup,children:[d&&n.jsx(z,{onClick:X,...r.clearButton,children:O}),f&&n.jsx(A,{onClick:Y,disabled:!v,...r.resetButton,children:J}),p&&n.jsx(K,{type:"submit",disabled:U||!v,...r.submitButton,children:N})]})]})};T.defaultProps={inputs:[],inputProps:void 0,formProps:void 0,formReturn:void 0,variant:"standard",size:"medium",clearText:"Clear",resetText:"Reset",submitText:"Submit",onClear:void 0,onReset:void 0,onChange:void 0,onSubmit:void 0,onError:void 0,components:it,componentsProps:void 0};const st=T;module.exports=st;

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./collection/CollectionList/index.js"),i=require("./collection/CollectionListItem/index.js"),r=require("./collection/CollectionRepresentativeThumbnail/index.js"),t=require("./collection/CollectionCard/index.js"),o=require("./entity/EntityIcon/index.js"),u=require("./entity/EntityAvatar/index.js"),s=require("./entity/EntityList/index.js"),d=require("./general/AvatarMenu/index.js"),c=require("./general/BlurredBackground/index.js"),x=require("./general/CalendarPicker/index.js"),q=require("./general/CompactBadge/index.js"),a=require("./general/CompactLabel/index.js"),$=require("./general/CornerLabelPlacer/index.js"),m=require("./general/ExpandButton/index.js"),l=require("./general/ImageCollage/index.js"),I=require("./general/MediaIcon/index.js"),p=require("./general/MenuItem/index.js"),T=require("./general/VirtualizedList/index.js"),C=require("./general/ScrubLine/index.js"),b=require("./general/Sort/index.js"),L=require("./general/TablePagination/index.js"),g=require("./general/Form/index.js"),e=require("./general/ThemeContext/ThemeContext.js"),h=require("./item/ItemList/index.js"),P=require("./item/ItemListItem/index.js"),v=require("./item/ItemThumbnail/index.js"),B=require("./item/ItemCard/index.js"),S=require("./item/ItemTable/index.js"),E=require("./item/ItemTableRow/index.js"),M=require("./item/ItemPoster/index.js"),y=require("./item/ItemPosterViewer/index.js"),k=require("./item/ItemPosterList/index.js"),D=require("./inputs/BasicDateTimeInput/index.js"),F=require("./inputs/BooleanInput/index.js"),R=require("./inputs/CheckboxGroupInput/index.js"),w=require("./inputs/DateRangeInput/index.js"),A=require("./inputs/DateTimeInput/index.js"),G=require("./inputs/MaskedTextInput/index.js"),f=require("./inputs/NumberInput/index.js"),j=require("./inputs/RadioGroupInput/index.js"),z=require("./inputs/SelectInput/index.js"),V=require("./inputs/SliderInput/index.js"),H=require("./inputs/TagInput/index.js"),J=require("./inputs/TextInput/index.js"),K=require("./shape/ShapeMediaBadges/index.js"),N=require("./search/SearchFilterForm/index.js"),O=require("./transcode/TranscodePresetMediaBadges/index.js"),Q=require("./event/EventList/index.js"),U=require("./event/EventListItem/index.js");exports.CollectionList=n;exports.CollectionListItem=i;exports.CollectionRepresentativeThumbnail=r;exports.CollectionCard=t;exports.EntityIcon=o;exports.EntityAvatar=u;exports.EntityList=s;exports.AvatarMenu=d;exports.BlurredBackground=c;exports.CalendarPicker=x;exports.CompactBadge=q;exports.CompactLabel=a;exports.CornerLabelPlacer=$;exports.ExpandButton=m;exports.ImageCollage=l;exports.MediaIcon=I;exports.MenuItem=p;exports.VirtualizedList=T;exports.ScrubLine=C;exports.Sort=b;exports.TablePagination=L;exports.Form=g;exports.ThemeProvider=e.ThemeProvider;exports.useThemeContext=e.useThemeContext;exports.ItemList=h;exports.ItemListItem=P;exports.ItemThumbnail=v;exports.ItemCard=B;exports.ItemTable=S;exports.ItemTableRow=E;exports.ItemPoster=M;exports.ItemPosterViewer=y;exports.ItemPosterList=k;exports.BasicDateTimeInput=D;exports.BooleanInput=F;exports.CheckboxGroupInput=R;exports.DateRangeInput=w;exports.DateTimeInput=A;exports.MaskedTextInput=G;exports.NumberInput=f;exports.RadioGroupInput=j;exports.SelectInput=z;exports.SliderInput=V;exports.TagInput=H;exports.TextInput=J;exports.ShapeMediaBadges=K;exports.SearchFilterForm=N;exports.TranscodePresetMediaBadges=O;exports.EventList=Q;exports.EventListItem=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./collection/CollectionList/index.js"),r=require("./collection/CollectionListItem/index.js"),i=require("./collection/CollectionRepresentativeThumbnail/index.js"),t=require("./collection/CollectionCard/index.js"),o=require("./entity/EntityIcon/index.js"),u=require("./entity/EntityAvatar/index.js"),s=require("./entity/EntityList/index.js"),d=require("./general/AvatarMenu/index.js"),c=require("./general/BlurredBackground/index.js"),x=require("./general/CalendarPicker/index.js"),a=require("./general/CompactBadge/index.js"),q=require("./general/CompactLabel/index.js"),$=require("./general/CornerLabelPlacer/index.js"),m=require("./general/ExpandButton/index.js"),l=require("./general/ImageCollage/index.js"),I=require("./general/MediaIcon/index.js"),p=require("./general/MenuItem/index.js"),T=require("./general/VirtualizedList/index.js"),C=require("./general/ScrubLine/index.js"),b=require("./general/Sort/index.js"),L=require("./general/TablePagination/index.js"),g=require("./general/Form/index.js"),e=require("./general/ThemeContext/ThemeContext.js"),h=require("./item/ItemList/index.js"),M=require("./item/ItemListItem/index.js"),P=require("./item/ItemThumbnail/index.js"),v=require("./item/ItemCard/index.js"),B=require("./item/ItemTable/index.js"),S=require("./item/ItemTableRow/index.js"),E=require("./item/ItemPoster/index.js"),y=require("./item/ItemPosterViewer/index.js"),k=require("./item/ItemPosterList/index.js"),F=require("./inputs/BasicDateTimeInput/index.js"),w=require("./inputs/BooleanInput/index.js"),D=require("./inputs/CheckboxGroupInput/index.js"),G=require("./inputs/DateRangeInput/index.js"),R=require("./inputs/DateTimeInput/index.js"),A=require("./inputs/MaskedTextInput/index.js"),V=require("./inputs/NumberInput/index.js"),f=require("./inputs/RadioGroupInput/index.js"),j=require("./inputs/SelectInput/index.js"),z=require("./inputs/SliderInput/index.js"),N=require("./inputs/TagInput/index.js"),H=require("./inputs/TextInput/index.js"),J=require("./shape/ShapeMediaBadges/index.js"),K=require("./search/SearchFilterForm/index.js"),O=require("./transcode/TranscodePresetMediaBadges/index.js"),Q=require("./event/EventList/index.js"),U=require("./event/EventListItem/index.js"),W=require("./metadata/MetadataGroupTreeView/index.js"),X=require("./metadata/MetadataForm/index.js");exports.CollectionList=n;exports.CollectionListItem=r;exports.CollectionRepresentativeThumbnail=i;exports.CollectionCard=t;exports.EntityIcon=o;exports.EntityAvatar=u;exports.EntityList=s;exports.AvatarMenu=d;exports.BlurredBackground=c;exports.CalendarPicker=x;exports.CompactBadge=a;exports.CompactLabel=q;exports.CornerLabelPlacer=$;exports.ExpandButton=m;exports.ImageCollage=l;exports.MediaIcon=I;exports.MenuItem=p;exports.VirtualizedList=T;exports.ScrubLine=C;exports.Sort=b;exports.TablePagination=L;exports.Form=g;exports.ThemeProvider=e.ThemeProvider;exports.useThemeContext=e.useThemeContext;exports.ItemList=h;exports.ItemListItem=M;exports.ItemThumbnail=P;exports.ItemCard=v;exports.ItemTable=B;exports.ItemTableRow=S;exports.ItemPoster=E;exports.ItemPosterViewer=y;exports.ItemPosterList=k;exports.BasicDateTimeInput=F;exports.BooleanInput=w;exports.CheckboxGroupInput=D;exports.DateRangeInput=G;exports.DateTimeInput=R;exports.MaskedTextInput=A;exports.NumberInput=V;exports.RadioGroupInput=f;exports.SelectInput=j;exports.SliderInput=z;exports.TagInput=N;exports.TextInput=H;exports.ShapeMediaBadges=J;exports.SearchFilterForm=K;exports.TranscodePresetMediaBadges=O;exports.EventList=Q;exports.EventListItem=U;exports.MetadataGroupTreeView=W;exports.MetadataForm=X;

package/dist/cjs/inputs/DateTimeInput/index.js

@@ -1 +1 @@
-"use strict";const n=require("@mui/material/styles"),r=require("./DateTimeInput.js"),i=require("../../_utils/withOverrides.js"),e="DateTimeInput",t=`Vdt${e}`,c=i.withOverrides(t)(r),o=n.styled(c,{name:t,overridesResolver:(m,s)=>s.root})({});o.displayName=e;const d=o;module.exports=d;
+"use strict";const n=require("@mui/material/styles"),r=require("./DateTimeInput.js"),i=require("../../_utils/withOverrides.js"),e="DateTimeInput",t=`Vdt${e}`,c=i.withOverrides(t)(r),s=n.styled(c,{name:t,overridesResolver:(m,o)=>o.root})({});s.displayName=e;const d=s;module.exports=d;

package/dist/cjs/inputs/NumberInput/NumberInput.js

@@ -1 +1 @@
-"use strict";const V=require("react/jsx-runtime"),w=require("@mui/material/TextField"),y={Root:w},d=({name:e,label:a,value:n,defaultValue:c,helperText:r,error:t,required:v,disabled:m,fullWidth:p,variant:f,size:x,onChange:C,onBlur:g,onFocus:h,components:b,componentsProps:T})=>{const{Root:q}=b,F=o=>{var s,l,u;const P=["",void 0].includes((s=o==null?void 0:o.target)==null?void 0:s.value)?(l=o==null?void 0:o.target)==null?void 0:l.value:Number((u=o==null?void 0:o.target)==null?void 0:u.value);C(o,{value:P})},R=n!==void 0,i=!!t,j=(t||"").trim();return V.jsx(q,{id:e,name:e,label:a,...R?{value:n}:{defaultValue:c},helperText:(j||r)&&i?t:r,error:i,required:v,disabled:m,fullWidth:p,variant:f,size:x,type:"number",autoComplete:"off",onChange:F,onBlur:g,onFocus:h,...T.root})};d.defaultProps={name:void 0,label:void 0,value:void 0,defaultValue:void 0,helperText:void 0,error:void 0,required:!1,disabled:!1,fullWidth:!0,variant:"outlined",size:"medium",onChange:()=>null,onBlur:void 0,onFocus:void 0,components:y,componentsProps:void 0};const z=d;module.exports=z;
+"use strict";const V=require("react/jsx-runtime"),w=require("@mui/material/TextField"),y={Root:w},d=({name:n,label:a,value:t,defaultValue:c,helperText:r,error:e,required:v,disabled:m,fullWidth:p,variant:f,size:x,onChange:C,onBlur:g,onFocus:h,components:b,componentsProps:T})=>{const{Root:q}=b,F=o=>{var i,s,u;const P=["",void 0].includes((i=o==null?void 0:o.target)==null?void 0:i.value)?(s=o==null?void 0:o.target)==null?void 0:s.value:Number((u=o==null?void 0:o.target)==null?void 0:u.value);C(o,{value:P})},R=t!==void 0,l=!!e,j=(e||"").trim();return V.jsx(q,{id:n,name:n,label:a,...R?{value:t===null?"":t}:{defaultValue:c},helperText:(j||r)&&l?e:r,error:l,required:v,disabled:m,fullWidth:p,variant:f,size:x,type:"number",autoComplete:"off",onChange:F,onBlur:g,onFocus:h,...T.root})};d.defaultProps={name:void 0,label:void 0,value:void 0,defaultValue:void 0,helperText:void 0,error:void 0,required:!1,disabled:!1,fullWidth:!0,variant:"outlined",size:"medium",onChange:()=>null,onBlur:void 0,onFocus:void 0,components:y,componentsProps:void 0};const z=d;module.exports=z;

package/dist/cjs/inputs/NumberInput/index.js

@@ -1 +1 @@
-"use strict";const s=require("@mui/material/styles"),n=require("./NumberInput.js"),i=require("../../_utils/withOverrides.js"),e="NumberInput",t=`Vdt${e}`,c=i.withOverrides(t)(n),o=s.styled(c,{name:t,overridesResolver:(m,r)=>r.root})({});o.displayName=e;const d=o;module.exports=d;
+"use strict";const o=require("@mui/material/styles"),n=require("./NumberInput.js"),i=require("../../_utils/withOverrides.js"),e="NumberInput",t=`Vdt${e}`,c=i.withOverrides(t)(n),r=o.styled(c,{name:t,overridesResolver:(d,s)=>s.root})({});r.displayName=e;const u=r;module.exports=u;

package/dist/cjs/inputs/SelectInput/index.js

@@ -1 +1 @@
-"use strict";const n=require("@mui/material/styles"),r=require("./SelectInput.js"),c=require("../../_utils/withOverrides.js"),e="SelectInput",t=`Vdt${e}`,i=c.withOverrides(t)(r),o=n.styled(i,{name:t,overridesResolver:(l,s)=>s.root})({});o.displayName=e;const d=o;module.exports=d;
+"use strict";const n=require("@mui/material/styles"),r=require("./SelectInput.js"),c=require("../../_utils/withOverrides.js"),e="SelectInput",t=`Vdt${e}`,i=c.withOverrides(t)(r),s=n.styled(i,{name:t,overridesResolver:(l,o)=>o.root})({});s.displayName=e;const d=s;module.exports=d;

package/dist/cjs/metadata/MetadataForm/MetadataForm.js

@@ -0,0 +1 @@
+"use strict";const u=require("react/jsx-runtime"),T=require("react"),g=require("@mui/material/Box"),l=require("@vidispine/vdt-js"),P=require("../../general/Form/index.js"),S=require("./hooks/UseMetadataFormInputs.js"),B={Root:g,Form:P},p=({fieldList:f,metadata:m,dataToPropsMap:h,inputsProps:v,onReset:x,onChange:n,onSubmit:r,onError:s,components:y,componentsProps:i})=>{const{Root:R,Form:F}=y,d=T.useRef(),a=t=>{const e=Object.keys(d.current.formState.dirtyFields);return Object.keys(t).reduce((C,o)=>{const c={...C};return e.includes(o)&&(c[o]=t[o]),c},{})},b=S({fieldList:f,metadata:m,dataToPropsMap:h,inputsProps:v}),q=typeof n!="function"?void 0:(t,e)=>{n(t,{values:e,metadata:l.createMetadataType(a(e))})},M=typeof r!="function"?void 0:(t,e)=>{r(t,{values:e,metadata:l.createMetadataType(a(e))})},j=typeof s!="function"?void 0:s;return u.jsx(R,{...i.root,children:u.jsx(F,{inputs:b,onReset:x,onChange:q,onSubmit:M,onError:j,formReturnRef:d,...i.form})})};p.defaultProps={fieldList:void 0,metadata:void 0,dataToPropsMap:{label:"label",helperText:"description",placeholder:"placeholder"},inputsProps:void 0,onReset:void 0,onChange:void 0,onSubmit:void 0,onError:void 0,components:B,componentsProps:void 0};const E=p;module.exports=E;

package/dist/cjs/metadata/MetadataForm/hooks/UseMetadataFormInputs.js

@@ -0,0 +1 @@
+"use strict";const i=require("react"),E=require("@vidispine/vdt-js"),_=require("../../../inputs/DateRangeInput/index.js"),k=require("../../../inputs/DateTimeInput/index.js"),A=require("../../../inputs/NumberInput/index.js"),U=require("../../../inputs/SelectInput/index.js"),j=require("../../../inputs/SliderInput/index.js"),p=require("../../../inputs/TagInput/index.js"),G=require("../../../inputs/TextInput/index.js"),J="Invalid value",w={TextInput:G,TagInput:p,SliderInput:j,DateRangeInput:_,DateTimeInput:k,NumberInput:A,SelectInput:U},z=({fieldList:d,metadata:I,dataToPropsMap:g,errorMessages:l,inputsProps:u})=>{const{TextInput:a,TagInput:f,DateTimeInput:x,NumberInput:q,SelectInput:b}=w,o=i.useMemo(()=>E.parseFieldDefinitionList(d),[d]),v=i.useMemo(()=>E.parseMetadataType(I,{flat:!0}),[I]),T=i.useCallback(e=>{const n=t=>{const c=e==null?void 0:e[t],r=l==null?void 0:l[t];if(c!==void 0)return{value:c,message:(typeof r=="function"?r(t):r)||J}};return{required:n("required"),minLength:n("minLength"),maxLength:n("maxLength"),min:n("minInclusive"),max:n("maxInclusive"),pattern:n("pattern")}},[l]),$=e=>["float","integer","long"].includes(e),R=e=>["string","string-exact"].includes(e),C=e=>e==="date",h=i.useCallback(({type:e,options:n,currentValue:t})=>R(e)?{freeSolo:!n.length,multiple:(t==null?void 0:t.length)>1}:{},[]),D=i.useCallback(({type:e},n,t)=>R(e)?(n==null?void 0:n.length)>1?f:t!=null&&t.length?b:a:$(e)?q:C(e)?x:a,[x,q,b,f,a]);return i.useMemo(()=>o==null?void 0:o.map(({name:e,restrictions:n,options:t,type:c,data:r,system:F})=>{const N={...(u==null?void 0:u[c])||{},...(u==null?void 0:u[e])||{}},L=T(n),s=v[e]||void 0,O={label:e,defaultValue:s||"",options:t,rules:L,disabled:F,...Object.fromEntries(Object.entries(g).map(([m,S])=>r[S]?[m,r[S]]:void 0).filter(m=>!!m)),...N},M={...h({type:c,options:t,currentValue:s}),...O};return{name:e,Component:D({type:c},s,t),...M}}),[g,D,h,T,u,o,v])},B=z;module.exports=B;

package/dist/cjs/metadata/MetadataForm/index.js

@@ -0,0 +1 @@
+"use strict";const s=require("@mui/material/styles"),n=require("./MetadataForm.js"),i=require("../../_utils/withOverrides.js"),e="MetadataForm",t=`Vdt${e}`,d=i.withOverrides(t)(n),o=s.styled(d,{name:t,overridesResolver:(c,r)=>r.root})({});o.displayName=e;const a=o;module.exports=a;

package/dist/es/_utils/isDefinedValue.js

@@ -1,6 +1,6 @@
 const t = (e, {
   includeDateRange: r = !1
-} = {}) => Array.isArray(e) ? e.length !== 0 && e.every((n) => ![null, void 0].includes(n)) : r && typeof e == "object" ? !!(e != null && e.start) || !!(e != null && e.end) : ![null, void 0].includes(e);
+} = {}) => Array.isArray(e) ? e.length !== 0 && e.every((n) => ![null, void 0].includes(n)) : r && typeof e == "object" ? !!(e != null && e.start) || !!(e != null && e.end) : !["", null, void 0].includes(e);
 export {
   t as isDefinedValue
 };

package/dist/es/general/Form/Form.js

@@ -1,132 +1,133 @@
-import { jsxs as k, jsx as a } from "react/jsx-runtime";
-import { useRef as et, useEffect as ot } from "react";
-import { useForm as nt, Controller as rt } from "react-hook-form";
-import G from "@mui/material/Box";
-import B from "@mui/material/Button";
+import { jsxs as T, jsx as l } from "react/jsx-runtime";
+import { useRef as nt, useEffect as j } from "react";
+import { useForm as rt, Controller as it } from "react-hook-form";
+import k from "@mui/material/Box";
+import y from "@mui/material/Button";
 import ut from "@mui/material/ButtonGroup";
-import { styled as M } from "@mui/material/styles";
-const it = M(ut)(({
+import { styled as D } from "@mui/material/styles";
+const at = D(ut)(({
   theme: o
 }) => ({
   marginTop: o.spacing(2),
   marginBottom: o.spacing(2),
   display: "flex",
   justifyContent: "center"
-})), at = M(G)(({
+})), lt = D(k)(({
   theme: o
 }) => ({
   "&:not(:first-of-type)": {
     paddingTop: o.spacing(2)
   }
-})), lt = {
-  Root: G,
-  InputContainer: at,
-  Controller: rt,
-  ButtonGroup: it,
-  ClearButton: B,
-  ResetButton: B,
-  SubmitButton: B
-}, T = ({
+})), dt = {
+  Root: k,
+  InputContainer: lt,
+  Controller: it,
+  ButtonGroup: at,
+  ClearButton: y,
+  ResetButton: y,
+  SubmitButton: y
+}, E = ({
   inputs: o,
-  inputProps: j,
-  formProps: E,
-  formReturnRef: C,
-  size: h,
-  variant: q,
-  clearText: D,
-  resetText: F,
-  submitText: I,
-  onClear: d,
-  onReset: c,
-  onChange: f,
-  onSubmit: s,
-  onError: y,
+  inputProps: q,
+  formProps: F,
+  formReturnRef: h,
+  size: g,
+  variant: I,
+  clearText: O,
+  resetText: J,
+  submitText: N,
+  onClear: f,
+  onReset: s,
+  onChange: m,
+  onSubmit: p,
+  onError: b,
   components: w,
   componentsProps: n
 }) => {
   const {
-    Root: O,
-    InputContainer: W,
-    Controller: _,
-    ButtonGroup: $,
-    ClearButton: z,
-    ResetButton: A,
-    SubmitButton: H
-  } = w, b = et(), g = ({
+    Root: W,
+    InputContainer: _,
+    Controller: $,
+    ButtonGroup: z,
+    ClearButton: A,
+    ResetButton: H,
+    SubmitButton: K
+  } = w, x = nt(), R = ({
     multiple: t,
     range: e
-  }) => t || e ? [] : null, J = o.reduce((t, {
+  }) => t || e ? [] : "", i = o.reduce((t, {
     name: e,
     defaultValue: u,
-    ...i
+    ...a
   }) => ({
     ...t,
-    [e]: u || g(i)
-  }), {}), x = nt({
-    defaultValues: J,
-    ...E || {}
+    [e]: u || R(a)
+  }), {}), V = rt({
+    defaultValues: i,
+    ...F || {}
   });
-  C && (C.current = x);
+  h && (h.current = V);
   const {
-    handleSubmit: K,
-    control: L,
-    reset: R,
-    watch: V,
-    formState: l
-  } = x, {
-    defaultValues: v
-  } = l, N = Object.keys((l == null ? void 0 : l.errors) || {}).length > 0, Q = (t) => {
+    handleSubmit: L,
+    control: Q,
+    reset: d,
+    watch: S,
+    formState: c
+  } = V, {
+    defaultValues: v,
+    isDirty: G
+  } = c, U = Object.keys((c == null ? void 0 : c.errors) || {}).length > 0, X = (t) => {
     const e = o.reduce((u, {
-      name: i,
-      defaultValue: Y,
-      ...m
+      name: a,
+      defaultValue: P,
+      ...B
     }) => ({
       ...u,
-      [i]: g(m)
+      [a]: R(B)
     }), {});
-    d && d(t, e), R(e, {
-      keepDefaultValues: !0
-    });
-  }, U = (t) => {
-    c && c(t, v), R(v, {
+    f && f(t, e), d(e, {
       keepDefaultValues: !0
     });
+  }, Y = (t) => {
+    s && s(t, i), d(i);
   };
-  ot(() => {
-    const t = f ? V((e) => f(b.current, e)) : void 0;
+  j(() => {
+    const t = m ? S((e) => m(x.current, e)) : void 0;
     return () => t == null ? void 0 : t.unsubscribe();
-  }, [f, V]);
-  const X = (t) => typeof (t == null ? void 0 : t.required) == "string" || (t == null ? void 0 : t.required) === !0;
-  return /* @__PURE__ */ k(O, { component: "form", onSubmit: K((t, e) => typeof s == "function" && s(e, t), (t, e) => typeof y == "function" && y(e, t)), ...n.root, children: [
+  }, [m, S]);
+  const Z = (t) => typeof (t == null ? void 0 : t.required) == "string" || (t == null ? void 0 : t.required) === !0;
+  return j(() => {
+    JSON.stringify(i) !== JSON.stringify(v) && d(i);
+  }, [i, v, d]), /* @__PURE__ */ T(W, { component: "form", onSubmit: L((t, e) => typeof p == "function" && p(e, t), (t, e) => typeof b == "function" && b(e, t)), ...n.root, children: [
     o == null ? void 0 : o.map(({
       Component: t,
       name: e,
       rules: u,
-      label: i,
-      defaultValue: Y,
-      ...m
-    }) => /* @__PURE__ */ a(W, { ...n.inputContainer, children: /* @__PURE__ */ a(_, { control: L, name: e, rules: u, render: ({
+      label: a,
+      defaultValue: P,
+      ...B
+    }) => /* @__PURE__ */ l(_, { ...n.inputContainer, children: /* @__PURE__ */ l($, { control: Q, name: e, rules: u, render: ({
       field: {
-        onChange: Z,
-        ...P
+        onChange: tt,
+        ...et
       },
       formState: {
-        errors: p
+        errors: C
       }
     }) => {
-      var S;
-      return /* @__PURE__ */ a(t, { onChange: (tt, r) => {
-        b.current = tt, Z((r == null ? void 0 : r.value) !== void 0 ? r == null ? void 0 : r.value : r);
-      }, error: (S = p == null ? void 0 : p[e]) == null ? void 0 : S.message, size: h, variant: q, label: X(u) ? `${i} *` : i, ...P, ...j || {}, ...m });
+      var M;
+      return /* @__PURE__ */ l(t, { onChange: (ot, r) => {
+        x.current = ot, tt((r == null ? void 0 : r.value) !== void 0 ? r == null ? void 0 : r.value : r);
+      }, error: (M = C == null ? void 0 : C[e]) == null ? void 0 : M.message, size: g, variant: I, label: Z(u) ? `${a} *` : a, ...et, ...q || {}, ...B });
     }, ...n.controller }) }, e)),
-    /* @__PURE__ */ k($, { variant: "text", size: h, fullWidth: !0, ...n.buttonGroup, children: [
-      d && /* @__PURE__ */ a(z, { onClick: Q, ...n.clearButton, children: D }),
-      c && /* @__PURE__ */ a(A, { onClick: U, ...n.resetButton, children: F }),
-      s && /* @__PURE__ */ a(H, { type: "submit", disabled: N, ...n.submitButton, children: I })
+    /* @__PURE__ */ T(z, { variant: "text", size: g, fullWidth: !0, ...n.buttonGroup, children: [
+      f && /* @__PURE__ */ l(A, { onClick: X, ...n.clearButton, children: O }),
+      s && /* @__PURE__ */ l(H, { onClick: Y, disabled: !G, ...n.resetButton, children: J }),
+      p && /* @__PURE__ */ l(K, { type: "submit", disabled: U || !G, ...n.submitButton, children: N })
     ] })
   ] });
 };
-T.defaultProps = {
+E.defaultProps = {
   inputs: [],
   inputProps: void 0,
   formProps: void 0,
@@ -141,10 +142,10 @@ T.defaultProps = {
   onChange: void 0,
   onSubmit: void 0,
   onError: void 0,
-  components: lt,
+  components: dt,
   componentsProps: void 0
 };
-const Ct = T;
+const yt = E;
 export {
-  Ct as default
+  yt as default
 };

package/dist/es/index.d.ts

@@ -7,3 +7,4 @@ export * from './shape';
 export * from './search';
 export * from './transcode';
 export * from './event';
+export * from './metadata';

package/dist/es/index.js

@@ -1,21 +1,21 @@
 import { default as a } from "./collection/CollectionList/index.js";
 import { default as r } from "./collection/CollectionListItem/index.js";
 import { default as m } from "./collection/CollectionRepresentativeThumbnail/index.js";
-import { default as u } from "./collection/CollectionCard/index.js";
-import { default as s } from "./entity/EntityIcon/index.js";
+import { default as l } from "./collection/CollectionCard/index.js";
+import { default as d } from "./entity/EntityIcon/index.js";
 import { default as x } from "./entity/EntityAvatar/index.js";
 import { default as i } from "./entity/EntityList/index.js";
 import { default as c } from "./general/AvatarMenu/index.js";
-import { default as T } from "./general/BlurredBackground/index.js";
+import { default as C } from "./general/BlurredBackground/index.js";
 import { default as b } from "./general/CalendarPicker/index.js";
 import { default as B } from "./general/CompactBadge/index.js";
-import { default as h } from "./general/CompactLabel/index.js";
-import { default as E } from "./general/CornerLabelPlacer/index.js";
+import { default as P } from "./general/CompactLabel/index.js";
+import { default as v } from "./general/CornerLabelPlacer/index.js";
 import { default as S } from "./general/ExpandButton/index.js";
-import { default as R } from "./general/ImageCollage/index.js";
-import { default as D } from "./general/MediaIcon/index.js";
-import { default as w } from "./general/MenuItem/index.js";
-import { default as G } from "./general/VirtualizedList/index.js";
+import { default as F } from "./general/ImageCollage/index.js";
+import { default as w } from "./general/MediaIcon/index.js";
+import { default as D } from "./general/MenuItem/index.js";
+import { default as V } from "./general/VirtualizedList/index.js";
 import { default as z } from "./general/ScrubLine/index.js";
 import { default as j } from "./general/Sort/index.js";
 import { default as H } from "./general/TablePagination/index.js";
@@ -27,75 +27,79 @@ import { default as $ } from "./item/ItemThumbnail/index.js";
 import { default as te } from "./item/ItemCard/index.js";
 import { default as oe } from "./item/ItemTable/index.js";
 import { default as fe } from "./item/ItemTableRow/index.js";
-import { default as le } from "./item/ItemPoster/index.js";
+import { default as ue } from "./item/ItemPoster/index.js";
 import { default as pe } from "./item/ItemPosterViewer/index.js";
-import { default as de } from "./item/ItemPosterList/index.js";
+import { default as se } from "./item/ItemPosterList/index.js";
 import { default as ne } from "./inputs/BasicDateTimeInput/index.js";
 import { default as Ie } from "./inputs/BooleanInput/index.js";
-import { default as Ce } from "./inputs/CheckboxGroupInput/index.js";
+import { default as Te } from "./inputs/CheckboxGroupInput/index.js";
 import { default as Le } from "./inputs/DateRangeInput/index.js";
 import { default as ge } from "./inputs/DateTimeInput/index.js";
-import { default as Pe } from "./inputs/MaskedTextInput/index.js";
-import { default as ve } from "./inputs/NumberInput/index.js";
-import { default as Me } from "./inputs/RadioGroupInput/index.js";
+import { default as Me } from "./inputs/MaskedTextInput/index.js";
+import { default as he } from "./inputs/NumberInput/index.js";
+import { default as Ee } from "./inputs/RadioGroupInput/index.js";
 import { default as ke } from "./inputs/SelectInput/index.js";
-import { default as ye } from "./inputs/SliderInput/index.js";
-import { default as Fe } from "./inputs/TagInput/index.js";
-import { default as Ae } from "./inputs/TextInput/index.js";
-import { default as Ve } from "./shape/ShapeMediaBadges/index.js";
+import { default as Re } from "./inputs/SliderInput/index.js";
+import { default as ye } from "./inputs/TagInput/index.js";
+import { default as Ge } from "./inputs/TextInput/index.js";
+import { default as Ae } from "./shape/ShapeMediaBadges/index.js";
 import { default as Ne } from "./search/SearchFilterForm/index.js";
 import { default as qe } from "./transcode/TranscodePresetMediaBadges/index.js";
 import { default as Je } from "./event/EventList/index.js";
 import { default as Oe } from "./event/EventListItem/index.js";
+import { default as Ue } from "./metadata/MetadataGroupTreeView/index.js";
+import { default as Xe } from "./metadata/MetadataForm/index.js";
 export {
   c as AvatarMenu,
   ne as BasicDateTimeInput,
-  T as BlurredBackground,
+  C as BlurredBackground,
   Ie as BooleanInput,
   b as CalendarPicker,
-  Ce as CheckboxGroupInput,
-  u as CollectionCard,
+  Te as CheckboxGroupInput,
+  l as CollectionCard,
   a as CollectionList,
   r as CollectionListItem,
   m as CollectionRepresentativeThumbnail,
   B as CompactBadge,
-  h as CompactLabel,
-  E as CornerLabelPlacer,
+  P as CompactLabel,
+  v as CornerLabelPlacer,
   Le as DateRangeInput,
   ge as DateTimeInput,
   x as EntityAvatar,
-  s as EntityIcon,
+  d as EntityIcon,
   i as EntityList,
   Je as EventList,
   Oe as EventListItem,
   S as ExpandButton,
   K as Form,
-  R as ImageCollage,
+  F as ImageCollage,
   te as ItemCard,
   X as ItemList,
   Z as ItemListItem,
-  le as ItemPoster,
-  de as ItemPosterList,
+  ue as ItemPoster,
+  se as ItemPosterList,
   pe as ItemPosterViewer,
   oe as ItemTable,
   fe as ItemTableRow,
   $ as ItemThumbnail,
-  Pe as MaskedTextInput,
-  D as MediaIcon,
-  w as MenuItem,
-  ve as NumberInput,
-  Me as RadioGroupInput,
+  Me as MaskedTextInput,
+  w as MediaIcon,
+  D as MenuItem,
+  Xe as MetadataForm,
+  Ue as MetadataGroupTreeView,
+  he as NumberInput,
+  Ee as RadioGroupInput,
   z as ScrubLine,
   Ne as SearchFilterForm,
   ke as SelectInput,
-  Ve as ShapeMediaBadges,
-  ye as SliderInput,
+  Ae as ShapeMediaBadges,
+  Re as SliderInput,
   j as Sort,
   H as TablePagination,
-  Fe as TagInput,
-  Ae as TextInput,
+  ye as TagInput,
+  Ge as TextInput,
   Q as ThemeProvider,
   qe as TranscodePresetMediaBadges,
-  G as VirtualizedList,
+  V as VirtualizedList,
   U as useThemeContext
 };

package/dist/es/inputs/DateTimeInput/index.js

@@ -1,11 +1,11 @@
 import { styled as m } from "@mui/material/styles";
 import r from "./DateTimeInput.js";
 import { withOverrides as s } from "../../_utils/withOverrides.js";
-const o = "DateTimeInput", t = `Vdt${o}`, p = s(t)(r), e = m(p, {
-  name: t,
-  overridesResolver: (i, n) => n.root
+const t = "DateTimeInput", o = `Vdt${t}`, i = s(o)(r), e = m(i, {
+  name: o,
+  overridesResolver: (p, n) => n.root
 })({});
-e.displayName = o;
+e.displayName = t;
 const l = e;
 export {
   l as default

package/dist/es/inputs/NumberInput/NumberInput.js

@@ -3,12 +3,12 @@ import w from "@mui/material/TextField";
 const y = {
   Root: w
 }, u = ({
-  name: e,
+  name: n,
   label: s,
-  value: n,
+  value: t,
   defaultValue: m,
-  helperText: r,
-  error: t,
+  helperText: l,
+  error: e,
   required: v,
   disabled: c,
   fullWidth: p,
@@ -28,12 +28,12 @@ const y = {
     g(o, {
       value: j
     });
-  }, R = n !== void 0, l = !!t, V = (t || "").trim();
-  return /* @__PURE__ */ q(F, { id: e, name: e, label: s, ...R ? {
-    value: n
+  }, R = t !== void 0, r = !!e, V = (e || "").trim();
+  return /* @__PURE__ */ q(F, { id: n, name: n, label: s, ...R ? {
+    value: t === null ? "" : t
   } : {
     defaultValue: m
-  }, helperText: (V || r) && l ? t : r, error: l, required: v, disabled: c, fullWidth: p, variant: f, size: C, type: "number", autoComplete: "off", onChange: P, onBlur: h, onFocus: x, ...T.root });
+  }, helperText: (V || l) && r ? e : l, error: r, required: v, disabled: c, fullWidth: p, variant: f, size: C, type: "number", autoComplete: "off", onChange: P, onBlur: h, onFocus: x, ...T.root });
 };
 u.defaultProps = {
   name: void 0,

package/dist/es/inputs/NumberInput/index.js

@@ -1,9 +1,9 @@
-import { styled as r } from "@mui/material/styles";
+import { styled as n } from "@mui/material/styles";
 import m from "./NumberInput.js";
 import { withOverrides as s } from "../../_utils/withOverrides.js";
-const o = "NumberInput", t = `Vdt${o}`, p = s(t)(m), e = r(p, {
+const o = "NumberInput", t = `Vdt${o}`, p = s(t)(m), e = n(p, {
   name: t,
-  overridesResolver: (d, n) => n.root
+  overridesResolver: (d, r) => r.root
 })({});
 e.displayName = o;
 const l = e;

package/dist/es/inputs/SelectInput/index.js

@@ -1,11 +1,11 @@
 import { styled as r } from "@mui/material/styles";
 import m from "./SelectInput.js";
 import { withOverrides as s } from "../../_utils/withOverrides.js";
-const o = "SelectInput", t = `Vdt${o}`, p = s(t)(m), e = r(p, {
-  name: t,
+const t = "SelectInput", o = `Vdt${t}`, p = s(o)(m), e = r(p, {
+  name: o,
   overridesResolver: (d, n) => n.root
 })({});
-e.displayName = o;
+e.displayName = t;
 const a = e;
 export {
   a as default

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

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import { Box as MuiBox } from '@mui/material';
+import type { MetadataFieldType, MetadataType } from '@vidispine/types';
+import VdtForm from '../../general/Form';
+import type { PropsFrom, WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: typeof MuiBox;
+    Form: typeof VdtForm;
+};
+export interface MetadataFormProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * A VidiCore field definition list to create metadata inputs from
+     */
+    fieldList?: MetadataFieldType[];
+    /**
+     * The metadata of a Vidicore entity to extract current values from
+     */
+    metadata?: MetadataType;
+    /**
+     * Override input props using field __name__ or __type__ as key
+     *
+     * Note: `name` props has precedence if prop is applicable from both name and type
+     *
+     * E.g. `{ 'vdt_stringField': { label: 'String Field', disabled: true, Component: CheckboxGroupInput } }` or `{ 'string-exact': { ...customInputProps } }`
+     */
+    inputsProps?: {
+        [fieldNameOrType: string]: object;
+    };
+    /**
+     * Map a field data key to an input prop (ignores data keys it can't find on fields)
+     *
+     * E.g. `{ label: 'displayName' }` would add the value from data key 'displayName' as a label prop
+     */
+    dataToPropsMap?: {
+        [propKey: string]: string;
+    };
+    /**
+     * Callback when inputs are resetted to current metadata values
+     */
+    onReset?: (event: React.SyntheticEvent) => void;
+    /**
+     * Callback when form is changed
+     */
+    onChange?: (event: React.SyntheticEvent | null, payload: {
+        values: {
+            [fieldName: string]: any;
+        };
+        metadata: MetadataType;
+    }) => void;
+    /**
+     * Callback when form is submitted
+     */
+    onSubmit?: (event: React.BaseSyntheticEvent, payload: {
+        values: {
+            [fieldName: string]: any;
+        };
+        metadata: MetadataType;
+    }) => void;
+    /**
+     * Callback when form is submitted with errors (invalid values according to form rules)
+     */
+    onError?: PropsFrom<typeof VdtForm>['onError'];
+}
+declare const MetadataForm: React.FC<MetadataFormProps>;
+export default MetadataForm;

package/dist/es/metadata/MetadataForm/MetadataForm.js

@@ -0,0 +1,70 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as P } from "react";
+import S from "@mui/material/Box";
+import { createMetadataType as p } from "@vidispine/vdt-js";
+import T from "../../general/Form/index.js";
+import V from "./hooks/UseMetadataFormInputs.js";
+const B = {
+  Root: S,
+  Form: T
+}, f = ({
+  fieldList: l,
+  metadata: u,
+  dataToPropsMap: h,
+  inputsProps: v,
+  onReset: F,
+  onChange: r,
+  onSubmit: n,
+  onError: i,
+  components: y,
+  componentsProps: d
+}) => {
+  const {
+    Root: R,
+    Form: b
+  } = y, a = P(), s = (t) => {
+    const o = Object.keys(a.current.formState.dirtyFields);
+    return Object.keys(t).reduce((j, e) => {
+      const m = {
+        ...j
+      };
+      return o.includes(e) && (m[e] = t[e]), m;
+    }, {});
+  }, x = V({
+    fieldList: l,
+    metadata: u,
+    dataToPropsMap: h,
+    inputsProps: v
+  }), M = typeof r != "function" ? void 0 : (t, o) => {
+    r(t, {
+      values: o,
+      metadata: p(s(o))
+    });
+  }, C = typeof n != "function" ? void 0 : (t, o) => {
+    n(t, {
+      values: o,
+      metadata: p(s(o))
+    });
+  }, g = typeof i != "function" ? void 0 : i;
+  return /* @__PURE__ */ c(R, { ...d.root, children: /* @__PURE__ */ c(b, { inputs: x, onReset: F, onChange: M, onSubmit: C, onError: g, formReturnRef: a, ...d.form }) });
+};
+f.defaultProps = {
+  fieldList: void 0,
+  metadata: void 0,
+  dataToPropsMap: {
+    label: "label",
+    helperText: "description",
+    placeholder: "placeholder"
+  },
+  inputsProps: void 0,
+  onReset: void 0,
+  onChange: void 0,
+  onSubmit: void 0,
+  onError: void 0,
+  components: B,
+  componentsProps: void 0
+};
+const q = f;
+export {
+  q as default
+};

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

@@ -0,0 +1,98 @@
+import type { MetadataType, MetadataFieldType } from '@vidispine/types';
+declare const useMetadataFormInputs: ({ fieldList, metadata, dataToPropsMap, errorMessages, inputsProps, }: {
+    fieldList?: MetadataFieldType[];
+    metadata?: MetadataType;
+    dataToPropsMap?: {
+        [propKey: string]: string;
+    };
+    errorMessages?: {
+        [fieldName: string]: string | ((fieldName: string) => string);
+    };
+    inputsProps?: object;
+}) => ({
+    Component: import("react").FC<{
+        name?: string;
+        label?: string;
+        value?: any;
+        defaultValue?: any;
+        error?: string;
+        helperText?: string;
+        required?: boolean;
+        disabled?: boolean;
+        onChange?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+            [key: string]: any;
+            value: any;
+        }) => void;
+        onBlur?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+            [key: string]: any;
+            value: any;
+        }) => void;
+        onFocus?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+            [key: string]: any;
+            value: any;
+        }) => void;
+        options?: any[];
+        placeholder?: string;
+        fullWidth?: boolean;
+        variant?: string;
+        size?: string;
+        orientation?: string;
+        multiple?: boolean;
+        labelPlacement?: string;
+        min?: any;
+        max?: any;
+        type?: string;
+        range?: boolean;
+        locale?: string;
+        justifyContent?: string;
+        submitOnChange?: boolean;
+        onSubmit?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+            [key: string]: any;
+            value: any;
+        }) => void;
+    }>;
+    rules?: UseControllerProps;
+} & {
+    name?: string;
+    label?: string;
+    value?: any;
+    defaultValue?: any;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+        [key: string]: any;
+        value: any;
+    }) => void;
+    onBlur?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+        [key: string]: any;
+        value: any;
+    }) => void;
+    onFocus?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+        [key: string]: any;
+        value: any;
+    }) => void;
+    options?: any[];
+    placeholder?: string;
+    fullWidth?: boolean;
+    variant?: string;
+    size?: string;
+    orientation?: string;
+    multiple?: boolean;
+    labelPlacement?: string;
+    min?: any;
+    max?: any;
+    type?: string;
+    range?: boolean;
+    locale?: string;
+    justifyContent?: string;
+    submitOnChange?: boolean;
+    onSubmit?: (event: import("react").SyntheticEvent<Element, Event>, payload: {
+        [key: string]: any;
+        value: any;
+    }) => void;
+} & {
+    [key: string]: any;
+})[];
+export default useMetadataFormInputs;

package/dist/es/metadata/MetadataForm/hooks/UseMetadataFormInputs.js

@@ -0,0 +1,98 @@
+import { useMemo as f, useCallback as I } from "react";
+import { parseFieldDefinitionList as U, parseMetadataType as j } from "@vidispine/vdt-js";
+import q from "../../../inputs/DateRangeInput/index.js";
+import M from "../../../inputs/DateTimeInput/index.js";
+import V from "../../../inputs/NumberInput/index.js";
+import k from "../../../inputs/SelectInput/index.js";
+import G from "../../../inputs/SliderInput/index.js";
+import $ from "../../../inputs/TagInput/index.js";
+import w from "../../../inputs/TextInput/index.js";
+const z = "Invalid value", B = {
+  TextInput: w,
+  TagInput: $,
+  SliderInput: G,
+  DateRangeInput: q,
+  DateTimeInput: M,
+  NumberInput: V,
+  SelectInput: k
+}, H = ({
+  fieldList: d,
+  metadata: g,
+  dataToPropsMap: p,
+  errorMessages: o,
+  inputsProps: u
+}) => {
+  const {
+    TextInput: l,
+    TagInput: T,
+    DateTimeInput: D,
+    NumberInput: R,
+    SelectInput: S
+  } = B, i = f(() => U(d), [d]), b = f(() => j(g, {
+    flat: !0
+  }), [g]), v = I((t) => {
+    const n = (e) => {
+      const m = t == null ? void 0 : t[e], r = o == null ? void 0 : o[e];
+      if (m !== void 0)
+        return {
+          value: m,
+          message: (typeof r == "function" ? r(e) : r) || z
+        };
+    };
+    return {
+      required: n("required"),
+      minLength: n("minLength"),
+      maxLength: n("maxLength"),
+      min: n("minInclusive"),
+      max: n("maxInclusive"),
+      pattern: n("pattern")
+    };
+  }, [o]), N = (t) => ["float", "integer", "long"].includes(t), x = (t) => ["string", "string-exact"].includes(t), F = (t) => t === "date", h = I(({
+    type: t,
+    options: n,
+    currentValue: e
+  }) => x(t) ? {
+    freeSolo: !n.length,
+    multiple: (e == null ? void 0 : e.length) > 1
+  } : {}, []), s = I(({
+    type: t
+  }, n, e) => x(t) ? (n == null ? void 0 : n.length) > 1 ? T : e != null && e.length ? S : l : N(t) ? R : F(t) ? D : l, [D, R, S, T, l]);
+  return f(() => i == null ? void 0 : i.map(({
+    name: t,
+    restrictions: n,
+    options: e,
+    type: m,
+    data: r,
+    system: L
+  }) => {
+    const O = {
+      ...(u == null ? void 0 : u[m]) || {},
+      ...(u == null ? void 0 : u[t]) || {}
+    }, C = v(n), c = b[t] || void 0, _ = {
+      label: t,
+      defaultValue: c || "",
+      options: e,
+      rules: C,
+      disabled: L,
+      ...Object.fromEntries(Object.entries(p).map(([a, E]) => r[E] ? [a, r[E]] : void 0).filter((a) => !!a)),
+      ...O
+    }, A = {
+      ...h({
+        type: m,
+        options: e,
+        currentValue: c
+      }),
+      ..._
+    };
+    return {
+      name: t,
+      Component: s({
+        type: m
+      }, c, e),
+      ...A
+    };
+  }), [p, s, h, v, u, i, b]);
+}, tt = H;
+export {
+  tt as default
+};

package/dist/es/metadata/MetadataForm/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './MetadataForm';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

package/dist/es/metadata/MetadataForm/index.js

@@ -0,0 +1,12 @@
+import { styled as r } from "@mui/material/styles";
+import m from "./MetadataForm.js";
+import { withOverrides as s } from "../../_utils/withOverrides.js";
+const o = "MetadataForm", t = `Vdt${o}`, d = s(t)(m), e = r(d, {
+  name: t,
+  overridesResolver: (p, n) => n.root
+})({});
+e.displayName = o;
+const l = e;
+export {
+  l as default
+};

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

@@ -1 +1,2 @@
 export { default as MetadataGroupTreeView } from './MetadataGroupTreeView';
+export { default as MetadataForm } from './MetadataForm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-mui",
-  "version": "23.3.0",
+  "version": "23.4.0-pre.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -42,10 +42,10 @@
     "@mui/icons-material": "^5.14.8",
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.14.8",
-    "@vidispine/proptypes": "23.3.0",
-    "@vidispine/types": "23.3.0",
-    "@vidispine/vdt-api": "23.3.0",
-    "@vidispine/vdt-js": "23.3.0",
+    "@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",
     "clsx": "^1.2.1"
   },
   "peerDependencies": {
@@ -58,13 +58,13 @@
     "react-imask": "^6.4.3"
   },
   "devDependencies": {
-    "@vidispine/eslint-config-mdx": "23.3.0",
-    "@vidispine/eslint-config-react": "23.3.0",
-    "@vidispine/eslint-config-storybook": "23.3.0",
-    "@vidispine/eslint-config-typescript": "23.3.0",
-    "@vidispine/prettier-config": "23.3.0",
-    "@vidispine/proptypes": "23.3.0",
-    "@vidispine/tests": "23.3.0",
+    "@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",
     "babel-plugin-transform-import": "1.5.4",
     "eslint": "8.48.0",