Merge branch 'canary' into feat/eng-707

nextui-org · May 17, 2024 · a3e219b · a3e219b
2 parents 08281f6 + 8988981
commit a3e219b
Show file tree

Hide file tree

Showing 159 changed files with 831 additions and 394 deletions.
diff --git a/.changeset/heavy-hairs-join.md b/.changeset/heavy-hairs-join.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/accordion": patch
+---
+
+Make the accordion item heading tag customizable to satisfy a11y needs. Headings on web pages need to be consistent and semantic; this will help all users better find the content they are looking for. (#2950)
diff --git a/.changeset/honest-pianos-sleep.md b/.changeset/honest-pianos-sleep.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+remove unnecessary origin-bottom in button
diff --git a/.changeset/mean-parrots-cheat.md b/.changeset/mean-parrots-cheat.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/tabs": patch
+"@nextui-org/theme": patch
+---
+
+Add `destroyInactiveTabPanel` prop for Tabs component (#1562)
diff --git a/.changeset/seven-bears-vanish.md b/.changeset/seven-bears-vanish.md
@@ -0,0 +1,40 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/avatar": patch
+"@nextui-org/badge": patch
+"@nextui-org/breadcrumbs": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/checkbox": patch
+"@nextui-org/date-input": patch
+"@nextui-org/date-picker": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/image": patch
+"@nextui-org/input": patch
+"@nextui-org/link": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/pagination": patch
+"@nextui-org/popover": patch
+"@nextui-org/progress": patch
+"@nextui-org/radio": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/skeleton": patch
+"@nextui-org/slider": patch
+"@nextui-org/snippet": patch
+"@nextui-org/switch": patch
+"@nextui-org/table": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/react": patch
+"@nextui-org/system": patch
+"@nextui-org/theme": patch
+"@nextui-org/framer-utils": patch
+---
+
+Add support for disabling the animations globally.
diff --git a/.changeset/slow-mice-act.md b/.changeset/slow-mice-act.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+add pointer-events-none to skeleton base (#1714)
diff --git a/.changeset/wicked-planets-float.md b/.changeset/wicked-planets-float.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+set overflow visible after skeleton loaded (#2125)
diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
@@ -154,7 +154,8 @@
           "key": "badge",
           "title": "Badge",
           "keywords": "badge, markers, status indication, count display",
-          "path": "/docs/components/badge.mdx"
+          "path": "/docs/components/badge.mdx",
+          "updated": true
         },
         {
           "key": "button",
@@ -334,7 +335,8 @@
           "key": "skeleton",
           "title": "Skeleton",
           "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx"
+          "path": "/docs/components/skeleton.mdx",
+          "updated": true
         },
         {
           "key": "snippet",

diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts
@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focused=true]:bg-default-200/50",
-            "dark:group-data-[focused=true]:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}

diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
@@ -20,7 +20,7 @@ Accordion display a list of high-level options that can expand/collapse to revea
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add accordion",
+    cli: "npx nextui-cli@latest add accordion",
     npm: "npm install @nextui-org/accordion",
     yarn: "yarn add @nextui-org/accordion",
     pnpm: "pnpm add @nextui-org/accordion",
@@ -220,21 +220,22 @@ Here's an example of how to customize the accordion styles:
 
 ### Accordion Item Props
 
-| Attribute                 | Type                                              | Description                                                                                           | Default |
-| ------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
-| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                         |         |
-| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                             |         |
-| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                          |         |
-| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                       |         |
-| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                          |         |
-| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |         |
-| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                 | `false` |
-| isDisabled                | `boolean`                                         | The current disabled status.                                                                          | `false` |
-| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                        | `false` |
-| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                        | `false` |
-| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                      | `false` |
-| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                            | `false` |
-| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                        | -       |
+| Attribute                 | Type                                              | Description                                                                                                                  | Default |
+|---------------------------|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|---------|
+| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                                                |         |
+| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                                                    |         |
+| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                                                 |         |
+| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                                              |         |
+| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                                                 |         |
+| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                        |         |
+| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                                        | `false` |
+| isDisabled                | `boolean`                                         | The current disabled status.                                                                                                 | `false` |
+| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                                               | `false` |
+| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                                               | `false` |
+| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                                             | `false` |
+| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                                                   | `false` |
+| HeadingComponent          | `React.ElementType`                               | Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically. | `h2`    |
+| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                                               | -       |
 
 ### Accordion Item Events
 

diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
@@ -20,7 +20,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add autocomplete",
+    cli: "npx nextui-cli@latest add autocomplete",
     npm: "npm install @nextui-org/autocomplete",
     yarn: "yarn add @nextui-org/autocomplete",
     pnpm: "pnpm add @nextui-org/autocomplete",
@@ -210,7 +210,6 @@ The following example shows how you would create a controlled `Autocomplete`, co
 We recommend using the `useFilter` hook from [@react-aria/i18n](https://react-spectrum.adobe.com/react-aria/useFilter.html#usefilter) to manage the filtering of the items.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-aria/i18n",
     yarn: "yarn add @react-aria/i18n",
@@ -259,7 +258,6 @@ Autocomplete supports asynchronous filtering, in the example below we are using
 from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @react-stately/data",
     yarn: "yarn add @react-stately/data",
@@ -288,7 +286,6 @@ Autocomplete supports asynchronous loading, in the example below we are using a
 The `isLoading` prop is used to show a loading indicator instead of the selector icon when the data is being fetched.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @nextui-org/use-infinite-scroll",
     yarn: "yarn add @nextui-org/use-infinite-scroll",

diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
@@ -21,7 +21,7 @@ The Avatar component is used to represent a user, and displays the profile pictu
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add avatar",
+    cli: "npx nextui-cli@latest add avatar",
     npm: "npm install @nextui-org/avatar",
     yarn: "yarn add @nextui-org/avatar",
     pnpm: "pnpm add @nextui-org/avatar",

diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
@@ -9,7 +9,7 @@ import {badgeContent} from "@/content/components/badge";
 
 Badges are used as a small numerical value or status descriptor for UI elements.
 
-<ComponentLinks component="badge" rscCompatible />
+<ComponentLinks component="badge" />
 
 ---
 
@@ -20,7 +20,7 @@ Badges are used as a small numerical value or status descriptor for UI elements.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add badge",
+    cli: "npx nextui-cli@latest add badge",
     npm: "npm install @nextui-org/badge",
     yarn: "yarn add @nextui-org/badge",
     pnpm: "pnpm add @nextui-org/badge",

diff --git a/apps/docs/content/docs/components/breadcrumbs.mdx b/apps/docs/content/docs/components/breadcrumbs.mdx
@@ -20,7 +20,7 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add breadcrumbs",
+    cli: "npx nextui-cli@latest add breadcrumbs",
     npm: "npm install @nextui-org/breadcrumbs",
     yarn: "yarn add @nextui-org/breadcrumbs",
     pnpm: "pnpm add @nextui-org/breadcrumbs",

diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
@@ -20,7 +20,7 @@ Buttons allow users to perform actions and choose with a single tap.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add button",
+    cli: "npx nextui-cli@latest add button",
     npm: "npm install @nextui-org/button",
     yarn: "yarn add @nextui-org/button",
     pnpm: "pnpm add @nextui-org/button",

diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx
@@ -20,7 +20,7 @@ A calendar consists of a grouping element containing one or more date grids (e.g
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add calendar",
+    cli: "npx nextui-cli@latest add calendar",
     npm: "npm install @nextui-org/calendar",
     yarn: "yarn add @nextui-org/calendar",
     pnpm: "pnpm add @nextui-org/calendar",

diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx
@@ -20,7 +20,7 @@ Card is a container for text, photos, and actions in the context of a single sub
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add card",
+    cli: "npx nextui-cli@latest add card",
     npm: "npm install @nextui-org/card",
     yarn: "yarn add @nextui-org/card",
     pnpm: "pnpm add @nextui-org/card",

diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx
@@ -20,7 +20,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add checkbox",
+    cli: "npx nextui-cli@latest add checkbox",
     npm: "npm install @nextui-org/checkbox",
     yarn: "yarn add @nextui-org/checkbox",
     pnpm: "pnpm add @nextui-org/checkbox",

diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
@@ -20,7 +20,7 @@ Checkboxes allow users to select multiple items from a list of individual items,
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add checkbox",
+    cli: "npx nextui-cli@latest add checkbox",
     npm: "npm install @nextui-org/checkbox",
     yarn: "yarn add @nextui-org/checkbox",
     pnpm: "pnpm add @nextui-org/checkbox",

diff --git a/apps/docs/content/docs/components/chip.mdx b/apps/docs/content/docs/components/chip.mdx
@@ -20,7 +20,7 @@ A Chip is a small block of essential information that represent an input, attrib
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add chip",
+    cli: "npx nextui-cli@latest add chip",
     npm: "npm install @nextui-org/chip",
     yarn: "yarn add @nextui-org/chip",
     pnpm: "pnpm add @nextui-org/chip",

diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx
@@ -20,7 +20,7 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add progress",
+    cli: "npx nextui-cli@latest add progress",
     npm: "npm install @nextui-org/progress",
     yarn: "yarn add @nextui-org/progress",
     pnpm: "pnpm add @nextui-org/progress",

diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx
@@ -20,7 +20,7 @@ Code is a component used to display inline code.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add code",
+    cli: "npx nextui-cli@latest add code",
     npm: "npm install @nextui-org/code",
     yarn: "yarn add @nextui-org/code",
     pnpm: "pnpm add @nextui-org/code",

diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
@@ -21,7 +21,7 @@ Each part of a date value is displayed in an individually editable segment.
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "nextui add date-input",
+    cli: "npx nextui-cli@latest add date-input",
     npm: "npm install @nextui-org/date-input",
     yarn: "yarn add @nextui-org/date-input",
     pnpm: "pnpm add @nextui-org/date-input",
@@ -99,7 +99,6 @@ and time zone concerns such as daylight saving time are taken into account when
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -125,7 +124,6 @@ and `CalendarDateTime` and `ZonedDateTime` values are displayed with "minute" gr
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -150,7 +148,6 @@ The minValue and maxValue props can also be used to ensure the value is within a
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -175,7 +172,6 @@ passed to the [I18nProvider](https://react-spectrum.adobe.com/react-aria/I18nPro
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date @react-aria/i18n",
     yarn: "yarn add @internationalized/date @react-aria/i18n",
@@ -199,7 +195,6 @@ However, if this is displayed elsewhere or implicit based on the usecase, it can
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",
@@ -223,7 +218,6 @@ This example forces DateInput to use 24-hour time, regardless of the locale.
 in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
-  showGlobalInstallWarning
   commands={{
     npm: "npm install @internationalized/date",
     yarn: "yarn add @internationalized/date",