Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added TTransformedValues to FormProvider #10368

Merged

Conversation

yasamoka
Copy link
Contributor

@yasamoka yasamoka commented May 3, 2023

First of all, thank you so much for this wonderful library!

I am not sure if this pull request is suitable for the problem I was facing, and I may be missing something here, so I hope you can guide me further on this if needed.

The fix proposed relates to pull request #9735.

Say we have this example, inspired by the one you gave in the aforementioned pull request.

import { Form, FormProvider, useForm } from "react-hook-form";

const defaultValues = { test: "test" };

type FormValues = typeof defaultValues;
type TransformedFormValue = {
  test: number;
};

const Test = () => {
  const methods = useForm<FormValues, unknown, TransformedFormValue>({
    defaultValues: { test: "test" }
  });
  const { control } = methods;

  return (
    <FormProvider {...methods}>
      <Form<FormValues, TransformedFormValue>
        onSubmit={(data) => {
          console.log(data); // data.test -> number
        }}
        control={control} // optional if not using context
      >
        <input />
      </Form>
    </FormProvider>
  );
};

https://codesandbox.io/s/naughty-worker-35iqq0?file=/src/App.tsx

FormProvider would give a type error since it expects props of type UseFormReturn<FormValues, any, undefined> while formMethods is of type UseFormReturn<FormValues, any, TransformedValue>.

Thank you again!

@codesandbox
Copy link

codesandbox bot commented May 3, 2023

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@bluebill1049
Copy link
Member

Thanks for the PR. Could you run this script: https://github.com/react-hook-form/react-hook-form/blob/master/package.json#L47 thanks

@yasamoka
Copy link
Contributor Author

yasamoka commented May 4, 2023

For sure!

>>> pnpm api-extractor

> react-hook-form@7.44.0-rc.2 api-extractor .../react-hook-form
> api-extractor run --local


api-extractor 7.33.7  - https://api-extractor.com/

Using configuration from ./api-extractor.json
Analysis will use the bundled TypeScript version 4.8.4
*** The target project appears to use TypeScript 5.0.2 which is newer than the bundled compiler engine; consider upgrading API Extractor.
Warning: You have changed the public API signature for this project. Updating reports/api-extractor.md

API Extractor completed successfully

@bluebill1049 bluebill1049 merged commit e659e78 into react-hook-form:master May 4, 2023
6 checks passed
@yasamoka
Copy link
Contributor Author

yasamoka commented May 4, 2023

Thanks!

