react-hook-form-chakra-fields/dist/react-hook-form-chakra-fields.cjs.production.min.js

A collection of form fields on top of simple and accessible react component library [Chakra UI](https://chakra-ui.com/) and performant form library [React Hook Form](https://react-hook-form.com/), integrated with many other js/ts libraries.

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),n=e(r),t=require("react-hook-form"),a=require("lodash"),o=require("@chakra-ui/react"),l=require("@chakra-ui/icons"),i=e(require("react-number-format")),u=e(require("currency.js")),c=e(require("dayjs")),d=require("react-datepicker"),s=e(d),p=e(require("date-fns/locale/en-GB"));require("react-datepicker/dist/react-datepicker.css");var m=e(require("@emotion/styled")),f=e(require("react-text-mask")),g=e(require("react-select"));function b(){return(b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function h(e,r){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r.indexOf(n=o[t])>=0||(a[n]=e[n]);return a}function v(e,r){return r||(r=e.slice(0)),e.raw=r,e}var S,E=function(e){var r=e.errorText,t=e.helperText,a=e.label,i=e.children,u=e.tip,c=e.id,d=e.isRequired,s=h(e,["errorText","helperText","label","children","tip","id","isRequired"]),p=o.useColorModeValue("blue.500","blue.200");return n.createElement(o.FormControl,Object.assign({as:o.GridItem,mb:4,id:c,"data-testid":c,isRequired:d},s),n.createElement(o.HStack,{spacing:0},a&&n.createElement(o.FormLabel,{mr:"5px",lineHeight:"auto",fontSize:"md",color:"auto"},a),u&&n.createElement(o.Tooltip,{textAlign:"center",label:u},n.createElement(l.InfoIcon,{mb:"5px",w:"13px",h:"13px",color:p}))),i,n.createElement(o.FormErrorMessage,{lineHeight:"1rem"},r),n.createElement(o.FormHelperText,{lineHeight:"1rem"},t))},w=function(e){var r,o=e.children,l=e.name,i=e.isRequired,u=void 0===i||i,c=h(e,["children","name","isRequired"]),d=t.useFormContext(),s=Boolean(a.get(d.errors,l));return n.createElement(E,Object.assign({errorText:null==(r=a.get(d.errors,l))?void 0:r.message,isInvalid:s,name:l,isRequired:u},c),n.createElement(t.Controller,{name:l,render:function(e){return o(d,e,{isInvalid:s})}}))},x=function(e){var r=e.hasError,t=e.value,a=h(e,["hasError","value"]);return n.createElement(o.Input,Object.assign({as:i},{thousandSeparator:",",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!0,placeholder:"0.00"},a,{hasError:r,value:t?u(t,{precision:10}).value:"",allowNegative:!1,isAllowed:function(e){var r=e.floatValue;return!r||r>=0&&r<=999999999999.99}}))},C=m(o.Box)(S||(S=v(["\n  .react-datepicker {\n    background-color: ",";\n    font-family: inherit;\n    border-color: ",";\n  }\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    display: block;\n  }\n\n  .react-datepicker__input-container {\n    height: 2.5rem;\n  }\n\n  .react-datepicker__input-container > input {\n    width: 100%;\n    height: 100%;\n    border-radius: 7px;\n    border: ",";\n  }\n\n  .react-datepicker__input-container > input:focus {\n    border: ",";\n  }\n\n  .react-datepicker__close-icon {\n    right: 3px;\n  }\n\n  .react-datepicker__close-icon::after {\n    width: 21px;\n    height: 21px;\n    background-color: ",";\n    color: ",";\n    font-size: 1.1rem;\n  }\n\n  .react-datepicker__input-time-container {\n    background-color: transparent;\n    filter: ",";\n  }\n\n  .react-datepicker-time__input {\n    background-color: transparent;\n  }\n\n  .react-datepicker__month-container,\n  .react-datepicker__header {\n    background: ",";\n    * {\n      color: ",";\n    }\n\n    .react-datepicker__day:hover {\n      background: ",";\n    }\n\n    .react-datepicker__day--selected {\n      color: white;\n      background: ",";\n      font-weight: bold;\n    }\n\n    .react-datepicker__day--keyboard-selected {\n      background-color: transparent;\n    }\n\n    .react-datepicker__day--disabled {\n      opacity: 0.4;\n    }\n  }\n"])),(function(e){return e.calendarBackground}),(function(e){return e.calendarSelectedBackground}),(function(e){return e.isInvalid?"2.5px solid "+e.borderColor+" !important":"1px solid "+e.borderColor+" !important"}),(function(e){return"2px solid "+e.focusColor+" !important"}),(function(e){return e.clearBtnBackground}),(function(e){return e.clearBtnColor}),(function(e){return e.isDarkMode?"invert(1)":"invert(0)"}),(function(e){return e.calendarBackground}),(function(e){return e.calendarColor}),(function(e){return e.calendarDayHover}),(function(e){return e.calendarSelectedBackground}));d.registerLocale("en-GB",p);var y=function(e){var r,t,a=e.isInvalid,l=void 0!==a&&a,i=e.value,u=e.onChange,d=e.isClearable,p=void 0===d||d,m=h(e,["isInvalid","value","onChange","isClearable"]),f=o.useTheme().colors,g=o.useColorMode().colorMode,b=o.useColorModeValue(f.red[500],f.red[300]),v=o.useColorModeValue(f.gray[200],f.gray[600]),S=o.useColorModeValue(f.blue[500],f.blue[300]),E=o.useColorModeValue(f.white,f.gray[900]),w=o.useColorModeValue(f.white,f.gray[700]),x=o.useColorModeValue(f.gray[700],f.white),y=o.useColorModeValue(f.blue[500],f.blue[300]),k=o.useColorModeValue(f.gray[200],f.gray[600]),M=null!=(r=m.dateFormat)?r:"YYYY-MM-DDTHH:mm:ssZ";return n.createElement(C,{isDarkMode:"dark"===g,isInvalid:l,borderColor:l?b:v,focusColor:f.blue[500],clearBtnColor:E,clearBtnBackground:S,calendarBackground:w,calendarColor:x,calendarSelectedBackground:y,calendarDayHover:k},n.createElement(o.Input,Object.assign({as:s,autoComplete:"off",minDate:new Date(1900,1,1),maxDate:new Date(2999,1,1),isClearable:p},m,{locale:"en",dateFormat:m.showTimeInput?"yyy/MM/dd h:mm aa":"yyyy/MM/dd",timeInputLabel:null!=(t=m.timeInputLabel)?t:"Time:",showPopperArrow:!1,selected:i?new Date(i):null,onChange:function(e,r){if(e&&!Array.isArray(e)){var n=c(e).hour(0).minute(0).second(0);u(n.format(M),r)}else u(e,r)}})))},k=function(e){return n.createElement(o.Input,Object.assign({as:f,guide:!0},e))},M=function(e){var r,t=e.onChangeTime,a=h(e,["onChangeTime"]),o=function(e){return parseInt(e,10)},l=function(e){return e.toString().padStart(2,"0")};return n.createElement(k,Object.assign({mask:[/\d/,/\d/,":",/\d/,/\d/],placeholder:"00:00",maxW:"120px"},a,{onBlur:function(e){if(a.onBlur&&a.onBlur(e),t){var r=e.target.value.split(":"),n=r[0],i=r[1],u=c(new Date).hour(o(n)).minute(o(i));if(u.isValid())return void t(l(u.hour())+":"+l(u.minute()));t("")}},value:null!=(r=a.value)?r:""}))},I=function(e){var t,l=e.id,i=e.value,u=void 0===i?null:i,d=e.onChange,s=h(e,["id","value","onChange"]),p=function(e){return e.toString().padStart(2,"0")},m=function(e,r){var n=r.split(":"),t=n[0],a=n[1];return c(e).hour(Number(t)).minute(Number(a)).format("YYYY-MM-DDTHH:mm:ssZ")},f=r.useState(u),g=f[0],b=f[1],v=r.useState((t=c(null!=u?u:void 0)).isValid()?p(t.hour())+":"+p(t.minute()):null),S=v[0],E=v[1],w=r.useState(u),x=w[0],C=w[1];return r.useEffect((function(){d&&d(x)}),[x]),n.createElement(o.HStack,null,n.createElement(o.Box,null,n.createElement(y,Object.assign({id:l},s,{onChange:function(e){return a.isEmpty(e)?(b(null),E(null),void C(null)):function(e){b(e),E(S||"00:00"),C(m(e,S||"00:00"))}(e.toString())},value:g}))),n.createElement(o.Box,null,n.createElement(M,{id:l+"-time",value:g?S:void 0,isDisabled:!x,onChangeTime:function(e){return a.isEmpty(e)?(E("00:00"),void C(c(x).hour(0).minute(0).second(0).format("YYYY-MM-DDTHH:mm:ssZ"))):function(e){E(e),C(m(x,e))}(e)}})))},T=function(e){var t=e.id,l=e.initDate,i=void 0===l?c().hour(0).minute(0).toString():l,u=e.value,d=void 0===u?null:u,s=e.onChange,p=h(e,["id","initDate","value","onChange"]),m=function(e,r){var n=r.split(":"),t=n[0],a=n[1];return c(e).hour(Number(t)).minute(Number(a)).format("YYYY-MM-DDTHH:mm:ssZ")},f=r.useState(d||i),g=f[0],b=f[1],v=r.useState(d?c(d).format("HH:mm"):null),S=v[0],E=v[1];return r.useEffect((function(){if(s){if(null===S)return;if(""===S)return void s(g,"");s(m(g,S),S)}}),[S]),n.createElement(o.Box,null,n.createElement(M,Object.assign({id:t,value:d?S:void 0,onChangeTime:function(e){return a.isEmpty(e)?(E(""),void b(c(g).hour(0).minute(0).second(0).format("YYYY-MM-DDTHH:mm:ssZ").toString())):function(e){E(e),b(m(g,e))}(e)}},p)))},q=function(e){return n.createElement(o.Input,Object.assign({},e))},D=function(e,r){return null==e?r?[]:null:e},V=function(e,r){return 0===r.length||0===e.length?[]:e.map((function(e){var n=r.find((function(r){return r.value===e}));return void 0===n?{label:e,value:e}:n}))},O=function(e,r){if(null===e)return null;if(""===e)return null;if("object"==typeof e)throw new Error("FormSelect: incorrect value type");return r.find((function(r){if("object"==typeof r.value)throw new Error("FormSelect: incorrect value type");return r.value===e}))||{label:e,value:e}},_=function(e){var r=e.id,t=e.isInvalid,a=e.isClearable,l=void 0===a||a,i=e.noOptionsMessage,u=void 0===i?function(){return"No options"}:i,c=e.loadingMessage,d=void 0===c?function(){return"Loading..."}:c,s=h(e,["id","isInvalid","isClearable","noOptionsMessage","loadingMessage"]),p=o.useTheme().colors,m=o.useColorModeValue(p.gray[700],p.white),f=o.useColorModeValue(p.blue[500],p.blue[300]),v=o.useColorModeValue(p.gray[200],p.gray[600]),S=o.useColorModeValue(p.gray[100],p.gray[400]),E=o.useColorModeValue(p.white,p.gray[700]),w=o.useColorModeValue(p.blue[500],p.blue[300]),x=o.useColorModeValue(p.red[500],p.red[300]),C=o.useColorModeValue(p.gray[400],p.gray[600]),y=o.useColorModeValue(p.gray[900],p.gray[100]);return n.createElement(g,Object.assign({placeholder:"",isClearable:l,noOptionsMessage:u,loadingMessage:d,className:"react-select-container",classNamePrefix:"react-select",inputId:r,id:"select-container-"+r},s,{styles:{control:function(e,r){var n=r.isFocused;return b({},e,{opacity:r.isDisabled?".55":"1",backgroundColor:"transparent",border:"none",outline:"none",boxShadow:"0 0 0 "+(n||t?"2px":"1px")+" "+(n?f:t?x:v)})},singleValue:function(e){return b({},e,{color:m})},input:function(e){return b({},e,{color:y})},indicatorsContainer:function(e){return b({},e,{color:"red"})},option:function(e,r){return b({},e,{backgroundColor:r.isSelected?w:E})},menu:function(e){return b({},e,{backgroundColor:E})},placeholder:function(e){return b({},e,{color:C})},multiValueLabel:function(e){return b({},e,{backgroundColor:S})},multiValueRemove:function(e){return b({},e,{backgroundColor:S,borderRadius:"0"})}}}))},j=function(e){var r=e.name,t=e.label,a=e.required,i=void 0===a||a,u=e.disabled,c=e.helperText,d=e.id,s=e.tip,p=e.as,m=e.colSpan,f=e.colStart,g=e.colEnd,b=e.rowSpan,v=e.rowStart,S=e.rowEnd,E=h(e,["name","label","required","disabled","helperText","id","tip","as","colSpan","colStart","colEnd","rowSpan","rowStart","rowEnd"]),x=o.useColorModeValue("red.500","red.300"),C=o.useColorModeValue("green.500","green.300");return n.createElement(w,{name:r,isRequired:i,isDisabled:u,helperText:c,tip:s,id:d,label:t,colSpan:m,colStart:f,colEnd:g,rowSpan:b,rowStart:v,rowEnd:S},(function(e,t,a){var i=e.formState.touched,u=a.isInvalid,c="textarea"===p,s=u?x:C;return n.createElement(o.InputGroup,null,n.createElement(q,Object.assign({},E,t,{as:c?o.Textarea:p,id:d})),i[r]&&!c&&n.createElement(o.InputRightElement,null,n.createElement(u?l.WarningIcon:l.CheckCircleIcon,{color:s,w:"20px",h:"20px"})))}))};exports.DateField=function(e){var r=e.name,t=e.label,a=e.required,o=void 0===a||a,l=e.disabled,i=e.helperText,u=e.id,c=e.tip,d=e.colSpan,s=e.colStart,p=e.colEnd,m=e.rowSpan,f=e.rowStart,g=e.rowEnd,b=h(e,["name","label","required","disabled","helperText","id","tip","colSpan","colStart","colEnd","rowSpan","rowStart","rowEnd"]);return n.createElement(w,{name:r,isRequired:o,isDisabled:l,helperText:i,tip:c,id:u,label:t,rowSpan:m,rowStart:f,rowEnd:g,colSpan:d,colStart:s,colEnd:p},(function(e,r,t){return n.createElement(y,Object.assign({isInvalid:t.isInvalid,id:u},b,r))}))},exports.DateInput=y,exports.DateTimeField=function(e){var r=e.name,t=e.label,a=e.required,o=void 0===a||a,l=e.disabled,i=e.helperText,u=e.id,c=e.tip,d=e.colSpan,s=e.colStart,p=e.colEnd,m=e.rowSpan,f=e.rowStart,g=e.rowEnd,b=h(e,["name","label","required","disabled","helperText","id","tip","colSpan","colStart","colEnd","rowSpan","rowStart","rowEnd"]);return n.createElement(w,{name:r,isRequired:o,isDisabled:l,helperText:i,tip:c,id:u,label:t,rowSpan:m,rowStart:f,rowEnd:g,colSpan:d,colStart:s,colEnd:p},(function(e,r,t){return n.createElement(I,Object.assign({},b,r,{id:u,isInvalid:t.isInvalid,onChange:function(e){r.onChange(e)}}))}))},exports.DateTimeInput=I,exports.DateTimeOnlyField=function(e){var r=e.name,t=e.label,a=e.required,o=void 0===a||a,l=e.disabled,i=e.helperText,u=e.id,c=e.tip,d=e.colSpan,s=e.colStart,p=e.colEnd,m=e.rowSpan,f=e.rowStart,g=e.rowEnd,b=h(e,["name","label","required","disabled","helperText","id","tip","colSpan","colStart","colEnd","rowSpan","rowStart","rowEnd"]);return n.createElement(w,{name:r,isRequired:o,isDisabled:l,helperText:i,tip:c,id:u,label:t,rowSpan:m,rowStart:f,rowEnd:g,colSpan:d,colStart:s,colEnd:p},(function(e,r,t){return n.createElement(T,Object.assign({},b,r,{id:u,isInvalid:t.isInvalid,onChange:function(e,n){r.onChange(n?e:"")}}))}))},exports.DateTimeOnlyInput=T,exports.FieldControl=E,exports.FieldPrototype=w,exports.Input=q,exports.InputField=j,exports.MaskedInput=k,exports.MaskedInputField=function(e){var r=e.name,a=h(e,["name"]),o=t.useFormContext();return n.createElement(j,Object.assign({as:k,name:r,value:(0,o.watch)(r),guide:!0},a))},exports.MoneyField=function(e){var r=e.name,t=e.label,i=e.required,u=void 0===i||i,c=e.disabled,d=e.helperText,s=e.id,p=e.tip,m=e.css,f=e.children,g=e.colSpan,b=e.colStart,v=e.colEnd,S=e.rowSpan,E=e.rowStart,C=e.rowEnd,y=h(e,["name","label","required","disabled","helperText","id","tip","css","children","colSpan","colStart","colEnd","rowSpan","rowStart","rowEnd"]),k=o.useColorModeValue("red.500","red.300"),M=o.useColorModeValue("green.500","green.300");return n.createElement(w,{name:r,isRequired:u,isDisabled:c,helperText:d,tip:p,id:s,label:t,css:m,colSpan:g,colStart:b,colEnd:v,rowSpan:S,rowStart:E,rowEnd:C},(function(e,t,i){var u=e.formState.touched,c=i.isInvalid,d=c?k:M;return n.createElement(o.InputGroup,null,n.createElement(o.Flex,{w:"100%"},n.createElement(o.chakra.div,{flex:f?".7":"1"},n.createElement(x,Object.assign({},y,t,{id:s})),a.get(u,r)&&!f&&n.createElement(o.InputRightElement,null,n.createElement(c?l.WarningIcon:l.CheckCircleIcon,{color:d,w:"20px",h:"20px"}))),f&&n.createElement(o.chakra.div,{flex:".3",ml:4},f)))}))},exports.MoneyInput=x,exports.SelectField=function(e){var r=e.name,t=e.label,a=e.required,o=void 0===a||a,l=e.disabled,i=e.helperText,u=e.id,c=e.tip,d=e.isMulti,s=void 0!==d&&d,p=e.options,m=e.onChangeEffect,f=e.colSpan,g=e.colStart,b=e.colEnd,v=e.rowSpan,S=e.rowStart,E=e.rowEnd,x=e.requiredFieldMessage,C=void 0===x?"Field is required":x,y=h(e,["name","label","required","disabled","helperText","id","tip","isMulti","options","onChangeEffect","colSpan","colStart","colEnd","rowSpan","rowStart","rowEnd","requiredFieldMessage"]);return n.createElement(w,{name:r,isRequired:o,isDisabled:l,helperText:i,tip:c,id:u,label:t,rowSpan:v,rowStart:S,rowEnd:E,colSpan:f,colStart:g,colEnd:b},(function(e,t,a){var i=e.formState.isSubmitting,c=e.setValue,d=e.clearErrors,f=e.setError,g=t.value,b=h(t,["value"]);return n.createElement(_,Object.assign({isDisabled:i||l},b,y,{id:u,isMulti:s,isInvalid:a.isInvalid,options:p,value:s?V(D(g,!0),p):O(D(g,!1),p),onChange:function(e){m&&m(e),e&&d(r);var n=function(){s&&o&&f(r,{message:C}),c(r,null,{shouldDirty:!0})};e?Array.isArray(e)&&0===e.length?n():Array.isArray(e)?c(r,e.map((function(e){return e.value})),{shouldDirty:!0}):c(r,e.value,{shouldDirty:!0}):n()}}))}))},exports.SelectInput=_,exports.TimeInput=M,exports.findOption=O,exports.findOptions=V,exports.getReadValue=function(e,r,n){return n?V(D(e,n),r).map((function(e){return e.label})).join(", "):(O(D(e,n),r)||{label:""}).label},exports.getValue=D;
//# sourceMappingURL=react-hook-form-chakra-fields.cjs.production.min.js.map