Skip to content

Commit be29da1

Browse files
jrgarciadevjrgarciadev
committed
chore(root): merge branch 'main' of github.com:nextui-org/nextui into canary
2 parents 68d1629 + a8d9ca0 commit be29da1

File tree

13 files changed

+59
-48
lines changed

13 files changed

+59
-48
lines changed

‎apps/docs/content/blog/v2.4.0.mdx

+15-1
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list.
230230

231231
### Doctor Command add peerDependencies check
232232

233-
The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954).
233+
The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies. (See [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954) for more).
234234

235235
<Spacer y={4} />
236236

@@ -268,6 +268,20 @@ you need to update the import as follows:
268268

269269
<Spacer y={4} />
270270

271+
### Validation Behavior
272+
273+
Since v2.4.0, we've changed the default validation behavior to `aria` which means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above.
274+
275+
For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead.
276+
277+
```tsx
278+
<form onSubmit={onSubmit}>
279+
<Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" />
280+
<Button type="submit">Submit</Button>
281+
</form>
282+
```
283+
284+
<Spacer y={4} />
271285

272286
## Other Changes
273287

‎apps/docs/content/components/date-range-picker/presets.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
2-
import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
3-
import {useLocale} from "@react-aria/i18n";
2+
import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date";
3+
import {useLocale, useDateFormatter} from "@react-aria/i18n";
44
55
export default function App() {
66
let defaultDate = {

‎apps/docs/content/docs/components/checkbox-group.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
109109
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
110110
| description | `ReactNode` | The checkbox group description. | - |
111111
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - |
112-
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
112+
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
113113
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
114114
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
115115
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |

‎apps/docs/content/docs/components/date-input.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date";
299299
| locale | `string` | The locale to display and edit the value according to. | - |
300300
| description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - |
301301
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
302-
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
302+
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
303303
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
304304
| startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - |
305305
| endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - |

‎apps/docs/content/docs/components/date-picker.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n";
313313
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - |
314314
| description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - |
315315
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
316-
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
316+
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
317317
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
318318
| startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - |
319319
| endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - |

‎apps/docs/content/docs/components/date-range-picker.mdx

+2-4
Original file line numberDiff line numberDiff line change
@@ -270,13 +270,11 @@ in multiple formats into `ZonedDateTime` objects.
270270
import {
271271
DateValue,
272272
now,
273-
useLocale,
274273
startOfWeek,
275274
startOfMonth,
276-
useDateFormatter,
277275
getLocalTimeZone,
278276
} from "@internationalized/date";
279-
import {I18nProvider} from "@react-aria/i18n";
277+
import {useLocale, useDateFormatter} from "@react-aria/i18n";
280278
```
281279

282280
<CodeDemo title="Presets" files={dateRangePickerContent.presets} />
@@ -354,7 +352,7 @@ import {I18nProvider} from "@react-aria/i18n";
354352
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - |
355353
| description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - |
356354
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
357-
| validate | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
355+
| validate | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
358356
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` |
359357
| startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - |
360358
| endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - |

‎apps/docs/content/docs/components/input.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
207207
| placeholder | `string` | The placeholder of the input. | - |
208208
| description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - |
209209
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - |
210-
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
210+
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
211211
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
212212
| startContent | `ReactNode` | Element to be rendered in the left side of the input. | - |
213213
| endContent | `ReactNode` | Element to be rendered in the right side of the input. | - |

0 commit comments

Comments
 (0)