@chimera-pe/mui-rhf/dist/mui-rhf.umd.cjs

react-hook-form components using MaterialUI

(function(d,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("prop-types"),require("react-hook-form"),require("lodash"),require("@mui/material"),require("react-polyglot"),require("@mui/x-date-pickers"),require("@mui/icons-material")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types","react-hook-form","lodash","@mui/material","react-polyglot","@mui/x-date-pickers","@mui/icons-material"],n):(d=typeof globalThis<"u"?globalThis:d||self,n(d["mui-rhf"]={},d.ReactJSX,d.React,d.PropTypes,d.ReacdHookForm,d.Lodash,d.MuiMaterial,d.ReactPolyglot,d.MuiDatePickers,d.IconsMaterial))})(this,function(d,n,B,e,E,L,l,w,V,A){"use strict";const I=a=>a.error&&a.invalid,v=a=>(a.match(/(\w+)(\.\w+)+/g)||[]).length>0,K=a=>typeof a=="string"?a:a.label,O=({control:a,name:c,label:s,disabled:C=!1,onChange:t,required:k=!1,helperText:u,options:h,...b})=>{if(!h||L.isEmpty(h))throw new Error('"options" cannot be empty');const o=w.useTranslate(),{field:r,fieldState:i,formState:g}=E.useController({control:a,name:c,disabled:C}),f=B.useCallback((m,q)=>{r.onChange(q==null?void 0:q.value),t&&t(q==null?void 0:q.value,g)},[r,t,g]),S=I(i),x=S&&(v(i.error.message)?o(i.error.message):i.error.message);return n.jsx(l.Autocomplete,{options:h,getOptionLabel:K,isOptionEqualToValue:(m,q)=>(m==null?void 0:m.value)===q,value:r.value||"",onChange:f,renderInput:m=>n.jsx(l.TextField,{...m,label:v(s)?o(s):s,error:S,helperText:x||u,required:k}),...b})};O.propTypes={control:e.object.isRequired,name:e.string.isRequired,label:e.string.isRequired,disabled:e.bool,onChange:e.func,required:e.bool,helperText:e.string,options:e.array.isRequired};const R=({control:a,name:c,label:s,disabled:C=!1,onChange:t,required:k=!1,helperText:u,fullWidth:h,...b})=>{const o=w.useTranslate(),{field:r,fieldState:i,formState:g}=E.useController({control:a,name:c,disabled:C}),f=B.useCallback(q=>{r.onChange(q),t&&t(q,g)},[r,t,g]),S=I(i),x=S&&(v(i.error.message)?o(i.error.message):i.error.message),m=!r.value||r.value===""?null:r.value;return n.jsx(V.DatePicker,{label:v(s)?o(s):s,value:m,onChange:f,onBlur:r.onBlur,inputRef:r.ref,disabled:r.disabled,slotProps:{textField:{required:k,error:S,helperText:x||u,fullWidth:h}},...b})};R.propTypes={control:e.object.isRequired,name:e.string.isRequired,label:e.string.isRequired,disabled:e.bool,onChange:e.func,required:e.bool,helperText:e.string,fullWidth:e.bool};const $=({control:a,onCancel:c,cancelLabel:s="main.form.button.cancel",cancelColor:C="warning",submitLabel:t="main.form.button.submit",submitColor:k="success"})=>{const u=w.useTranslate(),{isSubmitting:h}=E.useFormState({control:a});return n.jsxs(l.Box,{display:"flex",flex:1,justifyContent:"flex-end",gap:1,children:[c&&n.jsx(l.Button,{color:C,onClick:c,startIcon:n.jsx(A.Cancel,{}),disabled:h,children:u(s)}),n.jsx(l.Button,{type:"submit",color:k,variant:"contained",startIcon:n.jsx(A.Save,{}),loading:h,loadingPosition:"start",children:u(t)})]})};$.propTypes={control:e.object.isRequired,onCancel:e.func,cancelLabel:e.string,cancelColor:e.string,submitLabel:e.string,submitColor:e.string};const D=({control:a,name:c,defaultValue:s,title:C,spacing:t=3,children:k})=>{const u=w.useTranslate(),{fields:h,append:b,remove:o}=E.useFieldArray({control:a,name:c});return n.jsxs(l.Card,{children:[n.jsx(l.CardHeader,{title:v(C)?u(C):C,action:n.jsx(l.IconButton,{children:n.jsx(A.Add,{color:"success",onClick:()=>b(s)})})}),n.jsx(l.CardContent,{children:n.jsx(l.Stack,{spacing:t,children:h.map((r,i)=>n.jsxs(l.Stack,{spacing:2,direction:"row",children:[n.jsx(l.Typography,{children:i+1}),n.jsx(l.Box,{flexGrow:1,children:B.Children.map(k,g=>B.cloneElement(g,{control:a,index:i,namePrefix:`${c}.${i}`}))}),n.jsx(l.IconButton,{children:n.jsx(A.Delete,{color:"error",onClick:()=>o(i)})})]},r.id))})})]})};D.propTypes={control:e.object.isRequired,name:e.string.isRequired,defaultValue:e.object.isRequired,title:e.string.isRequired,spacing:e.number,children:e.element.isRequired};const M=({control:a,name:c,label:s,disabled:C=!1,onChange:t,fullWidth:k=!1,required:u=!1,variant:h="outlined",multiple:b=!1,helperText:o,data:r,...i})=>{if(!r||L.isEmpty(r))throw new Error('"data" cannot be empty');const g=w.useTranslate(),{field:f,fieldState:S,formState:x}=E.useController({control:a,name:c,disabled:C}),m=B.useCallback(j=>{f.onChange(j),t&&t(j.target.value,x)},[f,t,x]),q=I(S),N=q&&(v(S.error.message)?g(S.error.message):S.error.message),X=`select-${c}-label`,_=v(s)?g(s):s,z=b&&!f.value?[]:f.value||"";return n.jsxs(l.FormControl,{fullWidth:k,required:u,error:q,variant:h,children:[n.jsx(l.InputLabel,{id:X,children:_}),n.jsx(l.Select,{label:_,labelId:X,value:z,onChange:m,inputRef:f.ref,multiple:b,disabled:f.disabled,renderValue:j=>Array.isArray(j)?r.filter(F=>j.includes(F.value)).map(F=>F.label).join(", "):r.filter(F=>F.value===j).map(F=>F.label),...i,children:r.map(j=>n.jsxs(l.MenuItem,{value:j.value,disabled:j.disabled,children:[b&&n.jsx(l.Checkbox,{checked:z.includes(j.value)}),j.label]},`select-${c}-option-${j.value}`))}),q?n.jsx(l.FormHelperText,{children:N}):o?n.jsx(l.FormHelperText,{children:v(o)?g(o):o}):null]})};M.propTypes={control:e.object.isRequired,name:e.string.isRequired,label:e.string.isRequired,disabled:e.bool,onChange:e.func,fullWidth:e.bool,required:e.bool,variant:e.string,multiple:e.bool,helperText:e.string,data:e.arrayOf(e.shape({label:e.string.isRequired,value:e.oneOfType([e.number,e.string]).isRequired,disabled:e.bool})).isRequired};const W=({control:a,name:c,label:s,disabled:C,onChange:t,required:k=!1,helperText:u,...h})=>{const b=w.useTranslate(),{field:o,fieldState:r,formState:i}=E.useController({control:a,name:c,disabled:C}),g=B.useCallback(x=>{o.onChange(x),t&&t(x.target.value,i)},[o,t,i]),f=I(r),S=f&&(v(r.error.message)?b(r.error.message):r.error.message);return n.jsxs(l.FormControl,{required:k,error:f,children:[n.jsx(l.FormGroup,{children:n.jsx(l.FormControlLabel,{label:v(s)?b(s):s,control:n.jsx(l.Switch,{checked:!!o.value,onChange:g,...h})})}),f?n.jsx(l.FormHelperText,{children:S}):u?n.jsx(l.FormHelperText,{children:v(u)?b(u):u}):null]})};W.propTypes={control:e.object.isRequired,name:e.string.isRequired,label:e.string.isRequired,disabled:e.bool,onChange:e.func,required:e.bool,helperText:e.string};const G=({control:a,name:c,label:s,disabled:C=!1,onChange:t,required:k=!1,helperText:u,...h})=>{const b=w.useTranslate(),{field:o,fieldState:r,formState:i}=E.useController({control:a,name:c,disabled:C}),g=B.useCallback(x=>{const m=x.target.value;o.onChange(m),t&&t(m,i)},[o,t,i]),f=I(r),S=f&&(v(r.error.message)?b(r.error.message):r.error.message);return n.jsx(l.TextField,{label:v(s)?b(s):s,value:o.value||"",onChange:g,onBlur:o.onBlur,inputRef:o.ref,disabled:o.disabled,required:k,error:f,helperText:S||u,...h})};G.propTypes={control:e.object.isRequired,name:e.string.isRequired,label:e.string.isRequired,disabled:e.bool,onChange:e.func,required:e.bool,helperText:e.string};const J=({control:a,name:c,label:s,disabled:C=!1,onChange:t,required:k=!1,helperText:u,fullWidth:h,...b})=>{const o=w.useTranslate(),{field:r,fieldState:i,formState:g}=E.useController({control:a,name:c,disabled:C}),f=B.useCallback(q=>{r.onChange(q),t&&t(q,g)},[r,t,g]),S=I(i),x=S&&(v(i.error.message)?o(i.error.message):i.error.message),m=!r.value||r.value===""?null:r.value;return n.jsx(V.TimePicker,{label:v(s)?o(s):s,value:m,onChange:f,onBlur:r.onBlur,inputRef:r.ref,disabled:r.disabled,slotProps:{textField:{required:k,error:S,helperText:x||u,fullWidth:h}},...b})};J.propTypes={control:e.object.isRequired,name:e.string.isRequired,label:e.string.isRequired,disabled:e.bool,onChange:e.func,required:e.bool,helperText:e.string,fullWidth:e.bool},d.Autocomplete=O,d.DatePicker=R,d.FormButtons=$,d.Repeatable=D,d.Select=M,d.Switch=W,d.TextField=G,d.TimePicker=J,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});