Carousel: Stable Release

.github/CODEOWNERS

@@ -364,9 +364,9 @@ packages/react-components/react-icons-compat/stories @microsoft/cxe-red @tomi-ms
 packages/react-components/react-tag-picker @microsoft/teams-prg
 packages/react-components/react-tag-picker/library @microsoft/teams-prg
 packages/react-components/react-tag-picker/stories @microsoft/teams-prg
-packages/react-components/react-carousel-preview @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
-packages/react-components/react-carousel-preview/library @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
-packages/react-components/react-carousel-preview/stories @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
+packages/react-components/react-carousel @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
+packages/react-components/react-carousel/library @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
+packages/react-components/react-carousel/stories @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
 packages/react-components/recipes @microsoft/fluentui-react @sopranopillow
 packages/react-components/react-motion-components-preview/library @microsoft/teams-prg
 packages/react-components/react-motion-components-preview/stories @microsoft/teams-prg

apps/public-docsite-v9/package.json

@@ -44,7 +44,6 @@
     "react-hook-form": "^5.7.2",
     "@fluentui/react-nav-preview": "*",
     "@fluentui/react-motion-components-preview": "*",
-    "@fluentui/react-icons-compat": "*",
-    "@fluentui/react-carousel-preview": "*"
+    "@fluentui/react-icons-compat": "*"
   }
 }

apps/vr-tests-react-components/package.json

@@ -78,6 +78,7 @@
     "@fluentui/react-rating": "*",
     "@fluentui/react-search": "*",
     "@fluentui/react-teaching-popover": "*",
-    "@fluentui/react-tag-picker": "*"
+    "@fluentui/react-tag-picker": "*",
+    "@fluentui/react-carousel": "*"
   }
 }

change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Stable release react-carousel",
+  "packageName": "@fluentui/react-carousel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Stable release of react-carousel",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -217,8 +217,8 @@
     "d3-time-format": "3.0.0",
     "d3-time": "3.1.0",
     "ejs": "3.1.10",
-    "embla-carousel": "8.1.8",
-    "embla-carousel-autoplay": "8.1.8",
+    "embla-carousel": "8.3.0",
+    "embla-carousel-autoplay": "8.3.0",
     "enquirer": "2.3.6",
     "enzyme": "3.10.0",
     "enzyme-to-json": "3.6.2",

packages/react-components/react-carousel-preview/library/CHANGELOG.md → packages/react-components/react-carousel/library/CHANGELOG.md

@@ -6,7 +6,7 @@ This log was last generated on Thu, 26 Sep 2024 14:15:27 GMT and should not be m
 
 ## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.6.0)
 
-Thu, 26 Sep 2024 14:15:27 GMT 
+Thu, 26 Sep 2024 14:15:27 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.5.0..@fluentui/react-carousel-preview_v0.6.0)
 
 ### Minor changes
@@ -16,7 +16,7 @@ Thu, 26 Sep 2024 14:15:27 GMT
 
 ## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.5.0)
 
-Mon, 23 Sep 2024 12:40:12 GMT 
+Mon, 23 Sep 2024 12:40:12 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.4.0..@fluentui/react-carousel-preview_v0.5.0)
 
 ### Minor changes
@@ -33,7 +33,7 @@ Mon, 23 Sep 2024 12:40:12 GMT
 
 ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.4.0)
 
-Fri, 13 Sep 2024 00:49:24 GMT 
+Fri, 13 Sep 2024 00:49:24 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.3.0..@fluentui/react-carousel-preview_v0.4.0)
 
 ### Minor changes
@@ -46,7 +46,7 @@ Fri, 13 Sep 2024 00:49:24 GMT
 
 ## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.3.0)
 
-Tue, 10 Sep 2024 10:19:05 GMT 
+Tue, 10 Sep 2024 10:19:05 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.2.2..@fluentui/react-carousel-preview_v0.3.0)
 
 ### Minor changes
@@ -67,7 +67,7 @@ Tue, 10 Sep 2024 10:19:05 GMT
 
 ## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.2.2)
 
-Thu, 15 Aug 2024 13:49:46 GMT 
+Thu, 15 Aug 2024 13:49:46 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.2.1..@fluentui/react-carousel-preview_v0.2.2)
 
 ### Patches
