From c5500e67a22c061456fb83134b4fbb724c259443 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 27 Sep 2024 12:25:12 -0700 Subject: [PATCH 1/8] Update react-carousel to stable --- .github/CODEOWNERS | 6 +- apps/public-docsite-v9/package.json | 3 +- apps/vr-tests-react-components/package.json | 3 +- ...-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json | 7 + ...-c730f2d8-5835-43c6-9c65-3d01ea110c42.json | 7 + package.json | 4 +- .../react-carousel-preview/library/README.md | 5 - .../react-carousel-preview/stories/README.md | 17 -- .../library/.babelrc.json | 0 .../library/.eslintrc.json | 0 .../library/.swcrc | 0 .../library/CHANGELOG.json | 0 .../library/CHANGELOG.md | 14 +- .../library/LICENSE | 2 +- .../react-carousel/library/README.md | 33 +++ .../library/config/api-extractor.json | 0 .../library/config/tests.js | 0 .../react-carousel/library/docs/Migration.md | 46 ++++ .../library/docs/Spec.md | 35 ++- .../library/etc/react-carousel.api.md} | 2 +- .../library/jest.config.js | 2 +- .../library/just.config.ts | 0 .../library/package.json | 9 +- .../library/project.json | 4 +- .../library/src/Carousel.ts | 0 .../library/src/CarouselAutoplayButton.ts | 0 .../library/src/CarouselButton.ts | 0 .../library/src/CarouselCard.ts | 0 .../library/src/CarouselContext.ts | 0 .../library/src/CarouselNav.ts | 0 .../library/src/CarouselNavButton.ts | 0 .../library/src/CarouselNavContainer.ts | 0 .../library/src/CarouselNavImageButton.ts | 0 .../library/src/CarouselSlider.ts | 0 .../src/components/Carousel/Carousel.test.tsx | 0 .../src/components/Carousel/Carousel.tsx | 0 .../src/components/Carousel/Carousel.types.ts | 12 + .../__snapshots__/Carousel.test.tsx.snap | 0 .../library/src/components/Carousel/index.ts | 0 .../components/Carousel/renderCarousel.tsx | 0 .../src/components/Carousel/useCarousel.ts | 0 .../Carousel/useCarouselContextValues.ts | 0 .../Carousel/useCarouselStyles.styles.ts | 0 .../CarouselAutoplayButton.test.tsx | 0 .../CarouselAutoplayButton.tsx | 0 .../CarouselAutoplayButton.types.ts | 0 .../CarouselAutoplayButton.test.tsx.snap | 0 .../CarouselAutoplayButton/index.ts | 0 .../renderCarouselAutoplayButton.tsx | 0 .../useCarouselAutoplayButton.tsx | 0 .../useCarouselAutoplayButtonStyles.styles.ts | 0 .../CarouselButton/CarouselButton.test.tsx | 0 .../CarouselButton/CarouselButton.tsx | 0 .../CarouselButton/CarouselButton.types.ts | 0 .../CarouselButton.test.tsx.snap | 0 .../src/components/CarouselButton/index.ts | 0 .../CarouselButton/renderCarouselButton.tsx | 0 .../CarouselButton/useCarouselButton.tsx | 0 .../useCarouselButtonStyles.styles.ts | 0 .../CarouselCard/CarouselCard.test.tsx | 0 .../components/CarouselCard/CarouselCard.tsx | 0 .../CarouselCard/CarouselCard.types.ts | 0 .../__snapshots__/CarouselCard.test.tsx.snap | 0 .../src/components/CarouselCard/index.ts | 0 .../CarouselCard/renderCarouselCard.tsx | 0 .../CarouselCard/useCarouselCard.ts | 0 .../useCarouselCardStyles.styles.ts | 0 .../library/src/components/CarouselContext.ts | 0 .../src/components/CarouselContext.types.ts | 0 .../CarouselNav/CarouselNav.test.tsx | 0 .../components/CarouselNav/CarouselNav.tsx | 0 .../CarouselNav/CarouselNav.types.ts | 0 .../CarouselNav/CarouselNavContext.ts | 0 .../CarouselNav/CarouselNavIndexContext.ts | 0 .../__snapshots__/CarouselNav.test.tsx.snap | 0 .../src/components/CarouselNav/index.ts | 0 .../CarouselNav/renderCarouselNav.tsx | 0 .../components/CarouselNav/useCarouselNav.ts | 0 .../useCarouselNavStyles.styles.ts | 0 .../CarouselNavButton.test.tsx | 0 .../CarouselNavButton/CarouselNavButton.tsx | 0 .../CarouselNavButton.types.ts | 0 .../CarouselNavButton.test.tsx.snap | 0 .../src/components/CarouselNavButton/index.ts | 0 .../renderCarouselNavButton.tsx | 0 .../CarouselNavButton/useCarouselNavButton.ts | 0 .../useCarouselNavButtonStyles.styles.ts | 0 .../CarouselNavContainer.test.tsx | 0 .../CarouselNavContainer.tsx | 0 .../CarouselNavContainer.types.ts | 0 .../CarouselNavContainer.test.tsx.snap | 0 .../components/CarouselNavContainer/index.ts | 0 .../renderCarouselNavContainer.tsx | 0 .../useCarouselNavContainer.ts | 0 .../useCarouselNavContainerStyles.styles.ts | 0 .../CarouselNavImageButton.test.tsx | 0 .../CarouselNavImageButton.tsx | 0 .../CarouselNavImageButton.types.ts | 0 .../CarouselNavImageButton.test.tsx.snap | 0 .../CarouselNavImageButton/index.ts | 0 .../renderCarouselNavImageButton.tsx | 0 .../useCarouselNavImageButton.ts | 0 .../useCarouselNavImageButtonStyles.styles.ts | 0 .../CarouselSlider/CarouselSlider.test.tsx | 0 .../CarouselSlider/CarouselSlider.tsx | 0 .../CarouselSlider/CarouselSlider.types.ts | 0 .../CarouselSlider/CarouselSliderContext.ts | 0 .../CarouselSlider.test.tsx.snap | 0 .../src/components/CarouselSlider/index.ts | 0 .../CarouselSlider/renderCarouselSlider.tsx | 0 .../CarouselSlider/useCarouselSlider.ts | 0 .../useCarouselSliderStyles.styles.ts | 0 .../src/components/useEmblaCarousel.ts | 0 .../library/src/index.ts | 0 .../library/src/testing/isConformant.ts | 0 .../library/tsconfig.json | 0 .../library/tsconfig.lib.json | 0 .../library/tsconfig.spec.json | 0 .../stories/.eslintrc.json | 0 .../stories/.storybook/main.js | 0 .../stories/.storybook/preview.js | 0 .../stories/.storybook/tsconfig.json | 0 .../react-carousel/stories/README.md | 17 ++ .../stories/just.config.ts | 0 .../stories/package.json | 3 +- .../stories/project.json | 4 +- .../Carousel/CarouselActionCards.stories.tsx | 2 +- .../src/Carousel/CarouselAutoplay.stories.tsx | 2 +- .../src/Carousel/CarouselBestPractices.md | 0 .../Carousel/CarouselControlled.stories.tsx | 2 +- .../src/Carousel/CarouselDefault.stories.tsx | 2 +- .../src/Carousel/CarouselDescription.md | 2 +- .../src/Carousel/CarouselImageBox.stories.tsx | 2 +- .../Carousel/CarouselResponsive.stories.tsx | 2 +- .../stories/src/Carousel/index.stories.tsx | 4 +- .../CarouselNav/CarouselNavBestPractices.md | 0 .../CarouselNavDefault.stories.tsx | 2 +- .../src/CarouselNav/CarouselNavDescription.md | 0 .../stories/src/CarouselNav/index.stories.tsx | 4 +- .../stories/src/index.ts | 0 .../stories/tsconfig.json | 0 .../stories/tsconfig.lib.json | 0 .../etc/react-components.api.md | 240 ++++++++++++++++++ .../react-components/package.json | 3 +- .../react-components/src/index.ts | 85 +++++++ tsconfig.base.all.json | 8 +- tsconfig.base.json | 6 +- 147 files changed, 508 insertions(+), 93 deletions(-) create mode 100644 change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json create mode 100644 change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json delete mode 100644 packages/react-components/react-carousel-preview/library/README.md delete mode 100644 packages/react-components/react-carousel-preview/stories/README.md rename packages/react-components/{react-carousel-preview => react-carousel}/library/.babelrc.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/.eslintrc.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/.swcrc (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/CHANGELOG.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/CHANGELOG.md (96%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/LICENSE (97%) create mode 100644 packages/react-components/react-carousel/library/README.md rename packages/react-components/{react-carousel-preview => react-carousel}/library/config/api-extractor.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/config/tests.js (100%) create mode 100644 packages/react-components/react-carousel/library/docs/Migration.md rename packages/react-components/{react-carousel-preview => react-carousel}/library/docs/Spec.md (86%) rename packages/react-components/{react-carousel-preview/library/etc/react-carousel-preview.api.md => react-carousel/library/etc/react-carousel.api.md} (99%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/jest.config.js (96%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/just.config.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/package.json (91%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/project.json (59%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/Carousel.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselAutoplayButton.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselButton.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselCard.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselContext.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselNav.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselNavButton.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselNavContainer.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselNavImageButton.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/CarouselSlider.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/Carousel.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/Carousel.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/Carousel.types.ts (85%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/__snapshots__/Carousel.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/renderCarousel.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/useCarousel.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/useCarouselContextValues.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/Carousel/useCarouselStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/CarouselButton.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/CarouselButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/CarouselButton.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/__snapshots__/CarouselButton.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/renderCarouselButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/useCarouselButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselButton/useCarouselButtonStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/CarouselCard.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/CarouselCard.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/CarouselCard.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/__snapshots__/CarouselCard.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/renderCarouselCard.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/useCarouselCard.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselCard/useCarouselCardStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselContext.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselContext.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/CarouselNav.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/CarouselNav.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/CarouselNav.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/CarouselNavContext.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/CarouselNavIndexContext.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/__snapshots__/CarouselNav.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/renderCarouselNav.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/useCarouselNav.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNav/useCarouselNavStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/CarouselNavButton.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/CarouselNavButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/CarouselNavButton.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/__snapshots__/CarouselNavButton.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/renderCarouselNavButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/useCarouselNavButton.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/CarouselNavContainer.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/CarouselNavContainer.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/CarouselNavContainer.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/__snapshots__/CarouselNavContainer.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/renderCarouselNavContainer.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/useCarouselNavContainer.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/CarouselNavImageButton.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/CarouselNavImageButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/__snapshots__/CarouselNavImageButton.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/renderCarouselNavImageButton.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/useCarouselNavImageButton.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/CarouselSlider.test.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/CarouselSlider.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/CarouselSlider.types.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/CarouselSliderContext.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/__snapshots__/CarouselSlider.test.tsx.snap (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/renderCarouselSlider.tsx (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/useCarouselSlider.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/CarouselSlider/useCarouselSliderStyles.styles.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/components/useEmblaCarousel.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/src/testing/isConformant.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/tsconfig.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/tsconfig.lib.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/library/tsconfig.spec.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/.eslintrc.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/.storybook/main.js (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/.storybook/preview.js (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/.storybook/tsconfig.json (100%) create mode 100644 packages/react-components/react-carousel/stories/README.md rename packages/react-components/{react-carousel-preview => react-carousel}/stories/just.config.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/package.json (85%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/project.json (60%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselActionCards.stories.tsx (99%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselAutoplay.stories.tsx (99%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselBestPractices.md (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselControlled.stories.tsx (99%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselDefault.stories.tsx (98%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselDescription.md (68%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselImageBox.stories.tsx (98%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/CarouselResponsive.stories.tsx (99%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/Carousel/index.stories.tsx (92%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/CarouselNav/CarouselNavBestPractices.md (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/CarouselNav/CarouselNavDefault.stories.tsx (98%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/CarouselNav/CarouselNavDescription.md (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/CarouselNav/index.stories.tsx (75%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/src/index.ts (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/tsconfig.json (100%) rename packages/react-components/{react-carousel-preview => react-carousel}/stories/tsconfig.lib.json (100%) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6eb57b9e6f951..fdfb238170f66 100644 --- a/.github/CODEOWNERS +++ b/.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 diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index ac77d166984b6..49db0a8bf7f97 100644 --- a/apps/public-docsite-v9/package.json +++ b/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": "*" } } diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index a5935a97d75be..3b4550b76a5f8 100644 --- a/apps/vr-tests-react-components/package.json +++ b/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": ">=9.0.0-alpha" } } diff --git a/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json b/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json new file mode 100644 index 0000000000000..0614cc87bdce3 --- /dev/null +++ b/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "'feat:", + "packageName": "@fluentui/react-carousel", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json b/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json new file mode 100644 index 0000000000000..ed3e9a9c3a8cd --- /dev/null +++ b/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "'feat:", + "packageName": "@fluentui/react-components", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index e64c9da8b019c..5b513f5dfaeca 100644 --- a/package.json +++ b/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", diff --git a/packages/react-components/react-carousel-preview/library/README.md b/packages/react-components/react-carousel-preview/library/README.md deleted file mode 100644 index 4f5819253ede7..0000000000000 --- a/packages/react-components/react-carousel-preview/library/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# @fluentui/react-carousel-preview - -**React Carousel components for [Fluent UI React](https://react.fluentui.dev/)** - -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components/react-carousel-preview/stories/README.md b/packages/react-components/react-carousel-preview/stories/README.md deleted file mode 100644 index 5ba6bb2f792ca..0000000000000 --- a/packages/react-components/react-carousel-preview/stories/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# @fluentui/react-carousel-preview-stories - -Storybook stories for packages/react-components/react-carousel-preview - -## Usage - -To include within storybook specify stories globs: - -\`\`\`js -module.exports = { -stories: ['../packages/react-components/react-carousel-preview/stories/src/**/*.stories.mdx', '../packages/react-components/react-carousel-preview/stories/src/**/index.stories.@(ts|tsx)'], -} -\`\`\` - -## API - -no public API available diff --git a/packages/react-components/react-carousel-preview/library/.babelrc.json b/packages/react-components/react-carousel/library/.babelrc.json similarity index 100% rename from packages/react-components/react-carousel-preview/library/.babelrc.json rename to packages/react-components/react-carousel/library/.babelrc.json diff --git a/packages/react-components/react-carousel-preview/library/.eslintrc.json b/packages/react-components/react-carousel/library/.eslintrc.json similarity index 100% rename from packages/react-components/react-carousel-preview/library/.eslintrc.json rename to packages/react-components/react-carousel/library/.eslintrc.json diff --git a/packages/react-components/react-carousel-preview/library/.swcrc b/packages/react-components/react-carousel/library/.swcrc similarity index 100% rename from packages/react-components/react-carousel-preview/library/.swcrc rename to packages/react-components/react-carousel/library/.swcrc diff --git a/packages/react-components/react-carousel-preview/library/CHANGELOG.json b/packages/react-components/react-carousel/library/CHANGELOG.json similarity index 100% rename from packages/react-components/react-carousel-preview/library/CHANGELOG.json rename to packages/react-components/react-carousel/library/CHANGELOG.json diff --git a/packages/react-components/react-carousel-preview/library/CHANGELOG.md b/packages/react-components/react-carousel/library/CHANGELOG.md similarity index 96% rename from packages/react-components/react-carousel-preview/library/CHANGELOG.md rename to packages/react-components/react-carousel/library/CHANGELOG.md index e121b71c7e5e5..ba4bd6746d910 100644 --- a/packages/react-components/react-carousel-preview/library/CHANGELOG.md +++ b/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 diff --git a/packages/react-components/react-carousel-preview/library/LICENSE b/packages/react-components/react-carousel/library/LICENSE similarity index 97% rename from packages/react-components/react-carousel-preview/library/LICENSE rename to packages/react-components/react-carousel/library/LICENSE index cd36718e88a43..7ccbeb6b604c4 100644 --- a/packages/react-components/react-carousel-preview/library/LICENSE +++ b/packages/react-components/react-carousel/library/LICENSE @@ -1,4 +1,4 @@ -@fluentui/react-carousel-preview +@fluentui/react-carousel Copyright (c) Microsoft Corporation diff --git a/packages/react-components/react-carousel/library/README.md b/packages/react-components/react-carousel/library/README.md new file mode 100644 index 0000000000000..9b6880aef952d --- /dev/null +++ b/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 + + + {Cards.map((card, index) => ( + + Card {index + 1} + + ))} + + + {index => } + + + {(currentIndex, totalSlides, _slideGroupList) => { + return `Slide ${currentIndex + 1} of ${totalSlides}`; + }} + + +``` diff --git a/packages/react-components/react-carousel-preview/library/config/api-extractor.json b/packages/react-components/react-carousel/library/config/api-extractor.json similarity index 100% rename from packages/react-components/react-carousel-preview/library/config/api-extractor.json rename to packages/react-components/react-carousel/library/config/api-extractor.json diff --git a/packages/react-components/react-carousel-preview/library/config/tests.js b/packages/react-components/react-carousel/library/config/tests.js similarity index 100% rename from packages/react-components/react-carousel-preview/library/config/tests.js rename to packages/react-components/react-carousel/library/config/tests.js diff --git a/packages/react-components/react-carousel/library/docs/Migration.md b/packages/react-components/react-carousel/library/docs/Migration.md new file mode 100644 index 0000000000000..94967954b1030 --- /dev/null +++ b/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 + ({ + key: item.id, + })), + }} + items={carouselItems} +/> +``` + +#### v9 + +```jsx + + + {Cards.map((_cardProps, index) => ( + + Card {index + 1} + + ))} + + + {index => } + + +``` + +### 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 diff --git a/packages/react-components/react-carousel-preview/library/docs/Spec.md b/packages/react-components/react-carousel/library/docs/Spec.md similarity index 86% rename from packages/react-components/react-carousel-preview/library/docs/Spec.md rename to packages/react-components/react-carousel/library/docs/Spec.md index 33e277cde1180..648937b4c2b02 100644 --- a/packages/react-components/react-carousel-preview/library/docs/Spec.md +++ b/packages/react-components/react-carousel/library/docs/Spec.md @@ -1,4 +1,4 @@ -# @fluentui/react-carousel-preview Spec +# @fluentui/react-carousel Spec ## Background @@ -14,23 +14,18 @@ _Include background research done for this component_ ## Sample Code ```jsx - - -
This is card: 1
- - - -
This is card: 2
- - - -
This is card: 3
- - - - {() => } - - + + + {Cards.map((_cardProps, index) => ( + + Card {index + 1} + + ))} + + + {index => } + + ``` ## Variants @@ -85,9 +80,9 @@ Clickable actions within the content area are available via mouse and tab as exp The container for animating and positioning the carousel cards, it should wrap all carousel cards to prevent the controls from affecting layout and responsiveness of card sizing. -### CarouselFooter +### CarouselNavContainer -A unified navigation footer with all Carousel navigation components as slots, with the CarouselNav intended to be placed within the root children. The footer will have variant layouts that are condensed or extended, as well as options to null out slots if not required or placed externally. +A unified navigation footer with all Carousel navigation components as slots, with the CarouselNav intended to be placed within the root children. It contains variant layouts that are condensed or extended, as well as options to null out slots if not required or placed externally. ### CarouselNav diff --git a/packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md b/packages/react-components/react-carousel/library/etc/react-carousel.api.md similarity index 99% rename from packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md rename to packages/react-components/react-carousel/library/etc/react-carousel.api.md index ffafa6b5d4274..6b7207403ee73 100644 --- a/packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md +++ b/packages/react-components/react-carousel/library/etc/react-carousel.api.md @@ -1,4 +1,4 @@ -## API Report File for "@fluentui/react-carousel-preview" +## API Report File for "@fluentui/react-carousel" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). diff --git a/packages/react-components/react-carousel-preview/library/jest.config.js b/packages/react-components/react-carousel/library/jest.config.js similarity index 96% rename from packages/react-components/react-carousel-preview/library/jest.config.js rename to packages/react-components/react-carousel/library/jest.config.js index 98e0e6204880b..6a3aa3bac93e0 100644 --- a/packages/react-components/react-carousel-preview/library/jest.config.js +++ b/packages/react-components/react-carousel/library/jest.config.js @@ -23,7 +23,7 @@ if (swcJestConfig.swcrc === undefined) { * @type {import('@jest/types').Config.InitialOptions} */ module.exports = { - displayName: 'react-carousel-preview', + displayName: 'react-carousel', preset: '../../../../jest.preset.js', transform: { '^.+\\.tsx?$': ['@swc/jest', swcJestConfig], diff --git a/packages/react-components/react-carousel-preview/library/just.config.ts b/packages/react-components/react-carousel/library/just.config.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/just.config.ts rename to packages/react-components/react-carousel/library/just.config.ts diff --git a/packages/react-components/react-carousel-preview/library/package.json b/packages/react-components/react-carousel/library/package.json similarity index 91% rename from packages/react-components/react-carousel-preview/library/package.json rename to packages/react-components/react-carousel/library/package.json index 04388da8fb9fd..04d5babf406c1 100644 --- a/packages/react-components/react-carousel-preview/library/package.json +++ b/packages/react-components/react-carousel/library/package.json @@ -1,6 +1,6 @@ { - "name": "@fluentui/react-carousel-preview", - "version": "0.6.0", + "name": "@fluentui/react-carousel", + "version": "9.0.0-alpha.0", "description": "A composable carousel component that enables pagination with minimal rerenders", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -46,9 +46,8 @@ "@fluentui/react-utilities": "^9.18.15", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1", - "embla-carousel": "8.1.8", - "embla-carousel-autoplay": "8.1.8", - "use-sync-external-store": "^1.2.0" + "embla-carousel": "^8.3.0", + "embla-carousel-autoplay": "^8.3.0" }, "peerDependencies": { "@types/react": ">=16.14.0 <19.0.0", diff --git a/packages/react-components/react-carousel-preview/library/project.json b/packages/react-components/react-carousel/library/project.json similarity index 59% rename from packages/react-components/react-carousel-preview/library/project.json rename to packages/react-components/react-carousel/library/project.json index ec12e0ccaf53b..1ef2cb2c97716 100644 --- a/packages/react-components/react-carousel-preview/library/project.json +++ b/packages/react-components/react-carousel/library/project.json @@ -1,8 +1,8 @@ { - "name": "react-carousel-preview", + "name": "react-carousel", "$schema": "../../../../node_modules/nx/schemas/project-schema.json", "projectType": "library", - "sourceRoot": "packages/react-components/react-carousel-preview/library/src", + "sourceRoot": "packages/react-components/react-carousel/library/src", "tags": ["platform:web", "vNext"], "implicitDependencies": [] } diff --git a/packages/react-components/react-carousel-preview/library/src/Carousel.ts b/packages/react-components/react-carousel/library/src/Carousel.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/Carousel.ts rename to packages/react-components/react-carousel/library/src/Carousel.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselAutoplayButton.ts b/packages/react-components/react-carousel/library/src/CarouselAutoplayButton.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselAutoplayButton.ts rename to packages/react-components/react-carousel/library/src/CarouselAutoplayButton.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselButton.ts b/packages/react-components/react-carousel/library/src/CarouselButton.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselButton.ts rename to packages/react-components/react-carousel/library/src/CarouselButton.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselCard.ts b/packages/react-components/react-carousel/library/src/CarouselCard.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselCard.ts rename to packages/react-components/react-carousel/library/src/CarouselCard.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselContext.ts b/packages/react-components/react-carousel/library/src/CarouselContext.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselContext.ts rename to packages/react-components/react-carousel/library/src/CarouselContext.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselNav.ts b/packages/react-components/react-carousel/library/src/CarouselNav.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselNav.ts rename to packages/react-components/react-carousel/library/src/CarouselNav.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselNavButton.ts b/packages/react-components/react-carousel/library/src/CarouselNavButton.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselNavButton.ts rename to packages/react-components/react-carousel/library/src/CarouselNavButton.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselNavContainer.ts b/packages/react-components/react-carousel/library/src/CarouselNavContainer.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselNavContainer.ts rename to packages/react-components/react-carousel/library/src/CarouselNavContainer.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselNavImageButton.ts b/packages/react-components/react-carousel/library/src/CarouselNavImageButton.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselNavImageButton.ts rename to packages/react-components/react-carousel/library/src/CarouselNavImageButton.ts diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselSlider.ts b/packages/react-components/react-carousel/library/src/CarouselSlider.ts similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/CarouselSlider.ts rename to packages/react-components/react-carousel/library/src/CarouselSlider.ts diff --git a/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.test.tsx b/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.test.tsx similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.test.tsx rename to packages/react-components/react-carousel/library/src/components/Carousel/Carousel.test.tsx diff --git a/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.tsx b/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.tsx similarity index 100% rename from packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.tsx rename to packages/react-components/react-carousel/library/src/components/Carousel/Carousel.tsx diff --git a/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts b/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.types.ts similarity index 85% rename from packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts rename to packages/react-components/react-carousel/library/src/components/Carousel/Carousel.types.ts index 845dc28ec2409..a2a82c9ccf152 100644 --- a/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts +++ b/packages/react-components/react-carousel/library/src/components/Carousel/Carousel.types.ts @@ -79,8 +79,20 @@ export type CarouselVisibilityChangeEvent = CustomEvent ⚠️ For `aria-live` announcements to work correctly you should configure you application with a > AriaLiveAnnouncer towards the top of the React tree. diff --git a/packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselImageBox.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx similarity index 98% rename from packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselImageBox.stories.tsx rename to packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx index b576785299678..6026c4c2b4087 100644 --- a/packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselImageBox.stories.tsx +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx @@ -7,7 +7,7 @@ import { CarouselNavContainer, CarouselNavImageButton, CarouselSlider, -} from '@fluentui/react-carousel-preview'; +} from '@fluentui/react-components'; import * as React from 'react'; const useClasses = makeStyles({ diff --git a/packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselResponsive.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx similarity index 99% rename from packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselResponsive.stories.tsx rename to packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx index a4e4ca58ae305..4c3f626108c60 100644 --- a/packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselResponsive.stories.tsx +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx @@ -7,7 +7,7 @@ import { CarouselNavButton, CarouselNavContainer, CarouselSlider, -} from '@fluentui/react-carousel-preview'; +} from '@fluentui/react-components'; import * as React from 'react'; const useClasses = makeStyles({ diff --git a/packages/react-components/react-carousel-preview/stories/src/Carousel/index.stories.tsx b/packages/react-components/react-carousel/stories/src/Carousel/index.stories.tsx similarity index 92% rename from packages/react-components/react-carousel-preview/stories/src/Carousel/index.stories.tsx rename to packages/react-components/react-carousel/stories/src/Carousel/index.stories.tsx index e0f356a75d87c..2d7afd762676b 100644 --- a/packages/react-components/react-carousel-preview/stories/src/Carousel/index.stories.tsx +++ b/packages/react-components/react-carousel/stories/src/Carousel/index.stories.tsx @@ -8,7 +8,7 @@ import { CarouselNavContainer, CarouselNavImageButton, CarouselSlider, -} from '@fluentui/react-carousel-preview'; +} from '@fluentui/react-components'; import descriptionMd from './CarouselDescription.md'; import bestPracticesMd from './CarouselBestPractices.md'; @@ -21,7 +21,7 @@ export { AlignmentAndWhitespace } from './CarouselActionCards.stories'; export { Autoplay } from './CarouselAutoplay.stories'; export default { - title: 'Preview Components/Carousel', + title: 'Components/Carousel', component: Carousel, subcomponents: { CarouselAutoplayButton, diff --git a/packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavBestPractices.md b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavBestPractices.md similarity index 100% rename from packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavBestPractices.md rename to packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavBestPractices.md diff --git a/packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavDefault.stories.tsx b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.stories.tsx similarity index 98% rename from packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavDefault.stories.tsx rename to packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.stories.tsx index 9a053d0a10460..34923f801c365 100644 --- a/packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavDefault.stories.tsx +++ b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.stories.tsx @@ -1,4 +1,4 @@ -import { CarouselNav, CarouselNavImageButton, CarouselNavButton } from '@fluentui/react-carousel-preview'; +import { CarouselNav, CarouselNavImageButton, CarouselNavButton } from '@fluentui/react-components'; import { Field, makeStyles, Switch, tokens } from '@fluentui/react-components'; import * as React from 'react'; diff --git a/packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavDescription.md b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDescription.md similarity index 100% rename from packages/react-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavDescription.md rename to packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDescription.md diff --git a/packages/react-components/react-carousel-preview/stories/src/CarouselNav/index.stories.tsx b/packages/react-components/react-carousel/stories/src/CarouselNav/index.stories.tsx similarity index 75% rename from packages/react-components/react-carousel-preview/stories/src/CarouselNav/index.stories.tsx rename to packages/react-components/react-carousel/stories/src/CarouselNav/index.stories.tsx index 529b70c92dc7d..d7582fd12ef6a 100644 --- a/packages/react-components/react-carousel-preview/stories/src/CarouselNav/index.stories.tsx +++ b/packages/react-components/react-carousel/stories/src/CarouselNav/index.stories.tsx @@ -1,4 +1,4 @@ -import { CarouselNav } from '@fluentui/react-carousel-preview'; +import { CarouselNav } from '@fluentui/react-components'; import descriptionMd from './CarouselNavDescription.md'; import bestPracticesMd from './CarouselNavBestPractices.md'; @@ -6,7 +6,7 @@ import bestPracticesMd from './CarouselNavBestPractices.md'; export { Default } from './CarouselNavDefault.stories'; export default { - title: 'Preview Components/Carousel/CarouselNav', + title: 'Components/Carousel/CarouselNav', component: CarouselNav, parameters: { docs: { diff --git a/packages/react-components/react-carousel-preview/stories/src/index.ts b/packages/react-components/react-carousel/stories/src/index.ts similarity index 100% rename from packages/react-components/react-carousel-preview/stories/src/index.ts rename to packages/react-components/react-carousel/stories/src/index.ts diff --git a/packages/react-components/react-carousel-preview/stories/tsconfig.json b/packages/react-components/react-carousel/stories/tsconfig.json similarity index 100% rename from packages/react-components/react-carousel-preview/stories/tsconfig.json rename to packages/react-components/react-carousel/stories/tsconfig.json diff --git a/packages/react-components/react-carousel-preview/stories/tsconfig.lib.json b/packages/react-components/react-carousel/stories/tsconfig.lib.json similarity index 100% rename from packages/react-components/react-carousel-preview/stories/tsconfig.lib.json rename to packages/react-components/react-carousel/stories/tsconfig.lib.json diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index c4be7d3506af1..7ab03687aecc9 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -152,6 +152,57 @@ import { CardPreviewState } from '@fluentui/react-card'; import { CardProps } from '@fluentui/react-card'; import { CardSlots } from '@fluentui/react-card'; import { CardState } from '@fluentui/react-card'; +import { Carousel } from '@fluentui/react-carousel'; +import { CarouselAnnouncerFunction } from '@fluentui/react-carousel'; +import { CarouselAutoplayButton } from '@fluentui/react-carousel'; +import { carouselAutoplayButtonClassNames } from '@fluentui/react-carousel'; +import { CarouselAutoplayButtonProps } from '@fluentui/react-carousel'; +import { CarouselAutoplayButtonSlots } from '@fluentui/react-carousel'; +import { CarouselAutoplayButtonState } from '@fluentui/react-carousel'; +import { CarouselButton } from '@fluentui/react-carousel'; +import { carouselButtonClassNames } from '@fluentui/react-carousel'; +import { CarouselButtonProps } from '@fluentui/react-carousel'; +import { CarouselButtonSlots } from '@fluentui/react-carousel'; +import { CarouselButtonState } from '@fluentui/react-carousel'; +import { CarouselCard } from '@fluentui/react-carousel'; +import { carouselCardClassNames } from '@fluentui/react-carousel'; +import { CarouselCardProps } from '@fluentui/react-carousel'; +import { CarouselCardSlots } from '@fluentui/react-carousel'; +import { CarouselCardState } from '@fluentui/react-carousel'; +import { carouselClassNames } from '@fluentui/react-carousel'; +import { carouselContextDefaultValue } from '@fluentui/react-carousel'; +import { CarouselContextValue } from '@fluentui/react-carousel'; +import { CarouselContextValues } from '@fluentui/react-carousel'; +import { CarouselIndexChangeData } from '@fluentui/react-carousel'; +import { CarouselNav } from '@fluentui/react-carousel'; +import { CarouselNavButton } from '@fluentui/react-carousel'; +import { carouselNavButtonClassNames } from '@fluentui/react-carousel'; +import { CarouselNavButtonProps } from '@fluentui/react-carousel'; +import { CarouselNavButtonSlots } from '@fluentui/react-carousel'; +import { CarouselNavButtonState } from '@fluentui/react-carousel'; +import { carouselNavClassNames } from '@fluentui/react-carousel'; +import { CarouselNavContainer } from '@fluentui/react-carousel'; +import { carouselNavContainerClassNames } from '@fluentui/react-carousel'; +import { CarouselNavContainerProps } from '@fluentui/react-carousel'; +import { CarouselNavContainerSlots } from '@fluentui/react-carousel'; +import { CarouselNavContainerState } from '@fluentui/react-carousel'; +import { CarouselNavImageButton } from '@fluentui/react-carousel'; +import { carouselNavImageButtonClassNames } from '@fluentui/react-carousel'; +import { CarouselNavImageButtonProps } from '@fluentui/react-carousel'; +import { CarouselNavImageButtonSlots } from '@fluentui/react-carousel'; +import { CarouselNavImageButtonState } from '@fluentui/react-carousel'; +import { CarouselNavProps } from '@fluentui/react-carousel'; +import { CarouselNavSlots } from '@fluentui/react-carousel'; +import { CarouselNavState } from '@fluentui/react-carousel'; +import { CarouselProps } from '@fluentui/react-carousel'; +import { CarouselProvider } from '@fluentui/react-carousel'; +import { CarouselSlider } from '@fluentui/react-carousel'; +import { carouselSliderClassNames } from '@fluentui/react-carousel'; +import { CarouselSliderProps } from '@fluentui/react-carousel'; +import { CarouselSliderSlots } from '@fluentui/react-carousel'; +import { CarouselSliderState } from '@fluentui/react-carousel'; +import { CarouselSlots } from '@fluentui/react-carousel'; +import { CarouselState } from '@fluentui/react-carousel'; import { Checkbox } from '@fluentui/react-checkbox'; import { checkboxClassNames } from '@fluentui/react-checkbox'; import { CheckboxOnChangeData } from '@fluentui/react-checkbox'; @@ -567,6 +618,7 @@ import { MessageBarTransitionContextValue } from '@fluentui/react-message-bar'; import { MotionComponentProps } from '@fluentui/react-motion'; import { MotionImperativeRef } from '@fluentui/react-motion'; import { motionTokens } from '@fluentui/react-motion'; +import { NavButtonRenderFunction } from '@fluentui/react-carousel'; import { OnOpenChangeData } from '@fluentui/react-popover'; import { OnSelectionChangeCallback } from '@fluentui/react-utilities'; import { OnSelectionChangeData } from '@fluentui/react-utilities'; @@ -708,6 +760,15 @@ import { renderCard_unstable } from '@fluentui/react-card'; import { renderCardFooter_unstable } from '@fluentui/react-card'; import { renderCardHeader_unstable } from '@fluentui/react-card'; import { renderCardPreview_unstable } from '@fluentui/react-card'; +import { renderCarousel_unstable } from '@fluentui/react-carousel'; +import { renderCarouselAutoplayButton_unstable } from '@fluentui/react-carousel'; +import { renderCarouselButton_unstable } from '@fluentui/react-carousel'; +import { renderCarouselCard_unstable } from '@fluentui/react-carousel'; +import { renderCarouselNav_unstable } from '@fluentui/react-carousel'; +import { renderCarouselNavButton_unstable } from '@fluentui/react-carousel'; +import { renderCarouselNavContainer_unstable } from '@fluentui/react-carousel'; +import { renderCarouselNavImageButton_unstable } from '@fluentui/react-carousel'; +import { renderCarouselSlider_unstable } from '@fluentui/react-carousel'; import { renderCheckbox_unstable } from '@fluentui/react-checkbox'; import { renderColorSwatch_unstable } from '@fluentui/react-swatch-picker'; import { renderCombobox_unstable } from '@fluentui/react-combobox'; @@ -1349,6 +1410,25 @@ import { useCardHeaderStyles_unstable } from '@fluentui/react-card'; import { useCardPreview_unstable } from '@fluentui/react-card'; import { useCardPreviewStyles_unstable } from '@fluentui/react-card'; import { useCardStyles_unstable } from '@fluentui/react-card'; +import { useCarousel_unstable } from '@fluentui/react-carousel'; +import { useCarouselAutoplayButton_unstable } from '@fluentui/react-carousel'; +import { useCarouselAutoplayButtonStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselButton_unstable } from '@fluentui/react-carousel'; +import { useCarouselButtonStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselCard_unstable } from '@fluentui/react-carousel'; +import { useCarouselCardStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselContext_unstable } from '@fluentui/react-carousel'; +import { useCarouselNav_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavButton_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavButtonStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavContainer_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavContainerStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavImageButton_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavImageButtonStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselNavStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselSlider_unstable } from '@fluentui/react-carousel'; +import { useCarouselSliderStyles_unstable } from '@fluentui/react-carousel'; +import { useCarouselStyles_unstable } from '@fluentui/react-carousel'; import { useCheckbox_unstable } from '@fluentui/react-checkbox'; import { useCheckboxStyles_unstable } from '@fluentui/react-checkbox'; import { useCheckmarkStyles_unstable } from '@fluentui/react-menu'; @@ -2015,6 +2095,108 @@ export { CardSlots } export { CardState } +export { Carousel } + +export { CarouselAnnouncerFunction } + +export { CarouselAutoplayButton } + +export { carouselAutoplayButtonClassNames } + +export { CarouselAutoplayButtonProps } + +export { CarouselAutoplayButtonSlots } + +export { CarouselAutoplayButtonState } + +export { CarouselButton } + +export { carouselButtonClassNames } + +export { CarouselButtonProps } + +export { CarouselButtonSlots } + +export { CarouselButtonState } + +export { CarouselCard } + +export { carouselCardClassNames } + +export { CarouselCardProps } + +export { CarouselCardSlots } + +export { CarouselCardState } + +export { carouselClassNames } + +export { carouselContextDefaultValue } + +export { CarouselContextValue } + +export { CarouselContextValues } + +export { CarouselIndexChangeData } + +export { CarouselNav } + +export { CarouselNavButton } + +export { carouselNavButtonClassNames } + +export { CarouselNavButtonProps } + +export { CarouselNavButtonSlots } + +export { CarouselNavButtonState } + +export { carouselNavClassNames } + +export { CarouselNavContainer } + +export { carouselNavContainerClassNames } + +export { CarouselNavContainerProps } + +export { CarouselNavContainerSlots } + +export { CarouselNavContainerState } + +export { CarouselNavImageButton } + +export { carouselNavImageButtonClassNames } + +export { CarouselNavImageButtonProps } + +export { CarouselNavImageButtonSlots } + +export { CarouselNavImageButtonState } + +export { CarouselNavProps } + +export { CarouselNavSlots } + +export { CarouselNavState } + +export { CarouselProps } + +export { CarouselProvider } + +export { CarouselSlider } + +export { carouselSliderClassNames } + +export { CarouselSliderProps } + +export { CarouselSliderSlots } + +export { CarouselSliderState } + +export { CarouselSlots } + +export { CarouselState } + export { Checkbox } export { checkboxClassNames } @@ -2845,6 +3027,8 @@ export { MotionImperativeRef } export { motionTokens } +export { NavButtonRenderFunction } + export { OnOpenChangeData } export { OnSelectionChangeCallback } @@ -3127,6 +3311,24 @@ export { renderCardHeader_unstable } export { renderCardPreview_unstable } +export { renderCarousel_unstable } + +export { renderCarouselAutoplayButton_unstable } + +export { renderCarouselButton_unstable } + +export { renderCarouselCard_unstable } + +export { renderCarouselNav_unstable } + +export { renderCarouselNavButton_unstable } + +export { renderCarouselNavContainer_unstable } + +export { renderCarouselNavImageButton_unstable } + +export { renderCarouselSlider_unstable } + export { renderCheckbox_unstable } export { renderColorSwatch_unstable } @@ -4409,6 +4611,44 @@ export { useCardPreviewStyles_unstable } export { useCardStyles_unstable } +export { useCarousel_unstable } + +export { useCarouselAutoplayButton_unstable } + +export { useCarouselAutoplayButtonStyles_unstable } + +export { useCarouselButton_unstable } + +export { useCarouselButtonStyles_unstable } + +export { useCarouselCard_unstable } + +export { useCarouselCardStyles_unstable } + +export { useCarouselContext_unstable } + +export { useCarouselNav_unstable } + +export { useCarouselNavButton_unstable } + +export { useCarouselNavButtonStyles_unstable } + +export { useCarouselNavContainer_unstable } + +export { useCarouselNavContainerStyles_unstable } + +export { useCarouselNavImageButton_unstable } + +export { useCarouselNavImageButtonStyles_unstable } + +export { useCarouselNavStyles_unstable } + +export { useCarouselSlider_unstable } + +export { useCarouselSliderStyles_unstable } + +export { useCarouselStyles_unstable } + export { useCheckbox_unstable } export { useCheckboxStyles_unstable } diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index 437ff0e46e686..aaa3a3dedd6ff 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -87,7 +87,8 @@ "@fluentui/react-search": "^9.0.18", "@fluentui/react-teaching-popover": "^9.1.18", "@fluentui/react-tag-picker": "^9.3.4", - "@fluentui/react-motion": "^9.5.2" + "@fluentui/react-motion": "^9.5.2", + "@fluentui/react-carousel": "9.0.0-alpha.0" }, "peerDependencies": { "@types/react": ">=16.14.0 <19.0.0", diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 5fc3de2edd0d0..18cb1f20a3682 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -1885,3 +1885,88 @@ export type { PresenceMotionFn, PresenceComponentProps, } from '@fluentui/react-motion'; + +export { + CarouselButton, + carouselButtonClassNames, + renderCarouselButton_unstable, + useCarouselButtonStyles_unstable, + useCarouselButton_unstable, + CarouselNav, + carouselNavClassNames, + renderCarouselNav_unstable, + useCarouselNavStyles_unstable, + useCarouselNav_unstable, + CarouselNavButton, + carouselNavButtonClassNames, + renderCarouselNavButton_unstable, + useCarouselNavButtonStyles_unstable, + useCarouselNavButton_unstable, + Carousel, + carouselClassNames, + renderCarousel_unstable, + useCarouselStyles_unstable, + useCarousel_unstable, + CarouselCard, + carouselCardClassNames, + renderCarouselCard_unstable, + useCarouselCardStyles_unstable, + useCarouselCard_unstable, + CarouselAutoplayButton, + carouselAutoplayButtonClassNames, + renderCarouselAutoplayButton_unstable, + useCarouselAutoplayButtonStyles_unstable, + useCarouselAutoplayButton_unstable, + CarouselNavImageButton, + carouselNavImageButtonClassNames, + renderCarouselNavImageButton_unstable, + useCarouselNavImageButtonStyles_unstable, + useCarouselNavImageButton_unstable, + CarouselSlider, + carouselSliderClassNames, + renderCarouselSlider_unstable, + useCarouselSliderStyles_unstable, + useCarouselSlider_unstable, + type CarouselSliderProps, + type CarouselSliderSlots, + type CarouselSliderState, + CarouselNavContainer, + carouselNavContainerClassNames, + renderCarouselNavContainer_unstable, + useCarouselNavContainerStyles_unstable, + useCarouselNavContainer_unstable, + carouselContextDefaultValue, + CarouselProvider, + useCarouselContext_unstable, +} from '@fluentui/react-carousel'; +export type { + CarouselButtonProps, + CarouselButtonSlots, + CarouselButtonState, + CarouselNavProps, + CarouselNavSlots, + CarouselNavState, + NavButtonRenderFunction, + CarouselNavButtonProps, + CarouselNavButtonSlots, + CarouselNavButtonState, + CarouselProps, + CarouselSlots, + CarouselState, + CarouselAnnouncerFunction, + CarouselCardProps, + CarouselCardSlots, + CarouselCardState, + CarouselAutoplayButtonProps, + CarouselAutoplayButtonSlots, + CarouselAutoplayButtonState, + CarouselNavImageButtonProps, + CarouselNavImageButtonSlots, + CarouselNavImageButtonState, + CarouselNavContainerProps, + CarouselNavContainerSlots, + CarouselNavContainerState, + CarouselIndexChangeData, + CarouselContextValue, + CarouselContextValues, +} from '@fluentui/react-carousel'; diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index 4cbca74841c5d..70a664b7094b7 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -104,10 +104,6 @@ ], "@fluentui/react-card": ["packages/react-components/react-card/library/src/index.ts"], "@fluentui/react-card-stories": ["packages/react-components/react-card/stories/src/index.ts"], - "@fluentui/react-carousel-preview": ["packages/react-components/react-carousel-preview/library/src/index.ts"], - "@fluentui/react-carousel-preview-stories": [ - "packages/react-components/react-carousel-preview/stories/src/index.ts" - ], "@fluentui/react-checkbox": ["packages/react-components/react-checkbox/library/src/index.ts"], "@fluentui/react-checkbox-stories": ["packages/react-components/react-checkbox/stories/src/index.ts"], "@fluentui/react-color-picker-preview": [ @@ -266,7 +262,9 @@ "@fluentui/recipes": ["packages/react-components/recipes/src/index.ts"], "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], "@fluentui/tokens": ["packages/tokens/src/index.ts"], - "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"] + "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"], + "@fluentui/react-carousel-stories": ["packages/react-components/react-carousel/stories/src/index.ts"], + "@fluentui/react-carousel": ["packages/react-components/react-carousel/library/src/index.ts"] } } } diff --git a/tsconfig.base.json b/tsconfig.base.json index b2c4a29313aa3..206f019255c5a 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -38,10 +38,8 @@ ], "@fluentui/react-card": ["packages/react-components/react-card/library/src/index.ts"], "@fluentui/react-card-stories": ["packages/react-components/react-card/stories/src/index.ts"], - "@fluentui/react-carousel-preview": ["packages/react-components/react-carousel-preview/library/src/index.ts"], - "@fluentui/react-carousel-preview-stories": [ - "packages/react-components/react-carousel-preview/stories/src/index.ts" - ], + "@fluentui/react-carousel": ["packages/react-components/react-carousel/library/src/index.ts"], + "@fluentui/react-carousel-stories": ["packages/react-components/react-carousel/stories/src/index.ts"], "@fluentui/react-checkbox": ["packages/react-components/react-checkbox/library/src/index.ts"], "@fluentui/react-checkbox-stories": ["packages/react-components/react-checkbox/stories/src/index.ts"], "@fluentui/react-color-picker-preview": [ From 7ee1f9b79b7960d7d290f42669135f85e2dad74e Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 27 Sep 2024 12:27:35 -0700 Subject: [PATCH 2/8] Update version num --- packages/react-components/react-carousel/library/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-carousel/library/package.json b/packages/react-components/react-carousel/library/package.json index 04d5babf406c1..9a9aadda919a6 100644 --- a/packages/react-components/react-carousel/library/package.json +++ b/packages/react-components/react-carousel/library/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-carousel", - "version": "9.0.0-alpha.0", + "version": "9.0.0", "description": "A composable carousel component that enables pagination with minimal rerenders", "main": "lib-commonjs/index.js", "module": "lib/index.js", From 1c45f1b3514ef33518015a1794a0be33f99848f3 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 27 Sep 2024 12:51:37 -0700 Subject: [PATCH 3/8] Tidy up docs --- .../react-carousel/library/docs/Spec.md | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/react-components/react-carousel/library/docs/Spec.md b/packages/react-components/react-carousel/library/docs/Spec.md index 648937b4c2b02..7201fac21415b 100644 --- a/packages/react-components/react-carousel/library/docs/Spec.md +++ b/packages/react-components/react-carousel/library/docs/Spec.md @@ -32,30 +32,22 @@ _Include background research done for this component_ ### Card Peeking -Cards will not peek by default, but can be enabled by setting the cardWidth to less than 100% of the viewport width. +Cards will peek by default when the cardWidth is less than 100% of the viewport width. ### Condensed Navigation -The CarouselFooter can be condensed, this will center all controls with minimal padding. +The CarouselNavContainer can be condensed, this will center all controls with minimal padding. ### Inline vs Composed Navigation -The CarouselFooter contains all navigation components in an inline horizontal container, however we have multiple valid layouts of the CarouselNavigation. If disconnected variants are required (such as prev/next buttons being overlaid in a different place than footer), then the individual navigation components can be placed within the Carousel wrapper in a variety of layouts. +The CarouselNavContainer provides multiple valid layouts of the CarouselNavigation. If alternative variants are required, then the individual navigation components can be placed within the Carousel wrapper in any layouts. ## API -The core driver of the API will be context provided via the Carousel component, CarouselCards will register themselves via this context, and the Navigation components will subscribe to any updates that occur. The Carousel itself will only re-render on active index change. - -Since the navigation has multiple valid layout formats, navigation components will be available individually to move around, or combined into slots via CarouselFooter within a single horizontal container. +The core driver of the API will be context and event callbacks provided via the Carousel component, CarouselCards will register themselves via this wrapper, and the Navigation components will subscribe to any updates that occur. The Carousel itself will only re-render cards that had an active index change. Carousel provides callbacks on navigation changes, as well as the ability to drive pagination externally via a controlled index. -Users **must** provide a value on each carouselCard, and a defaultValue that the carousel will initiate on. - -Motion can be enabled for next/previous button shift. - -A gap prop will be provided to place spacing between cards. - ## Behaviors ### Carousel @@ -64,29 +56,30 @@ Carousel is the context wrapper and container for all carousel content/controls, ### CarouselAutoplayButton -If the carousel is on auto-play, the user may opt into pausing the auto-play feature via the CarouselAutoplayButton which must be present for auto-play to be enabled (if CarouselAutoplayButton present, auto-play will default to true on mount). +If the carousel is on auto-play, the user may opt into pausing the auto-play feature via the CarouselAutoplayButton which must be present for auto-play to be enabled, this value can be controlled via interaction or the CarouselAutoplayButton props. ### CarouselButton -A default navigation button that will set value to the next/previous page, driven by it's type 'next' or 'previous'. +A default navigation button that will set value to the next/previous page, driven by it's navType of 'next' or 'previous'. ### CarouselCard -The defining wrapper of a carousel's indexed content, they will take up the full viewport of Carousel wrapper (with consideration for gap and peeking variants), users may place multiple items within this Card if desired, with consideration of viewport width. +The defining wrapper of a carousel's indexed content, they can be set to a responsive sizing via autoSize prop, or controlled via CSS. -Clickable actions within the content area are available via mouse and tab as expected, non-active index content will be set to inert until moved to active card. +Clickable actions within the content area are available via mouse and tab as expected, non-active index content will be set to inert until moved to active card. Be sure to set 'cardFocus' on the slider if multiple cards are present at once (not 100% width). ### CarouselSlider The container for animating and positioning the carousel cards, it should wrap all carousel cards to prevent the controls from affecting layout and responsiveness of card sizing. +It is intended to set the 'cardFocus' prop to true if cards are not set to 100% viewport width. ### CarouselNavContainer -A unified navigation footer with all Carousel navigation components as slots, with the CarouselNav intended to be placed within the root children. It contains variant layouts that are condensed or extended, as well as options to null out slots if not required or placed externally. +A unified navigation footer with all Carousel navigation components as slots, with the CarouselNav intended to be placed within the root children. It contains variant layouts that are condensed or extended, the nav components can also be used independently. ### CarouselNav -Used to jump to a card based on index, using arrow navigation via Tabster. The children of this component will be wrapped in a context to provide the appropriate value based on their index position. +Enables jumping directly to a card based on index and implements arrow navigation via Tabster. The children of this component will automatically be wrapped in a context to provide the appropriate value based on their index position. ### CarouselNavButton From 3c8a38b1f35ebdab0e9ed4b4e48f1e92235506e3 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 27 Sep 2024 13:07:16 -0700 Subject: [PATCH 4/8] Update package dep --- .../react-components/package.json | 2 +- yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index aaa3a3dedd6ff..59ff755242480 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -88,7 +88,7 @@ "@fluentui/react-teaching-popover": "^9.1.18", "@fluentui/react-tag-picker": "^9.3.4", "@fluentui/react-motion": "^9.5.2", - "@fluentui/react-carousel": "9.0.0-alpha.0" + "@fluentui/react-carousel": "^9.0.0" }, "peerDependencies": { "@types/react": ">=16.14.0 <19.0.0", diff --git a/yarn.lock b/yarn.lock index 7d6ab50361cd4..c7d4a6384e127 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10278,15 +10278,15 @@ electron-to-chromium@^1.4.820: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.4.tgz#cd477c830dd6fca41fbd5465c1ff6ce08ac22343" integrity sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA== -embla-carousel-autoplay@8.1.8: - version "8.1.8" - resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-8.1.8.tgz#84cd2d68e7498c2919ef102410484b0bb50d36c5" - integrity sha512-H3vVKt4HR2PGeMlCutE3+a8wv7Jq1rg31Fjb8ZDZaiuSnT/1XTwA83KpkJ02BdImVJci9RS0uEBiXBax2kfnMQ== - -embla-carousel@8.1.8: - version "8.1.8" - resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-8.1.8.tgz#cb4e02a1467909d8d59aba2063ab8e2e6262b68c" - integrity sha512-KuHPA8qcAts6YE6ELtt38XYAb26hnKw8Ga0lSXmrhm1oI97t6oACFkqSsy33dfeZQEhaZB6VwWvaWQJRJVgSgA== +embla-carousel-autoplay@8.3.0, embla-carousel-autoplay@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-8.3.0.tgz#2878e7c67c7c6f5c4cb0a06a8cb06e53d8f32f2f" + integrity sha512-h7DFJLf9uQD+XDxr1NwA3/oFIjsnj/iED2RjET5u6/svMec46IbF1CYPhmB5Q/1Fc0WkcvhPpsEsrtVXQLxNzA== + +embla-carousel@8.3.0, embla-carousel@^8.3.0: + version "8.3.0" + resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-8.3.0.tgz#dc27c63c405aa98320cb36893e4be2fbdc787ee1" + integrity sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA== emittery@^0.13.1: version "0.13.1" From f400380f047c34205b148a0dbbc198ab76806749 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 27 Sep 2024 14:00:24 -0700 Subject: [PATCH 5/8] Update package dep --- apps/vr-tests-react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 3b4550b76a5f8..555564a0c7ba7 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -79,6 +79,6 @@ "@fluentui/react-search": "*", "@fluentui/react-teaching-popover": "*", "@fluentui/react-tag-picker": "*", - "@fluentui/react-carousel": ">=9.0.0-alpha" + "@fluentui/react-carousel": "*" } } From ca94657a665b1cb73a41d77dc4b852c0ab8073e2 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 1 Oct 2024 11:42:36 -0700 Subject: [PATCH 6/8] Add change log description --- ...tui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json | 2 +- ...i-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json b/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json index 0614cc87bdce3..55dd67c12819a 100644 --- a/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json +++ b/change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "'feat:", + "comment": "feat: Stable release react-carousel", "packageName": "@fluentui/react-carousel", "email": "mifraser@microsoft.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json b/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json index ed3e9a9c3a8cd..2368745bbae77 100644 --- a/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json +++ b/change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "'feat:", + "comment": "feat: Stable release of react-carousel", "packageName": "@fluentui/react-components", "email": "mifraser@microsoft.com", "dependentChangeType": "patch" From 658d10ea231d022e1c72797ed41dc2c7a7dd8a55 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 2 Oct 2024 09:32:32 -0700 Subject: [PATCH 7/8] Fix up type export --- packages/react-components/react-components/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 18cb1f20a3682..74269e64b2bc5 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -1927,9 +1927,6 @@ export { renderCarouselSlider_unstable, useCarouselSliderStyles_unstable, useCarouselSlider_unstable, - type CarouselSliderProps, - type CarouselSliderSlots, - type CarouselSliderState, CarouselNavContainer, carouselNavContainerClassNames, renderCarouselNavContainer_unstable, @@ -1966,6 +1963,9 @@ export type { CarouselNavContainerProps, CarouselNavContainerSlots, CarouselNavContainerState, + CarouselSliderProps, + CarouselSliderSlots, + CarouselSliderState, CarouselIndexChangeData, CarouselContextValue, CarouselContextValues, From 552d03199179e6e74a072cc1390681917ef76a79 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 4 Oct 2024 09:08:41 -0700 Subject: [PATCH 8/8] Fix up other type export --- packages/react-components/react-carousel/library/src/index.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-components/react-carousel/library/src/index.ts b/packages/react-components/react-carousel/library/src/index.ts index 46b34cc3612ad..f3474ba465235 100644 --- a/packages/react-components/react-carousel/library/src/index.ts +++ b/packages/react-components/react-carousel/library/src/index.ts @@ -68,10 +68,8 @@ export { renderCarouselSlider_unstable, useCarouselSliderStyles_unstable, useCarouselSlider_unstable, - type CarouselSliderProps, - type CarouselSliderSlots, - type CarouselSliderState, } from './CarouselSlider'; +export type { CarouselSliderProps, CarouselSliderSlots, CarouselSliderState } from './CarouselSlider'; export type { CarouselNavContainerProps, CarouselNavContainerSlots,