Skip to content

Commit

Permalink
chore(root): merge branch 'main' of github.com:nextui-org/nextui into…
Browse files Browse the repository at this point in the history 
… canary
  • Loading branch information
@jrgarciadev
jrgarciadev committed May 31, 2024
2 parents 68d1629 + a8d9ca0 commit be29da1
Show file tree
Hide file tree
Showing 13 changed files with 59 additions and 48 deletions.
16 changes: 15 additions & 1 deletion apps/docs/content/blog/v2.4.0.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list.

### Doctor Command add peerDependencies check

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).
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).

<Spacer y={4} />

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

<Spacer y={4} />

### Validation Behavior

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.

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.

```tsx
<form onSubmit={onSubmit}>
<Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" />
<Button type="submit">Submit</Button>
</form>
```

<Spacer y={4} />

## Other Changes

Expand Down
4 changes: 2 additions & 2 deletions apps/docs/content/components/date-range-picker/presets.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
import {useLocale} from "@react-aria/i18n";
import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date";
import {useLocale, useDateFormatter} from "@react-aria/i18n";
export default function App() {
let defaultDate = {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/checkbox-group.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
| description | `ReactNode` | The checkbox group description. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - |
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| 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.| - |
| 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` |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date";
| locale | `string` | The locale to display and edit the value according to. | - |
| description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
| 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.| - |
| 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` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-picker.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n";
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - |
| description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - |
| 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.| - |
| 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` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - |
Expand Down
6 changes: 2 additions & 4 deletions apps/docs/content/docs/components/date-range-picker.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,13 +270,11 @@ in multiple formats into `ZonedDateTime` objects.
import {
DateValue,
now,
useLocale,
startOfWeek,
startOfMonth,
useDateFormatter,
getLocalTimeZone,
} from "@internationalized/date";
import {I18nProvider} from "@react-aria/i18n";
import {useLocale, useDateFormatter} from "@react-aria/i18n";
```

<CodeDemo title="Presets" files={dateRangePickerContent.presets} />
Expand Down Expand Up @@ -354,7 +352,7 @@ import {I18nProvider} from "@react-aria/i18n";
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - |
| description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| 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. | - |
| 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.| - |
| 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` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
| placeholder | `string` | The placeholder of the input. | - |
| description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| 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.| - |
| 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` |
| startContent | `ReactNode` | Element to be rendered in the left side of the input. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the input. | - |
Expand Down
Loading

0 comments on commit be29da1

Please sign in to comment.