@@ -78,7 +78,7 @@ Thu, 15 Aug 2024 13:49:46 GMT
 
 ## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.2.1)
 
-Thu, 15 Aug 2024 08:22:08 GMT 
+Thu, 15 Aug 2024 08:22:08 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.2.0..@fluentui/react-carousel-preview_v0.2.1)
 
 ### Patches
@@ -90,7 +90,7 @@ Thu, 15 Aug 2024 08:22:08 GMT
 
 ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.2.0)
 
-Mon, 05 Aug 2024 22:33:01 GMT 
+Mon, 05 Aug 2024 22:33:01 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.1.0..@fluentui/react-carousel-preview_v0.2.0)
 
 ### Minor changes

packages/react-components/react-carousel-preview/library/LICENSE → packages/react-components/react-carousel/library/LICENSE

@@ -1,4 +1,4 @@
-@fluentui/react-carousel-preview
+@fluentui/react-carousel
 
 Copyright (c) Microsoft Corporation
 

packages/react-components/react-carousel/library/README.md

@@ -0,0 +1,33 @@
+# @fluentui/react-carousel
+
+**React Carousel components for [Fluent UI React](https://react.fluentui.dev/)**
+
+A Carousel is a sliding viewport that enables a list of tab panels to be hidden offscreen while still remaining accessible via rotating controls or keyboard interactions.
+
+For full screen banners, hidden cards will be set to inert and can be accessed via the underlying nav controls (prev/next/pagination), while smaller responsive CarouselCards can be explored with keyboard navigation (left/right arrow keys) and group focus (Enter/Esc) to void lengthy tabIndex sequences.
+
+The React Carousel uses direct DOM manipulation to ensure that state can be updated without driving a react render cycle of the CarouselCards themselves, users may subscribe to visibility event callbacks or activeIndex supplied via context for updating local state on carousel movement.
+
+A CarouselAnnouncer class is provided that will announce page changes when context is updated for accessibility users.
+
+## Sample Code
+
+```jsx
+<Carousel groupSize={1} circular>
+  <CarouselSlider>
+    {Cards.map((card, index) => (
+      <CarouselCard key={`image-${index}`} index={index}>
+        Card {index + 1}
+      </CarouselCard>
+    ))}
+  </CarouselSlider>
+  <CarouselNavContainer next={{ 'aria-label': 'go to next' }} prev={{ 'aria-label': 'go to prev' }}>
+    <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav>
+  </CarouselNavContainer>
+  <CarouselAnnouncer>
+    {(currentIndex, totalSlides, _slideGroupList) => {
+      return `Slide ${currentIndex + 1} of ${totalSlides}`;
+    }}
+  </CarouselAnnouncer>
+</Carousel>
+```

packages/react-components/react-carousel/library/docs/Migration.md

@@ -0,0 +1,46 @@
+# Carousel Migration Guide
+
+## Migration from react-northstar
+
+The northstar carousel utilized a single wrapper with data props, in v9, composable Carousel pieces can be used to fit together, the number, order and styles of CarouselCards within a CarouselSlider is what will drive the majority of Carousel logic, stored and accessed via context provided in the Carousel wrapper.
+
+### Prop mapping
+
+- `items` prop => CarouselCard elements
+- `navigation` on the control => CarouselNav/CarouselNavButton/CarouselButton are utilized independently for carousel control, this can also be overwritten externally via the controlled index props - a CarouselNavContainer is provided to simplify this process.
+
+### Example
+
+#### northstar
+
+```jsx
+<Carousel
+  navigation={{
+    items: carouselItems.map((item, index) => ({
+      key: item.id,
+    })),
+  }}
+  items={carouselItems}
+/>
+```
+
+#### v9
+
+```jsx
+  <Carousel>
+    <CarouselSlider>
+      {Cards.map((_cardProps, index) => (
+        <CarouselCard>
+          Card {index + 1}
+        </BannerCard>
+      ))}
+    </CarouselSlider>
+    <CarouselNavContainer>
+      <CarouselNav>{index => <CarouselNavButton/>}</CarouselNav>
+    </CarouselNavContainer>
+  </Carousel>
+```
+
+### Aria props
+
+Aria props can be directly passed to their intended elements, or to sub-components via the slot props, a similar pattern to react-northstar aria should be implemented