@saas-ui/forms 1.5.2 → 2.0.0-next.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +15 -0
- package/dist/ajv/index.d.ts +21 -2
- package/dist/ajv/index.js +31 -2
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs +25 -0
- package/dist/ajv/index.mjs.map +1 -0
- package/dist/index.d.ts +606 -19
- package/dist/index.js +1251 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1140 -0
- package/dist/index.mjs.map +1 -0
- package/dist/yup/index.d.ts +41 -2
- package/dist/yup/index.js +95 -2
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +86 -0
- package/dist/yup/index.mjs.map +1 -0
- package/dist/zod/index.d.ts +38 -2
- package/dist/zod/index.js +95 -2
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +85 -0
- package/dist/zod/index.mjs.map +1 -0
- package/package.json +18 -28
- package/src/array-field.tsx +20 -13
- package/src/auto-form.tsx +13 -19
- package/src/field-resolver.ts +1 -1
- package/src/field.tsx +4 -9
- package/src/fields.tsx +1 -3
- package/src/form.tsx +70 -26
- package/src/index.ts +3 -1
- package/src/input-right-button/index.ts +1 -0
- package/src/input-right-button/input-right-button.stories.tsx +47 -0
- package/src/input-right-button/input-right-button.test.tsx +12 -0
- package/src/input-right-button/input-right-button.tsx +26 -0
- package/src/layout.tsx +1 -1
- package/src/number-input/index.ts +1 -0
- package/src/number-input/number-input.stories.tsx +39 -0
- package/src/number-input/number-input.test.tsx +6 -0
- package/src/number-input/number-input.tsx +56 -0
- package/src/object-field.tsx +1 -1
- package/src/password-input/index.ts +1 -0
- package/src/password-input/password-input.stories.tsx +50 -0
- package/src/password-input/password-input.test.tsx +20 -0
- package/src/password-input/password-input.tsx +69 -0
- package/src/pin-input/index.ts +1 -0
- package/src/pin-input/pin-input.stories.tsx +38 -0
- package/src/pin-input/pin-input.test.tsx +6 -0
- package/src/pin-input/pin-input.tsx +50 -0
- package/src/radio/index.ts +1 -0
- package/src/radio/radio-input.stories.tsx +45 -0
- package/src/radio/radio-input.tsx +58 -0
- package/src/radio/radio.test.tsx +6 -0
- package/src/select/index.ts +2 -0
- package/src/select/native-select.tsx +42 -0
- package/src/select/select.stories.tsx +144 -0
- package/src/select/select.test.tsx +8 -0
- package/src/select/select.tsx +185 -0
- package/src/step-form.tsx +24 -13
- package/src/submit-button.tsx +32 -38
- package/src/use-step-form.tsx +1 -1
- package/ajv/package.json +0 -28
- package/dist/ajv/ajv-resolver.d.ts +0 -11
- package/dist/ajv/ajv-resolver.d.ts.map +0 -1
- package/dist/ajv/index.d.ts.map +0 -1
- package/dist/ajv/index.modern.mjs +0 -2
- package/dist/ajv/index.modern.mjs.map +0 -1
- package/dist/array-field.d.ts +0 -64
- package/dist/array-field.d.ts.map +0 -1
- package/dist/auto-form.d.ts +0 -32
- package/dist/auto-form.d.ts.map +0 -1
- package/dist/display-field.d.ts +0 -10
- package/dist/display-field.d.ts.map +0 -1
- package/dist/display-if.d.ts +0 -15
- package/dist/display-if.d.ts.map +0 -1
- package/dist/field-resolver.d.ts +0 -13
- package/dist/field-resolver.d.ts.map +0 -1
- package/dist/field.d.ts +0 -147
- package/dist/field.d.ts.map +0 -1
- package/dist/fields.d.ts +0 -9
- package/dist/fields.d.ts.map +0 -1
- package/dist/form.d.ts +0 -44
- package/dist/form.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.modern.mjs +0 -2
- package/dist/index.modern.mjs.map +0 -1
- package/dist/layout.d.ts +0 -14
- package/dist/layout.d.ts.map +0 -1
- package/dist/object-field.d.ts +0 -12
- package/dist/object-field.d.ts.map +0 -1
- package/dist/step-form.d.ts +0 -38
- package/dist/step-form.d.ts.map +0 -1
- package/dist/submit-button.d.ts +0 -20
- package/dist/submit-button.d.ts.map +0 -1
- package/dist/use-array-field.d.ts +0 -95
- package/dist/use-array-field.d.ts.map +0 -1
- package/dist/use-step-form.d.ts +0 -40
- package/dist/use-step-form.d.ts.map +0 -1
- package/dist/utils.d.ts +0 -3
- package/dist/utils.d.ts.map +0 -1
- package/dist/watch-field.d.ts +0 -11
- package/dist/watch-field.d.ts.map +0 -1
- package/dist/yup/index.d.ts.map +0 -1
- package/dist/yup/index.modern.mjs +0 -2
- package/dist/yup/index.modern.mjs.map +0 -1
- package/dist/yup/yup-resolver.d.ts +0 -29
- package/dist/yup/yup-resolver.d.ts.map +0 -1
- package/dist/zod/index.d.ts.map +0 -1
- package/dist/zod/index.modern.mjs +0 -2
- package/dist/zod/index.modern.mjs.map +0 -1
- package/dist/zod/zod-resolver.d.ts +0 -35
- package/dist/zod/zod-resolver.d.ts.map +0 -1
- package/yup/package.json +0 -26
- package/zod/package.json +0 -27
package/dist/index.js
CHANGED
@@ -1,2 +1,1251 @@
|
|
1
|
-
var e=require("react"),r=require("@chakra-ui/utils"),t=require("react-hook-form"),n=require("@chakra-ui/react"),a=require("@saas-ui/number-input"),l=require("@saas-ui/password-input"),o=require("@saas-ui/radio"),i=require("@saas-ui/select"),u=require("@chakra-ui/system"),s=require("@chakra-ui/icons"),d=require("@saas-ui/button"),c=require("@chakra-ui/react-utils"),m=require("@saas-ui/stepper"),p=require("@saas-ui/input-right-button");function f(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 v=/*#__PURE__*/f(e);function h(){return h=Object.assign?Object.assign.bind():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},h.apply(this,arguments)}function b(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}var x=["name","label","placeholder"],F=function(e){var r=e.name,t=e.label,a=b(e,x);/*#__PURE__*/return v.createElement(n.FormControl,a,t?/*#__PURE__*/v.createElement(n.FormLabel,{htmlFor:r},t):null,/*#__PURE__*/v.createElement(n.Text,{fontSize:"md"},/*#__PURE__*/v.createElement(y,{name:r})))};r.__DEV__&&(F.displayName="DisplayField");var y=function(e){var r=e.name;return(0,t.useFormContext().getValues)(r)||null};r.__DEV__&&(y.displayName="FormValue");var E=["name","label","help","hideLabel","children"],_=["id","name","label","help","isDisabled","isInvalid","isReadOnly","isRequired","rules"],g=["name","rules"],C=["ref"],S=["name","rules"],N=["ref"],R=["type","leftAddon","rightAddon","size"],V=["type","value"],A=["label","type"],w=["pinLength","pinType","spacing"],D={},k=function(e){var r=e.name,a=e.label,l=e.help,o=e.hideLabel,i=e.children,u=b(e,E),s=function(e,r){return t.get(r.errors,e)}(r,t.useFormContext().formState);/*#__PURE__*/return v.createElement(n.FormControl,h({},u,{isInvalid:!!s}),a&&!o?/*#__PURE__*/v.createElement(n.FormLabel,null,a):null,/*#__PURE__*/v.createElement(n.Box,null,i,!l||null!=s&&s.message?null:/*#__PURE__*/v.createElement(n.FormHelperText,null,l),(null==s?void 0:s.message)&&/*#__PURE__*/v.createElement(n.FormErrorMessage,null,null==s?void 0:s.message)))};r.__DEV__&&(k.displayName="BaseField");var I=v.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return v.createElement(D[void 0===t?"text":t]||D.text,h({ref:r},e))}),P=function(e){return n.forwardRef(function(a,l){var o=a.name,i=a.rules,u=b(a,g),s=t.useFormContext();/*#__PURE__*/return v.createElement(t.Controller,{name:o,control:s.control,rules:i,render:function(t){var a=t.field,o=a.ref,i=b(a,C);/*#__PURE__*/return v.createElement(e,h({},i,u,{onChange:r.callAllHandlers(u.onChange,i.onChange),onBlur:r.callAllHandlers(u.onBlur,i.onBlur),ref:n.useMergeRefs(l,o)}))}})})},L=function(e){return n.forwardRef(function(a,l){var o=a.name,i=a.rules,u=b(a,S),s=(0,t.useFormContext().register)(o,i),d=s.ref,c=b(s,N);/*#__PURE__*/return v.createElement(e,h({},c,u,{onChange:r.callAllHandlers(u.onChange,c.onChange),onBlur:r.callAllHandlers(u.onBlur,c.onBlur),ref:n.useMergeRefs(l,d)}))})},B=function(e,r,t){var a=function(e,r){var t=r.displayName,a=r.hideLabel,l=r.BaseField,o=n.forwardRef(function(r,t){var n=r.id,o=r.name,i=r.label,u=r.help,s=r.isDisabled,d=r.isInvalid,c=r.isReadOnly,m=r.isRequired,p=r.rules,f=b(r,_),x=h({required:m},p);/*#__PURE__*/return v.createElement(l,{id:n,name:o,label:i,help:u,hideLabel:a,isDisabled:s,isInvalid:d,isReadOnly:c,isRequired:m},/*#__PURE__*/v.createElement(e,h({ref:t,id:n,name:o,label:a?i:void 0,rules:x},f)))});return o.displayName=t,o}(null!=t&&t.isControlled?P(r):L(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==t?void 0:t.hideLabel,BaseField:(null==t?void 0:t.BaseField)||k});return D[e]=a,a},O=B("text",n.forwardRef(function(e,r){var t=e.type,a=void 0===t?"text":t,l=e.leftAddon,o=e.rightAddon,i=e.size,u=b(e,R),s=/*#__PURE__*/v.createElement(n.Input,h({type:a,size:i},u,{ref:r}));return l||o?/*#__PURE__*/v.createElement(n.InputGroup,{size:i},l,s,o):s})),j=B("number",a.NumberInput,{isControlled:!0}),q=B("password",n.forwardRef(function(e,r){/*#__PURE__*/return v.createElement(l.PasswordInput,h({ref:r},e))})),M=B("textarea",n.Textarea),U=B("switch",n.forwardRef(function(e,r){var t=e.value,a=b(e,V);/*#__PURE__*/return v.createElement(n.Switch,h({isChecked:!!t},a,{ref:r}))}),{isControlled:!0}),H=B("select",i.Select,{isControlled:!0}),z=B("checkbox",n.forwardRef(function(e,r){var t=e.label,a=b(e,A);/*#__PURE__*/return v.createElement(n.Checkbox,h({ref:r},a),t)}),{hideLabel:!0}),T=B("radio",o.RadioInput,{isControlled:!0}),W=B("native-select",i.NativeSelect,{isControlled:!0}),G=B("pin",n.forwardRef(function(e,r){for(var t=e.pinLength,a=void 0===t?4:t,l=e.pinType,o=e.spacing,i=b(e,w),u=[],s=0;s<a;s++)u.push(/*#__PURE__*/v.createElement(n.PinInputField,{key:s,ref:r}));/*#__PURE__*/return v.createElement(n.HStack,{spacing:o},/*#__PURE__*/v.createElement(n.PinInput,h({},i,{type:l}),u))}),{isControlled:!0}),J=["items","label","title"],K=function(e){return e&&Object.entries(e).map(function(e){var r=e[0],t=e[1],n=t.label,a=t.title;return h({},b(t,J),{name:r,label:n||a})})},Q=function(e){return{getFields:function(){return K(e)},getNestedFields:function(t){var n,a=r.get(e,t);return a?"object"===(null==(n=a.items)?void 0:n.type)?K(a.items.properties):"object"===a.type?K(a.properties):[a.items]:[]}}},X=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onChange","onSubmit","onError","formRef","children"],Y=n.forwardRef(function(e,a){var l=e.mode,o=void 0===l?"all":l,i=e.resolver,u=e.reValidateMode,s=e.shouldFocusError,d=e.shouldUnregister,c=e.shouldUseNativeValidation,m=e.criteriaMode,p=e.delayError,f=e.schema,x=e.defaultValues,F=e.onChange,y=e.onSubmit,E=e.onError,_=e.formRef,g=e.children,C=b(e,X),S={mode:o,resolver:i,defaultValues:x,reValidateMode:u,shouldFocusError:s,shouldUnregister:d,shouldUseNativeValidation:c,criteriaMode:m,delayError:p};f&&!i&&(S.resolver=null==Y.getResolver?void 0:Y.getResolver(f));var N=t.useForm(S),R=N.handleSubmit;return v.useImperativeHandle(a,function(){return N},[a,N]),v.useEffect(function(){var e;return F&&(e=N.watch(F)),function(){var r;return null==(r=e)?void 0:r.unsubscribe()}},[N,F]),/*#__PURE__*/v.createElement(t.FormProvider,N,/*#__PURE__*/v.createElement(n.chakra.form,h({ref:_,onSubmit:R(y,E)},C,{className:r.cx("saas-form",e.className)}),r.runIfFn(g,N)))});Y.getFieldResolver=Q,r.__DEV__&&(Y.displayName="Form");var Z=["children"],$=function(e){/*#__PURE__*/return v.createElement(n.chakra.div,null,e.children)};r.__DEV__&&($.displayName="FormLayoutItem");var ee=function(e){var t,a,l,o=e.children,i=b(e,Z),u=h({},null!=(t=null==(a=n.useTheme().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},i);/*#__PURE__*/return v.createElement(n.SimpleGrid,h({},u,{className:r.cx("saas-form__layout",i.className)}),v.Children.map(o,function(e){return v.isValidElement(e)?/*#__PURE__*/v.createElement($,null,e):e}))};r.__DEV__&&(ee.displayName="FormLayout");var re=function(e,r){return v.Children.map(r,function(r){return v.isValidElement(r)&&r.props.name?v.cloneElement(r,h({},r.props,{name:e+"."+r.props.name})):r})},te=c.createContext({name:"ArrayFieldContext"}),ne=te[0],ae=te[1],le=c.createContext({name:"ArrayFieldRowContext"}),oe=le[0],ie=le[1],ue=function(e){var r=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,o=e.min,i=e.max,u=t.useFormContext();return h({},t.useFieldArray({control:u.control,name:r,keyName:l}),{name:r,defaultValue:a,min:o,max:i})},se=function(e){var r=e.index,n=t.useFormContext().clearErrors,a=ae(),l=a.name,o=a.remove,i=a.fields;return v.useEffect(function(){n(l)},[]),{index:r,isFirst:0===r,isLast:r===i.length-1,name:l+"."+r,remove:v.useCallback(function(){n(l),o(r)},[r])}},de=function(){var e=ie(),r=e.isFirst,t=e.remove,n=ae(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},ce=function(){var e=ae(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},me=["children","index"],pe=["children"],fe=["children"],ve=["name","defaultValue","keyName","min","max","children"],he=function(e){var r=e.children,t=e.index,n=b(e,me);/*#__PURE__*/return v.createElement(xe,{index:t},/*#__PURE__*/v.createElement(be,n,r),/*#__PURE__*/v.createElement(Fe,null))};r.__DEV__&&(he.displayName="ArrayFieldRow");var be=function(e){var r=e.children,t=b(e,pe),n=ie().name;/*#__PURE__*/return v.createElement(ee,h({flex:"1",mr:"2"},t),re(n,r))};r.__DEV__&&(be.displayName="ArrayFieldRowFields");var xe=function(e){var r=e.children,t=se({index:e.index});/*#__PURE__*/return v.createElement(oe,{value:t},/*#__PURE__*/v.createElement(u.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))};r.__DEV__&&(xe.displayName="ArrayFieldRowContainer");var Fe=function(e){/*#__PURE__*/return v.createElement(d.IconButton,h({icon:/*#__PURE__*/v.createElement(s.MinusIcon,null),"aria-label":"Remove row"},de(),e))};r.__DEV__&&(Fe.displayName="ArrayFieldRemoveButton");var ye=function(e){/*#__PURE__*/return v.createElement(d.IconButton,h({icon:/*#__PURE__*/v.createElement(s.AddIcon,null),"aria-label":"Add row",float:"right"},ce(),e))};r.__DEV__&&(ye.displayName="ArrayFieldAddButton");var Ee=u.forwardRef(function(e,r){var t=e.children,n=b(e,fe);/*#__PURE__*/return v.createElement(ge,h({ref:r},n),/*#__PURE__*/v.createElement(_e,null,function(e){/*#__PURE__*/return v.createElement(v.Fragment,null,e.map(function(e,r){/*#__PURE__*/return v.createElement(he,{key:e.id,index:r},t)}))}),/*#__PURE__*/v.createElement(ye,null))});r.__DEV__&&(Ee.displayName="ArrayField");var _e=function(e){return(0,e.children)(ae().fields)};r.__DEV__&&(_e.displayName="ArrayFieldRows");var ge=v.forwardRef(function(e,r){var t=e.name,n=e.defaultValue,a=e.keyName,l=e.min,o=e.max,i=e.children,u=b(e,ve),s=ue({name:t,defaultValue:n,keyName:a,min:l,max:o});return v.useImperativeHandle(r,function(){return s},[r,s]),/*#__PURE__*/v.createElement(ne,{value:s},/*#__PURE__*/v.createElement(k,h({name:t},u),i))});r.__DEV__&&(ge.displayName="ArrayFieldContainer");var Ce=["name","label","hideLabel","children","columns","spacing"],Se=function(e){var r=n.useStyleConfig("FormLegend");/*#__PURE__*/return v.createElement(n.FormLabel,h({as:"legend",sx:r},e))},Ne=function(e){var r=e.name,t=e.label,a=e.hideLabel,l=e.children,o=e.columns,i=e.spacing,u=b(e,Ce);/*#__PURE__*/return v.createElement(n.FormControl,h({name:r,as:"fieldset"},u),/*#__PURE__*/v.createElement(Se,{display:a?"none":"block"},t),/*#__PURE__*/v.createElement(ee,{columns:o,gridGap:i},re(r,l)))};r.__DEV__&&(Ne.displayName="ObjectField");var Re=["name","type"],Ve=["schema","fieldResolver","focusFirstField"],Ae=["name","type","defaultValue"],we=function(e,r){var t;return null==(t=e.getNestedFields(r))?void 0:t.map(function(e,r){var t=e.name,n=e.type,a=b(e,Re);/*#__PURE__*/return v.createElement(I,h({key:t||r,name:t,type:n},a))})},De=function(e){var r=e.schema,n=e.fieldResolver,a=e.focusFirstField,l=b(e,Ve),o=v.useMemo(function(){return n||Y.getFieldResolver(r)},[r,n]),i=v.useMemo(function(){return o.getFields()},[o]),u=t.useFormContext();return v.useEffect(function(){var e;a&&null!=(e=i[0])&&e.name&&u.setFocus(i[0].name)},[r,n,a]),/*#__PURE__*/v.createElement(ee,l,i.map(function(e){var r=e.name,t=e.type,n=b(e,Ae);return"array"===t?/*#__PURE__*/v.createElement(Ee,h({key:r,name:r},n),we(o,r)):"object"===t?/*#__PURE__*/v.createElement(Ne,h({key:r,name:r},n),we(o,r)):/*#__PURE__*/v.createElement(I,h({key:r,name:r,type:t},n))}))};r.__DEV__&&(De.displayName="Fields");var ke=["children","disableIfUntouched","disableIfInvalid","isDisabled","isLoading"],Ie=v.forwardRef(function(e,r){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,o=e.isDisabled,i=e.isLoading,u=b(e,ke),s=t.useFormContext().formState;/*#__PURE__*/return v.createElement(d.Button,h({},u,{ref:r,type:"submit",isLoading:s.isSubmitting||i,isDisabled:a&&!s.isDirty||l&&!s.isValid||o}),n)});Ie.defaultProps={variant:"primary",children:"Submit",disableIfUntouched:!1,disableIfInvalid:!1},r.__DEV__&&(Ie.displayName="SubmitButton");var Pe=["schema","submitLabel","fieldResolver","children"],Le=n.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=e.fieldResolver,o=e.children,i=b(e,Pe);/*#__PURE__*/return v.createElement(Y,h({},i,{schema:t,ref:r}),/*#__PURE__*/v.createElement(ee,null,/*#__PURE__*/v.createElement(De,{schema:t,fieldResolver:l}),a&&/*#__PURE__*/v.createElement(Ie,null,a),o))});r.__DEV__&&(Le.displayName="AutoForm");var Be=function(e){var r=e.children,n=e.condition;return(void 0===n?function(e){return!!e}:n)(t.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),t.useFormContext())?r:null};r.__DEV__&&(Be.displayName="DisplayIf");var Oe=["onChange"],je=c.createContext({name:"StepFormContext",errorMessage:"useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"}),qe=je[0],Me=je[1];function Ue(e){var r=b(e,Oe),t=m.useStepper(r),n=t.activeStep,a=t.isLastStep,l=t.nextStep,o=v.useState({}),i=o[0],u=o[1],s=v.useCallback(function(r){var o;return Promise.resolve(function(u,s){try{var d=function(){function u(e){return o?e:Promise.resolve(null==s.onSubmit?void 0:s.onSubmit(r,t)).then(function(){l()})}var s=i[n],d=function(){if(a)return Promise.resolve(null==e.onSubmit?void 0:e.onSubmit(r)).then(function(){c(h({},s,{isCompleted:!0})),l(),o=1})}();return d&&d.then?d.then(u):u(d)}()}catch(e){return}return d&&d.then?d.then(void 0,function(){}):d}())},[i,n,a]),d=v.useCallback(function(){var e=i[n];return{onSubmit:s,schema:null==e?void 0:e.schema,resolver:null==e?void 0:e.resolver}},[i,s,n]),c=v.useCallback(function(e){u(function(r){var t;return h({},r,((t={})[e.name]=e,t))})},[i]);return h({getFormProps:d,updateStep:c,steps:i},t)}function He(e){var r=e.name,t=e.schema,n=e.resolver,a=e.onSubmit,l=m.useStep({name:r}),o=Me(),i=o.steps,u=o.updateStep;return v.useEffect(function(){u({name:r,schema:t,resolver:n,onSubmit:a})},[r,t]),h({},l,i[r]||{name:r,schema:t})}var ze=["children"],Te=["getFormProps"],We=["children","orientation","variant","colorScheme","size"],Ge=["name","schema","resolver","children","className","onSubmit"],Je=["label","submitLabel"],Ke=v.forwardRef(function(e,t){var n=e.children,a=b(e,ze),l=Ue(e),o=l.getFormProps,i=b(l,Te),u=v.useMemo(function(){return i},[i]);/*#__PURE__*/return v.createElement(m.StepperProvider,{value:u},/*#__PURE__*/v.createElement(qe,{value:u},/*#__PURE__*/v.createElement(Y,h({ref:t},a,o()),r.runIfFn(n,l))))}),Qe=function(e){var t=e.name,n=e.schema,a=e.resolver,l=e.children,o=e.className,i=e.onSubmit,s=b(e,Ge);return He({name:t,schema:n,resolver:a,onSubmit:i}).isActive?/*#__PURE__*/v.createElement(u.chakra.div,h({},s,{className:r.cx("saas-form__step",o)}),l):null};r.__DEV__&&(Qe.displayName="FormStep");var Xe=function(e){var t=m.useStepperContext(),n=t.prevStep;/*#__PURE__*/return v.createElement(d.Button,h({isDisabled:t.isFirstStep||t.isCompleted,label:"Back"},e,{className:r.cx("saas-form__prev-button",e.className),onClick:r.callAllHandlers(e.onClick,n)}))};r.__DEV__&&(Xe.displayName="PrevButton");var Ye=function(e){var t=e.label,n=void 0===t?"Next":t,a=e.submitLabel,l=void 0===a?"Complete":a,o=b(e,Je),i=m.useStepperContext(),u=i.isLastStep,s=i.isCompleted;/*#__PURE__*/return v.createElement(Ie,h({},o,{isDisabled:s,className:r.cx("saas-form__next-button",e.className)}),u||s?l:n)};r.__DEV__&&(Ye.displayName="NextButton"),Object.defineProperty(exports,"Controller",{enumerable:!0,get:function(){return t.Controller}}),Object.defineProperty(exports,"FormProvider",{enumerable:!0,get:function(){return t.FormProvider}}),Object.defineProperty(exports,"appendErrors",{enumerable:!0,get:function(){return t.appendErrors}}),Object.defineProperty(exports,"useController",{enumerable:!0,get:function(){return t.useController}}),Object.defineProperty(exports,"useFieldArray",{enumerable:!0,get:function(){return t.useFieldArray}}),Object.defineProperty(exports,"useForm",{enumerable:!0,get:function(){return t.useForm}}),Object.defineProperty(exports,"useFormContext",{enumerable:!0,get:function(){return t.useFormContext}}),Object.defineProperty(exports,"useFormState",{enumerable:!0,get:function(){return t.useFormState}}),Object.defineProperty(exports,"useWatch",{enumerable:!0,get:function(){return t.useWatch}}),exports.ArrayField=Ee,exports.ArrayFieldAddButton=ye,exports.ArrayFieldContainer=ge,exports.ArrayFieldProvider=ne,exports.ArrayFieldRemoveButton=Fe,exports.ArrayFieldRow=he,exports.ArrayFieldRowContainer=xe,exports.ArrayFieldRowFields=be,exports.ArrayFieldRowProvider=oe,exports.ArrayFieldRows=_e,exports.AutoForm=Le,exports.BaseField=k,exports.CheckboxField=z,exports.DisplayField=F,exports.DisplayIf=Be,exports.Field=I,exports.Fields=De,exports.Form=Y,exports.FormLayout=ee,exports.FormLegend=Se,exports.FormStep=Qe,exports.FormStepper=function(e){var r=m.useStepperContext(),t=r.activeIndex,n=r.setIndex,a=e.children,l=e.orientation,o=e.variant,i=e.colorScheme,u=e.size,s=b(e,We),d=v.Children.map(a,function(e){if(v.isValidElement(e)&&(null==e?void 0:e.type)===Qe){var r=He(e.props);/*#__PURE__*/return v.createElement(m.StepperStep,h({name:e.props.name,title:e.props.title,isCompleted:r.isCompleted},s),e.props.children)}return e}),c=v.useCallback(function(e){n(e)},[]);/*#__PURE__*/return v.createElement(m.StepperContainer,{orientation:l,step:t,variant:o,colorScheme:i,size:u,onChange:c},/*#__PURE__*/v.createElement(m.StepperSteps,h({mb:"4"},e),d))},exports.FormValue=y,exports.InputField=O,exports.NativeSelectField=W,exports.NextButton=Ye,exports.NumberInputField=j,exports.ObjectField=Ne,exports.PasswordInputField=q,exports.PinField=G,exports.PrevButton=Xe,exports.RadioField=T,exports.SelectField=H,exports.StepForm=Ke,exports.StepFormProvider=qe,exports.SubmitButton=Ie,exports.SwitchField=U,exports.TextareaField=M,exports.WatchField=function(e){var r=e.name,n=e.defaultValue,a=e.isDisabled,l=e.isExact,o=t.useFormContext(),i=t.useWatch({name:r,defaultValue:n,disabled:a,exact:l});return e.children(i,o)||null},exports.objectFieldResolver=Q,exports.registerFieldType=B,exports.useArrayField=ue,exports.useArrayFieldAddButton=ce,exports.useArrayFieldContext=ae,exports.useArrayFieldRemoveButton=de,exports.useArrayFieldRow=se,exports.useArrayFieldRowContext=ie,exports.useFormStep=He,exports.useStepForm=Ue,exports.useStepFormContext=Me,exports.withControlledInput=P,exports.withUncontrolledInput=L,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
|
2
|
-
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
var React8 = require('react');
|
4
|
+
var utils = require('@chakra-ui/utils');
|
5
|
+
var reactHookForm = require('react-hook-form');
|
6
|
+
var react = require('@chakra-ui/react');
|
7
|
+
var icons = require('@chakra-ui/icons');
|
8
|
+
var reactUtils = require('@chakra-ui/react-utils');
|
9
|
+
var core = require('@saas-ui/core');
|
10
|
+
|
11
|
+
function _interopNamespaceDefault(e) {
|
12
|
+
var n = Object.create(null);
|
13
|
+
if (e) {
|
14
|
+
Object.keys(e).forEach(function (k) {
|
15
|
+
if (k !== 'default') {
|
16
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
17
|
+
Object.defineProperty(n, k, d.get ? d : {
|
18
|
+
enumerable: true,
|
19
|
+
get: function () { return e[k]; }
|
20
|
+
});
|
21
|
+
}
|
22
|
+
});
|
23
|
+
}
|
24
|
+
n.default = e;
|
25
|
+
return Object.freeze(n);
|
26
|
+
}
|
27
|
+
|
28
|
+
var React8__namespace = /*#__PURE__*/_interopNamespaceDefault(React8);
|
29
|
+
|
30
|
+
// src/display-field.tsx
|
31
|
+
var DisplayField = ({
|
32
|
+
name,
|
33
|
+
label,
|
34
|
+
placeholder,
|
35
|
+
...props
|
36
|
+
}) => {
|
37
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
|
38
|
+
...props
|
39
|
+
}, label ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
|
40
|
+
htmlFor: name
|
41
|
+
}, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Text, {
|
42
|
+
fontSize: "md"
|
43
|
+
}, /* @__PURE__ */ React8__namespace.createElement(FormValue, {
|
44
|
+
name
|
45
|
+
})));
|
46
|
+
};
|
47
|
+
if (utils.__DEV__) {
|
48
|
+
DisplayField.displayName = "DisplayField";
|
49
|
+
}
|
50
|
+
var FormValue = ({ name }) => {
|
51
|
+
const { getValues } = reactHookForm.useFormContext();
|
52
|
+
return getValues(name) || null;
|
53
|
+
};
|
54
|
+
if (utils.__DEV__) {
|
55
|
+
FormValue.displayName = "FormValue";
|
56
|
+
}
|
57
|
+
var NumberInput = react.forwardRef((props, ref) => {
|
58
|
+
const { hideStepper, incrementIcon, decrementIcon, ...rest } = props;
|
59
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.NumberInput, {
|
60
|
+
...rest,
|
61
|
+
ref
|
62
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.NumberInputField, null), !hideStepper && /* @__PURE__ */ React8__namespace.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React8__namespace.createElement(react.NumberIncrementStepper, {
|
63
|
+
children: incrementIcon
|
64
|
+
}), /* @__PURE__ */ React8__namespace.createElement(react.NumberDecrementStepper, {
|
65
|
+
children: decrementIcon
|
66
|
+
})));
|
67
|
+
});
|
68
|
+
NumberInput.defaultProps = {
|
69
|
+
hideStepper: false
|
70
|
+
};
|
71
|
+
if (utils.__DEV__) {
|
72
|
+
NumberInput.displayName = "NumberInput";
|
73
|
+
}
|
74
|
+
var InputRightButton = react.forwardRef(
|
75
|
+
(props, ref) => {
|
76
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.InputRightElement, {
|
77
|
+
w: "auto",
|
78
|
+
px: "1",
|
79
|
+
py: "1",
|
80
|
+
alignItems: "stretch"
|
81
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.Button, {
|
82
|
+
ref,
|
83
|
+
height: "auto",
|
84
|
+
...props
|
85
|
+
}));
|
86
|
+
}
|
87
|
+
);
|
88
|
+
InputRightButton.id = "InputRightElement";
|
89
|
+
InputRightButton.displayName = "InputRightButton";
|
90
|
+
|
91
|
+
// src/password-input/password-input.tsx
|
92
|
+
var PasswordInput = react.forwardRef(
|
93
|
+
(props, ref) => {
|
94
|
+
const {
|
95
|
+
viewIcon,
|
96
|
+
viewOffIcon,
|
97
|
+
autoComplete,
|
98
|
+
w,
|
99
|
+
width,
|
100
|
+
size,
|
101
|
+
variant,
|
102
|
+
...inputProps
|
103
|
+
} = props;
|
104
|
+
const [show, setShow] = React8.useState(false);
|
105
|
+
const handleClick = () => setShow(!show);
|
106
|
+
const label = show ? "Hide password" : "Show password";
|
107
|
+
let icon;
|
108
|
+
if (show) {
|
109
|
+
icon = viewIcon || /* @__PURE__ */ React8.createElement(icons.ViewIcon, null);
|
110
|
+
} else {
|
111
|
+
icon = viewOffIcon || /* @__PURE__ */ React8.createElement(icons.ViewOffIcon, null);
|
112
|
+
}
|
113
|
+
const groupProps = {
|
114
|
+
width: w || width,
|
115
|
+
size,
|
116
|
+
variant
|
117
|
+
};
|
118
|
+
return /* @__PURE__ */ React8.createElement(react.InputGroup, {
|
119
|
+
...groupProps
|
120
|
+
}, /* @__PURE__ */ React8.createElement(react.Input, {
|
121
|
+
...inputProps,
|
122
|
+
ref,
|
123
|
+
type: show ? "text" : "password",
|
124
|
+
autoComplete: show ? "off" : autoComplete
|
125
|
+
}), /* @__PURE__ */ React8.createElement(InputRightButton, {
|
126
|
+
onClick: handleClick,
|
127
|
+
"aria-label": label,
|
128
|
+
variant: "ghost"
|
129
|
+
}, icon));
|
130
|
+
}
|
131
|
+
);
|
132
|
+
if (utils.__DEV__) {
|
133
|
+
PasswordInput.displayName = "PasswordInput";
|
134
|
+
}
|
135
|
+
var RadioInput = react.forwardRef(
|
136
|
+
({ options, spacing, direction, ...props }, ref) => {
|
137
|
+
const { onBlur, onChange, ...groupProps } = props;
|
138
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.RadioGroup, {
|
139
|
+
onChange,
|
140
|
+
...groupProps
|
141
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.Stack, {
|
142
|
+
spacing,
|
143
|
+
direction
|
144
|
+
}, options.map(({ value, label, ...radioProps }, i) => {
|
145
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Radio, {
|
146
|
+
key: i,
|
147
|
+
onBlur,
|
148
|
+
value,
|
149
|
+
ref,
|
150
|
+
...radioProps
|
151
|
+
}, label || value);
|
152
|
+
})));
|
153
|
+
}
|
154
|
+
);
|
155
|
+
if (utils.__DEV__) {
|
156
|
+
RadioInput.displayName = "RadioInput";
|
157
|
+
}
|
158
|
+
var SelectButton = react.forwardRef((props, ref) => {
|
159
|
+
const styles = react.useMultiStyleConfig("Input", props);
|
160
|
+
const focusStyles = styles.field._focusVisible;
|
161
|
+
const height = styles.field.h || styles.field.height;
|
162
|
+
const buttonStyles = {
|
163
|
+
fontWeight: "normal",
|
164
|
+
textAlign: "left",
|
165
|
+
color: "inherit",
|
166
|
+
_active: {
|
167
|
+
bg: "transparent"
|
168
|
+
},
|
169
|
+
minH: height,
|
170
|
+
_focus: focusStyles,
|
171
|
+
_expanded: focusStyles,
|
172
|
+
...styles.field,
|
173
|
+
h: "auto"
|
174
|
+
};
|
175
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.MenuButton, {
|
176
|
+
as: react.Button,
|
177
|
+
...props,
|
178
|
+
ref,
|
179
|
+
sx: buttonStyles
|
180
|
+
});
|
181
|
+
});
|
182
|
+
if (utils.__DEV__) {
|
183
|
+
SelectButton.displayName = "SelectButton";
|
184
|
+
}
|
185
|
+
var Select = react.forwardRef((props, ref) => {
|
186
|
+
const {
|
187
|
+
name,
|
188
|
+
options,
|
189
|
+
children,
|
190
|
+
onChange,
|
191
|
+
defaultValue,
|
192
|
+
value,
|
193
|
+
placeholder,
|
194
|
+
isDisabled,
|
195
|
+
leftIcon,
|
196
|
+
rightIcon = /* @__PURE__ */ React8__namespace.createElement(icons.ChevronDownIcon, null),
|
197
|
+
multiple,
|
198
|
+
size,
|
199
|
+
variant,
|
200
|
+
menuListProps,
|
201
|
+
renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
|
202
|
+
...rest
|
203
|
+
} = props;
|
204
|
+
const menuProps = react.omitThemingProps(rest);
|
205
|
+
const [currentValue, setCurrentValue] = React8__namespace.useState(value || defaultValue);
|
206
|
+
const controlProps = react.useFormControl({ name });
|
207
|
+
const handleChange = (value2) => {
|
208
|
+
setCurrentValue(value2);
|
209
|
+
onChange == null ? void 0 : onChange(value2);
|
210
|
+
};
|
211
|
+
const buttonProps = {
|
212
|
+
isDisabled,
|
213
|
+
leftIcon,
|
214
|
+
rightIcon,
|
215
|
+
size,
|
216
|
+
variant
|
217
|
+
};
|
218
|
+
const getDisplayValue = React8__namespace.useCallback(
|
219
|
+
(value2) => {
|
220
|
+
if (!options) {
|
221
|
+
return value2;
|
222
|
+
}
|
223
|
+
for (const option of options) {
|
224
|
+
if (option.label && option.value === value2) {
|
225
|
+
return option.label;
|
226
|
+
}
|
227
|
+
}
|
228
|
+
return value2;
|
229
|
+
},
|
230
|
+
[options]
|
231
|
+
);
|
232
|
+
const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
|
233
|
+
getDisplayValue
|
234
|
+
) : [];
|
235
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Menu, {
|
236
|
+
...menuProps,
|
237
|
+
closeOnSelect: !multiple
|
238
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
|
239
|
+
className: utils.cx("sui-select")
|
240
|
+
}, /* @__PURE__ */ React8__namespace.createElement(SelectButton, {
|
241
|
+
ref,
|
242
|
+
...buttonProps
|
243
|
+
}, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8__namespace.createElement(react.MenuList, {
|
244
|
+
maxH: "60vh",
|
245
|
+
overflowY: "auto",
|
246
|
+
...menuListProps
|
247
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.MenuOptionGroup, {
|
248
|
+
defaultValue: defaultValue || value,
|
249
|
+
onChange: handleChange,
|
250
|
+
type: multiple ? "checkbox" : "radio"
|
251
|
+
}, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8__namespace.createElement(react.MenuItemOption, {
|
252
|
+
key: i,
|
253
|
+
value: value2,
|
254
|
+
...rest2
|
255
|
+
}, label || value2)) : children)), /* @__PURE__ */ React8__namespace.createElement(react.chakra.input, {
|
256
|
+
...controlProps,
|
257
|
+
name,
|
258
|
+
type: "hidden",
|
259
|
+
value: currentValue,
|
260
|
+
className: "saas-select__input"
|
261
|
+
})));
|
262
|
+
});
|
263
|
+
if (utils.__DEV__) {
|
264
|
+
Select.displayName = "Select";
|
265
|
+
}
|
266
|
+
var NativeSelect = react.forwardRef(
|
267
|
+
({ options, children, ...props }, ref) => {
|
268
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Select, {
|
269
|
+
ref,
|
270
|
+
...props
|
271
|
+
}, children || (options == null ? void 0 : options.map(({ value, label }) => {
|
272
|
+
return /* @__PURE__ */ React8__namespace.createElement("option", {
|
273
|
+
key: value,
|
274
|
+
value
|
275
|
+
}, label || value);
|
276
|
+
})));
|
277
|
+
}
|
278
|
+
);
|
279
|
+
if (utils.__DEV__) {
|
280
|
+
NativeSelect.displayName = "NativeSelect";
|
281
|
+
}
|
282
|
+
|
283
|
+
// src/field.tsx
|
284
|
+
var inputTypes = {};
|
285
|
+
var defaultInputType = "text";
|
286
|
+
var getInput = (type) => {
|
287
|
+
return inputTypes[type] || inputTypes[defaultInputType];
|
288
|
+
};
|
289
|
+
var getError = (name, formState) => {
|
290
|
+
return reactHookForm.get(formState.errors, name);
|
291
|
+
};
|
292
|
+
var BaseField = (props) => {
|
293
|
+
const { name, label, help, hideLabel, children, ...controlProps } = props;
|
294
|
+
const { formState } = reactHookForm.useFormContext();
|
295
|
+
const error = getError(name, formState);
|
296
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
|
297
|
+
...controlProps,
|
298
|
+
isInvalid: !!error
|
299
|
+
}, label && !hideLabel ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, null, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Box, null, children, help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ React8__namespace.createElement(react.FormHelperText, null, help) : null, (error == null ? void 0 : error.message) && /* @__PURE__ */ React8__namespace.createElement(react.FormErrorMessage, null, error == null ? void 0 : error.message)));
|
300
|
+
};
|
301
|
+
if (utils.__DEV__) {
|
302
|
+
BaseField.displayName = "BaseField";
|
303
|
+
}
|
304
|
+
var Field = React8__namespace.forwardRef(
|
305
|
+
(props, ref) => {
|
306
|
+
const { type = defaultInputType } = props;
|
307
|
+
const InputComponent = getInput(type);
|
308
|
+
return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
|
309
|
+
ref,
|
310
|
+
...props
|
311
|
+
});
|
312
|
+
}
|
313
|
+
);
|
314
|
+
var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
|
315
|
+
const Field2 = react.forwardRef((props, ref) => {
|
316
|
+
const {
|
317
|
+
id,
|
318
|
+
name,
|
319
|
+
label,
|
320
|
+
help,
|
321
|
+
isDisabled,
|
322
|
+
isInvalid,
|
323
|
+
isReadOnly,
|
324
|
+
isRequired,
|
325
|
+
rules,
|
326
|
+
...inputProps
|
327
|
+
} = props;
|
328
|
+
const inputRules = {
|
329
|
+
required: isRequired,
|
330
|
+
...rules
|
331
|
+
};
|
332
|
+
return /* @__PURE__ */ React8__namespace.createElement(BaseField2, {
|
333
|
+
id,
|
334
|
+
name,
|
335
|
+
label,
|
336
|
+
help,
|
337
|
+
hideLabel,
|
338
|
+
isDisabled,
|
339
|
+
isInvalid,
|
340
|
+
isReadOnly,
|
341
|
+
isRequired
|
342
|
+
}, /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
|
343
|
+
ref,
|
344
|
+
id,
|
345
|
+
name,
|
346
|
+
label: hideLabel ? label : void 0,
|
347
|
+
rules: inputRules,
|
348
|
+
...inputProps
|
349
|
+
}));
|
350
|
+
});
|
351
|
+
Field2.displayName = displayName;
|
352
|
+
return Field2;
|
353
|
+
};
|
354
|
+
var withControlledInput = (InputComponent) => {
|
355
|
+
return react.forwardRef(
|
356
|
+
({ name, rules, ...inputProps }, ref) => {
|
357
|
+
const { control } = reactHookForm.useFormContext();
|
358
|
+
return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.Controller, {
|
359
|
+
name,
|
360
|
+
control,
|
361
|
+
rules,
|
362
|
+
render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
|
363
|
+
...field,
|
364
|
+
...inputProps,
|
365
|
+
onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
|
366
|
+
onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
|
367
|
+
ref: react.useMergeRefs(ref, _ref)
|
368
|
+
})
|
369
|
+
});
|
370
|
+
}
|
371
|
+
);
|
372
|
+
};
|
373
|
+
var withUncontrolledInput = (InputComponent) => {
|
374
|
+
return react.forwardRef(
|
375
|
+
({ name, rules, ...inputProps }, ref) => {
|
376
|
+
const { register } = reactHookForm.useFormContext();
|
377
|
+
const { ref: _ref, ...field } = register(name, rules);
|
378
|
+
return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
|
379
|
+
...field,
|
380
|
+
...inputProps,
|
381
|
+
onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
|
382
|
+
onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
|
383
|
+
ref: react.useMergeRefs(ref, _ref)
|
384
|
+
});
|
385
|
+
}
|
386
|
+
);
|
387
|
+
};
|
388
|
+
var registerFieldType = (type, component, options) => {
|
389
|
+
let InputComponent;
|
390
|
+
if (options == null ? void 0 : options.isControlled) {
|
391
|
+
InputComponent = withControlledInput(component);
|
392
|
+
} else {
|
393
|
+
InputComponent = withUncontrolledInput(component);
|
394
|
+
}
|
395
|
+
const Field2 = createField(InputComponent, {
|
396
|
+
displayName: `${type.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}Field`,
|
397
|
+
hideLabel: options == null ? void 0 : options.hideLabel,
|
398
|
+
BaseField: (options == null ? void 0 : options.BaseField) || BaseField
|
399
|
+
});
|
400
|
+
inputTypes[type] = Field2;
|
401
|
+
return Field2;
|
402
|
+
};
|
403
|
+
var InputField = registerFieldType(
|
404
|
+
"text",
|
405
|
+
react.forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
|
406
|
+
const input = /* @__PURE__ */ React8__namespace.createElement(react.Input, {
|
407
|
+
type,
|
408
|
+
size,
|
409
|
+
...rest,
|
410
|
+
ref
|
411
|
+
});
|
412
|
+
if (leftAddon || rightAddon) {
|
413
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.InputGroup, {
|
414
|
+
size
|
415
|
+
}, leftAddon, input, rightAddon);
|
416
|
+
}
|
417
|
+
return input;
|
418
|
+
})
|
419
|
+
);
|
420
|
+
var NumberInputField2 = registerFieldType(
|
421
|
+
"number",
|
422
|
+
NumberInput,
|
423
|
+
{
|
424
|
+
isControlled: true
|
425
|
+
}
|
426
|
+
);
|
427
|
+
var PasswordInputField = registerFieldType(
|
428
|
+
"password",
|
429
|
+
react.forwardRef((props, ref) => /* @__PURE__ */ React8__namespace.createElement(PasswordInput, {
|
430
|
+
ref,
|
431
|
+
...props
|
432
|
+
}))
|
433
|
+
);
|
434
|
+
var TextareaField = registerFieldType(
|
435
|
+
"textarea",
|
436
|
+
react.Textarea
|
437
|
+
);
|
438
|
+
var SwitchField = registerFieldType(
|
439
|
+
"switch",
|
440
|
+
react.forwardRef(({ type, value, ...rest }, ref) => {
|
441
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Switch, {
|
442
|
+
isChecked: !!value,
|
443
|
+
...rest,
|
444
|
+
ref
|
445
|
+
});
|
446
|
+
}),
|
447
|
+
{
|
448
|
+
isControlled: true
|
449
|
+
}
|
450
|
+
);
|
451
|
+
var SelectField = registerFieldType("select", Select, {
|
452
|
+
isControlled: true
|
453
|
+
});
|
454
|
+
var CheckboxField = registerFieldType(
|
455
|
+
"checkbox",
|
456
|
+
react.forwardRef(({ label, type, ...props }, ref) => {
|
457
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Checkbox, {
|
458
|
+
ref,
|
459
|
+
...props
|
460
|
+
}, label);
|
461
|
+
}),
|
462
|
+
{
|
463
|
+
hideLabel: true
|
464
|
+
}
|
465
|
+
);
|
466
|
+
var RadioField = registerFieldType(
|
467
|
+
"radio",
|
468
|
+
RadioInput,
|
469
|
+
{
|
470
|
+
isControlled: true
|
471
|
+
}
|
472
|
+
);
|
473
|
+
var NativeSelectField = registerFieldType(
|
474
|
+
"native-select",
|
475
|
+
NativeSelect,
|
476
|
+
{ isControlled: true }
|
477
|
+
);
|
478
|
+
var PinField = registerFieldType(
|
479
|
+
"pin",
|
480
|
+
react.forwardRef((props, ref) => {
|
481
|
+
const { pinLength = 4, pinType, spacing, ...inputProps } = props;
|
482
|
+
const inputs = [];
|
483
|
+
for (let i = 0; i < pinLength; i++) {
|
484
|
+
inputs.push(/* @__PURE__ */ React8__namespace.createElement(react.PinInputField, {
|
485
|
+
key: i,
|
486
|
+
ref
|
487
|
+
}));
|
488
|
+
}
|
489
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.HStack, {
|
490
|
+
spacing
|
491
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.PinInput, {
|
492
|
+
...inputProps,
|
493
|
+
type: pinType
|
494
|
+
}, inputs));
|
495
|
+
}),
|
496
|
+
{
|
497
|
+
isControlled: true
|
498
|
+
}
|
499
|
+
);
|
500
|
+
var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
|
501
|
+
return {
|
502
|
+
...field,
|
503
|
+
name,
|
504
|
+
label: label || title || name
|
505
|
+
};
|
506
|
+
});
|
507
|
+
var objectFieldResolver = (schema) => {
|
508
|
+
const getFields = () => {
|
509
|
+
return mapFields(schema);
|
510
|
+
};
|
511
|
+
const getNestedFields = (name) => {
|
512
|
+
var _a;
|
513
|
+
const field = utils.get(schema, name);
|
514
|
+
if (!field)
|
515
|
+
return [];
|
516
|
+
if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
|
517
|
+
return mapFields(field.items.properties);
|
518
|
+
} else if (field.type === "object") {
|
519
|
+
return mapFields(field.properties);
|
520
|
+
}
|
521
|
+
return [field.items];
|
522
|
+
};
|
523
|
+
return { getFields, getNestedFields };
|
524
|
+
};
|
525
|
+
|
526
|
+
// src/form.tsx
|
527
|
+
var Form = react.forwardRef(
|
528
|
+
(props, ref) => {
|
529
|
+
var _a;
|
530
|
+
const {
|
531
|
+
mode = "all",
|
532
|
+
resolver,
|
533
|
+
reValidateMode,
|
534
|
+
shouldFocusError,
|
535
|
+
shouldUnregister,
|
536
|
+
shouldUseNativeValidation,
|
537
|
+
criteriaMode,
|
538
|
+
delayError,
|
539
|
+
schema,
|
540
|
+
defaultValues,
|
541
|
+
values,
|
542
|
+
context,
|
543
|
+
resetOptions,
|
544
|
+
onChange,
|
545
|
+
onSubmit,
|
546
|
+
onError,
|
547
|
+
formRef,
|
548
|
+
children,
|
549
|
+
...rest
|
550
|
+
} = props;
|
551
|
+
const form = {
|
552
|
+
mode,
|
553
|
+
resolver,
|
554
|
+
defaultValues,
|
555
|
+
values,
|
556
|
+
reValidateMode,
|
557
|
+
shouldFocusError,
|
558
|
+
shouldUnregister,
|
559
|
+
shouldUseNativeValidation,
|
560
|
+
criteriaMode,
|
561
|
+
delayError,
|
562
|
+
context,
|
563
|
+
resetOptions
|
564
|
+
};
|
565
|
+
if (schema && !resolver) {
|
566
|
+
form.resolver = (_a = Form.getResolver) == null ? void 0 : _a.call(Form, schema);
|
567
|
+
}
|
568
|
+
const methods = reactHookForm.useForm(form);
|
569
|
+
const { handleSubmit } = methods;
|
570
|
+
React8__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
|
571
|
+
React8__namespace.useEffect(() => {
|
572
|
+
let subscription;
|
573
|
+
if (onChange) {
|
574
|
+
subscription = methods.watch(onChange);
|
575
|
+
}
|
576
|
+
return () => subscription == null ? void 0 : subscription.unsubscribe();
|
577
|
+
}, [methods, onChange]);
|
578
|
+
const Field2 = React8__namespace.useMemo(
|
579
|
+
() => (props2) => /* @__PURE__ */ React8__namespace.createElement(Field, {
|
580
|
+
...props2
|
581
|
+
}),
|
582
|
+
[]
|
583
|
+
);
|
584
|
+
return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.FormProvider, {
|
585
|
+
...methods
|
586
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.chakra.form, {
|
587
|
+
ref,
|
588
|
+
onSubmit: handleSubmit(onSubmit, onError),
|
589
|
+
...rest,
|
590
|
+
className: utils.cx("sui-form", props.className)
|
591
|
+
}, utils.runIfFn(children, {
|
592
|
+
Field: Field2,
|
593
|
+
...methods
|
594
|
+
})));
|
595
|
+
}
|
596
|
+
);
|
597
|
+
Form.getFieldResolver = objectFieldResolver;
|
598
|
+
Form.displayName = "Form";
|
599
|
+
function createForm({ resolver }) {
|
600
|
+
const CreateForm = (props) => {
|
601
|
+
const { schema, ...rest } = props;
|
602
|
+
return /* @__PURE__ */ React8__namespace.createElement(Form, {
|
603
|
+
resolver: resolver == null ? void 0 : resolver(props.schema),
|
604
|
+
...rest
|
605
|
+
});
|
606
|
+
};
|
607
|
+
return CreateForm;
|
608
|
+
}
|
609
|
+
var FormLayoutItem = ({ children }) => {
|
610
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, null, children);
|
611
|
+
};
|
612
|
+
if (utils.__DEV__) {
|
613
|
+
FormLayoutItem.displayName = "FormLayoutItem";
|
614
|
+
}
|
615
|
+
var FormLayout = ({ children, ...props }) => {
|
616
|
+
var _a, _b, _c;
|
617
|
+
const theme = react.useTheme();
|
618
|
+
const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.FormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
|
619
|
+
spacing: 4
|
620
|
+
};
|
621
|
+
const gridProps = {
|
622
|
+
...defaultProps,
|
623
|
+
...props
|
624
|
+
};
|
625
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.SimpleGrid, {
|
626
|
+
...gridProps,
|
627
|
+
className: utils.cx("sui-form__layout", props.className)
|
628
|
+
}, React8__namespace.Children.map(children, (child) => {
|
629
|
+
if (React8__namespace.isValidElement(child)) {
|
630
|
+
return /* @__PURE__ */ React8__namespace.createElement(FormLayoutItem, null, child);
|
631
|
+
}
|
632
|
+
return child;
|
633
|
+
}));
|
634
|
+
};
|
635
|
+
if (utils.__DEV__) {
|
636
|
+
FormLayout.displayName = "FormLayout";
|
637
|
+
}
|
638
|
+
var mapNestedFields = (name, children) => {
|
639
|
+
return React8__namespace.Children.map(children, (child) => {
|
640
|
+
if (React8__namespace.isValidElement(child) && child.props.name) {
|
641
|
+
return React8__namespace.cloneElement(child, {
|
642
|
+
...child.props,
|
643
|
+
name: `${name}.${child.props.name}`
|
644
|
+
});
|
645
|
+
}
|
646
|
+
return child;
|
647
|
+
});
|
648
|
+
};
|
649
|
+
var [ArrayFieldProvider, useArrayFieldContext] = reactUtils.createContext({
|
650
|
+
name: "ArrayFieldContext"
|
651
|
+
});
|
652
|
+
var [ArrayFieldRowProvider, useArrayFieldRowContext] = reactUtils.createContext({
|
653
|
+
name: "ArrayFieldRowContext"
|
654
|
+
});
|
655
|
+
var useArrayField = ({
|
656
|
+
name,
|
657
|
+
defaultValue = {},
|
658
|
+
keyName,
|
659
|
+
min,
|
660
|
+
max
|
661
|
+
}) => {
|
662
|
+
const { control } = reactHookForm.useFormContext();
|
663
|
+
const context = reactHookForm.useFieldArray({
|
664
|
+
control,
|
665
|
+
name,
|
666
|
+
keyName
|
667
|
+
});
|
668
|
+
return {
|
669
|
+
...context,
|
670
|
+
name,
|
671
|
+
defaultValue,
|
672
|
+
min,
|
673
|
+
max
|
674
|
+
};
|
675
|
+
};
|
676
|
+
var useArrayFieldRow = ({ index }) => {
|
677
|
+
const { clearErrors } = reactHookForm.useFormContext();
|
678
|
+
const { name, remove, fields } = useArrayFieldContext();
|
679
|
+
React8__namespace.useEffect(() => {
|
680
|
+
clearErrors(name);
|
681
|
+
}, []);
|
682
|
+
return {
|
683
|
+
index,
|
684
|
+
isFirst: index === 0,
|
685
|
+
isLast: index === fields.length - 1,
|
686
|
+
name: `${name}.${index}`,
|
687
|
+
remove: React8__namespace.useCallback(() => {
|
688
|
+
clearErrors(name);
|
689
|
+
remove(index);
|
690
|
+
}, [index])
|
691
|
+
};
|
692
|
+
};
|
693
|
+
var useArrayFieldRemoveButton = () => {
|
694
|
+
const { isFirst, remove } = useArrayFieldRowContext();
|
695
|
+
const { min, fields } = useArrayFieldContext();
|
696
|
+
const isDisabled = isFirst && !!(min && fields.length <= min);
|
697
|
+
return {
|
698
|
+
onClick: () => remove(),
|
699
|
+
isDisabled
|
700
|
+
};
|
701
|
+
};
|
702
|
+
var useArrayFieldAddButton = () => {
|
703
|
+
const { append, defaultValue, max, fields } = useArrayFieldContext();
|
704
|
+
const isDisabled = !!(max && fields.length >= max);
|
705
|
+
return {
|
706
|
+
onClick: () => append(defaultValue, {
|
707
|
+
shouldFocus: false
|
708
|
+
}),
|
709
|
+
isDisabled
|
710
|
+
};
|
711
|
+
};
|
712
|
+
|
713
|
+
// src/array-field.tsx
|
714
|
+
var ArrayFieldRow = ({
|
715
|
+
children,
|
716
|
+
index,
|
717
|
+
...rowFieldsProps
|
718
|
+
}) => {
|
719
|
+
return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowContainer, {
|
720
|
+
index
|
721
|
+
}, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowFields, {
|
722
|
+
...rowFieldsProps
|
723
|
+
}, children), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRemoveButton, null));
|
724
|
+
};
|
725
|
+
if (utils.__DEV__) {
|
726
|
+
ArrayFieldRow.displayName = "ArrayFieldRow";
|
727
|
+
}
|
728
|
+
var ArrayFieldRowFields = ({
|
729
|
+
children,
|
730
|
+
...layoutProps
|
731
|
+
}) => {
|
732
|
+
const { name } = useArrayFieldRowContext();
|
733
|
+
return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
|
734
|
+
flex: "1",
|
735
|
+
mr: "2",
|
736
|
+
...layoutProps
|
737
|
+
}, mapNestedFields(name, children));
|
738
|
+
};
|
739
|
+
if (utils.__DEV__) {
|
740
|
+
ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
|
741
|
+
}
|
742
|
+
var ArrayFieldRowContainer = ({
|
743
|
+
children,
|
744
|
+
index
|
745
|
+
}) => {
|
746
|
+
const context = useArrayFieldRow({ index });
|
747
|
+
const styles = {
|
748
|
+
display: "flex",
|
749
|
+
flexDirection: "row",
|
750
|
+
alignItems: "flex-end",
|
751
|
+
width: "100%",
|
752
|
+
mb: 4
|
753
|
+
};
|
754
|
+
return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowProvider, {
|
755
|
+
value: context
|
756
|
+
}, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
|
757
|
+
__css: styles
|
758
|
+
}, children));
|
759
|
+
};
|
760
|
+
if (utils.__DEV__) {
|
761
|
+
ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
|
762
|
+
}
|
763
|
+
var ArrayFieldRemoveButton = (props) => {
|
764
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
|
765
|
+
"aria-label": "Remove row",
|
766
|
+
...useArrayFieldRemoveButton(),
|
767
|
+
...props
|
768
|
+
}, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.MinusIcon, null));
|
769
|
+
};
|
770
|
+
if (utils.__DEV__) {
|
771
|
+
ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
|
772
|
+
}
|
773
|
+
var ArrayFieldAddButton = (props) => {
|
774
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
|
775
|
+
"aria-label": "Add row",
|
776
|
+
float: "right",
|
777
|
+
...useArrayFieldAddButton(),
|
778
|
+
...props
|
779
|
+
}, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.AddIcon, null));
|
780
|
+
};
|
781
|
+
if (utils.__DEV__) {
|
782
|
+
ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
|
783
|
+
}
|
784
|
+
var ArrayField = react.forwardRef(
|
785
|
+
(props, ref) => {
|
786
|
+
const { children, ...containerProps } = props;
|
787
|
+
return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldContainer, {
|
788
|
+
ref,
|
789
|
+
...containerProps
|
790
|
+
}, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRows, null, (fields) => /* @__PURE__ */ React8__namespace.createElement(React8__namespace.Fragment, null, fields.map(({ id }, index) => /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRow, {
|
791
|
+
key: id,
|
792
|
+
index
|
793
|
+
}, children)))), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldAddButton, null));
|
794
|
+
}
|
795
|
+
);
|
796
|
+
if (utils.__DEV__) {
|
797
|
+
ArrayField.displayName = "ArrayField";
|
798
|
+
}
|
799
|
+
var ArrayFieldRows = ({
|
800
|
+
children
|
801
|
+
}) => {
|
802
|
+
const { fields } = useArrayFieldContext();
|
803
|
+
return children(fields);
|
804
|
+
};
|
805
|
+
if (utils.__DEV__) {
|
806
|
+
ArrayFieldRows.displayName = "ArrayFieldRows";
|
807
|
+
}
|
808
|
+
var ArrayFieldContainer = React8__namespace.forwardRef(
|
809
|
+
({
|
810
|
+
name,
|
811
|
+
defaultValue,
|
812
|
+
keyName,
|
813
|
+
min,
|
814
|
+
max,
|
815
|
+
children,
|
816
|
+
...fieldProps
|
817
|
+
}, ref) => {
|
818
|
+
const context = useArrayField({
|
819
|
+
name,
|
820
|
+
defaultValue,
|
821
|
+
keyName,
|
822
|
+
min,
|
823
|
+
max
|
824
|
+
});
|
825
|
+
React8__namespace.useImperativeHandle(ref, () => context, [ref, context]);
|
826
|
+
return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldProvider, {
|
827
|
+
value: context
|
828
|
+
}, /* @__PURE__ */ React8__namespace.createElement(BaseField, {
|
829
|
+
name,
|
830
|
+
...fieldProps
|
831
|
+
}, children));
|
832
|
+
}
|
833
|
+
);
|
834
|
+
if (utils.__DEV__) {
|
835
|
+
ArrayFieldContainer.displayName = "ArrayFieldContainer";
|
836
|
+
}
|
837
|
+
var FormLegend = (props) => {
|
838
|
+
const styles = react.useStyleConfig("SuiFormLegend");
|
839
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
|
840
|
+
as: "legend",
|
841
|
+
sx: styles,
|
842
|
+
...props
|
843
|
+
});
|
844
|
+
};
|
845
|
+
var ObjectField = (props) => {
|
846
|
+
const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
|
847
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
|
848
|
+
name,
|
849
|
+
as: "fieldset",
|
850
|
+
...fieldProps
|
851
|
+
}, /* @__PURE__ */ React8__namespace.createElement(FormLegend, {
|
852
|
+
display: hideLabel ? "none" : "block"
|
853
|
+
}, label), /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
|
854
|
+
columns,
|
855
|
+
gridGap: spacing
|
856
|
+
}, mapNestedFields(name, children)));
|
857
|
+
};
|
858
|
+
if (utils.__DEV__) {
|
859
|
+
ObjectField.displayName = "ObjectField";
|
860
|
+
}
|
861
|
+
var mapNestedFields2 = (resolver, name) => {
|
862
|
+
var _a;
|
863
|
+
return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
|
864
|
+
({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ React8__namespace.createElement(Field, {
|
865
|
+
key: name2 || i,
|
866
|
+
name: name2,
|
867
|
+
type,
|
868
|
+
...nestedFieldProps
|
869
|
+
})
|
870
|
+
);
|
871
|
+
};
|
872
|
+
var Fields = ({
|
873
|
+
schema,
|
874
|
+
fieldResolver,
|
875
|
+
focusFirstField,
|
876
|
+
...props
|
877
|
+
}) => {
|
878
|
+
const resolver = React8__namespace.useMemo(
|
879
|
+
() => fieldResolver || Form.getFieldResolver(schema),
|
880
|
+
[schema, fieldResolver]
|
881
|
+
);
|
882
|
+
const fields = React8__namespace.useMemo(() => resolver.getFields(), [resolver]);
|
883
|
+
const form = reactHookForm.useFormContext();
|
884
|
+
React8__namespace.useEffect(() => {
|
885
|
+
var _a;
|
886
|
+
if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
|
887
|
+
form.setFocus(fields[0].name);
|
888
|
+
}
|
889
|
+
}, [schema, fieldResolver, focusFirstField]);
|
890
|
+
return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
|
891
|
+
...props
|
892
|
+
}, fields.map(
|
893
|
+
({
|
894
|
+
name,
|
895
|
+
type,
|
896
|
+
defaultValue,
|
897
|
+
...fieldProps
|
898
|
+
}) => {
|
899
|
+
if (type === "array") {
|
900
|
+
return /* @__PURE__ */ React8__namespace.createElement(ArrayField, {
|
901
|
+
key: name,
|
902
|
+
name,
|
903
|
+
...fieldProps
|
904
|
+
}, mapNestedFields2(resolver, name));
|
905
|
+
} else if (type === "object") {
|
906
|
+
return /* @__PURE__ */ React8__namespace.createElement(ObjectField, {
|
907
|
+
key: name,
|
908
|
+
name,
|
909
|
+
...fieldProps
|
910
|
+
}, mapNestedFields2(resolver, name));
|
911
|
+
}
|
912
|
+
return /* @__PURE__ */ React8__namespace.createElement(Field, {
|
913
|
+
key: name,
|
914
|
+
name,
|
915
|
+
type,
|
916
|
+
...fieldProps
|
917
|
+
});
|
918
|
+
}
|
919
|
+
));
|
920
|
+
};
|
921
|
+
Fields.displayName = "Fields";
|
922
|
+
var SubmitButton = react.forwardRef(
|
923
|
+
(props, ref) => {
|
924
|
+
const {
|
925
|
+
children = "Submit",
|
926
|
+
disableIfUntouched,
|
927
|
+
disableIfInvalid,
|
928
|
+
isDisabled: isDisabledProp,
|
929
|
+
isLoading,
|
930
|
+
...rest
|
931
|
+
} = props;
|
932
|
+
const { formState } = reactHookForm.useFormContext();
|
933
|
+
const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
|
934
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
|
935
|
+
...rest,
|
936
|
+
ref,
|
937
|
+
type: "submit",
|
938
|
+
isLoading: formState.isSubmitting || isLoading,
|
939
|
+
isDisabled
|
940
|
+
}, children);
|
941
|
+
}
|
942
|
+
);
|
943
|
+
SubmitButton.defaultProps = {
|
944
|
+
variant: "primary",
|
945
|
+
disableIfUntouched: false,
|
946
|
+
disableIfInvalid: false
|
947
|
+
};
|
948
|
+
SubmitButton.displayName = "SubmitButton";
|
949
|
+
|
950
|
+
// src/auto-form.tsx
|
951
|
+
var AutoForm = react.forwardRef(
|
952
|
+
(props, ref) => {
|
953
|
+
const {
|
954
|
+
schema,
|
955
|
+
submitLabel = "Submit",
|
956
|
+
fieldResolver,
|
957
|
+
children,
|
958
|
+
...rest
|
959
|
+
} = props;
|
960
|
+
return /* @__PURE__ */ React8__namespace.createElement(Form, {
|
961
|
+
...rest,
|
962
|
+
schema,
|
963
|
+
ref
|
964
|
+
}, /* @__PURE__ */ React8__namespace.createElement(FormLayout, null, /* @__PURE__ */ React8__namespace.createElement(Fields, {
|
965
|
+
schema,
|
966
|
+
fieldResolver
|
967
|
+
}), submitLabel && /* @__PURE__ */ React8__namespace.createElement(SubmitButton, null, submitLabel), children));
|
968
|
+
}
|
969
|
+
);
|
970
|
+
AutoForm.displayName = "AutoForm";
|
971
|
+
var DisplayIf = ({
|
972
|
+
children,
|
973
|
+
name,
|
974
|
+
defaultValue,
|
975
|
+
isDisabled,
|
976
|
+
isExact,
|
977
|
+
condition = (value) => !!value
|
978
|
+
}) => {
|
979
|
+
const value = reactHookForm.useWatch({
|
980
|
+
name,
|
981
|
+
defaultValue,
|
982
|
+
disabled: isDisabled,
|
983
|
+
exact: isExact
|
984
|
+
});
|
985
|
+
const context = reactHookForm.useFormContext();
|
986
|
+
return condition(value, context) ? children : null;
|
987
|
+
};
|
988
|
+
if (utils.__DEV__) {
|
989
|
+
DisplayIf.displayName = "DisplayIf";
|
990
|
+
}
|
991
|
+
var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
|
992
|
+
name: "StepFormContext",
|
993
|
+
errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
|
994
|
+
});
|
995
|
+
function useStepForm(props) {
|
996
|
+
const { onChange, ...rest } = props;
|
997
|
+
const stepper = core.useStepper(rest);
|
998
|
+
const { activeStep, isLastStep, nextStep } = stepper;
|
999
|
+
const [steps, updateSteps] = React8__namespace.useState({});
|
1000
|
+
const onSubmitStep = React8__namespace.useCallback(
|
1001
|
+
async (data) => {
|
1002
|
+
var _a, _b;
|
1003
|
+
try {
|
1004
|
+
const step = steps[activeStep];
|
1005
|
+
if (isLastStep) {
|
1006
|
+
await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, data));
|
1007
|
+
updateStep({
|
1008
|
+
...step,
|
1009
|
+
isCompleted: true
|
1010
|
+
});
|
1011
|
+
nextStep();
|
1012
|
+
return;
|
1013
|
+
}
|
1014
|
+
await ((_b = step.onSubmit) == null ? void 0 : _b.call(step, data, stepper));
|
1015
|
+
nextStep();
|
1016
|
+
} catch (e) {
|
1017
|
+
}
|
1018
|
+
},
|
1019
|
+
[steps, activeStep, isLastStep]
|
1020
|
+
);
|
1021
|
+
const getFormProps = React8__namespace.useCallback(() => {
|
1022
|
+
const step = steps[activeStep];
|
1023
|
+
return {
|
1024
|
+
onSubmit: onSubmitStep,
|
1025
|
+
schema: step == null ? void 0 : step.schema,
|
1026
|
+
resolver: step == null ? void 0 : step.resolver
|
1027
|
+
};
|
1028
|
+
}, [steps, onSubmitStep, activeStep]);
|
1029
|
+
const updateStep = React8__namespace.useCallback(
|
1030
|
+
(step) => {
|
1031
|
+
updateSteps((steps2) => {
|
1032
|
+
return {
|
1033
|
+
...steps2,
|
1034
|
+
[step.name]: step
|
1035
|
+
};
|
1036
|
+
});
|
1037
|
+
},
|
1038
|
+
[steps]
|
1039
|
+
);
|
1040
|
+
return {
|
1041
|
+
getFormProps,
|
1042
|
+
updateStep,
|
1043
|
+
steps,
|
1044
|
+
...stepper
|
1045
|
+
};
|
1046
|
+
}
|
1047
|
+
function useFormStep(props) {
|
1048
|
+
const { name, schema, resolver, onSubmit } = props;
|
1049
|
+
const step = core.useStep({ name });
|
1050
|
+
const { steps, updateStep } = useStepFormContext();
|
1051
|
+
React8__namespace.useEffect(() => {
|
1052
|
+
updateStep({ name, schema, resolver, onSubmit });
|
1053
|
+
}, [name, schema]);
|
1054
|
+
return {
|
1055
|
+
...step,
|
1056
|
+
...steps[name] || { name, schema }
|
1057
|
+
};
|
1058
|
+
}
|
1059
|
+
|
1060
|
+
// src/step-form.tsx
|
1061
|
+
var StepForm = React8__namespace.forwardRef(
|
1062
|
+
(props, ref) => {
|
1063
|
+
const { children, ...rest } = props;
|
1064
|
+
const stepper = useStepForm(props);
|
1065
|
+
const { getFormProps, ...ctx } = stepper;
|
1066
|
+
const context = React8__namespace.useMemo(() => ctx, [ctx]);
|
1067
|
+
return /* @__PURE__ */ React8__namespace.createElement(core.StepperProvider, {
|
1068
|
+
value: context
|
1069
|
+
}, /* @__PURE__ */ React8__namespace.createElement(StepFormProvider, {
|
1070
|
+
value: context
|
1071
|
+
}, /* @__PURE__ */ React8__namespace.createElement(Form, {
|
1072
|
+
ref,
|
1073
|
+
...rest,
|
1074
|
+
...getFormProps()
|
1075
|
+
}, utils.runIfFn(children, stepper))));
|
1076
|
+
}
|
1077
|
+
);
|
1078
|
+
var FormStepper = (props) => {
|
1079
|
+
const { activeIndex, setIndex } = core.useStepperContext();
|
1080
|
+
const { children, orientation, variant, colorScheme, size, ...rest } = props;
|
1081
|
+
const elements = React8__namespace.Children.map(children, (child) => {
|
1082
|
+
if (React8__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
|
1083
|
+
const { isCompleted } = useFormStep(child.props);
|
1084
|
+
return /* @__PURE__ */ React8__namespace.createElement(core.StepperStep, {
|
1085
|
+
name: child.props.name,
|
1086
|
+
title: child.props.title,
|
1087
|
+
isCompleted,
|
1088
|
+
...rest
|
1089
|
+
}, child.props.children);
|
1090
|
+
}
|
1091
|
+
return child;
|
1092
|
+
});
|
1093
|
+
const onChange = React8__namespace.useCallback((i) => {
|
1094
|
+
setIndex(i);
|
1095
|
+
}, []);
|
1096
|
+
return /* @__PURE__ */ React8__namespace.createElement(core.StepperContainer, {
|
1097
|
+
orientation,
|
1098
|
+
step: activeIndex,
|
1099
|
+
variant,
|
1100
|
+
colorScheme,
|
1101
|
+
size,
|
1102
|
+
onChange
|
1103
|
+
}, /* @__PURE__ */ React8__namespace.createElement(core.StepperSteps, {
|
1104
|
+
mb: "4",
|
1105
|
+
...props
|
1106
|
+
}, elements));
|
1107
|
+
};
|
1108
|
+
var FormStep = (props) => {
|
1109
|
+
const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
|
1110
|
+
const step = useFormStep({ name, schema, resolver, onSubmit });
|
1111
|
+
const { isActive } = step;
|
1112
|
+
return isActive ? /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
|
1113
|
+
...rest,
|
1114
|
+
className: utils.cx("sui-form__step", className)
|
1115
|
+
}, children) : null;
|
1116
|
+
};
|
1117
|
+
if (utils.__DEV__) {
|
1118
|
+
FormStep.displayName = "FormStep";
|
1119
|
+
}
|
1120
|
+
var PrevButton = (props) => {
|
1121
|
+
const { isFirstStep, isCompleted, prevStep } = core.useStepperContext();
|
1122
|
+
return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
|
1123
|
+
isDisabled: isFirstStep || isCompleted,
|
1124
|
+
label: "Back",
|
1125
|
+
...props,
|
1126
|
+
className: utils.cx("sui-form__prev-button", props.className),
|
1127
|
+
onClick: utils.callAllHandlers(props.onClick, prevStep)
|
1128
|
+
});
|
1129
|
+
};
|
1130
|
+
if (utils.__DEV__) {
|
1131
|
+
PrevButton.displayName = "PrevButton";
|
1132
|
+
}
|
1133
|
+
var NextButton = (props) => {
|
1134
|
+
const { label = "Next", submitLabel = "Complete", ...rest } = props;
|
1135
|
+
const { isLastStep, isCompleted } = core.useStepperContext();
|
1136
|
+
return /* @__PURE__ */ React8__namespace.createElement(SubmitButton, {
|
1137
|
+
...rest,
|
1138
|
+
isDisabled: isCompleted,
|
1139
|
+
className: utils.cx("sui-form__next-button", props.className)
|
1140
|
+
}, isLastStep || isCompleted ? submitLabel : label);
|
1141
|
+
};
|
1142
|
+
if (utils.__DEV__) {
|
1143
|
+
NextButton.displayName = "NextButton";
|
1144
|
+
}
|
1145
|
+
var WatchField = (props) => {
|
1146
|
+
const { name, defaultValue, isDisabled, isExact } = props;
|
1147
|
+
const form = reactHookForm.useFormContext();
|
1148
|
+
const field = reactHookForm.useWatch({
|
1149
|
+
name,
|
1150
|
+
defaultValue,
|
1151
|
+
disabled: isDisabled,
|
1152
|
+
exact: isExact
|
1153
|
+
});
|
1154
|
+
return props.children(field, form) || null;
|
1155
|
+
};
|
1156
|
+
|
1157
|
+
Object.defineProperty(exports, 'Controller', {
|
1158
|
+
enumerable: true,
|
1159
|
+
get: function () { return reactHookForm.Controller; }
|
1160
|
+
});
|
1161
|
+
Object.defineProperty(exports, 'FormProvider', {
|
1162
|
+
enumerable: true,
|
1163
|
+
get: function () { return reactHookForm.FormProvider; }
|
1164
|
+
});
|
1165
|
+
Object.defineProperty(exports, 'appendErrors', {
|
1166
|
+
enumerable: true,
|
1167
|
+
get: function () { return reactHookForm.appendErrors; }
|
1168
|
+
});
|
1169
|
+
Object.defineProperty(exports, 'useController', {
|
1170
|
+
enumerable: true,
|
1171
|
+
get: function () { return reactHookForm.useController; }
|
1172
|
+
});
|
1173
|
+
Object.defineProperty(exports, 'useFieldArray', {
|
1174
|
+
enumerable: true,
|
1175
|
+
get: function () { return reactHookForm.useFieldArray; }
|
1176
|
+
});
|
1177
|
+
Object.defineProperty(exports, 'useForm', {
|
1178
|
+
enumerable: true,
|
1179
|
+
get: function () { return reactHookForm.useForm; }
|
1180
|
+
});
|
1181
|
+
Object.defineProperty(exports, 'useFormContext', {
|
1182
|
+
enumerable: true,
|
1183
|
+
get: function () { return reactHookForm.useFormContext; }
|
1184
|
+
});
|
1185
|
+
Object.defineProperty(exports, 'useFormState', {
|
1186
|
+
enumerable: true,
|
1187
|
+
get: function () { return reactHookForm.useFormState; }
|
1188
|
+
});
|
1189
|
+
Object.defineProperty(exports, 'useWatch', {
|
1190
|
+
enumerable: true,
|
1191
|
+
get: function () { return reactHookForm.useWatch; }
|
1192
|
+
});
|
1193
|
+
exports.ArrayField = ArrayField;
|
1194
|
+
exports.ArrayFieldAddButton = ArrayFieldAddButton;
|
1195
|
+
exports.ArrayFieldContainer = ArrayFieldContainer;
|
1196
|
+
exports.ArrayFieldProvider = ArrayFieldProvider;
|
1197
|
+
exports.ArrayFieldRemoveButton = ArrayFieldRemoveButton;
|
1198
|
+
exports.ArrayFieldRow = ArrayFieldRow;
|
1199
|
+
exports.ArrayFieldRowContainer = ArrayFieldRowContainer;
|
1200
|
+
exports.ArrayFieldRowFields = ArrayFieldRowFields;
|
1201
|
+
exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
|
1202
|
+
exports.ArrayFieldRows = ArrayFieldRows;
|
1203
|
+
exports.AutoForm = AutoForm;
|
1204
|
+
exports.BaseField = BaseField;
|
1205
|
+
exports.CheckboxField = CheckboxField;
|
1206
|
+
exports.DisplayField = DisplayField;
|
1207
|
+
exports.DisplayIf = DisplayIf;
|
1208
|
+
exports.Field = Field;
|
1209
|
+
exports.Fields = Fields;
|
1210
|
+
exports.Form = Form;
|
1211
|
+
exports.FormLayout = FormLayout;
|
1212
|
+
exports.FormLegend = FormLegend;
|
1213
|
+
exports.FormStep = FormStep;
|
1214
|
+
exports.FormStepper = FormStepper;
|
1215
|
+
exports.FormValue = FormValue;
|
1216
|
+
exports.InputField = InputField;
|
1217
|
+
exports.InputRightButton = InputRightButton;
|
1218
|
+
exports.NativeSelect = NativeSelect;
|
1219
|
+
exports.NativeSelectField = NativeSelectField;
|
1220
|
+
exports.NextButton = NextButton;
|
1221
|
+
exports.NumberInputField = NumberInputField2;
|
1222
|
+
exports.ObjectField = ObjectField;
|
1223
|
+
exports.PasswordInput = PasswordInput;
|
1224
|
+
exports.PasswordInputField = PasswordInputField;
|
1225
|
+
exports.PinField = PinField;
|
1226
|
+
exports.PrevButton = PrevButton;
|
1227
|
+
exports.RadioField = RadioField;
|
1228
|
+
exports.Select = Select;
|
1229
|
+
exports.SelectField = SelectField;
|
1230
|
+
exports.StepForm = StepForm;
|
1231
|
+
exports.StepFormProvider = StepFormProvider;
|
1232
|
+
exports.SubmitButton = SubmitButton;
|
1233
|
+
exports.SwitchField = SwitchField;
|
1234
|
+
exports.TextareaField = TextareaField;
|
1235
|
+
exports.WatchField = WatchField;
|
1236
|
+
exports.createForm = createForm;
|
1237
|
+
exports.objectFieldResolver = objectFieldResolver;
|
1238
|
+
exports.registerFieldType = registerFieldType;
|
1239
|
+
exports.useArrayField = useArrayField;
|
1240
|
+
exports.useArrayFieldAddButton = useArrayFieldAddButton;
|
1241
|
+
exports.useArrayFieldContext = useArrayFieldContext;
|
1242
|
+
exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
|
1243
|
+
exports.useArrayFieldRow = useArrayFieldRow;
|
1244
|
+
exports.useArrayFieldRowContext = useArrayFieldRowContext;
|
1245
|
+
exports.useFormStep = useFormStep;
|
1246
|
+
exports.useStepForm = useStepForm;
|
1247
|
+
exports.useStepFormContext = useStepFormContext;
|
1248
|
+
exports.withControlledInput = withControlledInput;
|
1249
|
+
exports.withUncontrolledInput = withUncontrolledInput;
|
1250
|
+
//# sourceMappingURL=out.js.map
|
1251
|
+
//# sourceMappingURL=index.js.map
|