@saas-ui/forms 0.3.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/dist/display-if.d.ts +1 -1
- package/dist/display-if.d.ts.map +1 -1
- package/dist/field.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1 -1
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
- package/src/display-if.tsx +2 -2
- package/src/field.tsx +14 -2
package/CHANGELOG.md
CHANGED
package/dist/display-if.d.ts
CHANGED
@@ -6,7 +6,7 @@ export interface DisplayIfProps<TFieldValues> {
|
|
6
6
|
defaultValue?: unknown;
|
7
7
|
isDisabled?: boolean;
|
8
8
|
isExact?: boolean;
|
9
|
-
condition
|
9
|
+
condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
|
10
10
|
}
|
11
11
|
export declare const DisplayIf: <TFieldValues extends FieldValues = FieldValues>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
|
12
12
|
//# sourceMappingURL=display-if.d.ts.map
|
package/dist/display-if.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"display-if.d.ts","sourceRoot":"","sources":["../src/display-if.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAGL,WAAW,EACX,aAAa,EACd,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAc,CAAC,YAAY;IAC1C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,OAAO,CAAA;
|
1
|
+
{"version":3,"file":"display-if.d.ts","sourceRoot":"","sources":["../src/display-if.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAGL,WAAW,EACX,aAAa,EACd,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAc,CAAC,YAAY;IAC1C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,OAAO,CAAA;CAC9E;AAED,eAAO,MAAM,SAAS,gOAgBrB,CAAA"}
|
package/dist/field.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAKL,eAAe,EACf,WAAW,EACX,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAGL,WAAW,EACX,gBAAgB,EASjB,MAAM,kBAAkB,CAAA;AAQzB,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,oBAAY,UAAU,GAAG,IAAI,CAC3B,eAAe,EACf,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CACnE,CAAA;AAED,oBAAY,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,QAAQ,GACR,eAAe,GACf,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAA;AAEV,MAAM,WAAW,UAAU,CACzB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,CACV,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,eAAe,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAC5D,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwB1C,CAAA;AACD,eAAO,MAAM,KAAK;;;;MAkBb,MAAM,YAAY,CAAA;
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAKL,eAAe,EACf,WAAW,EACX,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAGL,WAAW,EACX,gBAAgB,EASjB,MAAM,kBAAkB,CAAA;AAQzB,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,oBAAY,UAAU,GAAG,IAAI,CAC3B,eAAe,EACf,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CACnE,CAAA;AAED,oBAAY,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,QAAQ,GACR,eAAe,GACf,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAA;AAEV,MAAM,WAAW,UAAU,CACzB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,CACV,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,eAAe,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAC5D,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwB1C,CAAA;AACD,eAAO,MAAM,KAAK;;;;MAkBb,MAAM,YAAY,CAAA;AAwDvB,eAAO,MAAM,mBAAmB,mBAAoB,GAAG,qFAqBtD,CAAA;AAED,eAAO,MAAM,qBAAqB,mBAAoB,GAAG,qFAgBxD,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAC1B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,SACtB,MAAM,aACD,MAAM,EAAE,CAAC,GAAG,CAAC,qMAsBzB,CAAA;AAID,eAAO,MAAM,UAAU,kJAAmC,CAAA;AAC1D,eAAO,MAAM,gBAAgB,kJAE3B,CAAA;AACF,eAAO,MAAM,kBAAkB,kJAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,kJAA0C,CAAA;AACpE,eAAO,MAAM,WAAW,kJAavB,CAAA;AACD,eAAO,MAAM,WAAW,kJAEtB,CAAA;AACF,eAAO,MAAM,aAAa,kJAYzB,CAAA;AACD,eAAO,MAAM,UAAU,kJAErB,CAAA;AACF,eAAO,MAAM,QAAQ,kJAEnB,CAAA;AACF,eAAO,MAAM,iBAAiB,kJAI7B,CAAA"}
|
package/dist/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
var e=require("react"),r=require("react-hook-form"),t=require("@chakra-ui/react"),n=require("@saas-ui/number-input"),a=require("@saas-ui/password-input"),l=require("@saas-ui/radio"),i=require("@saas-ui/pin-input"),o=require("@saas-ui/select"),u=require("yup"),s=require("@hookform/resolvers/yup"),c=require("@chakra-ui/system"),d=require("@chakra-ui/icons"),m=require("@saas-ui/button"),f=require("@chakra-ui/react-utils"),p=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var h=/*#__PURE__*/v(e);function b(){return b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},b.apply(this,arguments)}function x(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}function y(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var E=["name","label","placeholder"],F=["name","label","help","variant","hideLabel","children"],g=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","variant"],w=["name","rules"],C=["ref"],I=["name","rules"],R=["ref"],A=["label"],k=["label"],S={},O=function(e){var n=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,u=e.children,s=x(e,F),c=function(e,t){return r.get(t.errors,e)}(n,r.useFormContext().formState);/*#__PURE__*/return h.createElement(t.FormControl,b({variant:i},s,{isInvalid:!!c}),a&&!o?/*#__PURE__*/h.createElement(t.FormLabel,{variant:i},a):null,/*#__PURE__*/h.createElement(t.Box,null,u,!l||null!=c&&c.message?null:/*#__PURE__*/h.createElement(t.FormHelperText,null,l),(null==c?void 0:c.message)&&/*#__PURE__*/h.createElement(t.FormErrorMessage,null,null==c?void 0:c.message)))},V=t.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return h.createElement(S[void 0===t?"text":t]||S.text,b({ref:r},e))}),q=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,w),u=r.useFormContext();/*#__PURE__*/return h.createElement(r.Controller,{name:l,control:u.control,rules:i,render:function(r){var n=r.field,l=n.ref,i=x(n,C);/*#__PURE__*/return h.createElement(e,b({},i,o,{ref:t.useMergeRefs(a,l)}))}})})},j=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,I),u=(0,r.useFormContext().register)(l,i),s=u.ref,c=x(u,R);/*#__PURE__*/return h.createElement(e,b({},c,o,{ref:t.useMergeRefs(a,s)}))})},N=function(e,r,n){var a=function(e,r){var n=r.displayName,a=r.hideLabel,l=r.BaseField,i=t.forwardRef(function(r,t){var n=r.name,i=r.label,o=r.isDisabled,u=r.isInvalid,s=r.isReadOnly,c=r.isRequired,d=r.variant,m=x(r,g);/*#__PURE__*/return h.createElement(l,{name:n,label:i,hideLabel:a,isDisabled:o,isInvalid:u,isReadOnly:s,isRequired:c,variant:d},/*#__PURE__*/h.createElement(e,b({ref:t,name:n,label:i},m)))});return i.displayName=n,i}(null!=n&&n.isControlled?q(r):j(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==n?void 0:n.hideLabel,BaseField:(null==n?void 0:n.BaseField)||O});return S[e]=a,a},P=N("text",t.Input),L=N("number",n.NumberInput,{isControlled:!0}),B=N("password",a.PasswordInput),D=N("textarea",t.Textarea),M=N("switch",t.forwardRef(function(e,r){var n=e.label,a=x(e,A);/*#__PURE__*/return h.createElement(t.Switch,b({ref:r},a),n)}),{isControlled:!0,hideLabel:!0}),U=N("select",o.Select,{isControlled:!0}),T=N("checkbox",t.forwardRef(function(e,r){var n=e.label,a=x(e,k);/*#__PURE__*/return h.createElement(t.Checkbox,b({ref:r},a),n)}),{hideLabel:!0}),_=N("radio",l.RadioInput,{isControlled:!0}),G=N("pin",i.PinInput,{isControlled:!0}),H=N("native-select",o.NativeSelect,{isControlled:!0}),z=function(e){var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},W=function(e,r){for(var t,n=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return y(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,r):void 0}}(e))){t&&(e=t);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e.tests);!(t=n()).done;){var a,l=t.value;if(null!=(a=l.OPTIONS)&&a.params[r])return l.OPTIONS.params[r]}},$=function(e){var r,t=[];for(var n in r="array"===e.type?e.innerType.fields:e.fields){var a=r[n],l={};"array"===a.type&&(l.min=W(a,"min"),l.max=W(a,"max")),t.push(b({name:n,label:a.spec.label||n,type:z(a)},l))}return t},J=["children"],K=function(e){/*#__PURE__*/return h.createElement(t.chakra.div,null,e.children)},Q=function(e){var r,n,a,l=e.children,i=x(e,J),o=b({},null!=(r=null==(n=t.useTheme().components)||null==(a=n.FormLayout)?void 0:a.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return h.createElement(t.SimpleGrid,o,h.Children.map(l,function(e){return h.isValidElement(e)?/*#__PURE__*/h.createElement(K,null,e):e}))},X=function(e,r){return h.Children.map(r,function(r){return h.isValidElement(r)&&r.props.name?h.cloneElement(r,b({},r.props,{name:e+"."+r.props.name})):r})},Y=f.createContext({name:"ArrayFieldContext"}),Z=Y[0],ee=Y[1],re=f.createContext({name:"ArrayFieldRowContext"}),te=re[0],ne=re[1],ae=function(e){var t=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,u=r.useFormContext();return b({},r.useFieldArray({control:u.control,name:t,keyName:l}),{name:t,defaultValue:a,min:i,max:o})},le=function(e){var t=e.index,n=r.useFormContext().clearErrors,a=ee(),l=a.name,i=a.remove,o=a.fields;return h.useEffect(function(){n(l)},[]),{index:t,isFirst:0===t,isLast:t===o.length-1,name:l+"."+t,remove:h.useCallback(function(){n(l),i(t)},[t])}},ie=function(){var e=ne(),r=e.isFirst,t=e.remove,n=ee(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},oe=function(){var e=ee(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},ue=["children","columns","spacing"],se=["children"],ce=["name","defaultValue","keyName","min","max","children"],de=function(e){/*#__PURE__*/return h.createElement(fe,{index:e.index},/*#__PURE__*/h.createElement(me,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/h.createElement(pe,null))},me=function(e){var r=e.children,t=e.columns,n=e.spacing,a=x(e,ue),l=ne().name;/*#__PURE__*/return h.createElement(Q,b({flex:"1",columns:t,gridGap:n,mr:"2"},a),X(l,r))},fe=function(e){var r=e.children,t=le({index:e.index});/*#__PURE__*/return h.createElement(te,{value:t},/*#__PURE__*/h.createElement(c.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},pe=function(e){/*#__PURE__*/return h.createElement(m.IconButton,b({icon:/*#__PURE__*/h.createElement(d.MinusIcon,null),"aria-label":"Remove row"},ie(),e))},ve=function(e){/*#__PURE__*/return h.createElement(m.IconButton,b({icon:/*#__PURE__*/h.createElement(d.AddIcon,null),"aria-label":"Add row",float:"right"},oe(),e))},he=function(e){var r=e.children,t=x(e,se);/*#__PURE__*/return h.createElement(xe,t,/*#__PURE__*/h.createElement(be,null,function(e){/*#__PURE__*/return h.createElement(h.Fragment,null,e.map(function(e,t){/*#__PURE__*/return h.createElement(de,{key:e.id,index:t},r)}))}),/*#__PURE__*/h.createElement(ve,null))},be=function(e){return(0,e.children)(ee().fields)},xe=function(e){var r=e.name,t=e.defaultValue,n=e.keyName,a=e.min,l=e.max,i=e.children,o=x(e,ce),u=ae({name:r,defaultValue:t,keyName:n,min:a,max:l});/*#__PURE__*/return h.createElement(Z,{value:u},/*#__PURE__*/h.createElement(O,b({name:r},o),i))},ye=["name","children","columns","spacing"],Ee=function(e){var r=e.name,t=e.children,n=e.columns,a=e.spacing,l=x(e,ye);/*#__PURE__*/return h.createElement(O,b({name:r},l),/*#__PURE__*/h.createElement(Q,{columns:n,gridGap:a},X(r,t)))},Fe=["name","type"],ge=["schema"],we=["name","type","defaultValue"],Ce=function(e,r){return $(function(e,r){return u.reach(e,r)}(e,r)).map(function(e){var r=e.name,t=e.type,n=x(e,Fe);/*#__PURE__*/return h.createElement(V,b({key:r,name:r,type:t},n))})},Ie=function(e){var r=e.schema,t=x(e,ge);/*#__PURE__*/return h.createElement(Q,t,$(r).map(function(e){var t=e.name,n=e.type,a=x(e,we);return"array"===n?/*#__PURE__*/h.createElement(he,b({name:t},a),Ce(r,t)):"object"===n?/*#__PURE__*/h.createElement(Ee,b({name:t},a),Ce(r,t)):/*#__PURE__*/h.createElement(V,b({key:t,name:t,type:n},a))}))},Re=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Ae=t.forwardRef(function(e,n){var a=e.mode,l=void 0===a?"all":a,i=e.resolver,o=e.reValidateMode,u=e.shouldFocusError,c=e.shouldUnregister,d=e.shouldUseNativeValidation,m=e.criteriaMode,f=e.delayError,p=e.schema,v=e.defaultValues,y=e.onSubmit,E=e.onError,F=e.formRef,g=e.children,w=x(e,Re),C={mode:l,resolver:i,defaultValues:v,reValidateMode:o,shouldFocusError:u,shouldUnregister:c,shouldUseNativeValidation:d,criteriaMode:m,delayError:f};p&&(C.resolver=s.yupResolver(p));var I=r.useForm(C),R=I.handleSubmit;return h.useImperativeHandle(n,function(){return I},[n,I]),/*#__PURE__*/h.createElement(r.FormProvider,I,/*#__PURE__*/h.createElement(t.chakra.form,b({ref:F,onSubmit:R(y,E)},w),g))}),ke=["children","disableIfUntouched","disableIfInvalid"],Se=c.forwardRef(function(e,t){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,i=x(e,ke),o=r.useFormContext().formState;/*#__PURE__*/return h.createElement(m.Button,b({type:"submit",isLoading:o.isSubmitting,isPrimary:!0,ref:t,isDisabled:a&&!o.isDirty||l&&!o.isValid},i),n)});Se.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1};var Oe=["schema","submitLabel"],Ve=t.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=x(e,Oe);/*#__PURE__*/return h.createElement(Ae,b({},l,{schema:t,ref:r}),/*#__PURE__*/h.createElement(Q,null,/*#__PURE__*/h.createElement(Ie,{schema:t}),a&&/*#__PURE__*/h.createElement(Se,{label:a})))});exports.ArrayField=he,exports.ArrayFieldAddButton=ve,exports.ArrayFieldContainer=xe,exports.ArrayFieldProvider=Z,exports.ArrayFieldRemoveButton=pe,exports.ArrayFieldRow=de,exports.ArrayFieldRowContainer=fe,exports.ArrayFieldRowFields=me,exports.ArrayFieldRowProvider=te,exports.ArrayFieldRows=be,exports.AutoForm=Ve,exports.BaseField=O,exports.CheckboxField=T,exports.DisplayField=function(e){var n=e.name,a=e.label,l=x(e,E),i=r.useFormContext().getValues;/*#__PURE__*/return h.createElement(t.FormControl,l,a?/*#__PURE__*/h.createElement(t.FormLabel,{htmlFor:n},a):null,/*#__PURE__*/h.createElement(t.Text,{fontSize:"md"},i(n)))},exports.DisplayIf=function(e){var t=e.children;return(0,e.condition)(r.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),r.useFormContext())?t:null},exports.Field=V,exports.Fields=Ie,exports.Form=Ae,exports.FormLayout=Q,exports.InputField=P,exports.NativeSelectField=H,exports.NumberInputField=L,exports.ObjectField=Ee,exports.PasswordInputFIeld=B,exports.PinField=G,exports.RadioField=_,exports.SelectField=U,exports.SubmitButton=Se,exports.SwitchField=M,exports.TextareaField=D,exports.registerFieldType=N,exports.useArrayField=ae,exports.useArrayFieldAddButton=oe,exports.useArrayFieldContext=ee,exports.useArrayFieldRemoveButton=ie,exports.useArrayFieldRow=le,exports.useArrayFieldRowContext=ne,exports.withControlledInput=q,exports.withUncontrolledInput=j,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
|
1
|
+
var e=require("react"),r=require("react-hook-form"),t=require("@chakra-ui/react"),n=require("@saas-ui/number-input"),a=require("@saas-ui/password-input"),l=require("@saas-ui/radio"),i=require("@saas-ui/pin-input"),o=require("@saas-ui/select"),u=require("yup"),s=require("@hookform/resolvers/yup"),c=require("@chakra-ui/system"),d=require("@chakra-ui/icons"),m=require("@saas-ui/button"),f=require("@chakra-ui/react-utils"),p=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var h=/*#__PURE__*/v(e);function b(){return b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},b.apply(this,arguments)}function x(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}function y(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var E=["name","label","placeholder"],F=["name","label","help","variant","hideLabel","children"],g=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","rules","variant"],w=["name","rules"],C=["ref"],I=["name","rules"],R=["ref"],A=["label"],k=["label"],S={},O=function(e){var n=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,u=e.children,s=x(e,F),c=function(e,t){return r.get(t.errors,e)}(n,r.useFormContext().formState);/*#__PURE__*/return h.createElement(t.FormControl,b({variant:i},s,{isInvalid:!!c}),a&&!o?/*#__PURE__*/h.createElement(t.FormLabel,{variant:i},a):null,/*#__PURE__*/h.createElement(t.Box,null,u,!l||null!=c&&c.message?null:/*#__PURE__*/h.createElement(t.FormHelperText,null,l),(null==c?void 0:c.message)&&/*#__PURE__*/h.createElement(t.FormErrorMessage,null,null==c?void 0:c.message)))},V=t.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return h.createElement(S[void 0===t?"text":t]||S.text,b({ref:r},e))}),q=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,w),u=r.useFormContext();/*#__PURE__*/return h.createElement(r.Controller,{name:l,control:u.control,rules:i,render:function(r){var n=r.field,l=n.ref,i=x(n,C);/*#__PURE__*/return h.createElement(e,b({},i,o,{ref:t.useMergeRefs(a,l)}))}})})},j=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,I),u=(0,r.useFormContext().register)(l,i),s=u.ref,c=x(u,R);/*#__PURE__*/return h.createElement(e,b({},c,o,{ref:t.useMergeRefs(a,s)}))})},N=function(e,r,n){var a=function(e,r){var n=r.displayName,a=r.hideLabel,l=r.BaseField,i=t.forwardRef(function(r,t){var n=r.name,i=r.label,o=r.isDisabled,u=r.isInvalid,s=r.isReadOnly,c=r.isRequired,d=r.rules,m=r.variant,f=x(r,g),p=b({required:c},d);/*#__PURE__*/return h.createElement(l,{name:n,label:i,hideLabel:a,isDisabled:o,isInvalid:u,isReadOnly:s,isRequired:p.required,variant:m},/*#__PURE__*/h.createElement(e,b({ref:t,name:n,label:i,rules:p},f)))});return i.displayName=n,i}(null!=n&&n.isControlled?q(r):j(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==n?void 0:n.hideLabel,BaseField:(null==n?void 0:n.BaseField)||O});return S[e]=a,a},P=N("text",t.Input),L=N("number",n.NumberInput,{isControlled:!0}),B=N("password",a.PasswordInput),D=N("textarea",t.Textarea),M=N("switch",t.forwardRef(function(e,r){var n=e.label,a=x(e,A);/*#__PURE__*/return h.createElement(t.Switch,b({ref:r},a),n)}),{isControlled:!0,hideLabel:!0}),U=N("select",o.Select,{isControlled:!0}),T=N("checkbox",t.forwardRef(function(e,r){var n=e.label,a=x(e,k);/*#__PURE__*/return h.createElement(t.Checkbox,b({ref:r},a),n)}),{hideLabel:!0}),_=N("radio",l.RadioInput,{isControlled:!0}),G=N("pin",i.PinInput,{isControlled:!0}),H=N("native-select",o.NativeSelect,{isControlled:!0}),z=function(e){var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},W=function(e,r){for(var t,n=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return y(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,r):void 0}}(e))){t&&(e=t);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e.tests);!(t=n()).done;){var a,l=t.value;if(null!=(a=l.OPTIONS)&&a.params[r])return l.OPTIONS.params[r]}},$=function(e){var r,t=[];for(var n in r="array"===e.type?e.innerType.fields:e.fields){var a=r[n],l={};"array"===a.type&&(l.min=W(a,"min"),l.max=W(a,"max")),t.push(b({name:n,label:a.spec.label||n,type:z(a)},l))}return t},J=["children"],K=function(e){/*#__PURE__*/return h.createElement(t.chakra.div,null,e.children)},Q=function(e){var r,n,a,l=e.children,i=x(e,J),o=b({},null!=(r=null==(n=t.useTheme().components)||null==(a=n.FormLayout)?void 0:a.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return h.createElement(t.SimpleGrid,o,h.Children.map(l,function(e){return h.isValidElement(e)?/*#__PURE__*/h.createElement(K,null,e):e}))},X=function(e,r){return h.Children.map(r,function(r){return h.isValidElement(r)&&r.props.name?h.cloneElement(r,b({},r.props,{name:e+"."+r.props.name})):r})},Y=f.createContext({name:"ArrayFieldContext"}),Z=Y[0],ee=Y[1],re=f.createContext({name:"ArrayFieldRowContext"}),te=re[0],ne=re[1],ae=function(e){var t=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,u=r.useFormContext();return b({},r.useFieldArray({control:u.control,name:t,keyName:l}),{name:t,defaultValue:a,min:i,max:o})},le=function(e){var t=e.index,n=r.useFormContext().clearErrors,a=ee(),l=a.name,i=a.remove,o=a.fields;return h.useEffect(function(){n(l)},[]),{index:t,isFirst:0===t,isLast:t===o.length-1,name:l+"."+t,remove:h.useCallback(function(){n(l),i(t)},[t])}},ie=function(){var e=ne(),r=e.isFirst,t=e.remove,n=ee(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},oe=function(){var e=ee(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},ue=["children","columns","spacing"],se=["children"],ce=["name","defaultValue","keyName","min","max","children"],de=function(e){/*#__PURE__*/return h.createElement(fe,{index:e.index},/*#__PURE__*/h.createElement(me,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/h.createElement(pe,null))},me=function(e){var r=e.children,t=e.columns,n=e.spacing,a=x(e,ue),l=ne().name;/*#__PURE__*/return h.createElement(Q,b({flex:"1",columns:t,gridGap:n,mr:"2"},a),X(l,r))},fe=function(e){var r=e.children,t=le({index:e.index});/*#__PURE__*/return h.createElement(te,{value:t},/*#__PURE__*/h.createElement(c.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},pe=function(e){/*#__PURE__*/return h.createElement(m.IconButton,b({icon:/*#__PURE__*/h.createElement(d.MinusIcon,null),"aria-label":"Remove row"},ie(),e))},ve=function(e){/*#__PURE__*/return h.createElement(m.IconButton,b({icon:/*#__PURE__*/h.createElement(d.AddIcon,null),"aria-label":"Add row",float:"right"},oe(),e))},he=function(e){var r=e.children,t=x(e,se);/*#__PURE__*/return h.createElement(xe,t,/*#__PURE__*/h.createElement(be,null,function(e){/*#__PURE__*/return h.createElement(h.Fragment,null,e.map(function(e,t){/*#__PURE__*/return h.createElement(de,{key:e.id,index:t},r)}))}),/*#__PURE__*/h.createElement(ve,null))},be=function(e){return(0,e.children)(ee().fields)},xe=function(e){var r=e.name,t=e.defaultValue,n=e.keyName,a=e.min,l=e.max,i=e.children,o=x(e,ce),u=ae({name:r,defaultValue:t,keyName:n,min:a,max:l});/*#__PURE__*/return h.createElement(Z,{value:u},/*#__PURE__*/h.createElement(O,b({name:r},o),i))},ye=["name","children","columns","spacing"],Ee=function(e){var r=e.name,t=e.children,n=e.columns,a=e.spacing,l=x(e,ye);/*#__PURE__*/return h.createElement(O,b({name:r},l),/*#__PURE__*/h.createElement(Q,{columns:n,gridGap:a},X(r,t)))},Fe=["name","type"],ge=["schema"],we=["name","type","defaultValue"],Ce=function(e,r){return $(function(e,r){return u.reach(e,r)}(e,r)).map(function(e){var r=e.name,t=e.type,n=x(e,Fe);/*#__PURE__*/return h.createElement(V,b({key:r,name:r,type:t},n))})},Ie=function(e){var r=e.schema,t=x(e,ge);/*#__PURE__*/return h.createElement(Q,t,$(r).map(function(e){var t=e.name,n=e.type,a=x(e,we);return"array"===n?/*#__PURE__*/h.createElement(he,b({name:t},a),Ce(r,t)):"object"===n?/*#__PURE__*/h.createElement(Ee,b({name:t},a),Ce(r,t)):/*#__PURE__*/h.createElement(V,b({key:t,name:t,type:n},a))}))},Re=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Ae=t.forwardRef(function(e,n){var a=e.mode,l=void 0===a?"all":a,i=e.resolver,o=e.reValidateMode,u=e.shouldFocusError,c=e.shouldUnregister,d=e.shouldUseNativeValidation,m=e.criteriaMode,f=e.delayError,p=e.schema,v=e.defaultValues,y=e.onSubmit,E=e.onError,F=e.formRef,g=e.children,w=x(e,Re),C={mode:l,resolver:i,defaultValues:v,reValidateMode:o,shouldFocusError:u,shouldUnregister:c,shouldUseNativeValidation:d,criteriaMode:m,delayError:f};p&&(C.resolver=s.yupResolver(p));var I=r.useForm(C),R=I.handleSubmit;return h.useImperativeHandle(n,function(){return I},[n,I]),/*#__PURE__*/h.createElement(r.FormProvider,I,/*#__PURE__*/h.createElement(t.chakra.form,b({ref:F,onSubmit:R(y,E)},w),g))}),ke=["children","disableIfUntouched","disableIfInvalid"],Se=c.forwardRef(function(e,t){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,i=x(e,ke),o=r.useFormContext().formState;/*#__PURE__*/return h.createElement(m.Button,b({type:"submit",isLoading:o.isSubmitting,isPrimary:!0,ref:t,isDisabled:a&&!o.isDirty||l&&!o.isValid},i),n)});Se.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1};var Oe=["schema","submitLabel"],Ve=t.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=x(e,Oe);/*#__PURE__*/return h.createElement(Ae,b({},l,{schema:t,ref:r}),/*#__PURE__*/h.createElement(Q,null,/*#__PURE__*/h.createElement(Ie,{schema:t}),a&&/*#__PURE__*/h.createElement(Se,{label:a})))});exports.ArrayField=he,exports.ArrayFieldAddButton=ve,exports.ArrayFieldContainer=xe,exports.ArrayFieldProvider=Z,exports.ArrayFieldRemoveButton=pe,exports.ArrayFieldRow=de,exports.ArrayFieldRowContainer=fe,exports.ArrayFieldRowFields=me,exports.ArrayFieldRowProvider=te,exports.ArrayFieldRows=be,exports.AutoForm=Ve,exports.BaseField=O,exports.CheckboxField=T,exports.DisplayField=function(e){var n=e.name,a=e.label,l=x(e,E),i=r.useFormContext().getValues;/*#__PURE__*/return h.createElement(t.FormControl,l,a?/*#__PURE__*/h.createElement(t.FormLabel,{htmlFor:n},a):null,/*#__PURE__*/h.createElement(t.Text,{fontSize:"md"},i(n)))},exports.DisplayIf=function(e){var t=e.children,n=e.condition;return(void 0===n?function(e){return!!e}:n)(r.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),r.useFormContext())?t:null},exports.Field=V,exports.Fields=Ie,exports.Form=Ae,exports.FormLayout=Q,exports.InputField=P,exports.NativeSelectField=H,exports.NumberInputField=L,exports.ObjectField=Ee,exports.PasswordInputFIeld=B,exports.PinField=G,exports.RadioField=_,exports.SelectField=U,exports.SubmitButton=Se,exports.SwitchField=M,exports.TextareaField=D,exports.registerFieldType=N,exports.useArrayField=ae,exports.useArrayFieldAddButton=oe,exports.useArrayFieldContext=ee,exports.useArrayFieldRemoveButton=ie,exports.useArrayFieldRow=le,exports.useArrayFieldRowContext=ne,exports.withControlledInput=q,exports.withUncontrolledInput=j,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-field.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n useFormContext,\n FormState,\n Controller,\n get,\n RegisterOptions,\n FieldValues,\n FieldPath,\n} from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n value: string\n label?: string\n [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n RegisterOptions,\n 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n | 'text'\n | 'number'\n | 'password'\n | 'textarea'\n | 'select'\n | 'native-select'\n | 'checkbox'\n | 'radio'\n | 'switch'\n | 'pin'\n | string\n\nexport interface FieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n /**\n * The field name\n */\n name: TName\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: Omit<\n RegisterOptions<TFieldValues, TName>,\n 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n >\n /**\n * Options used for selects and radio fields\n */\n options?: Option[]\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - native-select\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: FieldTypes\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\nexport const Field = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n },\n ref: React.ForwardedRef<typeof FormControl>\n ) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n) as <TFieldValues extends FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown\n } & {\n ref?: React.ForwardedRef<typeof FormControl>\n }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n name,\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n variant,\n ...inputProps\n } = props\n\n return (\n <BaseField\n name={name}\n label={label}\n hideLabel={hideLabel}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n variant={variant}\n >\n <InputComponent ref={ref} name={name} label={label} {...inputProps} />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n }\n )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n }\n )\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: React.FC<any>,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n UseFormReturn,\n FieldValues,\n SubmitHandler,\n SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n /**\n * The form schema, currently supports Yup schema only.\n */\n schema?: any\n /**\n * The submit handler.\n */\n onSubmit: SubmitHandler<TFieldValues>\n /**\n * Triggers when there are validation errors.\n */\n onError?: SubmitErrorHandler<TFieldValues>\n /**\n * Ref on the HTMLFormElement.\n */\n formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n extends UseFormProps<TFieldValues>,\n Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n mode = 'all',\n resolver,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n schema,\n defaultValues,\n onSubmit,\n onError,\n formRef,\n children,\n ...rest\n } = props\n\n const form = {\n mode,\n resolver,\n defaultValues,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n // @todo remove yup dependency and just use resolver prop?\n if (schema) {\n form.resolver = yupResolver(schema)\n }\n\n const methods = useForm<TFieldValues>(form)\n const { handleSubmit } = methods\n\n // This exposes the useForm api through the forwareded ref\n React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={formRef}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n /**\n * Disable the submit button if the form is untouched.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfUntouched`\n */\n disableIfUntouched?: boolean\n /**\n * Disable the submit button if the form is invalid.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfInvalid`\n */\n disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n (props, ref) => {\n const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n const { formState } = useFormContext()\n\n const isDisabled =\n (disableIfUntouched && !formState.isDirty) ||\n (disableIfInvalid && !formState.isValid)\n\n return (\n <Button\n type=\"submit\"\n isLoading={formState.isSubmitting}\n isPrimary\n ref={ref}\n isDisabled={isDisabled}\n {...rest}\n >\n {children}\n </Button>\n )\n }\n)\n\nSubmitButton.defaultProps = {\n label: 'Submit',\n disableIfUntouched: false,\n disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n extends Omit<FormProps<TFieldValues>, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: AutoFormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const { schema, submitLabel = 'Submit', ...rest } = props\n return (\n <Form {...rest} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: AutoFormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n","import * as React from 'react'\nimport {\n useFormContext,\n useWatch,\n FieldValues,\n UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n children: React.ReactElement\n name: string\n defaultValue?: unknown\n isDisabled?: boolean\n isExact?: boolean\n condition: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n children,\n name,\n defaultValue,\n isDisabled,\n isExact,\n condition,\n}: DisplayIfProps<TFieldValues>) => {\n const value = useWatch({\n name,\n defaultValue,\n disabled: isDisabled,\n exact: isExact,\n })\n const context = useFormContext<TFieldValues>()\n return condition(value, context) ? children : null\n}\n"],"names":["inputTypes","BaseField","props","name","label","help","variant","hideLabel","children","controlProps","error","formState","get","errors","getError","useFormContext","React","FormControl","isInvalid","FormLabel","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","withControlledInput","InputComponent","rules","inputProps","Controller","control","render","field","_ref","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","displayName","isDisabled","isReadOnly","isRequired","createField","isControlled","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","tests","test","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","schemaFields","fields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","createContext","ArrayFieldProvider","useArrayFieldContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","ArrayFieldRowContainer","ArrayFieldRowFields","columns","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","key","id","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","getValues","htmlFor","Text","fontSize","condition","useWatch","disabled","exact","isExact"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-field.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n useFormContext,\n FormState,\n Controller,\n get,\n RegisterOptions,\n FieldValues,\n FieldPath,\n} from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n value: string\n label?: string\n [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n RegisterOptions,\n 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n | 'text'\n | 'number'\n | 'password'\n | 'textarea'\n | 'select'\n | 'native-select'\n | 'checkbox'\n | 'radio'\n | 'switch'\n | 'pin'\n | string\n\nexport interface FieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n /**\n * The field name\n */\n name: TName\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: Omit<\n RegisterOptions<TFieldValues, TName>,\n 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n >\n /**\n * Options used for selects and radio fields\n */\n options?: Option[]\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - native-select\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: FieldTypes\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\nexport const Field = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n },\n ref: React.ForwardedRef<typeof FormControl>\n ) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n) as <TFieldValues extends FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown\n } & {\n ref?: React.ForwardedRef<typeof FormControl>\n }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n name,\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n rules,\n variant,\n ...inputProps\n } = props\n\n const inputRules = {\n required: isRequired,\n ...rules,\n }\n\n return (\n <BaseField\n name={name}\n label={label}\n hideLabel={hideLabel}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={inputRules.required}\n variant={variant}\n >\n <InputComponent\n ref={ref}\n name={name}\n label={label}\n rules={inputRules}\n {...inputProps}\n />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n }\n )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n }\n )\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: React.FC<any>,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n UseFormReturn,\n FieldValues,\n SubmitHandler,\n SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n /**\n * The form schema, currently supports Yup schema only.\n */\n schema?: any\n /**\n * The submit handler.\n */\n onSubmit: SubmitHandler<TFieldValues>\n /**\n * Triggers when there are validation errors.\n */\n onError?: SubmitErrorHandler<TFieldValues>\n /**\n * Ref on the HTMLFormElement.\n */\n formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n extends UseFormProps<TFieldValues>,\n Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n mode = 'all',\n resolver,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n schema,\n defaultValues,\n onSubmit,\n onError,\n formRef,\n children,\n ...rest\n } = props\n\n const form = {\n mode,\n resolver,\n defaultValues,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n // @todo remove yup dependency and just use resolver prop?\n if (schema) {\n form.resolver = yupResolver(schema)\n }\n\n const methods = useForm<TFieldValues>(form)\n const { handleSubmit } = methods\n\n // This exposes the useForm api through the forwareded ref\n React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={formRef}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n /**\n * Disable the submit button if the form is untouched.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfUntouched`\n */\n disableIfUntouched?: boolean\n /**\n * Disable the submit button if the form is invalid.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfInvalid`\n */\n disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n (props, ref) => {\n const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n const { formState } = useFormContext()\n\n const isDisabled =\n (disableIfUntouched && !formState.isDirty) ||\n (disableIfInvalid && !formState.isValid)\n\n return (\n <Button\n type=\"submit\"\n isLoading={formState.isSubmitting}\n isPrimary\n ref={ref}\n isDisabled={isDisabled}\n {...rest}\n >\n {children}\n </Button>\n )\n }\n)\n\nSubmitButton.defaultProps = {\n label: 'Submit',\n disableIfUntouched: false,\n disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n extends Omit<FormProps<TFieldValues>, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: AutoFormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const { schema, submitLabel = 'Submit', ...rest } = props\n return (\n <Form {...rest} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: AutoFormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n","import * as React from 'react'\nimport {\n useFormContext,\n useWatch,\n FieldValues,\n UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n children: React.ReactElement\n name: string\n defaultValue?: unknown\n isDisabled?: boolean\n isExact?: boolean\n condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n children,\n name,\n defaultValue,\n isDisabled,\n isExact,\n condition = (value) => !!value,\n}: DisplayIfProps<TFieldValues>) => {\n const value = useWatch({\n name,\n defaultValue,\n disabled: isDisabled,\n exact: isExact,\n })\n const context = useFormContext<TFieldValues>()\n return condition(value, context) ? children : null\n}\n"],"names":["inputTypes","BaseField","props","name","label","help","variant","hideLabel","children","controlProps","error","formState","get","errors","getError","useFormContext","React","FormControl","isInvalid","FormLabel","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","withControlledInput","InputComponent","rules","inputProps","Controller","control","render","field","_ref","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","displayName","isDisabled","isReadOnly","isRequired","inputRules","required","createField","isControlled","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","tests","test","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","schemaFields","fields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","createContext","ArrayFieldProvider","useArrayFieldContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","ArrayFieldRowContainer","ArrayFieldRowFields","columns","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","key","id","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","getValues","htmlFor","Text","fontSize","condition","useWatch","disabled","exact","isExact"],"mappings":"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"}
|
package/dist/index.modern.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
import*as e from"react";import{useFormContext as r,get as t,Controller as a,useFieldArray as l,useForm as n,FormProvider as i,useWatch as s}from"react-hook-form";import{FormControl as m,FormLabel as o,Text as c,forwardRef as u,Switch as d,Checkbox as f,Box as p,FormHelperText as h,FormErrorMessage as b,useMergeRefs as E,Input as y,Textarea as v,useTheme as x,SimpleGrid as g,chakra as V}from"@chakra-ui/react";import{NumberInput as k}from"@saas-ui/number-input";import{PasswordInput as I}from"@saas-ui/password-input";import{RadioInput as C}from"@saas-ui/radio";import{PinInput as F}from"@saas-ui/pin-input";import{Select as L,NativeSelect as N}from"@saas-ui/select";import{reach as O}from"yup";import{yupResolver as S}from"@hookform/resolvers/yup";import{chakra as w,forwardRef as R}from"@chakra-ui/system";import{MinusIcon as U,AddIcon as D}from"@chakra-ui/icons";import{IconButton as j,Button as M}from"@saas-ui/button";import{createContext as P}from"@chakra-ui/react-utils";export*from"@saas-ui/input-right-button";function $(){return $=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},$.apply(this,arguments)}function A(e,r){if(null==e)return{};var t,a,l={},n=Object.keys(e);for(a=0;a<n.length;a++)r.indexOf(t=n[a])>=0||(l[t]=e[t]);return l}const q=["name","label","placeholder"],B=t=>{let{name:a,label:l}=t,n=A(t,q);const{getValues:i}=r();/*#__PURE__*/return e.createElement(m,n,l?/*#__PURE__*/e.createElement(o,{htmlFor:a},l):null,/*#__PURE__*/e.createElement(c,{fontSize:"md"},i(a)))},T=["name","label","help","variant","hideLabel","children"],G=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","variant"],_=["name","rules"],z=["ref"],H=["name","rules"],J=["ref"],K=["label"],Q=["label"],W={},X="text",Y=a=>{const{name:l,label:n,help:i,variant:s,hideLabel:c,children:u}=a,d=A(a,T),{formState:f}=r(),E=((e,r)=>t(r.errors,e))(l,f);/*#__PURE__*/return e.createElement(m,$({variant:s},d,{isInvalid:!!E}),n&&!c?/*#__PURE__*/e.createElement(o,{variant:s},n):null,/*#__PURE__*/e.createElement(p,null,u,!i||null!=E&&E.message?null:/*#__PURE__*/e.createElement(h,null,i),(null==E?void 0:E.message)&&/*#__PURE__*/e.createElement(b,null,null==E?void 0:E.message)))},Z=u((r,t)=>{const{type:a=X}=r,l=(e=>W[e]||W[X])(a);/*#__PURE__*/return e.createElement(l,$({ref:t},r))}),ee=t=>u((l,n)=>{let{name:i,rules:s}=l,m=A(l,_);const{control:o}=r();/*#__PURE__*/return e.createElement(a,{name:i,control:o,rules:s,render:r=>{let{field:{ref:a}}=r,l=A(r.field,z);/*#__PURE__*/return e.createElement(t,$({},l,m,{ref:E(n,a)}))}})}),re=t=>u((a,l)=>{let{name:n,rules:i}=a,s=A(a,H);const{register:m}=r(),o=m(n,i),{ref:c}=o,u=A(o,J);/*#__PURE__*/return e.createElement(t,$({},u,s,{ref:E(l,c)}))}),te=(r,t,a)=>{let l;l=null!=a&&a.isControlled?ee(t):re(t);const n=((r,{displayName:t,hideLabel:a,BaseField:l})=>{const n=u((t,n)=>{const{name:i,label:s,isDisabled:m,isInvalid:o,isReadOnly:c,isRequired:u,variant:d}=t,f=A(t,G);/*#__PURE__*/return e.createElement(l,{name:i,label:s,hideLabel:a,isDisabled:m,isInvalid:o,isReadOnly:c,isRequired:u,variant:d},/*#__PURE__*/e.createElement(r,$({ref:n,name:i,label:s},f)))});return n.displayName=t,n})(l,{displayName:`${r.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join("")}Field`,hideLabel:null==a?void 0:a.hideLabel,BaseField:(null==a?void 0:a.BaseField)||Y});return W[r]=n,n},ae=te("text",y),le=te("number",k,{isControlled:!0}),ne=te("password",I),ie=te("textarea",v),se=te("switch",u((r,t)=>{let{label:a}=r,l=A(r,K);/*#__PURE__*/return e.createElement(d,$({ref:t},l),a)}),{isControlled:!0,hideLabel:!0}),me=te("select",L,{isControlled:!0}),oe=te("checkbox",u((r,t)=>{let{label:a}=r,l=A(r,Q);/*#__PURE__*/return e.createElement(f,$({ref:t},l),a)}),{hideLabel:!0}),ce=te("radio",C,{isControlled:!0}),ue=te("pin",F,{isControlled:!0}),de=te("native-select",N,{isControlled:!0}),fe=e=>{var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},pe=(e,r)=>{for(const a of e.tests){var t;if(null!=(t=a.OPTIONS)&&t.params[r])return a.OPTIONS.params[r]}},he=e=>{const r=[];let t={};t="array"===e.type?e.innerType.fields:e.fields;for(const e in t){const a=t[e],l={};"array"===a.type&&(l.min=pe(a,"min"),l.max=pe(a,"max")),r.push($({name:e,label:a.spec.label||e,type:fe(a)},l))}return r},be=["children"],Ee=({children:r})=>/*#__PURE__*/e.createElement(V.div,null,r),ye=r=>{var t,a,l;let{children:n}=r,i=A(r,be);const s=$({},null!=(t=null==(a=x().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},i);/*#__PURE__*/return e.createElement(g,s,e.Children.map(n,r=>e.isValidElement(r)?/*#__PURE__*/e.createElement(Ee,null,r):r))},ve=(r,t)=>e.Children.map(t,t=>e.isValidElement(t)&&t.props.name?e.cloneElement(t,$({},t.props,{name:`${r}.${t.props.name}`})):t),[xe,ge]=P({name:"ArrayFieldContext"}),[Ve,ke]=P({name:"ArrayFieldRowContext"}),Ie=({name:e,defaultValue:t={},keyName:a,min:n,max:i})=>{const{control:s}=r();return $({},l({control:s,name:e,keyName:a}),{name:e,defaultValue:t,min:n,max:i})},Ce=({index:t})=>{const{clearErrors:a}=r(),{name:l,remove:n,fields:i}=ge();return e.useEffect(()=>{a(l)},[]),{index:t,isFirst:0===t,isLast:t===i.length-1,name:`${l}.${t}`,remove:e.useCallback(()=>{a(l),n(t)},[t])}},Fe=()=>{const{isFirst:e,remove:r}=ke(),{min:t,fields:a}=ge();return{onClick:()=>r(),isDisabled:e&&!!(t&&a.length<=t)}},Le=()=>{const{append:e,defaultValue:r,max:t,fields:a}=ge();return{onClick:()=>e(r,{shouldFocus:!1}),isDisabled:!!(t&&a.length>=t)}},Ne=["children","columns","spacing"],Oe=["children"],Se=["name","defaultValue","keyName","min","max","children"],we=({children:r,columns:t,spacing:a,index:l})=>/*#__PURE__*/e.createElement(Ue,{index:l},/*#__PURE__*/e.createElement(Re,{columns:t,spacing:a},r),/*#__PURE__*/e.createElement(De,null)),Re=r=>{let{children:t,columns:a,spacing:l}=r,n=A(r,Ne);const{name:i}=ke();/*#__PURE__*/return e.createElement(ye,$({flex:"1",columns:a,gridGap:l,mr:"2"},n),ve(i,t))},Ue=({children:r,index:t})=>{const a=Ce({index:t});/*#__PURE__*/return e.createElement(Ve,{value:a},/*#__PURE__*/e.createElement(w.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},De=r=>/*#__PURE__*/e.createElement(j,$({icon:/*#__PURE__*/e.createElement(U,null),"aria-label":"Remove row"},Fe(),r)),je=r=>/*#__PURE__*/e.createElement(j,$({icon:/*#__PURE__*/e.createElement(D,null),"aria-label":"Add row",float:"right"},Le(),r)),Me=r=>{const{children:t}=r,a=A(r,Oe);/*#__PURE__*/return e.createElement($e,a,/*#__PURE__*/e.createElement(Pe,null,r=>/*#__PURE__*/e.createElement(e.Fragment,null,r.map(({id:r},a)=>/*#__PURE__*/e.createElement(we,{key:r,index:a},t)))),/*#__PURE__*/e.createElement(je,null))},Pe=({children:e})=>{const{fields:r}=ge();return e(r)},$e=r=>{let{name:t,defaultValue:a,keyName:l,min:n,max:i,children:s}=r,m=A(r,Se);const o=Ie({name:t,defaultValue:a,keyName:l,min:n,max:i});/*#__PURE__*/return e.createElement(xe,{value:o},/*#__PURE__*/e.createElement(Y,$({name:t},m),s))},Ae=["name","children","columns","spacing"],qe=r=>{const{name:t,children:a,columns:l,spacing:n}=r,i=A(r,Ae);/*#__PURE__*/return e.createElement(Y,$({name:t},i),/*#__PURE__*/e.createElement(ye,{columns:l,gridGap:n},ve(t,a)))},Be=["name","type"],Te=["schema"],Ge=["name","type","defaultValue"],_e=(r,t)=>he(((e,r)=>O(e,r))(r,t)).map(r=>{let{name:t,type:a}=r,l=A(r,Be);/*#__PURE__*/return e.createElement(Z,$({key:t,name:t,type:a},l))}),ze=r=>{let{schema:t}=r,a=A(r,Te);/*#__PURE__*/return e.createElement(ye,a,he(t).map(r=>{let{name:a,type:l}=r,n=A(r,Ge);return"array"===l?/*#__PURE__*/e.createElement(Me,$({name:a},n),_e(t,a)):"object"===l?/*#__PURE__*/e.createElement(qe,$({name:a},n),_e(t,a)):/*#__PURE__*/e.createElement(Z,$({key:a,name:a,type:l},n))}))},He=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Je=u((r,t)=>{const{mode:a="all",resolver:l,reValidateMode:s,shouldFocusError:m,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d,schema:f,defaultValues:p,onSubmit:h,onError:b,formRef:E,children:y}=r,v=A(r,He),x={mode:a,resolver:l,defaultValues:p,reValidateMode:s,shouldFocusError:m,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d};f&&(x.resolver=S(f));const g=n(x),{handleSubmit:k}=g;return e.useImperativeHandle(t,()=>g,[t,g]),/*#__PURE__*/e.createElement(i,g,/*#__PURE__*/e.createElement(V.form,$({ref:E,onSubmit:k(h,b)},v),y))}),Ke=["children","disableIfUntouched","disableIfInvalid"],Qe=R((t,a)=>{const{children:l,disableIfUntouched:n,disableIfInvalid:i}=t,s=A(t,Ke),{formState:m}=r();/*#__PURE__*/return e.createElement(M,$({type:"submit",isLoading:m.isSubmitting,isPrimary:!0,ref:a,isDisabled:n&&!m.isDirty||i&&!m.isValid},s),l)});Qe.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1};const We=["schema","submitLabel"],Xe=u((r,t)=>{const{schema:a,submitLabel:l="Submit"}=r,n=A(r,We);/*#__PURE__*/return e.createElement(Je,$({},n,{schema:a,ref:t}),/*#__PURE__*/e.createElement(ye,null,/*#__PURE__*/e.createElement(ze,{schema:a}),l&&/*#__PURE__*/e.createElement(Qe,{label:l})))}),Ye=({children:e,name:t,defaultValue:a,isDisabled:l,isExact:n,condition:i})=>i(s({name:t,defaultValue:a,disabled:l,exact:n}),r())?e:null;export{Me as ArrayField,je as ArrayFieldAddButton,$e as ArrayFieldContainer,xe as ArrayFieldProvider,De as ArrayFieldRemoveButton,we as ArrayFieldRow,Ue as ArrayFieldRowContainer,Re as ArrayFieldRowFields,Ve as ArrayFieldRowProvider,Pe as ArrayFieldRows,Xe as AutoForm,Y as BaseField,oe as CheckboxField,B as DisplayField,Ye as DisplayIf,Z as Field,ze as Fields,Je as Form,ye as FormLayout,ae as InputField,de as NativeSelectField,le as NumberInputField,qe as ObjectField,ne as PasswordInputFIeld,ue as PinField,ce as RadioField,me as SelectField,Qe as SubmitButton,se as SwitchField,ie as TextareaField,te as registerFieldType,Ie as useArrayField,Le as useArrayFieldAddButton,ge as useArrayFieldContext,Fe as useArrayFieldRemoveButton,Ce as useArrayFieldRow,ke as useArrayFieldRowContext,ee as withControlledInput,re as withUncontrolledInput};
|
1
|
+
import*as e from"react";import{useFormContext as r,get as t,Controller as a,useFieldArray as l,useForm as n,FormProvider as i,useWatch as s}from"react-hook-form";import{FormControl as m,FormLabel as o,Text as c,forwardRef as u,Switch as d,Checkbox as f,Box as p,FormHelperText as h,FormErrorMessage as b,useMergeRefs as E,Input as y,Textarea as v,useTheme as x,SimpleGrid as g,chakra as V}from"@chakra-ui/react";import{NumberInput as k}from"@saas-ui/number-input";import{PasswordInput as I}from"@saas-ui/password-input";import{RadioInput as C}from"@saas-ui/radio";import{PinInput as F}from"@saas-ui/pin-input";import{Select as L,NativeSelect as N}from"@saas-ui/select";import{reach as O}from"yup";import{yupResolver as S}from"@hookform/resolvers/yup";import{chakra as w,forwardRef as R}from"@chakra-ui/system";import{MinusIcon as U,AddIcon as D}from"@chakra-ui/icons";import{IconButton as j,Button as M}from"@saas-ui/button";import{createContext as P}from"@chakra-ui/react-utils";export*from"@saas-ui/input-right-button";function q(){return q=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},q.apply(this,arguments)}function $(e,r){if(null==e)return{};var t,a,l={},n=Object.keys(e);for(a=0;a<n.length;a++)r.indexOf(t=n[a])>=0||(l[t]=e[t]);return l}const A=["name","label","placeholder"],B=t=>{let{name:a,label:l}=t,n=$(t,A);const{getValues:i}=r();/*#__PURE__*/return e.createElement(m,n,l?/*#__PURE__*/e.createElement(o,{htmlFor:a},l):null,/*#__PURE__*/e.createElement(c,{fontSize:"md"},i(a)))},T=["name","label","help","variant","hideLabel","children"],G=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","rules","variant"],_=["name","rules"],z=["ref"],H=["name","rules"],J=["ref"],K=["label"],Q=["label"],W={},X="text",Y=a=>{const{name:l,label:n,help:i,variant:s,hideLabel:c,children:u}=a,d=$(a,T),{formState:f}=r(),E=((e,r)=>t(r.errors,e))(l,f);/*#__PURE__*/return e.createElement(m,q({variant:s},d,{isInvalid:!!E}),n&&!c?/*#__PURE__*/e.createElement(o,{variant:s},n):null,/*#__PURE__*/e.createElement(p,null,u,!i||null!=E&&E.message?null:/*#__PURE__*/e.createElement(h,null,i),(null==E?void 0:E.message)&&/*#__PURE__*/e.createElement(b,null,null==E?void 0:E.message)))},Z=u((r,t)=>{const{type:a=X}=r,l=(e=>W[e]||W[X])(a);/*#__PURE__*/return e.createElement(l,q({ref:t},r))}),ee=t=>u((l,n)=>{let{name:i,rules:s}=l,m=$(l,_);const{control:o}=r();/*#__PURE__*/return e.createElement(a,{name:i,control:o,rules:s,render:r=>{let{field:{ref:a}}=r,l=$(r.field,z);/*#__PURE__*/return e.createElement(t,q({},l,m,{ref:E(n,a)}))}})}),re=t=>u((a,l)=>{let{name:n,rules:i}=a,s=$(a,H);const{register:m}=r(),o=m(n,i),{ref:c}=o,u=$(o,J);/*#__PURE__*/return e.createElement(t,q({},u,s,{ref:E(l,c)}))}),te=(r,t,a)=>{let l;l=null!=a&&a.isControlled?ee(t):re(t);const n=((r,{displayName:t,hideLabel:a,BaseField:l})=>{const n=u((t,n)=>{const{name:i,label:s,isDisabled:m,isInvalid:o,isReadOnly:c,isRequired:u,rules:d,variant:f}=t,p=$(t,G),h=q({required:u},d);/*#__PURE__*/return e.createElement(l,{name:i,label:s,hideLabel:a,isDisabled:m,isInvalid:o,isReadOnly:c,isRequired:h.required,variant:f},/*#__PURE__*/e.createElement(r,q({ref:n,name:i,label:s,rules:h},p)))});return n.displayName=t,n})(l,{displayName:`${r.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join("")}Field`,hideLabel:null==a?void 0:a.hideLabel,BaseField:(null==a?void 0:a.BaseField)||Y});return W[r]=n,n},ae=te("text",y),le=te("number",k,{isControlled:!0}),ne=te("password",I),ie=te("textarea",v),se=te("switch",u((r,t)=>{let{label:a}=r,l=$(r,K);/*#__PURE__*/return e.createElement(d,q({ref:t},l),a)}),{isControlled:!0,hideLabel:!0}),me=te("select",L,{isControlled:!0}),oe=te("checkbox",u((r,t)=>{let{label:a}=r,l=$(r,Q);/*#__PURE__*/return e.createElement(f,q({ref:t},l),a)}),{hideLabel:!0}),ce=te("radio",C,{isControlled:!0}),ue=te("pin",F,{isControlled:!0}),de=te("native-select",N,{isControlled:!0}),fe=e=>{var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},pe=(e,r)=>{for(const a of e.tests){var t;if(null!=(t=a.OPTIONS)&&t.params[r])return a.OPTIONS.params[r]}},he=e=>{const r=[];let t={};t="array"===e.type?e.innerType.fields:e.fields;for(const e in t){const a=t[e],l={};"array"===a.type&&(l.min=pe(a,"min"),l.max=pe(a,"max")),r.push(q({name:e,label:a.spec.label||e,type:fe(a)},l))}return r},be=["children"],Ee=({children:r})=>/*#__PURE__*/e.createElement(V.div,null,r),ye=r=>{var t,a,l;let{children:n}=r,i=$(r,be);const s=q({},null!=(t=null==(a=x().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},i);/*#__PURE__*/return e.createElement(g,s,e.Children.map(n,r=>e.isValidElement(r)?/*#__PURE__*/e.createElement(Ee,null,r):r))},ve=(r,t)=>e.Children.map(t,t=>e.isValidElement(t)&&t.props.name?e.cloneElement(t,q({},t.props,{name:`${r}.${t.props.name}`})):t),[xe,ge]=P({name:"ArrayFieldContext"}),[Ve,ke]=P({name:"ArrayFieldRowContext"}),Ie=({name:e,defaultValue:t={},keyName:a,min:n,max:i})=>{const{control:s}=r();return q({},l({control:s,name:e,keyName:a}),{name:e,defaultValue:t,min:n,max:i})},Ce=({index:t})=>{const{clearErrors:a}=r(),{name:l,remove:n,fields:i}=ge();return e.useEffect(()=>{a(l)},[]),{index:t,isFirst:0===t,isLast:t===i.length-1,name:`${l}.${t}`,remove:e.useCallback(()=>{a(l),n(t)},[t])}},Fe=()=>{const{isFirst:e,remove:r}=ke(),{min:t,fields:a}=ge();return{onClick:()=>r(),isDisabled:e&&!!(t&&a.length<=t)}},Le=()=>{const{append:e,defaultValue:r,max:t,fields:a}=ge();return{onClick:()=>e(r,{shouldFocus:!1}),isDisabled:!!(t&&a.length>=t)}},Ne=["children","columns","spacing"],Oe=["children"],Se=["name","defaultValue","keyName","min","max","children"],we=({children:r,columns:t,spacing:a,index:l})=>/*#__PURE__*/e.createElement(Ue,{index:l},/*#__PURE__*/e.createElement(Re,{columns:t,spacing:a},r),/*#__PURE__*/e.createElement(De,null)),Re=r=>{let{children:t,columns:a,spacing:l}=r,n=$(r,Ne);const{name:i}=ke();/*#__PURE__*/return e.createElement(ye,q({flex:"1",columns:a,gridGap:l,mr:"2"},n),ve(i,t))},Ue=({children:r,index:t})=>{const a=Ce({index:t});/*#__PURE__*/return e.createElement(Ve,{value:a},/*#__PURE__*/e.createElement(w.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},De=r=>/*#__PURE__*/e.createElement(j,q({icon:/*#__PURE__*/e.createElement(U,null),"aria-label":"Remove row"},Fe(),r)),je=r=>/*#__PURE__*/e.createElement(j,q({icon:/*#__PURE__*/e.createElement(D,null),"aria-label":"Add row",float:"right"},Le(),r)),Me=r=>{const{children:t}=r,a=$(r,Oe);/*#__PURE__*/return e.createElement(qe,a,/*#__PURE__*/e.createElement(Pe,null,r=>/*#__PURE__*/e.createElement(e.Fragment,null,r.map(({id:r},a)=>/*#__PURE__*/e.createElement(we,{key:r,index:a},t)))),/*#__PURE__*/e.createElement(je,null))},Pe=({children:e})=>{const{fields:r}=ge();return e(r)},qe=r=>{let{name:t,defaultValue:a,keyName:l,min:n,max:i,children:s}=r,m=$(r,Se);const o=Ie({name:t,defaultValue:a,keyName:l,min:n,max:i});/*#__PURE__*/return e.createElement(xe,{value:o},/*#__PURE__*/e.createElement(Y,q({name:t},m),s))},$e=["name","children","columns","spacing"],Ae=r=>{const{name:t,children:a,columns:l,spacing:n}=r,i=$(r,$e);/*#__PURE__*/return e.createElement(Y,q({name:t},i),/*#__PURE__*/e.createElement(ye,{columns:l,gridGap:n},ve(t,a)))},Be=["name","type"],Te=["schema"],Ge=["name","type","defaultValue"],_e=(r,t)=>he(((e,r)=>O(e,r))(r,t)).map(r=>{let{name:t,type:a}=r,l=$(r,Be);/*#__PURE__*/return e.createElement(Z,q({key:t,name:t,type:a},l))}),ze=r=>{let{schema:t}=r,a=$(r,Te);/*#__PURE__*/return e.createElement(ye,a,he(t).map(r=>{let{name:a,type:l}=r,n=$(r,Ge);return"array"===l?/*#__PURE__*/e.createElement(Me,q({name:a},n),_e(t,a)):"object"===l?/*#__PURE__*/e.createElement(Ae,q({name:a},n),_e(t,a)):/*#__PURE__*/e.createElement(Z,q({key:a,name:a,type:l},n))}))},He=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Je=u((r,t)=>{const{mode:a="all",resolver:l,reValidateMode:s,shouldFocusError:m,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d,schema:f,defaultValues:p,onSubmit:h,onError:b,formRef:E,children:y}=r,v=$(r,He),x={mode:a,resolver:l,defaultValues:p,reValidateMode:s,shouldFocusError:m,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d};f&&(x.resolver=S(f));const g=n(x),{handleSubmit:k}=g;return e.useImperativeHandle(t,()=>g,[t,g]),/*#__PURE__*/e.createElement(i,g,/*#__PURE__*/e.createElement(V.form,q({ref:E,onSubmit:k(h,b)},v),y))}),Ke=["children","disableIfUntouched","disableIfInvalid"],Qe=R((t,a)=>{const{children:l,disableIfUntouched:n,disableIfInvalid:i}=t,s=$(t,Ke),{formState:m}=r();/*#__PURE__*/return e.createElement(M,q({type:"submit",isLoading:m.isSubmitting,isPrimary:!0,ref:a,isDisabled:n&&!m.isDirty||i&&!m.isValid},s),l)});Qe.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1};const We=["schema","submitLabel"],Xe=u((r,t)=>{const{schema:a,submitLabel:l="Submit"}=r,n=$(r,We);/*#__PURE__*/return e.createElement(Je,q({},n,{schema:a,ref:t}),/*#__PURE__*/e.createElement(ye,null,/*#__PURE__*/e.createElement(ze,{schema:a}),l&&/*#__PURE__*/e.createElement(Qe,{label:l})))}),Ye=({children:e,name:t,defaultValue:a,isDisabled:l,isExact:n,condition:i=(e=>!!e)})=>i(s({name:t,defaultValue:a,disabled:l,exact:n}),r())?e:null;export{Me as ArrayField,je as ArrayFieldAddButton,qe as ArrayFieldContainer,xe as ArrayFieldProvider,De as ArrayFieldRemoveButton,we as ArrayFieldRow,Ue as ArrayFieldRowContainer,Re as ArrayFieldRowFields,Ve as ArrayFieldRowProvider,Pe as ArrayFieldRows,Xe as AutoForm,Y as BaseField,oe as CheckboxField,B as DisplayField,Ye as DisplayIf,Z as Field,ze as Fields,Je as Form,ye as FormLayout,ae as InputField,de as NativeSelectField,le as NumberInputField,Ae as ObjectField,ne as PasswordInputFIeld,ue as PinField,ce as RadioField,me as SelectField,Qe as SubmitButton,se as SwitchField,ie as TextareaField,te as registerFieldType,Ie as useArrayField,Le as useArrayFieldAddButton,ge as useArrayFieldContext,Fe as useArrayFieldRemoveButton,Ce as useArrayFieldRow,ke as useArrayFieldRowContext,ee as withControlledInput,re as withUncontrolledInput};
|
2
2
|
//# sourceMappingURL=index.modern.js.map
|
package/dist/index.modern.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n","import * as React from 'react'\nimport {\n useFormContext,\n FormState,\n Controller,\n get,\n RegisterOptions,\n FieldValues,\n FieldPath,\n} from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n value: string\n label?: string\n [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n RegisterOptions,\n 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n | 'text'\n | 'number'\n | 'password'\n | 'textarea'\n | 'select'\n | 'native-select'\n | 'checkbox'\n | 'radio'\n | 'switch'\n | 'pin'\n | string\n\nexport interface FieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n /**\n * The field name\n */\n name: TName\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: Omit<\n RegisterOptions<TFieldValues, TName>,\n 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n >\n /**\n * Options used for selects and radio fields\n */\n options?: Option[]\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - native-select\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: FieldTypes\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\nexport const Field = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n },\n ref: React.ForwardedRef<typeof FormControl>\n ) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n) as <TFieldValues extends FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown\n } & {\n ref?: React.ForwardedRef<typeof FormControl>\n }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n name,\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n variant,\n ...inputProps\n } = props\n\n return (\n <BaseField\n name={name}\n label={label}\n hideLabel={hideLabel}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n variant={variant}\n >\n <InputComponent ref={ref} name={name} label={label} {...inputProps} />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n }\n )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n }\n )\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: React.FC<any>,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n UseFormReturn,\n FieldValues,\n SubmitHandler,\n SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n /**\n * The form schema, currently supports Yup schema only.\n */\n schema?: any\n /**\n * The submit handler.\n */\n onSubmit: SubmitHandler<TFieldValues>\n /**\n * Triggers when there are validation errors.\n */\n onError?: SubmitErrorHandler<TFieldValues>\n /**\n * Ref on the HTMLFormElement.\n */\n formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n extends UseFormProps<TFieldValues>,\n Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n mode = 'all',\n resolver,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n schema,\n defaultValues,\n onSubmit,\n onError,\n formRef,\n children,\n ...rest\n } = props\n\n const form = {\n mode,\n resolver,\n defaultValues,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n // @todo remove yup dependency and just use resolver prop?\n if (schema) {\n form.resolver = yupResolver(schema)\n }\n\n const methods = useForm<TFieldValues>(form)\n const { handleSubmit } = methods\n\n // This exposes the useForm api through the forwareded ref\n React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={formRef}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n /**\n * Disable the submit button if the form is untouched.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfUntouched`\n */\n disableIfUntouched?: boolean\n /**\n * Disable the submit button if the form is invalid.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfInvalid`\n */\n disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n (props, ref) => {\n const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n const { formState } = useFormContext()\n\n const isDisabled =\n (disableIfUntouched && !formState.isDirty) ||\n (disableIfInvalid && !formState.isValid)\n\n return (\n <Button\n type=\"submit\"\n isLoading={formState.isSubmitting}\n isPrimary\n ref={ref}\n isDisabled={isDisabled}\n {...rest}\n >\n {children}\n </Button>\n )\n }\n)\n\nSubmitButton.defaultProps = {\n label: 'Submit',\n disableIfUntouched: false,\n disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n extends Omit<FormProps<TFieldValues>, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: AutoFormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const { schema, submitLabel = 'Submit', ...rest } = props\n return (\n <Form {...rest} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: AutoFormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\nimport {\n useFormContext,\n useWatch,\n FieldValues,\n UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n children: React.ReactElement\n name: string\n defaultValue?: unknown\n isDisabled?: boolean\n isExact?: boolean\n condition: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n children,\n name,\n defaultValue,\n isDisabled,\n isExact,\n condition,\n}: DisplayIfProps<TFieldValues>) => {\n const value = useWatch({\n name,\n defaultValue,\n disabled: isDisabled,\n exact: isExact,\n })\n const context = useFormContext<TFieldValues>()\n return condition(value, context) ? children : null\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","DisplayIf","isExact","condition","useWatch","disabled","exact"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n","import * as React from 'react'\nimport {\n useFormContext,\n FormState,\n Controller,\n get,\n RegisterOptions,\n FieldValues,\n FieldPath,\n} from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n value: string\n label?: string\n [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n RegisterOptions,\n 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n | 'text'\n | 'number'\n | 'password'\n | 'textarea'\n | 'select'\n | 'native-select'\n | 'checkbox'\n | 'radio'\n | 'switch'\n | 'pin'\n | string\n\nexport interface FieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n /**\n * The field name\n */\n name: TName\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: Omit<\n RegisterOptions<TFieldValues, TName>,\n 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n >\n /**\n * Options used for selects and radio fields\n */\n options?: Option[]\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - native-select\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: FieldTypes\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\nexport const Field = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n },\n ref: React.ForwardedRef<typeof FormControl>\n ) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n) as <TFieldValues extends FieldValues>(\n props: FieldProps<TFieldValues> & {\n [key: string]: unknown\n } & {\n ref?: React.ForwardedRef<typeof FormControl>\n }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n name,\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n rules,\n variant,\n ...inputProps\n } = props\n\n const inputRules = {\n required: isRequired,\n ...rules,\n }\n\n return (\n <BaseField\n name={name}\n label={label}\n hideLabel={hideLabel}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={inputRules.required}\n variant={variant}\n >\n <InputComponent\n ref={ref}\n name={name}\n label={label}\n rules={inputRules}\n {...inputProps}\n />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n }\n )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef<FieldProps, typeof InputComponent>(\n ({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n }\n )\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: React.FC<any>,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n UseFormReturn,\n FieldValues,\n SubmitHandler,\n SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n /**\n * The form schema, currently supports Yup schema only.\n */\n schema?: any\n /**\n * The submit handler.\n */\n onSubmit: SubmitHandler<TFieldValues>\n /**\n * Triggers when there are validation errors.\n */\n onError?: SubmitErrorHandler<TFieldValues>\n /**\n * Ref on the HTMLFormElement.\n */\n formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n extends UseFormProps<TFieldValues>,\n Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: FormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const {\n mode = 'all',\n resolver,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n schema,\n defaultValues,\n onSubmit,\n onError,\n formRef,\n children,\n ...rest\n } = props\n\n const form = {\n mode,\n resolver,\n defaultValues,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n }\n\n // @todo remove yup dependency and just use resolver prop?\n if (schema) {\n form.resolver = yupResolver(schema)\n }\n\n const methods = useForm<TFieldValues>(form)\n const { handleSubmit } = methods\n\n // This exposes the useForm api through the forwareded ref\n React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={formRef}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: FormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n /**\n * Disable the submit button if the form is untouched.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfUntouched`\n */\n disableIfUntouched?: boolean\n /**\n * Disable the submit button if the form is invalid.\n *\n * Change the default behavior by updating\n * `SubmitButton.defaultProps.disableIfInvalid`\n */\n disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n (props, ref) => {\n const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n const { formState } = useFormContext()\n\n const isDisabled =\n (disableIfUntouched && !formState.isDirty) ||\n (disableIfInvalid && !formState.isValid)\n\n return (\n <Button\n type=\"submit\"\n isLoading={formState.isSubmitting}\n isPrimary\n ref={ref}\n isDisabled={isDisabled}\n {...rest}\n >\n {children}\n </Button>\n )\n }\n)\n\nSubmitButton.defaultProps = {\n label: 'Submit',\n disableIfUntouched: false,\n disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n extends Omit<FormProps<TFieldValues>, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n <TFieldValues extends FieldValues = FieldValues>(\n props: AutoFormProps<TFieldValues>,\n ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n ) => {\n const { schema, submitLabel = 'Submit', ...rest } = props\n return (\n <Form {...rest} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n) as <TFieldValues extends FieldValues>(\n props: AutoFormProps<TFieldValues> & {\n ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n }\n) => React.ReactElement\n","import * as React from 'react'\nimport {\n useFormContext,\n useWatch,\n FieldValues,\n UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n children: React.ReactElement\n name: string\n defaultValue?: unknown\n isDisabled?: boolean\n isExact?: boolean\n condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n children,\n name,\n defaultValue,\n isDisabled,\n isExact,\n condition = (value) => !!value,\n}: DisplayIfProps<TFieldValues>) => {\n const value = useWatch({\n name,\n defaultValue,\n disabled: isDisabled,\n exact: isExact,\n })\n const context = useFormContext<TFieldValues>()\n return condition(value, context) ? children : null\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","inputRules","required","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","DisplayIf","isExact","condition","useWatch","disabled","exact"],"mappings":"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"}
|
package/package.json
CHANGED
package/src/display-if.tsx
CHANGED
@@ -12,7 +12,7 @@ export interface DisplayIfProps<TFieldValues> {
|
|
12
12
|
defaultValue?: unknown
|
13
13
|
isDisabled?: boolean
|
14
14
|
isExact?: boolean
|
15
|
-
condition
|
15
|
+
condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean
|
16
16
|
}
|
17
17
|
|
18
18
|
export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
|
@@ -21,7 +21,7 @@ export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
|
|
21
21
|
defaultValue,
|
22
22
|
isDisabled,
|
23
23
|
isExact,
|
24
|
-
condition,
|
24
|
+
condition = (value) => !!value,
|
25
25
|
}: DisplayIfProps<TFieldValues>) => {
|
26
26
|
const value = useWatch({
|
27
27
|
name,
|
package/src/field.tsx
CHANGED
@@ -191,10 +191,16 @@ const createField = (
|
|
191
191
|
isInvalid,
|
192
192
|
isReadOnly,
|
193
193
|
isRequired,
|
194
|
+
rules,
|
194
195
|
variant,
|
195
196
|
...inputProps
|
196
197
|
} = props
|
197
198
|
|
199
|
+
const inputRules = {
|
200
|
+
required: isRequired,
|
201
|
+
...rules,
|
202
|
+
}
|
203
|
+
|
198
204
|
return (
|
199
205
|
<BaseField
|
200
206
|
name={name}
|
@@ -203,10 +209,16 @@ const createField = (
|
|
203
209
|
isDisabled={isDisabled}
|
204
210
|
isInvalid={isInvalid}
|
205
211
|
isReadOnly={isReadOnly}
|
206
|
-
isRequired={
|
212
|
+
isRequired={inputRules.required}
|
207
213
|
variant={variant}
|
208
214
|
>
|
209
|
-
<InputComponent
|
215
|
+
<InputComponent
|
216
|
+
ref={ref}
|
217
|
+
name={name}
|
218
|
+
label={label}
|
219
|
+
rules={inputRules}
|
220
|
+
{...inputProps}
|
221
|
+
/>
|
210
222
|
</BaseField>
|
211
223
|
)
|
212
224
|
})
|