@os-design/form 1.0.17 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +5 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +5 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/cjs/index.js
CHANGED
|
@@ -163,8 +163,12 @@ var createFieldComponent = function createFieldComponent(form) {
|
|
|
163
163
|
}, [transformer]);
|
|
164
164
|
var onChange = (0, _react.useCallback)(function (v) {
|
|
165
165
|
form.values.set(name, transformerRef.current(v));
|
|
166
|
-
form.errors.set(name, undefined); // Reset the error when the value is changed
|
|
167
166
|
}, [name]);
|
|
167
|
+
|
|
168
|
+
// Reset the error when the value was changed
|
|
169
|
+
(0, _react.useEffect)(function () {
|
|
170
|
+
form.errors.set(name, undefined);
|
|
171
|
+
}, [name, value]);
|
|
168
172
|
var renderRef = (0, _react.useRef)(render);
|
|
169
173
|
(0, _react.useEffect)(function () {
|
|
170
174
|
renderRef.current = render;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["createUseValueHook","form","name","useState","values","get","value","setValue","useEffect","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","useRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","render","error","initValue","useMemo","initValues","modified","isEqual","reset","useCallback","onChange","undefined","renderRef","inputProps","fieldState","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","useDeepEqualMemo","formRef","Form","useExistingForm","useFormContext","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { PathReturn, Path, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string | undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue> {\n name: TName;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState\n ) => ReactElement | null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>>(\n props: FieldProps<TName, PathReturn<TValues, TName>>\n ) => {\n const { name, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n form.errors.set(name, undefined); // Reset the error when the value is changed\n },\n [name]\n );\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState),\n [fieldState, inputProps]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> | null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["createUseValueHook","form","name","useState","values","get","value","setValue","useEffect","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","useRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","render","error","initValue","useMemo","initValues","modified","isEqual","reset","useCallback","onChange","undefined","renderRef","inputProps","fieldState","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","useDeepEqualMemo","formRef","Form","useExistingForm","useFormContext","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { PathReturn, Path, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string | undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue> {\n name: TName;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState\n ) => ReactElement | null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>>(\n props: FieldProps<TName, PathReturn<TValues, TName>>\n ) => {\n const { name, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n },\n [name]\n );\n\n // Reset the error when the value was changed\n useEffect(() => {\n form.errors.set(name, undefined);\n }, [name, value]);\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState),\n [fieldState, inputProps]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> | null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -66,8 +66,12 @@ const createFieldComponent = form => {
|
|
|
66
66
|
}, [transformer]);
|
|
67
67
|
const onChange = useCallback(v => {
|
|
68
68
|
form.values.set(name, transformerRef.current(v));
|
|
69
|
-
form.errors.set(name, undefined); // Reset the error when the value is changed
|
|
70
69
|
}, [name]);
|
|
70
|
+
|
|
71
|
+
// Reset the error when the value was changed
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
form.errors.set(name, undefined);
|
|
74
|
+
}, [name, value]);
|
|
71
75
|
const renderRef = useRef(render);
|
|
72
76
|
useEffect(() => {
|
|
73
77
|
renderRef.current = render;
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","Form","useFormContext","isEqual","get","useDeepEqualMemo","default","createUseValueHook","form","name","value","setValue","values","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","render","error","initValue","initValues","modified","reset","onChange","undefined","renderRef","inputProps","fieldState","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","formRef","useExistingForm","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { PathReturn, Path, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string | undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue> {\n name: TName;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState\n ) => ReactElement | null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>>(\n props: FieldProps<TName, PathReturn<TValues, TName>>\n ) => {\n const { name, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n form.errors.set(name, undefined); // Reset the error when the value is changed\n },\n [name]\n );\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState),\n [fieldState, inputProps]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> | null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useCallback","useEffect","useMemo","useRef","useState","Form","useFormContext","isEqual","get","useDeepEqualMemo","default","createUseValueHook","form","name","value","setValue","values","subscription","subscribe","v","unsubscribe","createUseErrorHook","errors","createUseTransformerHook","useValue","transformer","transformerRef","current","partialValues","Object","entries","forEach","n","set","createFieldComponent","useError","props","render","error","initValue","initValues","modified","reset","onChange","undefined","renderRef","inputProps","fieldState","useModifiedFields","modifiedFields","setModifiedFields","modifiedFieldsRef","initValuesRef","subscribeToAll","isInitValue","fields","includes","filter","field","useFormResponse","Field","useTransformer","length","useForm","memoizedInitValues","formRef","useExistingForm","Error"],"sources":["../../src/index.tsx"],"sourcesContent":["import {\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Form from './Form';\nimport { PathReturn, Path, Values } from './types';\nimport useFormContext from './useFormContext';\nimport isEqual from './utils/isEqual';\nimport { get } from './utils/path';\nimport useDeepEqualMemo from './utils/useDeepEqualMemo';\n\nexport * from './BroadcastObserverManager';\nexport * from './ErrorObserverManager';\nexport { default as Form } from './Form';\nexport * from './types';\nexport * from './useFormContext';\n\nconst createUseValueHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<PathReturn<TValues, TName>>(\n form.values.get(name)\n );\n\n useEffect(() => {\n const subscription = form.values.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nconst createUseErrorHook =\n <TValues extends Values>(form: Form<TValues>) =>\n <TName extends Path<TValues>>(name: TName) => {\n const [value, setValue] = useState<string | undefined>(\n form.errors.get(name)\n );\n\n useEffect(() => {\n const subscription = form.errors.subscribe(name, (v) => {\n setValue(v);\n });\n return () => subscription.unsubscribe();\n }, [name]);\n\n return value;\n };\n\nexport type Transformer<TValues extends Values, TName extends Path<TValues>> = (\n value: PathReturn<TValues, TName>\n) => {\n [K in Path<TValues>]?: PathReturn<TValues, K>;\n};\n\nconst createUseTransformerHook = <TValues extends Values>(\n form: Form<TValues>\n) => {\n const useValue = createUseValueHook(form);\n return <TName extends Path<TValues>>(\n name: TName,\n transformer: Transformer<TValues, TName>\n ) => {\n const value = useValue(name);\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n useEffect(() => {\n const partialValues = transformerRef.current(value);\n Object.entries(partialValues).forEach(([n, v]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n form.values.set(n as Path<TValues>, v as any);\n });\n }, [value]);\n };\n};\n\ninterface InputProps<TValue> {\n value: TValue;\n onChange: (value: TValue) => void;\n}\ninterface FieldState {\n error?: string;\n modified: boolean;\n reset: () => void;\n}\ninterface FieldProps<TName, TValue> {\n name: TName;\n transformer?: (value: TValue) => TValue;\n render: (\n inputProps: InputProps<TValue>,\n fieldState: FieldState\n ) => ReactElement | null;\n}\n\nconst createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {\n const useValue = createUseValueHook(form);\n const useError = createUseErrorHook(form);\n return <TName extends Path<TValues>>(\n props: FieldProps<TName, PathReturn<TValues, TName>>\n ) => {\n const { name, transformer = (v) => v, render } = props;\n\n const value = useValue(name);\n const error = useError(name);\n\n const initValue = useMemo(() => get(form.initValues, name), [name]);\n const modified = useMemo(\n () => !isEqual(value, initValue),\n [initValue, value]\n );\n const reset = useCallback(\n () => form.values.set(name, initValue),\n [initValue, name]\n );\n\n const transformerRef = useRef(transformer);\n useEffect(() => {\n transformerRef.current = transformer;\n }, [transformer]);\n\n const onChange = useCallback(\n (v: PathReturn<TValues, TName>) => {\n form.values.set(name, transformerRef.current(v));\n },\n [name]\n );\n\n // Reset the error when the value was changed\n useEffect(() => {\n form.errors.set(name, undefined);\n }, [name, value]);\n\n const renderRef = useRef(render);\n useEffect(() => {\n renderRef.current = render;\n }, [render]);\n\n const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);\n const fieldState = useMemo(\n () => ({ error, modified, reset }),\n [error, modified, reset]\n );\n\n return useMemo(\n () => renderRef.current(inputProps, fieldState),\n [fieldState, inputProps]\n );\n };\n};\n\nconst useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {\n const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(\n []\n );\n\n const modifiedFieldsRef = useRef(modifiedFields);\n useEffect(() => {\n modifiedFieldsRef.current = modifiedFields;\n }, [modifiedFields]);\n\n const initValuesRef = useRef(form.initValues);\n useEffect(() => {\n initValuesRef.current = form.initValues;\n }, [form.initValues]);\n\n useEffect(() => {\n const subscription = form.values.subscribeToAll((name, value) => {\n const isInitValue = isEqual(value, get(initValuesRef.current, name));\n const fields = modifiedFieldsRef.current;\n\n if (fields.includes(name)) {\n if (isInitValue) {\n setModifiedFields(fields.filter((field) => field !== name));\n }\n } else if (!isInitValue) {\n setModifiedFields([...fields, name]);\n }\n });\n return () => subscription.unsubscribe();\n }, [form.values]);\n\n return modifiedFields;\n};\n\nconst useFormResponse = <TValues extends Values>(form: Form<TValues>) => {\n const Field = useMemo(() => createFieldComponent(form), [form]);\n const useValue = useMemo(() => createUseValueHook(form), [form]);\n const useError = useMemo(() => createUseErrorHook(form), [form]);\n const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);\n\n const modifiedFields = useModifiedFields(form);\n const modified = useMemo(\n () => modifiedFields.length > 0,\n [modifiedFields.length]\n );\n\n return useMemo(\n () => ({\n form,\n Field,\n useValue,\n useError,\n useTransformer,\n modifiedFields,\n modified,\n }),\n [Field, form, modified, modifiedFields, useError, useTransformer, useValue]\n );\n};\n\nexport const useForm = <TValues extends Values = Values>(\n initValues: TValues\n) => {\n const memoizedInitValues = useDeepEqualMemo<TValues>(\n () => initValues,\n [initValues]\n );\n\n const formRef = useRef(new Form<TValues>(memoizedInitValues));\n useEffect(() => {\n formRef.current.initValues = memoizedInitValues;\n formRef.current.reset();\n }, [memoizedInitValues]);\n\n return useFormResponse(formRef.current);\n};\n\nexport const useExistingForm = <TValues extends Values = Values>() => {\n const form = useFormContext<Form<TValues> | null>();\n if (!form) throw new Error('Wrap your form in a FormProvider');\n return useFormResponse(form);\n};\n"],"mappings":"AAAA,SAEEA,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,IAAI,MAAM,QAAQ;AAEzB,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,OAAO,MAAM,iBAAiB;AACrC,SAASC,GAAG,QAAQ,cAAc;AAClC,OAAOC,gBAAgB,MAAM,0BAA0B;AAEvD,cAAc,4BAA4B;AAC1C,cAAc,wBAAwB;AACtC,SAASC,OAAO,IAAIL,IAAI,QAAQ,QAAQ;AACxC,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAEhC,MAAMM,kBAAkB,GACGC,IAAmB,IACdC,IAAW,IAAK;EAC5C,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAChCQ,IAAI,CAACI,MAAM,CAACR,GAAG,CAACK,IAAI,CAAC,CACtB;EAEDZ,SAAS,CAAC,MAAM;IACd,MAAMgB,YAAY,GAAGL,IAAI,CAACI,MAAM,CAACE,SAAS,CAACL,IAAI,EAAGM,CAAC,IAAK;MACtDJ,QAAQ,CAACI,CAAC,CAAC;IACb,CAAC,CAAC;IACF,OAAO,MAAMF,YAAY,CAACG,WAAW,EAAE;EACzC,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;EAEV,OAAOC,KAAK;AACd,CAAC;AAEH,MAAMO,kBAAkB,GACGT,IAAmB,IACdC,IAAW,IAAK;EAC5C,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAChCQ,IAAI,CAACU,MAAM,CAACd,GAAG,CAACK,IAAI,CAAC,CACtB;EAEDZ,SAAS,CAAC,MAAM;IACd,MAAMgB,YAAY,GAAGL,IAAI,CAACU,MAAM,CAACJ,SAAS,CAACL,IAAI,EAAGM,CAAC,IAAK;MACtDJ,QAAQ,CAACI,CAAC,CAAC;IACb,CAAC,CAAC;IACF,OAAO,MAAMF,YAAY,CAACG,WAAW,EAAE;EACzC,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;EAEV,OAAOC,KAAK;AACd,CAAC;AAQH,MAAMS,wBAAwB,GAC5BX,IAAmB,IAChB;EACH,MAAMY,QAAQ,GAAGb,kBAAkB,CAACC,IAAI,CAAC;EACzC,OAAO,CACLC,IAAW,EACXY,WAAwC,KACrC;IACH,MAAMX,KAAK,GAAGU,QAAQ,CAACX,IAAI,CAAC;IAE5B,MAAMa,cAAc,GAAGvB,MAAM,CAACsB,WAAW,CAAC;IAC1CxB,SAAS,CAAC,MAAM;MACdyB,cAAc,CAACC,OAAO,GAAGF,WAAW;IACtC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;IAEjBxB,SAAS,CAAC,MAAM;MACd,MAAM2B,aAAa,GAAGF,cAAc,CAACC,OAAO,CAACb,KAAK,CAAC;MACnDe,MAAM,CAACC,OAAO,CAACF,aAAa,CAAC,CAACG,OAAO,CAAC,CAAC,CAACC,CAAC,EAAEb,CAAC,CAAC,KAAK;QAChD;QACAP,IAAI,CAACI,MAAM,CAACiB,GAAG,CAACD,CAAC,EAAmBb,CAAC,CAAQ;MAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,CAACL,KAAK,CAAC,CAAC;EACb,CAAC;AACH,CAAC;AAoBD,MAAMoB,oBAAoB,GAA4BtB,IAAmB,IAAK;EAC5E,MAAMY,QAAQ,GAAGb,kBAAkB,CAACC,IAAI,CAAC;EACzC,MAAMuB,QAAQ,GAAGd,kBAAkB,CAACT,IAAI,CAAC;EACzC,OACEwB,KAAoD,IACjD;IACH,MAAM;MAAEvB,IAAI;MAAEY,WAAW,GAAIN,CAAC,IAAKA,CAAC;MAAEkB;IAAO,CAAC,GAAGD,KAAK;IAEtD,MAAMtB,KAAK,GAAGU,QAAQ,CAACX,IAAI,CAAC;IAC5B,MAAMyB,KAAK,GAAGH,QAAQ,CAACtB,IAAI,CAAC;IAE5B,MAAM0B,SAAS,GAAGrC,OAAO,CAAC,MAAMM,GAAG,CAACI,IAAI,CAAC4B,UAAU,EAAE3B,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;IACnE,MAAM4B,QAAQ,GAAGvC,OAAO,CACtB,MAAM,CAACK,OAAO,CAACO,KAAK,EAAEyB,SAAS,CAAC,EAChC,CAACA,SAAS,EAAEzB,KAAK,CAAC,CACnB;IACD,MAAM4B,KAAK,GAAG1C,WAAW,CACvB,MAAMY,IAAI,CAACI,MAAM,CAACiB,GAAG,CAACpB,IAAI,EAAE0B,SAAS,CAAC,EACtC,CAACA,SAAS,EAAE1B,IAAI,CAAC,CAClB;IAED,MAAMa,cAAc,GAAGvB,MAAM,CAACsB,WAAW,CAAC;IAC1CxB,SAAS,CAAC,MAAM;MACdyB,cAAc,CAACC,OAAO,GAAGF,WAAW;IACtC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;IAEjB,MAAMkB,QAAQ,GAAG3C,WAAW,CACzBmB,CAA6B,IAAK;MACjCP,IAAI,CAACI,MAAM,CAACiB,GAAG,CAACpB,IAAI,EAAEa,cAAc,CAACC,OAAO,CAACR,CAAC,CAAC,CAAC;IAClD,CAAC,EACD,CAACN,IAAI,CAAC,CACP;;IAED;IACAZ,SAAS,CAAC,MAAM;MACdW,IAAI,CAACU,MAAM,CAACW,GAAG,CAACpB,IAAI,EAAE+B,SAAS,CAAC;IAClC,CAAC,EAAE,CAAC/B,IAAI,EAAEC,KAAK,CAAC,CAAC;IAEjB,MAAM+B,SAAS,GAAG1C,MAAM,CAACkC,MAAM,CAAC;IAChCpC,SAAS,CAAC,MAAM;MACd4C,SAAS,CAAClB,OAAO,GAAGU,MAAM;IAC5B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;IAEZ,MAAMS,UAAU,GAAG5C,OAAO,CAAC,OAAO;MAAEY,KAAK;MAAE6B;IAAS,CAAC,CAAC,EAAE,CAACA,QAAQ,EAAE7B,KAAK,CAAC,CAAC;IAC1E,MAAMiC,UAAU,GAAG7C,OAAO,CACxB,OAAO;MAAEoC,KAAK;MAAEG,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAClC,CAACJ,KAAK,EAAEG,QAAQ,EAAEC,KAAK,CAAC,CACzB;IAED,OAAOxC,OAAO,CACZ,MAAM2C,SAAS,CAAClB,OAAO,CAACmB,UAAU,EAAEC,UAAU,CAAC,EAC/C,CAACA,UAAU,EAAED,UAAU,CAAC,CACzB;EACH,CAAC;AACH,CAAC;AAED,MAAME,iBAAiB,GAA4BpC,IAAmB,IAAK;EACzE,MAAM,CAACqC,cAAc,EAAEC,iBAAiB,CAAC,GAAG9C,QAAQ,CAClD,EAAE,CACH;EAED,MAAM+C,iBAAiB,GAAGhD,MAAM,CAAC8C,cAAc,CAAC;EAChDhD,SAAS,CAAC,MAAM;IACdkD,iBAAiB,CAACxB,OAAO,GAAGsB,cAAc;EAC5C,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,MAAMG,aAAa,GAAGjD,MAAM,CAACS,IAAI,CAAC4B,UAAU,CAAC;EAC7CvC,SAAS,CAAC,MAAM;IACdmD,aAAa,CAACzB,OAAO,GAAGf,IAAI,CAAC4B,UAAU;EACzC,CAAC,EAAE,CAAC5B,IAAI,CAAC4B,UAAU,CAAC,CAAC;EAErBvC,SAAS,CAAC,MAAM;IACd,MAAMgB,YAAY,GAAGL,IAAI,CAACI,MAAM,CAACqC,cAAc,CAAC,CAACxC,IAAI,EAAEC,KAAK,KAAK;MAC/D,MAAMwC,WAAW,GAAG/C,OAAO,CAACO,KAAK,EAAEN,GAAG,CAAC4C,aAAa,CAACzB,OAAO,EAAEd,IAAI,CAAC,CAAC;MACpE,MAAM0C,MAAM,GAAGJ,iBAAiB,CAACxB,OAAO;MAExC,IAAI4B,MAAM,CAACC,QAAQ,CAAC3C,IAAI,CAAC,EAAE;QACzB,IAAIyC,WAAW,EAAE;UACfJ,iBAAiB,CAACK,MAAM,CAACE,MAAM,CAAEC,KAAK,IAAKA,KAAK,KAAK7C,IAAI,CAAC,CAAC;QAC7D;MACF,CAAC,MAAM,IAAI,CAACyC,WAAW,EAAE;QACvBJ,iBAAiB,CAAC,CAAC,GAAGK,MAAM,EAAE1C,IAAI,CAAC,CAAC;MACtC;IACF,CAAC,CAAC;IACF,OAAO,MAAMI,YAAY,CAACG,WAAW,EAAE;EACzC,CAAC,EAAE,CAACR,IAAI,CAACI,MAAM,CAAC,CAAC;EAEjB,OAAOiC,cAAc;AACvB,CAAC;AAED,MAAMU,eAAe,GAA4B/C,IAAmB,IAAK;EACvE,MAAMgD,KAAK,GAAG1D,OAAO,CAAC,MAAMgC,oBAAoB,CAACtB,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAC/D,MAAMY,QAAQ,GAAGtB,OAAO,CAAC,MAAMS,kBAAkB,CAACC,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAChE,MAAMuB,QAAQ,GAAGjC,OAAO,CAAC,MAAMmB,kBAAkB,CAACT,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAChE,MAAMiD,cAAc,GAAG3D,OAAO,CAAC,MAAMqB,wBAAwB,CAACX,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAE5E,MAAMqC,cAAc,GAAGD,iBAAiB,CAACpC,IAAI,CAAC;EAC9C,MAAM6B,QAAQ,GAAGvC,OAAO,CACtB,MAAM+C,cAAc,CAACa,MAAM,GAAG,CAAC,EAC/B,CAACb,cAAc,CAACa,MAAM,CAAC,CACxB;EAED,OAAO5D,OAAO,CACZ,OAAO;IACLU,IAAI;IACJgD,KAAK;IACLpC,QAAQ;IACRW,QAAQ;IACR0B,cAAc;IACdZ,cAAc;IACdR;EACF,CAAC,CAAC,EACF,CAACmB,KAAK,EAAEhD,IAAI,EAAE6B,QAAQ,EAAEQ,cAAc,EAAEd,QAAQ,EAAE0B,cAAc,EAAErC,QAAQ,CAAC,CAC5E;AACH,CAAC;AAED,OAAO,MAAMuC,OAAO,GAClBvB,UAAmB,IAChB;EACH,MAAMwB,kBAAkB,GAAGvD,gBAAgB,CACzC,MAAM+B,UAAU,EAChB,CAACA,UAAU,CAAC,CACb;EAED,MAAMyB,OAAO,GAAG9D,MAAM,CAAC,IAAIE,IAAI,CAAU2D,kBAAkB,CAAC,CAAC;EAC7D/D,SAAS,CAAC,MAAM;IACdgE,OAAO,CAACtC,OAAO,CAACa,UAAU,GAAGwB,kBAAkB;IAC/CC,OAAO,CAACtC,OAAO,CAACe,KAAK,EAAE;EACzB,CAAC,EAAE,CAACsB,kBAAkB,CAAC,CAAC;EAExB,OAAOL,eAAe,CAACM,OAAO,CAACtC,OAAO,CAAC;AACzC,CAAC;AAED,OAAO,MAAMuC,eAAe,GAAG,MAAuC;EACpE,MAAMtD,IAAI,GAAGN,cAAc,EAAwB;EACnD,IAAI,CAACM,IAAI,EAAE,MAAM,IAAIuD,KAAK,CAAC,kCAAkC,CAAC;EAC9D,OAAOR,eAAe,CAAC/C,IAAI,CAAC;AAC9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAMb,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAMnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AAoCjC,MAAM,MAAM,WAAW,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,IAAI,CAC7E,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,KAC9B;KACF,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;CAC9C,CAAC;AA2BF,UAAU,UAAU,CAAC,MAAM;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AACD,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AACD,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM;IAChC,IAAI,EAAE,KAAK,CAAC;IACZ,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,EAAE,CACN,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,EAC9B,UAAU,EAAE,UAAU,KACnB,YAAY,GAAG,IAAI,CAAC;CAC1B;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAMb,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAMnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AAoCjC,MAAM,MAAM,WAAW,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,IAAI,CAC7E,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,KAC9B;KACF,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;CAC9C,CAAC;AA2BF,UAAU,UAAU,CAAC,MAAM;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AACD,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AACD,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM;IAChC,IAAI,EAAE,KAAK,CAAC;IACZ,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,EAAE,CACN,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,EAC9B,UAAU,EAAE,UAAU,KACnB,YAAY,GAAG,IAAI,CAAC;CAC1B;AAsHD,eAAO,MAAM,OAAO;;;;;;;;CAenB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAI3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/form",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=18"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "a4ef916e8a799c052eb0bf4e82ed89dec0178117"
|
|
38
38
|
}
|