Merge branch 'heroui-inc:canary' into adding_outside-top_recreation

.changeset/dry-jobs-cough.md

@@ -0,0 +1,5 @@
+---
+"@heroui/checkbox": patch
+---
+
+inherit stroke in CheckboxIcon (#4802)

.changeset/fresh-windows-check.md

@@ -0,0 +1,5 @@
+---
+"@heroui/table": patch
+---
+
+Virtualization support added to Table component (#3697)

.changeset/large-bears-poke.md

@@ -0,0 +1,5 @@
+---
+"@heroui/button": patch
+---
+
+export PressEvent for onPress event typing (#4818)

.changeset/light-hairs-draw.md

@@ -0,0 +1,7 @@
+---
+"@heroui/autocomplete": patch
+"@heroui/listbox": patch
+"@heroui/select": patch
+---
+
+Fix SelectItem, ListboxItem, and AutocompleteItem not to accept value props (#2283)

.changeset/nine-ties-bake.md

@@ -0,0 +1,5 @@
+---
+"@heroui/listbox": patch
+---
+
+pass missing press events to usePress (#4798)

.changeset/shaggy-beers-breathe.md

@@ -0,0 +1,7 @@
+---
+"@heroui/shared-icons": patch
+"@heroui/toast": patch
+"@heroui/theme": patch
+---
+
+Introducing the toast component(#2560)

apps/docs/components/scripts/script-providers.tsx

@@ -9,6 +9,7 @@ export function ScriptProviders({isKapaEnabled = true}: {isKapaEnabled?: boolean
     <>
       <Script
         defer
+        data-button-position-left="20px"
         data-modal-disclaimer="This is a custom LLM for HeroUI with access to all developer docs (heroui.com/docs) and GitHub Issues and PRs (github.com/heroui-inc/heroui)."
         data-modal-example-questions="How do I install for Next.js?,How do I customize primary color?"
         data-project-color="#000000"

apps/docs/config/routes.json

@@ -423,7 +423,8 @@
           "key": "table",
           "title": "Table",
           "keywords": "table, data display, grid, spreadsheet",
-          "path": "/docs/components/table.mdx"
+          "path": "/docs/components/table.mdx",
+          "updated": true
         },
         {
           "key": "tabs",
@@ -436,7 +437,7 @@
           "title": "Toast",
           "keywords": "toast, notification, message",
           "path": "/docs/components/toast.mdx",
-          "comingSoon": true
+          "newPost": true
         },
         {
           "key": "textarea",

apps/docs/content/components/form/demo.raw.jsx

@@ -116,21 +116,11 @@ export default function App() {
           name="country"
           placeholder="Select country"
         >
-          <SelectItem key="ar" value="ar">
-            Argentina
-          </SelectItem>
-          <SelectItem key="us" value="us">
-            United States
-          </SelectItem>
-          <SelectItem key="ca" value="ca">
-            Canada
-          </SelectItem>
-          <SelectItem key="uk" value="uk">
-            United Kingdom
-          </SelectItem>
-          <SelectItem key="au" value="au">
-            Australia
-          </SelectItem>
+          <SelectItem key="ar">Argentina</SelectItem>
+          <SelectItem key="us">United States</SelectItem>
+          <SelectItem key="ca">Canada</SelectItem>
+          <SelectItem key="uk">United Kingdom</SelectItem>
+          <SelectItem key="au">Australia</SelectItem>
         </Select>
 
         <Checkbox

apps/docs/content/components/scroll-shadow/horizontal.raw.jsx

@@ -68,7 +68,9 @@ export const Content = () => (
 export default function App() {
   return (
     <ScrollShadow className="max-w-[400px] max-h-[300px]" orientation="horizontal">
-      <Content className="w-[800px]" />
+      <div className="w-[800px]">
+        <Content />
+      </div>
     </ScrollShadow>
   );
 }

apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx

@@ -45,10 +45,8 @@ export default function App() {
         maxListboxHeight={400}
         placeholder="Select..."
       >
-        {items.map((item, index) => (
-          <SelectItem key={index} value={item.value}>
-            {item.label}
-          </SelectItem>
+        {items.map((item) => (
+          <SelectItem key={item.value}>{item.label}</SelectItem>
         ))}
       </Select>
     </div>

apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx

@@ -44,10 +44,8 @@ export default function App() {
         maxListboxHeight={400}
         placeholder="Select..."
       >
-        {items.map((item, index) => (
-          <SelectItem key={index} value={item.value}>
-            {item.label}
-          </SelectItem>
+        {items.map((item) => (
+          <SelectItem key={item.value}>{item.label}</SelectItem>
         ))}
       </Select>
     </div>

apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx

@@ -44,9 +44,7 @@ export default function App() {
         placeholder="Select..."
       >
         {items.map((item, index) => (
-          <SelectItem key={index} value={item.value}>
-            {item.label}
-          </SelectItem>
+          <SelectItem key={index}>{item.label}</SelectItem>
         ))}
       </Select>
     </div>

apps/docs/content/components/select/virtualization.raw.jsx

@@ -43,10 +43,8 @@ export default function App() {
         label={"Select from 1000 items"}
         placeholder="Select..."
       >
-        {items.map((item, index) => (
-          <SelectItem key={index} value={item.value}>
-            {item.label}
-          </SelectItem>
+        {items.map((item) => (
+          <SelectItem key={item.value}>{item.label}</SelectItem>
         ))}
       </Select>
     </div>

apps/docs/content/components/table/index.ts

@@ -19,6 +19,10 @@ import asyncPagination from "./async-pagination";
 import infinitePagination from "./infinite-pagination";
 import useCase from "./use-case";
 import customStyles from "./custom-styles";
+import virtualization from "./virtualization";
+import virtualizationCustomItemHeight from "./virtualization-custom-row-height";
+import virtualizationCustomMaxTableHeight from "./virtualization-custom-max-table-height";
+import virtualizationTenThousand from "./virtualization-ten-thousand";
 
 export const tableContent = {
   usage,
@@ -42,4 +46,8 @@ export const tableContent = {
   infinitePagination,
   useCase,
   customStyles,
+  virtualization,
+  virtualizationCustomItemHeight,
+  virtualizationCustomMaxTableHeight,
+  virtualizationTenThousand,
 };

apps/docs/content/components/table/virtualization-custom-max-table-height.raw.jsx

@@ -0,0 +1,37 @@
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+
+function generateRows(count) {
+  return Array.from({length: count}, (_, index) => ({
+    key: index.toString(),
+    name: `Item ${index + 1}`,
+    value: `Value ${index + 1}`,
+  }));
+}
+
+export default function App() {
+  const rows = generateRows(500);
+  const columns = [
+    {key: "name", label: "Name"},
+    {key: "value", label: "Value"},
+  ];
+
+  return (
+    <Table
+      isVirtualized
+      aria-label="Example of virtualized table with a large dataset"
+      maxTableHeight={300}
+      rowHeight={40}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}

apps/docs/content/components/table/virtualization-custom-max-table-height.ts

@@ -0,0 +1,9 @@
+import App from "./virtualization-custom-max-table-height.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/table/virtualization-custom-row-height.raw.jsx

@@ -0,0 +1,37 @@
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+
+function generateRows(count) {
+  return Array.from({length: count}, (_, index) => ({
+    key: index.toString(),
+    name: `Item ${index + 1}`,
+    value: `Value ${index + 1}`,
+  }));
+}
+
+export default function App() {
+  const rows = generateRows(500);
+  const columns = [
+    {key: "name", label: "Name"},
+    {key: "value", label: "Value"},
+  ];
+
+  return (
+    <Table
+      isVirtualized
+      aria-label="Example of virtualized table with a large dataset"
+      maxTableHeight={500}
+      rowHeight={70}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}

apps/docs/content/components/table/virtualization-custom-row-height.ts

@@ -0,0 +1,9 @@
+import App from "./virtualization-custom-row-height.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/table/virtualization-ten-thousand.raw.jsx

@@ -0,0 +1,37 @@
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+
+function generateRows(count) {
+  return Array.from({length: count}, (_, index) => ({
+    key: index.toString(),
+    name: `Item ${index + 1}`,
+    value: `Value ${index + 1}`,
+  }));
+}
+
+export default function App() {
+  const rows = generateRows(10000);
+  const columns = [
+    {key: "name", label: "Name"},
+    {key: "value", label: "Value"},
+  ];
+
+  return (
+    <Table
+      isVirtualized
+      aria-label="Example of virtualized table with a large dataset"
+      maxTableHeight={500}
+      rowHeight={40}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}

apps/docs/content/components/table/virtualization-ten-thousand.ts

@@ -0,0 +1,9 @@
+import App from "./virtualization-ten-thousand.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/table/virtualization.raw.jsx

@@ -0,0 +1,37 @@
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+
+function generateRows(count) {
+  return Array.from({length: count}, (_, index) => ({
+    key: index.toString(),
+    name: `Item ${index + 1}`,
+    value: `Value ${index + 1}`,
+  }));
+}
+
+export default function App() {
+  const rows = generateRows(500);
+  const columns = [
+    {key: "name", label: "Name"},
+    {key: "value", label: "Value"},
+  ];
+
+  return (
+    <Table
+      isVirtualized
+      aria-label="Example of virtualized table with a large dataset"
+      maxTableHeight={500}
+      rowHeight={40}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}

apps/docs/content/components/table/virtualization.ts

@@ -0,0 +1,9 @@
+import App from "./virtualization.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/color.raw.jsx

@@ -0,0 +1,24 @@
+import {addToast, Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+        <Button
+          key={color}
+          color={color}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              color: color,
+            })
+          }
+        >
+          {color}
+        </Button>
+      ))}
+    </div>
+  );
+}