From 1d1ca90a7799934001aa33c3cb5fe3e91ccce8c9 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Fri, 5 Sep 2025 09:33:09 +1000
Subject: [PATCH] fix: verdaccio apps notification badge on correct button and
 selection on table with bulk actions (#8817)

* fix: verdaccio apps notification badge on correct button and selection on table with bulk actions

* Add provider to all apps

* turn on verdaccio

* Revert "turn on verdaccio"

This reverts commit 92d1e049288cd2a1501f9eb2b1b3eb6e70bbaffa.

* missed one actionbutton notification badge change

* fix missed table as well

* turn on verdaccio

* Revert "turn on verdaccio"

This reverts commit 12ffd72c41a5acaa4a24041e257ab9e98a334c4d.
---
 examples/s2-esbuild-starter-app/src/app.tsx   |  6 ++---
 examples/s2-next-macros/src/app/page.tsx      |  9 +++++---
 examples/s2-parcel-example/src/App.js         |  9 +++++---
 examples/s2-vite-project/src/App.tsx          |  9 +++++---
 examples/s2-webpack-5-example/src/App.js      |  9 +++++---
 .../src/App.tsx                               | 22 +++++++++++++++----
 6 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/examples/s2-esbuild-starter-app/src/app.tsx b/examples/s2-esbuild-starter-app/src/app.tsx
index d37245142e1..3601a66c91c 100644
--- a/examples/s2-esbuild-starter-app/src/app.tsx
+++ b/examples/s2-esbuild-starter-app/src/app.tsx
@@ -13,11 +13,11 @@
 
 import "@react-spectrum/s2/page.css";
 import { style } from "@react-spectrum/s2/style" with { type: "macro" };
-import { Button } from "@react-spectrum/s2";
+import { Button, Provider } from "@react-spectrum/s2";
 
 function App() {
   return (
-    <main>
+    <Provider elementType="main">
       <Button
         styles={style({
           marginStart: 16,
@@ -25,7 +25,7 @@ function App() {
       >
         Hello Spectrum 2!
       </Button>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-next-macros/src/app/page.tsx b/examples/s2-next-macros/src/app/page.tsx
index 9c6897e905e..44456c9bf0e 100644
--- a/examples/s2-next-macros/src/app/page.tsx
+++ b/examples/s2-next-macros/src/app/page.tsx
@@ -32,6 +32,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -72,7 +73,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -98,10 +99,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -185,6 +187,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -268,7 +271,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js
index 6ce4cf2a2ed..5d214e1d9a5 100644
--- a/examples/s2-parcel-example/src/App.js
+++ b/examples/s2-parcel-example/src/App.js
@@ -30,6 +30,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -70,7 +71,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -96,10 +97,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -183,6 +185,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx
index 22b35908784..b4058c9937b 100644
--- a/examples/s2-vite-project/src/App.tsx
+++ b/examples/s2-vite-project/src/App.tsx
@@ -30,6 +30,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -70,7 +71,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -96,10 +97,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -183,6 +185,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js
index a9178b59e5e..ae32bf391cc 100644
--- a/examples/s2-webpack-5-example/src/App.js
+++ b/examples/s2-webpack-5-example/src/App.js
@@ -30,6 +30,7 @@ import {
   NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -70,7 +71,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -96,10 +97,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -183,6 +185,7 @@ function App() {
           <TableView
             aria-label="Files"
             styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
             renderActionBar={selectedKeys => (
               <ActionBar>
                 <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }
 
diff --git a/examples/s2-webpack-5-typescript-example/src/App.tsx b/examples/s2-webpack-5-typescript-example/src/App.tsx
index dd380117008..679aec74c58 100644
--- a/examples/s2-webpack-5-typescript-example/src/App.tsx
+++ b/examples/s2-webpack-5-typescript-example/src/App.tsx
@@ -12,6 +12,7 @@
 
 import "@react-spectrum/s2/page.css";
 import {
+  ActionBar,
   ActionButton,
   ActionButtonGroup,
   ActionMenu,
@@ -25,8 +26,10 @@ import {
   Menu,
   MenuItem,
   MenuTrigger,
+  NotificationBadge,
   Picker,
   PickerItem,
+  Provider,
   Row,
   SubmenuTrigger,
   TableBody,
@@ -69,7 +72,7 @@ function App() {
     {id: 'waterfall', label: 'Waterfall'}
   ];
   return (
-    <main>
+    <Provider elementType="main">
       <Heading
         styles={style({ font: "heading-xl", textAlign: "center" })}
         level={1}
@@ -95,10 +98,11 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary"><Text>Secondary</Text></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
+              <NotificationBadge value={2} />
             </ActionButton>
             <ToggleButton>Toggle Button</ToggleButton>
             <LinkButton
@@ -179,7 +183,17 @@ function App() {
               <MenuItem>Paste</MenuItem>
             </Menu>
           </MenuTrigger>
-          <TableView aria-label="Files" styles={style({width: 320, height: 320})}>
+          <TableView
+            aria-label="Files"
+            styles={style({width: 320, height: 320})}
+            selectionMode="multiple"
+            renderActionBar={selectedKeys => (
+              <ActionBar>
+                <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
+                <ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
+                <ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
+              </ActionBar>
+            )}>
             <TableHeader>
               <Column isRowHeader>Name</Column>
               <Column>Type</Column>
@@ -256,7 +270,7 @@ function App() {
           <Lazy />
         </React.Suspense>}
       </div>
-    </main>
+    </Provider>
   );
 }