@yasamoka yasamoka deleted the transformed-values-form-provider branch May 4, 2023 01:15
fkoulen added a commit to ASVGay/the-rhapsodies that referenced this pull request Jun 13, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [react-hook-form](https://www.react-hook-form.com)
([source](https://togithub.com/react-hook-form/react-hook-form)) |
[`7.43.9` ->
`7.44.3`](https://renovatebot.com/diffs/npm/react-hook-form/7.43.9/7.44.3)
|
[![age](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.3/age-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.3/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.3/compatibility-slim/7.43.9)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.3/confidence-slim/7.43.9)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>react-hook-form/react-hook-form</summary>

###
[`v7.44.3`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.3):
Version 7.44.3

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.44.2...v7.44.3)

🦉 fix: add named component export
([#&#8203;10486](https://togithub.com/react-hook-form/react-hook-form/issues/10486))
💭 fix React import inconsistency
([#&#8203;10479](https://togithub.com/react-hook-form/react-hook-form/issues/10479))
🏙️ fix: removed code from the README updater which was trying to read a
non-existent `docs/Helpers.yaml`
📝 fix doc: update urls from /api to /docs
([#&#8203;10468](https://togithub.com/react-hook-form/react-hook-form/issues/10468))

thanks to [@&#8203;Moshyfawn](https://togithub.com/Moshyfawn)
@&#8203;[@&#8203;protofarer](https://togithub.com/protofarer)
[@&#8203;farfromrest](https://togithub.com/farfromrest)

###
[`v7.44.2`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.2):
Version 7.44.2

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.44.1...v7.44.2)

🪟 fix
[#&#8203;10456](https://togithub.com/react-hook-form/react-hook-form/issues/10456)
`object.hasown` replaced with `hasOwnProperty`
([#&#8203;10458](https://togithub.com/react-hook-form/react-hook-form/issues/10458))

###
[`v7.44.1`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.1):
Version 7.44.1

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.44.0...v7.44.1)

🐞 fix `<Form />` component content-type json type missing
([#&#8203;10454](https://togithub.com/react-hook-form/react-hook-form/issues/10454))

###
[`v7.44.0`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.0):
Version 7.44.0

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.9...v7.44.0)

📄 New `<Form />` Component
([react-hook-form/react-hook-form#9735)

https://react-hook-form.com/docs/useform/form

-   add try and catch for JSON.stringify

```tsx
// Send post request with formData
<Form
  action="/api"
  control={control}
  onSuccess={() => {
    alert("Great");
  }}
/>

// Send post request with json form data
<Form action="/api" encType="application/json" headers={{ accessToken: 'test' }}> 
  {errors.root?.server.type === 500 && 'Error message'}
  {errors.root?.server.type === 400 && 'Error message'}
</Form>

// Send post request with formData with fetch
<Form
  onSubmit={async ({ formData, data, formDataJson, event }) => {
    await fetch("api", {
      method: "post",
      body: formData,
    });
  }}
/>
```

🗝️ support TransformedValues with useFormContext
([react-hook-form/react-hook-form#10322)

```tsx
useFormContext<FormValue, TransformedValues>()
```

🚔 added TTransformedValues to FormProvider
([react-hook-form/react-hook-form#10368)

```tsx
FormProviderProps<TFieldValues, TContext, TTransformedValues>
```

🐞 fix
[react-hook-form/react-hook-form#10139
with errors diff from the previous with field array action
([react-hook-form/react-hook-form#10216)
🐞 related
[react-hook-form/react-hook-form#10238
return default values in watch and useWatch when reset is called with an
empty object
🦮 remove unnecessary as unknown as cast
([react-hook-form/react-hook-form#10300)
🧛‍♂️ close
[react-hook-form/react-hook-form#10277
remove pattern empty string check
([react-hook-form/react-hook-form#10279)
🐞 fix
[react-hook-form/react-hook-form#9037
bugs that occur in the presence of Array polyfills
([react-hook-form/react-hook-form#10328)
🫥 close
[react-hook-form/react-hook-form#10348
stop shouldUseNativeValidation pass down constraint props
([react-hook-form/react-hook-form#10350)
😵‍💫 close
[react-hook-form/react-hook-form#10386
re-register controller input to fix strict mode
([react-hook-form/react-hook-form#10418)
✍️ update form.tsx for TSdoc
([react-hook-form/react-hook-form#10399)

thanks to [@&#8203;yasamoka](https://togithub.com/yasamoka) &
[@&#8203;Torvin](https://togithub.com/Torvin)
[@&#8203;ryota-murakami](https://togithub.com/ryota-murakami) &
[@&#8203;devakrishna33](https://togithub.com/devakrishna33)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://app.renovatebot.com/dashboard#github/ASVGay/the-rhapsodies).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS4xMTUuMiIsInVwZGF0ZWRJblZlciI6IjM1LjExNS4yIiwidGFyZ2V0QnJhbmNoIjoiZGV2In0=-->
patrykkopycinski added a commit to elastic/kibana that referenced this pull request Jul 12, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [react-hook-form](https://www.react-hook-form.com)
([source](https://togithub.com/react-hook-form/react-hook-form)) |
[`^7.43.2` ->
`^7.44.2`](https://renovatebot.com/diffs/npm/react-hook-form/7.43.2/7.44.2)
|
[![age](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.2/age-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.2/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.2/compatibility-slim/7.43.2)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://badges.renovateapi.com/packages/npm/react-hook-form/7.44.2/confidence-slim/7.43.2)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>react-hook-form/react-hook-form</summary>

###
[`v7.44.2`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.2):
Version 7.44.2

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.44.1...v7.44.2)

🪟 fix
[#&#8203;10456](https://togithub.com/react-hook-form/react-hook-form/issues/10456)
`object.hasown` replaced with `hasOwnProperty`
([#&#8203;10458](https://togithub.com/react-hook-form/react-hook-form/issues/10458))

###
[`v7.44.1`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.1):
Version 7.44.1

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.44.0...v7.44.1)

🐞 fix `<Form />` component content-type json type missing
([#&#8203;10454](https://togithub.com/react-hook-form/react-hook-form/issues/10454))

###
[`v7.44.0`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.44.0):
Version 7.44.0

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.9...v7.44.0)

📄 New `<Form />` Component
([react-hook-form/react-hook-form#9735)

https://react-hook-form.com/docs/useform/form

-   add try and catch for JSON.stringify

```tsx
// Send post request with formData
<Form
  action="/api"
  control={control}
  onSuccess={() => {
    alert("Great");
  }}
/>

// Send post request with json form data
<Form action="/api" encType="application/json" headers={{ accessToken: 'test' }}> 
  {errors.root?.server.type === 500 && 'Error message'}
  {errors.root?.server.type === 400 && 'Error message'}
</Form>

// Send post request with formData with fetch
<Form
  onSubmit={async ({ formData, data, formDataJson, event }) => {
    await fetch("api", {
      method: "post",
      body: formData,
    });
  }}
/>
```

🗝️ support TransformedValues with useFormContext
([react-hook-form/react-hook-form#10322)

```tsx
useFormContext<FormValue, TransformedValues>()
```

🚔 added TTransformedValues to FormProvider
([react-hook-form/react-hook-form#10368)

```tsx
FormProviderProps<TFieldValues, TContext, TTransformedValues>
```

🐞 fix
[react-hook-form/react-hook-form#10139
with errors diff from the previous with field array action
([react-hook-form/react-hook-form#10216)
🐞 related
[react-hook-form/react-hook-form#10238
return default values in watch and useWatch when reset is called with an
empty object
🦮 remove unnecessary as unknown as cast
([react-hook-form/react-hook-form#10300)
🧛‍♂️ close
[react-hook-form/react-hook-form#10277
remove pattern empty string check
([react-hook-form/react-hook-form#10279)
🐞 fix
[react-hook-form/react-hook-form#9037
bugs that occur in the presence of Array polyfills
([react-hook-form/react-hook-form#10328)
🫥 close
[react-hook-form/react-hook-form#10348
stop shouldUseNativeValidation pass down constraint props
([react-hook-form/react-hook-form#10350)
😵‍💫 close
[react-hook-form/react-hook-form#10386
re-register controller input to fix strict mode
([react-hook-form/react-hook-form#10418)
✍️ update form.tsx for TSdoc
([react-hook-form/react-hook-form#10399)

thanks to [@&#8203;yasamoka](https://togithub.com/yasamoka) &
[@&#8203;Torvin](https://togithub.com/Torvin)
[@&#8203;ryota-murakami](https://togithub.com/ryota-murakami) &
[@&#8203;devakrishna33](https://togithub.com/devakrishna33)

###
[`v7.43.9`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.9):
Version 7.43.9

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.8...v7.43.9)

🍄 close
[#&#8203;10195](https://togithub.com/react-hook-form/react-hook-form/issues/10195)
close async defaultValues not load
([#&#8203;10203](https://togithub.com/react-hook-form/react-hook-form/issues/10203))
Revert "🐞 fix
[#&#8203;10139](https://togithub.com/react-hook-form/react-hook-form/issues/10139)
useFieldArray array error not updating in some cases
([#&#8203;10150](https://togithub.com/react-hook-form/react-hook-form/issues/10150))"

###
[`v7.43.8`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.8):
Version 7.43.8

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.7...v7.43.8)

🪡 related
[#&#8203;10143](https://togithub.com/react-hook-form/react-hook-form/issues/10143)
did not update dirty until interacted
([#&#8203;10157](https://togithub.com/react-hook-form/react-hook-form/issues/10157))
🐞 fix
[#&#8203;10139](https://togithub.com/react-hook-form/react-hook-form/issues/10139)
useFieldArray array error not updating in some cases
([#&#8203;10150](https://togithub.com/react-hook-form/react-hook-form/issues/10150))

thanks to [@&#8203;kylemclean](https://togithub.com/kylemclean)

###
[`v7.43.7`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.7):
Version 7.43.7

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.6...v7.43.7)

🐞 fix
[#&#8203;10131](https://togithub.com/react-hook-form/react-hook-form/issues/10131)
regression on NaN data type
([#&#8203;10132](https://togithub.com/react-hook-form/react-hook-form/issues/10132))
🐞 fix
[#&#8203;10129](https://togithub.com/react-hook-form/react-hook-form/issues/10129)
useFieldArray unmount fieldArray wihtout register
([#&#8203;10130](https://togithub.com/react-hook-form/react-hook-form/issues/10130))
🦶 upgrade to TS 5.0.0
([#&#8203;9834](https://togithub.com/react-hook-form/react-hook-form/issues/9834))

###
[`v7.43.6`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.6):
Version 7.43.6

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.5...v7.43.6)

🐞 fix(appendErrors): incorrect type, it can take an array of errors
([#&#8203;10125](https://togithub.com/react-hook-form/react-hook-form/issues/10125))
✍️ close
[#&#8203;10096](https://togithub.com/react-hook-form/react-hook-form/issues/10096)
react strict mode with mounted field value
([#&#8203;10102](https://togithub.com/react-hook-form/react-hook-form/issues/10102))
🦮 fix: isLoading form state
([#&#8203;10095](https://togithub.com/react-hook-form/react-hook-form/issues/10095))
📝 fix: typos in tsdoc
([#&#8203;10088](https://togithub.com/react-hook-form/react-hook-form/issues/10088))
🩴 close
[#&#8203;10078](https://togithub.com/react-hook-form/react-hook-form/issues/10078)
prevent stabled aysnc validation
([#&#8203;10082](https://togithub.com/react-hook-form/react-hook-form/issues/10082))
🐞 fix
[#&#8203;10064](https://togithub.com/react-hook-form/react-hook-form/issues/10064)
native validation when subscribe to isValid
([#&#8203;10072](https://togithub.com/react-hook-form/react-hook-form/issues/10072))
📝 correct typo in field array type declaration
([#&#8203;10066](https://togithub.com/react-hook-form/react-hook-form/issues/10066))

thanks to [@&#8203;jorisre](https://togithub.com/jorisre)
[@&#8203;chrisbarless](https://togithub.com/chrisbarless)
[@&#8203;mjw-isp](https://togithub.com/mjw-isp) and
[@&#8203;adamtowle](https://togithub.com/adamtowle)

###
[`v7.43.5`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.5):
Version 7.43.5

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.4...v7.43.5)

🐰 prevent runtime error with subscribe function
([#&#8203;10052](https://togithub.com/react-hook-form/react-hook-form/issues/10052))
🪔 close
[#&#8203;10045](https://togithub.com/react-hook-form/react-hook-form/issues/10045)
improve `useController` defaultValue restore under strict mode with
double `useEffect`
([#&#8203;10049](https://togithub.com/react-hook-form/react-hook-form/issues/10049))
📷 improve form values state update
([#&#8203;10029](https://togithub.com/react-hook-form/react-hook-form/issues/10029))

###
[`v7.43.4`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.4):
Version 7.43.4

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.3...v7.43.4)

🐞 fix
[#&#8203;10021](https://togithub.com/react-hook-form/react-hook-form/issues/10021)
issue with `.next` runtime error and fix cypress action
([#&#8203;10026](https://togithub.com/react-hook-form/react-hook-form/issues/10026))

###
[`v7.43.3`](https://togithub.com/react-hook-form/react-hook-form/releases/tag/v7.43.3):
Version 7.43.3

[Compare
Source](https://togithub.com/react-hook-form/react-hook-form/compare/v7.43.2...v7.43.3)

📐 fix `resetField` defaultValue type and reduce any type
([#&#8203;10024](https://togithub.com/react-hook-form/react-hook-form/issues/10024))
🐞 fix
[#&#8203;9997](https://togithub.com/react-hook-form/react-hook-form/issues/9997)
issue on the mounted state is updated with values prop
([#&#8203;10001](https://togithub.com/react-hook-form/react-hook-form/issues/10001))
Revert "🏍 delete dirty fields node instead of marking as false
([#&#8203;9156](https://togithub.com/react-hook-form/react-hook-form/issues/9156))"
([#&#8203;9996](https://togithub.com/react-hook-form/react-hook-form/issues/9996))
💅 improve state subscription consistency
([#&#8203;9984](https://togithub.com/react-hook-form/react-hook-form/issues/9984))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://app.renovatebot.com/dashboard#github/elastic/kibana).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTkuMCIsInVwZGF0ZWRJblZlciI6IjM1LjExMC4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants