Merge branch 'canary' into feat/date-picker-input-styling

nextui-org · Jun 8, 2024 · 28b1caa · 28b1caa
2 parents 299f10d + a06422f
commit 28b1caa
Show file tree

Hide file tree

Showing 34 changed files with 264 additions and 109 deletions.
diff --git a/.changeset/famous-mice-approve.md b/.changeset/famous-mice-approve.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/pagination": patch
+---
+
+Fixed pagination missing animation (#3138)
diff --git a/.changeset/giant-maps-bow.md b/.changeset/giant-maps-bow.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/shared-icons": patch
+---
+
+avoid passing non-DOM attributes to svg (#3184)
diff --git a/.changeset/grumpy-scissors-jam.md b/.changeset/grumpy-scissors-jam.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/tabs": patch
+---
+
+Fixed incorrect content in tab panel (#3159)
diff --git a/.changeset/lazy-comics-crash.md b/.changeset/lazy-comics-crash.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Add missing `data-invalid` attribute (#3149)
diff --git a/.changeset/thirty-timers-press.md b/.changeset/thirty-timers-press.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+set empty string instead of undefined for unsetting value (#3156)
diff --git a/.changeset/tough-peaches-live.md b/.changeset/tough-peaches-live.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/autocomplete": patch
+---
+
+Fix maximum update depth exceeded on Autocomplete component (#3094)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -14,7 +14,7 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
 ### Tooling
 
 - [PNPM](https://pnpm.io/) to manage packages and dependencies
-- [Tsup](https://tsup.egoist.sh/) to bundle packages
+- [Tsup](https://tsup.egoist.dev/) to bundle packages
 - [Storybook](https://storybook.js.org/) for rapid UI component development and
   testing
 - [Testing Library](https://testing-library.com/) for testing components and

diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
@@ -179,7 +179,8 @@
           "key": "checkbox",
           "title": "Checkbox",
           "keywords": "checkbox, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox.mdx"
+          "path": "/docs/components/checkbox.mdx",
+          "updated": true
         },
         {
           "key": "checkbox-group",

diff --git a/apps/docs/content/blog/v2.4.0.mdx b/apps/docs/content/blog/v2.4.0.mdx
@@ -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} />
 
@@ -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
 

diff --git a/apps/docs/content/components/checkbox/custom-check-icon.ts b/apps/docs/content/components/checkbox/custom-check-icon.ts
@@ -1,19 +1,15 @@
-const HeartIcon = `export const HeartIcon = ({
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
       fill='fill'
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
@@ -25,14 +21,17 @@ const HeartIcon = `export const HeartIcon = ({
 `;
 
 const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M6 12H18"

diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts
@@ -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 = {

diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
@@ -254,7 +254,7 @@ The following example uses the `defaultFilter` prop to filter the list of option
 
 ### Asynchronous Filtering
 
-Autocomplete supports asynchronous filtering, in the example below we are using the [useAyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
+Autocomplete supports asynchronous filtering, in the example below we are using the [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
 from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
 
 <PackageManagers

diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx
@@ -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`    |

diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
@@ -13,8 +13,6 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -70,6 +68,8 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
 
 ### Custom Check Icon
 
+> By default, `IconProps` will be passed to your icon component.  Please make sure that `isSelected`, `isIndeterminate`, and `disableAnimation` are not passed to a DOM element.
+
 <CodeDemo title="Custom Check Icon" files={checkboxContent.customCheckIcon} />
 
 ### Controlled

diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
@@ -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.                                                                                                   | -         |

diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx
@@ -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.                                                                                                  | -                                                                    |

diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx
@@ -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} />
@@ -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.                                                                                                      | -                                                                    |