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

react-hook-form components using MaterialUI

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