@fluentui/react-carousel 9.9.10 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -2
- package/dist/index.d.cts +720 -0
- package/lib/Carousel.js +1 -1
- package/lib/Carousel.js.map +1 -1
- package/lib/CarouselAutoplayButton.js +1 -1
- package/lib/CarouselAutoplayButton.js.map +1 -1
- package/lib/CarouselButton.js +1 -1
- package/lib/CarouselButton.js.map +1 -1
- package/lib/CarouselCard.js +1 -1
- package/lib/CarouselCard.js.map +1 -1
- package/lib/CarouselContext.js +1 -1
- package/lib/CarouselContext.js.map +1 -1
- package/lib/CarouselNav.js +1 -1
- package/lib/CarouselNav.js.map +1 -1
- package/lib/CarouselNavButton.js +1 -1
- package/lib/CarouselNavButton.js.map +1 -1
- package/lib/CarouselNavContainer.js +1 -1
- package/lib/CarouselNavContainer.js.map +1 -1
- package/lib/CarouselNavImageButton.js +1 -1
- package/lib/CarouselNavImageButton.js.map +1 -1
- package/lib/CarouselSlider.js +1 -1
- package/lib/CarouselSlider.js.map +1 -1
- package/lib/CarouselViewport.js +1 -1
- package/lib/CarouselViewport.js.map +1 -1
- package/lib/components/Carousel/Carousel.js +6 -6
- package/lib/components/Carousel/Carousel.js.map +1 -1
- package/lib/components/Carousel/index.js +4 -4
- package/lib/components/Carousel/index.js.map +1 -1
- package/lib/components/Carousel/renderCarousel.js +2 -2
- package/lib/components/Carousel/renderCarousel.js.map +1 -1
- package/lib/components/Carousel/useCarousel.js +5 -5
- package/lib/components/Carousel/useCarousel.js.map +1 -1
- package/lib/components/Carousel/useCarouselContextValues.js +1 -1
- package/lib/components/Carousel/useCarouselStyles.styles.js +2 -2
- package/lib/components/Carousel/useCarouselStyles.styles.js.map +1 -1
- package/lib/components/Carousel/useCarouselStyles.styles.raw.js +2 -2
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js +5 -5
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/index.js +4 -4
- package/lib/components/CarouselAutoplayButton/index.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js +2 -2
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js +5 -5
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +3 -3
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +3 -3
- package/lib/components/CarouselButton/CarouselButton.js +5 -5
- package/lib/components/CarouselButton/CarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/index.js +4 -4
- package/lib/components/CarouselButton/index.js.map +1 -1
- package/lib/components/CarouselButton/renderCarouselButton.js +2 -2
- package/lib/components/CarouselButton/useCarouselButton.js +7 -7
- package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.js +3 -3
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.raw.js +3 -3
- package/lib/components/CarouselCard/CarouselCard.js +5 -5
- package/lib/components/CarouselCard/CarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/index.js +4 -4
- package/lib/components/CarouselCard/index.js.map +1 -1
- package/lib/components/CarouselCard/renderCarouselCard.js +1 -1
- package/lib/components/CarouselCard/useCarouselCard.js +7 -7
- package/lib/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.js +3 -3
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js +3 -3
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselContext.js +1 -1
- package/lib/components/CarouselNav/CarouselNav.js +6 -6
- package/lib/components/CarouselNav/CarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNavContext.js +1 -1
- package/lib/components/CarouselNav/CarouselNavIndexContext.js +1 -1
- package/lib/components/CarouselNav/index.js +4 -4
- package/lib/components/CarouselNav/index.js.map +1 -1
- package/lib/components/CarouselNav/renderCarouselNav.js +3 -3
- package/lib/components/CarouselNav/renderCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNav.js +4 -4
- package/lib/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavContextValues.js +1 -1
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.js +3 -3
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js +3 -3
- package/lib/components/CarouselNavButton/CarouselNavButton.js +5 -5
- package/lib/components/CarouselNavButton/CarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/index.js +4 -4
- package/lib/components/CarouselNavButton/index.js.map +1 -1
- package/lib/components/CarouselNavButton/renderCarouselNavButton.js +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButton.js +7 -7
- package/lib/components/CarouselNavButton/useCarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +3 -3
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +3 -3
- package/lib/components/CarouselNavContainer/CarouselNavContainer.js +5 -5
- package/lib/components/CarouselNavContainer/CarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/index.js +4 -4
- package/lib/components/CarouselNavContainer/index.js.map +1 -1
- package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js +4 -4
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +2 -2
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +2 -2
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js +5 -5
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/index.js +4 -4
- package/lib/components/CarouselNavImageButton/index.js.map +1 -1
- package/lib/components/CarouselNavImageButton/renderCarouselNavImageButton.js +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js +6 -6
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +2 -2
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +2 -2
- package/lib/components/CarouselSlider/CarouselSlider.js +6 -6
- package/lib/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSliderContext.js +1 -1
- package/lib/components/CarouselSlider/index.js +4 -4
- package/lib/components/CarouselSlider/index.js.map +1 -1
- package/lib/components/CarouselSlider/renderCarouselSlider.js +2 -2
- package/lib/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSlider.js +3 -3
- package/lib/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderContextValues.js +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js +3 -3
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +3 -3
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.js +6 -6
- package/lib/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/index.js +4 -4
- package/lib/components/CarouselViewport/index.js.map +1 -1
- package/lib/components/CarouselViewport/renderCarouselViewport.js +2 -2
- package/lib/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewport.js +3 -3
- package/lib/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -1
- package/lib/components/pointerEvents.js +1 -1
- package/lib/components/pointerEvents.js.map +1 -1
- package/lib/components/useEmblaCarousel.js +8 -8
- package/lib/components/useEmblaCarousel.js.map +1 -1
- package/lib/index.js +11 -11
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Carousel.js → Carousel.cjs} +1 -1
- package/lib-commonjs/{Carousel.js.map → Carousel.cjs.map} +1 -1
- package/lib-commonjs/{CarouselAutoplayButton.js → CarouselAutoplayButton.cjs} +1 -1
- package/lib-commonjs/{CarouselAutoplayButton.js.map → CarouselAutoplayButton.cjs.map} +1 -1
- package/lib-commonjs/{CarouselButton.js → CarouselButton.cjs} +1 -1
- package/lib-commonjs/{CarouselButton.js.map → CarouselButton.cjs.map} +1 -1
- package/lib-commonjs/{CarouselCard.js → CarouselCard.cjs} +1 -1
- package/lib-commonjs/{CarouselCard.js.map → CarouselCard.cjs.map} +1 -1
- package/lib-commonjs/{CarouselContext.js → CarouselContext.cjs} +1 -1
- package/lib-commonjs/{CarouselContext.js.map → CarouselContext.cjs.map} +1 -1
- package/lib-commonjs/{CarouselNav.js → CarouselNav.cjs} +1 -1
- package/lib-commonjs/{CarouselNav.js.map → CarouselNav.cjs.map} +1 -1
- package/lib-commonjs/{CarouselNavButton.js → CarouselNavButton.cjs} +1 -1
- package/lib-commonjs/{CarouselNavButton.js.map → CarouselNavButton.cjs.map} +1 -1
- package/lib-commonjs/{CarouselNavContainer.js → CarouselNavContainer.cjs} +1 -1
- package/lib-commonjs/{CarouselNavContainer.js.map → CarouselNavContainer.cjs.map} +1 -1
- package/lib-commonjs/{CarouselNavImageButton.js → CarouselNavImageButton.cjs} +1 -1
- package/lib-commonjs/{CarouselNavImageButton.js.map → CarouselNavImageButton.cjs.map} +1 -1
- package/lib-commonjs/{CarouselSlider.js → CarouselSlider.cjs} +1 -1
- package/lib-commonjs/{CarouselSlider.js.map → CarouselSlider.cjs.map} +1 -1
- package/lib-commonjs/{CarouselViewport.js → CarouselViewport.cjs} +1 -1
- package/lib-commonjs/{CarouselViewport.js.map → CarouselViewport.cjs.map} +1 -1
- package/lib-commonjs/components/Carousel/{Carousel.js → Carousel.cjs} +4 -4
- package/lib-commonjs/components/Carousel/{Carousel.js.map → Carousel.cjs.map} +1 -1
- package/lib-commonjs/components/Carousel/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Carousel/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Carousel/{renderCarousel.js → renderCarousel.cjs} +1 -1
- package/lib-commonjs/components/Carousel/{renderCarousel.js.map → renderCarousel.cjs.map} +1 -1
- package/lib-commonjs/components/Carousel/{useCarousel.js → useCarousel.cjs} +1 -1
- package/lib-commonjs/components/Carousel/{useCarousel.js.map → useCarousel.cjs.map} +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselAutoplayButton/{CarouselAutoplayButton.js → CarouselAutoplayButton.cjs} +3 -3
- package/lib-commonjs/components/CarouselAutoplayButton/{CarouselAutoplayButton.js.map → CarouselAutoplayButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselAutoplayButton/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/{useCarouselAutoplayButton.js → useCarouselAutoplayButton.cjs} +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/{useCarouselAutoplayButton.js.map → useCarouselAutoplayButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselButton/{CarouselButton.js → CarouselButton.cjs} +3 -3
- package/lib-commonjs/components/CarouselButton/{CarouselButton.js.map → CarouselButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselButton/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselButton/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselButton/{useCarouselButton.js → useCarouselButton.cjs} +2 -2
- package/lib-commonjs/components/CarouselButton/{useCarouselButton.js.map → useCarouselButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselCard/{CarouselCard.js → CarouselCard.cjs} +3 -3
- package/lib-commonjs/components/CarouselCard/{CarouselCard.js.map → CarouselCard.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselCard/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselCard/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselCard/{useCarouselCard.js → useCarouselCard.cjs} +4 -4
- package/lib-commonjs/components/CarouselCard/{useCarouselCard.js.map → useCarouselCard.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselCard/{useCarouselCardStyles.styles.js → useCarouselCardStyles.styles.cjs} +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselCard/{useCarouselCardStyles.styles.raw.js → useCarouselCardStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/CarouselCard/{useCarouselCardStyles.styles.raw.js.map → useCarouselCardStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNav/{CarouselNav.js → CarouselNav.cjs} +4 -4
- package/lib-commonjs/components/CarouselNav/{CarouselNav.js.map → CarouselNav.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNav/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselNav/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNav/{renderCarouselNav.js → renderCarouselNav.cjs} +2 -2
- package/lib-commonjs/components/CarouselNav/{renderCarouselNav.js.map → renderCarouselNav.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNav/{useCarouselNav.js → useCarouselNav.cjs} +1 -1
- package/lib-commonjs/components/CarouselNav/{useCarouselNav.js.map → useCarouselNav.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselNavButton/{CarouselNavButton.js → CarouselNavButton.cjs} +3 -3
- package/lib-commonjs/components/CarouselNavButton/{CarouselNavButton.js.map → CarouselNavButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavButton/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselNavButton/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavButton/{useCarouselNavButton.js → useCarouselNavButton.cjs} +3 -3
- package/lib-commonjs/components/CarouselNavButton/{useCarouselNavButton.js.map → useCarouselNavButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselNavContainer/{CarouselNavContainer.js → CarouselNavContainer.cjs} +3 -3
- package/lib-commonjs/components/CarouselNavContainer/{CarouselNavContainer.js.map → CarouselNavContainer.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavContainer/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselNavContainer/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavContainer/{useCarouselNavContainer.js → useCarouselNavContainer.cjs} +2 -2
- package/lib-commonjs/components/CarouselNavContainer/{useCarouselNavContainer.js.map → useCarouselNavContainer.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselNavImageButton/{CarouselNavImageButton.js → CarouselNavImageButton.cjs} +3 -3
- package/lib-commonjs/components/CarouselNavImageButton/{CarouselNavImageButton.js.map → CarouselNavImageButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselNavImageButton/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/{useCarouselNavImageButton.js → useCarouselNavImageButton.cjs} +2 -2
- package/lib-commonjs/components/CarouselNavImageButton/{useCarouselNavImageButton.js.map → useCarouselNavImageButton.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselSlider/{CarouselSlider.js → CarouselSlider.cjs} +4 -4
- package/lib-commonjs/components/CarouselSlider/{CarouselSlider.js.map → CarouselSlider.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselSlider/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselSlider/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselSlider/{renderCarouselSlider.js → renderCarouselSlider.cjs} +1 -1
- package/lib-commonjs/components/CarouselSlider/{renderCarouselSlider.js.map → renderCarouselSlider.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselSlider/{useCarouselSlider.js → useCarouselSlider.cjs} +1 -1
- package/lib-commonjs/components/CarouselSlider/{useCarouselSlider.js.map → useCarouselSlider.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselSlider/{useCarouselSliderStyles.styles.js → useCarouselSliderStyles.styles.cjs} +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/CarouselSlider/{useCarouselSliderStyles.styles.raw.js → useCarouselSliderStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/CarouselSlider/{useCarouselSliderStyles.styles.raw.js.map → useCarouselSliderStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselViewport/{CarouselViewport.js → CarouselViewport.cjs} +4 -4
- package/lib-commonjs/components/CarouselViewport/{CarouselViewport.js.map → CarouselViewport.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselViewport/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/CarouselViewport/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselViewport/{renderCarouselViewport.js → renderCarouselViewport.cjs} +1 -1
- package/lib-commonjs/components/CarouselViewport/{renderCarouselViewport.js.map → renderCarouselViewport.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselViewport/{useCarouselViewport.js → useCarouselViewport.cjs} +1 -1
- package/lib-commonjs/components/CarouselViewport/{useCarouselViewport.js.map → useCarouselViewport.cjs.map} +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/{pointerEvents.js → pointerEvents.cjs} +1 -1
- package/lib-commonjs/components/{pointerEvents.js.map → pointerEvents.cjs.map} +1 -1
- package/lib-commonjs/components/{useEmblaCarousel.js → useEmblaCarousel.cjs} +3 -3
- package/lib-commonjs/components/{useEmblaCarousel.js.map → useEmblaCarousel.cjs.map} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +11 -11
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/package.json +22 -21
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +0 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +0 -1
- /package/lib-commonjs/components/Carousel/{Carousel.types.js → Carousel.types.cjs} +0 -0
- /package/lib-commonjs/components/Carousel/{Carousel.types.js.map → Carousel.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Carousel/{useCarouselContextValues.js → useCarouselContextValues.cjs} +0 -0
- /package/lib-commonjs/components/Carousel/{useCarouselContextValues.js.map → useCarouselContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/Carousel/{useCarouselStyles.styles.js → useCarouselStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Carousel/{useCarouselStyles.styles.raw.js → useCarouselStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/Carousel/{useCarouselStyles.styles.raw.js.map → useCarouselStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{CarouselAutoplayButton.types.js → CarouselAutoplayButton.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{CarouselAutoplayButton.types.js.map → CarouselAutoplayButton.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{renderCarouselAutoplayButton.js → renderCarouselAutoplayButton.cjs} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{renderCarouselAutoplayButton.js.map → renderCarouselAutoplayButton.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{useCarouselAutoplayButtonStyles.styles.js → useCarouselAutoplayButtonStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{useCarouselAutoplayButtonStyles.styles.raw.js → useCarouselAutoplayButtonStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselAutoplayButton/{useCarouselAutoplayButtonStyles.styles.raw.js.map → useCarouselAutoplayButtonStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselButton/{CarouselButton.types.js → CarouselButton.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselButton/{CarouselButton.types.js.map → CarouselButton.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselButton/{renderCarouselButton.js → renderCarouselButton.cjs} +0 -0
- /package/lib-commonjs/components/CarouselButton/{renderCarouselButton.js.map → renderCarouselButton.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselButton/{useCarouselButtonStyles.styles.js → useCarouselButtonStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselButton/{useCarouselButtonStyles.styles.raw.js → useCarouselButtonStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselButton/{useCarouselButtonStyles.styles.raw.js.map → useCarouselButtonStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselCard/{CarouselCard.types.js → CarouselCard.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselCard/{CarouselCard.types.js.map → CarouselCard.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselCard/{renderCarouselCard.js → renderCarouselCard.cjs} +0 -0
- /package/lib-commonjs/components/CarouselCard/{renderCarouselCard.js.map → renderCarouselCard.cjs.map} +0 -0
- /package/lib-commonjs/components/{CarouselContext.js → CarouselContext.cjs} +0 -0
- /package/lib-commonjs/components/{CarouselContext.js.map → CarouselContext.cjs.map} +0 -0
- /package/lib-commonjs/components/{CarouselContext.types.js → CarouselContext.types.cjs} +0 -0
- /package/lib-commonjs/components/{CarouselContext.types.js.map → CarouselContext.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNav/{CarouselNav.types.js → CarouselNav.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNav/{CarouselNav.types.js.map → CarouselNav.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNav/{CarouselNavContext.js → CarouselNavContext.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNav/{CarouselNavContext.js.map → CarouselNavContext.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNav/{CarouselNavIndexContext.js → CarouselNavIndexContext.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNav/{CarouselNavIndexContext.js.map → CarouselNavIndexContext.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNav/{useCarouselNavContextValues.js → useCarouselNavContextValues.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNav/{useCarouselNavContextValues.js.map → useCarouselNavContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNav/{useCarouselNavStyles.styles.js → useCarouselNavStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNav/{useCarouselNavStyles.styles.raw.js → useCarouselNavStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNav/{useCarouselNavStyles.styles.raw.js.map → useCarouselNavStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{CarouselNavButton.types.js → CarouselNavButton.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{CarouselNavButton.types.js.map → CarouselNavButton.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{renderCarouselNavButton.js → renderCarouselNavButton.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{renderCarouselNavButton.js.map → renderCarouselNavButton.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{useCarouselNavButtonStyles.styles.js → useCarouselNavButtonStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{useCarouselNavButtonStyles.styles.raw.js → useCarouselNavButtonStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavButton/{useCarouselNavButtonStyles.styles.raw.js.map → useCarouselNavButtonStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{CarouselNavContainer.types.js → CarouselNavContainer.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{CarouselNavContainer.types.js.map → CarouselNavContainer.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{renderCarouselNavContainer.js → renderCarouselNavContainer.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{renderCarouselNavContainer.js.map → renderCarouselNavContainer.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{useCarouselNavContainerStyles.styles.js → useCarouselNavContainerStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{useCarouselNavContainerStyles.styles.raw.js → useCarouselNavContainerStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavContainer/{useCarouselNavContainerStyles.styles.raw.js.map → useCarouselNavContainerStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{CarouselNavImageButton.types.js → CarouselNavImageButton.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{CarouselNavImageButton.types.js.map → CarouselNavImageButton.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{renderCarouselNavImageButton.js → renderCarouselNavImageButton.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{renderCarouselNavImageButton.js.map → renderCarouselNavImageButton.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{useCarouselNavImageButtonStyles.styles.js → useCarouselNavImageButtonStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{useCarouselNavImageButtonStyles.styles.raw.js → useCarouselNavImageButtonStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselNavImageButton/{useCarouselNavImageButtonStyles.styles.raw.js.map → useCarouselNavImageButtonStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselSlider/{CarouselSlider.types.js → CarouselSlider.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselSlider/{CarouselSlider.types.js.map → CarouselSlider.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselSlider/{CarouselSliderContext.js → CarouselSliderContext.cjs} +0 -0
- /package/lib-commonjs/components/CarouselSlider/{CarouselSliderContext.js.map → CarouselSliderContext.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselSlider/{useCarouselSliderContextValues.js → useCarouselSliderContextValues.cjs} +0 -0
- /package/lib-commonjs/components/CarouselSlider/{useCarouselSliderContextValues.js.map → useCarouselSliderContextValues.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselViewport/{CarouselViewport.types.js → CarouselViewport.types.cjs} +0 -0
- /package/lib-commonjs/components/CarouselViewport/{CarouselViewport.types.js.map → CarouselViewport.types.cjs.map} +0 -0
- /package/lib-commonjs/components/CarouselViewport/{useCarouselViewportStyles.styles.js → useCarouselViewportStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/CarouselViewport/{useCarouselViewportStyles.styles.raw.js → useCarouselViewportStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/CarouselViewport/{useCarouselViewportStyles.styles.raw.js.map → useCarouselViewportStyles.styles.raw.cjs.map} +0 -0
|
@@ -25,7 +25,7 @@ _export(exports, {
|
|
|
25
25
|
return _useCarousel.useCarousel_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _Carousel = require("./Carousel");
|
|
29
|
-
const _renderCarousel = require("./renderCarousel");
|
|
30
|
-
const _useCarousel = require("./useCarousel");
|
|
31
|
-
const _useCarouselStylesstyles = require("./useCarouselStyles.styles");
|
|
28
|
+
const _Carousel = require("./Carousel.cjs");
|
|
29
|
+
const _renderCarousel = require("./renderCarousel.cjs");
|
|
30
|
+
const _useCarousel = require("./useCarousel.cjs");
|
|
31
|
+
const _useCarouselStylesstyles = require("./useCarouselStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/index.ts"],"sourcesContent":["export { Carousel } from './Carousel';\nexport type {\n CarouselAnnouncerFunction,\n CarouselMotion,\n CarouselProps,\n CarouselSlots,\n CarouselState,\n CarouselUpdateData,\n CarouselVisibilityChangeEvent,\n CarouselVisibilityEventDetail,\n} from './Carousel.types';\nexport { renderCarousel_unstable } from './renderCarousel';\nexport { useCarousel_unstable } from './useCarousel';\nexport { carouselClassNames, useCarouselStyles_unstable } from './useCarouselStyles.styles';\n"],"names":["Carousel","renderCarousel_unstable","useCarousel_unstable","carouselClassNames","useCarouselStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAaRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAZJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/index.ts"],"sourcesContent":["export { Carousel } from './Carousel';\nexport type {\n CarouselAnnouncerFunction,\n CarouselMotion,\n CarouselProps,\n CarouselSlots,\n CarouselState,\n CarouselUpdateData,\n CarouselVisibilityChangeEvent,\n CarouselVisibilityEventDetail,\n} from './Carousel.types';\nexport { renderCarousel_unstable } from './renderCarousel';\nexport { useCarousel_unstable } from './useCarousel';\nexport { carouselClassNames, useCarouselStyles_unstable } from './useCarouselStyles.styles';\n"],"names":["Carousel","renderCarousel_unstable","useCarousel_unstable","carouselClassNames","useCarouselStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAaRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAZJ,gBAAa;gCAWE,sBAAmB;6BACtB,mBAAgB;yCACU,gCAA6B"}
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "renderCarousel_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
-
const _CarouselContext = require("../CarouselContext");
|
|
13
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
14
14
|
const renderCarousel_unstable = (state, contextValues)=>{
|
|
15
15
|
(0, _reactutilities.assertSlots)(state);
|
|
16
16
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselContext.CarouselProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues): JSXElement => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["assertSlots","CarouselProvider","renderCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;iCAGvB,
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues): JSXElement => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["assertSlots","CarouselProvider","renderCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;iCAGvB,wBAAqB;AAM/C,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,iCAAAA,EAAAA;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
@@ -13,7 +13,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
13
13
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
16
|
-
const _useEmblaCarousel = require("../useEmblaCarousel");
|
|
16
|
+
const _useEmblaCarousel = require("../useEmblaCarousel.cjs");
|
|
17
17
|
function useCarousel_unstable(props, ref) {
|
|
18
18
|
'use no memo'; // justified: compiler would optimize useCarousel_unstable — manual opt-out to preserve runtime behavior
|
|
19
19
|
const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide', autoplayInterval = 4000, appearance = 'flat' } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/useCarousel.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Carousel.\n *\n * The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n *\n * @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo'; // justified: compiler would optimize useCarousel_unstable — manual opt-out to preserve runtime behavior\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n motion = 'slide',\n autoplayInterval = 4000,\n appearance = 'flat',\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n motion,\n onDragIndexChange: onActiveIndexChange,\n onAutoplayIndexChange: onActiveIndexChange,\n autoplayInterval,\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedContainerRef = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 || !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedContainerRef,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n appearance,\n circular,\n containerRef: mergedContainerRef,\n viewportRef,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useFluent_unstable","useFluent","getIntrinsicElementProps","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useEmblaCarousel","useAnnounce","useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","autoplayInterval","appearance","dir","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","onAutoplayIndexChange","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","announcementTextRef","useRef","totalNavLength","navGroupRef","announce","updateAnnouncement","current","announcementText","polite","data","navItemsCount","groupIndexList","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BA0BgBU;;;;;;;qCAxBgC,kCAAkC;gCAO3E,4BAA4B;iEACZ,QAAQ;kCAIE,
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/useCarousel.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Carousel.\n *\n * The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n *\n * @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo'; // justified: compiler would optimize useCarousel_unstable — manual opt-out to preserve runtime behavior\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n motion = 'slide',\n autoplayInterval = 4000,\n appearance = 'flat',\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n motion,\n onDragIndexChange: onActiveIndexChange,\n onAutoplayIndexChange: onActiveIndexChange,\n autoplayInterval,\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedContainerRef = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 || !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedContainerRef,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n appearance,\n circular,\n containerRef: mergedContainerRef,\n viewportRef,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useFluent_unstable","useFluent","getIntrinsicElementProps","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useEmblaCarousel","useAnnounce","useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","autoplayInterval","appearance","dir","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","onAutoplayIndexChange","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","announcementTextRef","useRef","totalNavLength","navGroupRef","announce","updateAnnouncement","current","announcementText","polite","data","navItemsCount","groupIndexList","components","root","always","role","elementType"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const carouselClassNames = {\n root: 'fui-Carousel'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative'\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL\n }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n const styles = useStyles();\n const { appearance } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselClassNames","root","useStyles","B68tc82","Eiaeu8","qhf8xq","elevated","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useCarouselStyles_unstable","state","styles","appearance","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,kBAAkB;;;8BAqBY;;;;uBAvBF,gBAAgB;AAElD,2BAA2B;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAarB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEoB,UAAAA,EAAY,GAAGF,KAAK;IAC5B,oDAAA;IACAA,KAAK,CAACnB,IAAI,CAACsB,SAAS,OAAGzB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,UAAU,KAAK,UAAU,IAAID,MAAM,CAACf,QAAQ,EAAEc,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;IAC7I,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "CarouselAutoplayButton", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton");
|
|
15
|
-
const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton");
|
|
16
|
-
const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles");
|
|
14
|
+
const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton.cjs");
|
|
15
|
+
const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton.cjs");
|
|
16
|
+
const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const CarouselAutoplayButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useCarouselAutoplayButton.useCarouselAutoplayButton_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nimport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nimport { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';\nimport type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\n * CarouselAutoplayButton which must be present for auto-play to be enabled.\n *\n * If CarouselAutoplayButton is present, auto-play will default to true on mount.\n */\nexport const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps> = React.forwardRef(\n (props, ref) => {\n const state = useCarouselAutoplayButton_unstable(props, ref);\n\n useCarouselAutoplayButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);\n\n return renderCarouselAutoplayButton_unstable(state);\n },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["React","useCarouselAutoplayButton_unstable","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCustomStyleHook_unstable","CarouselAutoplayButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2CAEoB,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nimport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nimport { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';\nimport type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\n * CarouselAutoplayButton which must be present for auto-play to be enabled.\n *\n * If CarouselAutoplayButton is present, auto-play will default to true on mount.\n */\nexport const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps> = React.forwardRef(\n (props, ref) => {\n const state = useCarouselAutoplayButton_unstable(props, ref);\n\n useCarouselAutoplayButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);\n\n return renderCarouselAutoplayButton_unstable(state);\n },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["React","useCarouselAutoplayButton_unstable","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCustomStyleHook_unstable","CarouselAutoplayButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2CAEoB,iCAA8B;8CAC3B,oCAAiC;uDAC9B,8CAA2C;qCAExD,kCAAkC;AAQvE,MAAMK,yBAAAA,WAAAA,GAA2EL,OAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,YAAQR,6DAAAA,EAAmCM,OAAOC;QAExDL,+EAAAA,EAAyCM;QACzCL,gDAAAA,EAA4B,4CAA4CK;IAExE,WAAOP,mEAAAA,EAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}
|
|
@@ -25,7 +25,7 @@ _export(exports, {
|
|
|
25
25
|
return _useCarouselAutoplayButton.useCarouselAutoplayButton_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _CarouselAutoplayButton = require("./CarouselAutoplayButton");
|
|
29
|
-
const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton");
|
|
30
|
-
const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton");
|
|
31
|
-
const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles");
|
|
28
|
+
const _CarouselAutoplayButton = require("./CarouselAutoplayButton.cjs");
|
|
29
|
+
const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton.cjs");
|
|
30
|
+
const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton.cjs");
|
|
31
|
+
const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselAutoplayButton/index.ts"],"sourcesContent":["export { CarouselAutoplayButton } from './CarouselAutoplayButton';\nexport type {\n CarouselAutoplayAriaLabelFunction,\n CarouselAutoplayButtonProps,\n CarouselAutoplayButtonSlots,\n CarouselAutoplayButtonState,\n CarouselAutoplayChangeData,\n} from './CarouselAutoplayButton.types';\nexport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nexport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nexport {\n carouselAutoplayButtonClassNames,\n useCarouselAutoplayButtonStyles_unstable,\n} from './useCarouselAutoplayButtonStyles.styles';\n"],"names":["CarouselAutoplayButton","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButton_unstable","carouselAutoplayButtonClassNames","useCarouselAutoplayButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8CAAsB;;;eAW7BG,uEAAgC;;;eAHzBF,mEAAqC;;;eAI5CG,+EAAwC;;;eAHjCF,6DAAkC;;;wCATJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselAutoplayButton/index.ts"],"sourcesContent":["export { CarouselAutoplayButton } from './CarouselAutoplayButton';\nexport type {\n CarouselAutoplayAriaLabelFunction,\n CarouselAutoplayButtonProps,\n CarouselAutoplayButtonSlots,\n CarouselAutoplayButtonState,\n CarouselAutoplayChangeData,\n} from './CarouselAutoplayButton.types';\nexport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nexport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nexport {\n carouselAutoplayButtonClassNames,\n useCarouselAutoplayButtonStyles_unstable,\n} from './useCarouselAutoplayButtonStyles.styles';\n"],"names":["CarouselAutoplayButton","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButton_unstable","carouselAutoplayButtonClassNames","useCarouselAutoplayButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8CAAsB;;;eAW7BG,uEAAgC;;;eAHzBF,mEAAqC;;;eAI5CG,+EAAwC;;;eAHjCF,6DAAkC;;;wCATJ,8BAA2B;8CAQZ,oCAAiC;2CACpC,iCAA8B;uDAI1E,8CAA2C"}
|
|
@@ -14,7 +14,7 @@ const _reactbutton = require("@fluentui/react-button");
|
|
|
14
14
|
const _reacticons = require("@fluentui/react-icons");
|
|
15
15
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
16
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
17
|
-
const _CarouselContext = require("../CarouselContext");
|
|
17
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
18
18
|
const useCarouselAutoplayButton_unstable = (props, ref)=>{
|
|
19
19
|
const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;
|
|
20
20
|
const [autoplay, setAutoplay] = (0, _reactutilities.useControllableState)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...buttonProps,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useToggleButton_unstable","PlayCircleRegular","PauseCircleRegular","mergeCallbacks","slot","useControllableState","useEventCallback","React","useCarouselContext_unstable","useCarouselContext","useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","buttonProps","autoplay","setAutoplay","state","defaultState","initialState","enableAutoplay","ctx","useEffect","handleClick","event","isDefaultPrevented","newValue","type","icon","optional","defaultProps","children","renderByDefault","elementType","onClick"],"mappings":"AAAA;;;;;+BAoBaU;;;;;;;6BAjB4B,yBAAyB;4BACZ,wBAAwB;gCACD,4BAA4B;iEAClF,QAAQ;iCAGmC,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...buttonProps,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useToggleButton_unstable","PlayCircleRegular","PauseCircleRegular","mergeCallbacks","slot","useControllableState","useEventCallback","React","useCarouselContext_unstable","useCarouselContext","useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","buttonProps","autoplay","setAutoplay","state","defaultState","initialState","enableAutoplay","ctx","useEffect","handleClick","event","isDefaultPrevented","newValue","type","icon","optional","defaultProps","children","renderByDefault","elementType","onClick"],"mappings":"AAAA;;;;;+BAoBaU;;;;;;;6BAjB4B,yBAAyB;4BACZ,wBAAwB;gCACD,4BAA4B;iEAClF,QAAQ;iCAGmC,wBAAqB;AAWhF,2CAA2C,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGC,aAAa,GAAGL;IAErE,MAAM,CAACM,UAAUC,YAAY,OAAGb,oCAAAA,EAAqB;QACnDc,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,qBAAiBb,4CAAAA,EAAmBc,CAAAA,MAAOA,IAAID,cAAc;IAEnEf,OAAMiB,SAAS,CAAC;QACd,qDAAqD;QACrDF,eAAeL;QAEf,OAAO;YACL,yDAAyD;YACzDK,eAAe;QACjB;IACF,GAAG;QAACL;QAAUK;KAAe;IAE7B,MAAMG,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACX;QAElBC,YAAYU;QACZf,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBa,OAAO;YAAEA;YAAOG,MAAM;YAASf,SAASc;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,OAAG5B,qCAAAA,EACD;YACE8B,MAAM1B,oBAAAA,CAAK2B,QAAQ,CAACpB,MAAMmB,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUhB,WAAAA,WAAAA,GAAW,OAAA,aAAA,CAACf,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwB,OAAA,aAAA,CAACD,6BAAAA,EAAAA;gBACjD;gBACAiC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGnB,WAAW;YACdF,SAASG;YACTmB,aAAS9B,gCAAAA,MAAiBH,8BAAAA,EAAesB,aAAad,MAAMyB,OAAO;QACrE,GACAxB,IACD;IACH;AACF,EAAE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCarouselAutoplayButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { useToggleButtonStyles_unstable } from \"@fluentui/react-button\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const carouselAutoplayButtonClassNames = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer'\n }\n }\n});\n/**\n * Apply styling to the CarouselAutoplayButton slots based on the state\n */ export const useCarouselAutoplayButtonStyles_unstable = (state)=>{\n const styles = useStyles();\n useToggleButtonStyles_unstable(state);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","Bkecrkj","B6of3ja","jrapky","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","De3pzq","eoavqd","d","h","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,gCAAgC;;;IAqB5BgB,wCAAwC;;;;uBAxBJ,gBAAgB;6BACtB,wBAAwB;AAEhE,yCAAyC;IAC5Cf,IAAI,EAAE,4BAA4B;IAClCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGR,mBAAA,EAAA;IAAAM,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,kDAAkDE,KAAK,IAAG;IACjE,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;QAC1BL,2CAA8B,EAACmB,KAAK,CAAC;IACrC,oDAAA;IACAA,KAAK,CAAChB,IAAI,CAACkB,SAAS,OAAGvB,mBAAY,EAACI,gCAAgC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;IAC7G,IAAIF,KAAK,CAACf,IAAI,EAAE;QACZ,oDAAA;QACAe,KAAK,CAACf,IAAI,CAACiB,SAAS,OAAGvB,mBAAY,EAACI,gCAAgC,CAACE,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;IACpG;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "CarouselButton", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useCarouselButton = require("./useCarouselButton");
|
|
15
|
-
const _renderCarouselButton = require("./renderCarouselButton");
|
|
16
|
-
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
|
|
14
|
+
const _useCarouselButton = require("./useCarouselButton.cjs");
|
|
15
|
+
const _renderCarouselButton = require("./renderCarouselButton.cjs");
|
|
16
|
+
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const CarouselButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useCarouselButton.useCarouselButton_unstable)(props, ref);
|
package/lib-commonjs/components/CarouselButton/{CarouselButton.js.map → CarouselButton.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselButton_unstable } from './useCarouselButton';\nimport { renderCarouselButton_unstable } from './renderCarouselButton';\nimport { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\nimport type { CarouselButtonProps } from './CarouselButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A default navigation button that will set value to the next/previous page,\n * driven by it's type 'next' or 'previous'.\n */\nexport const CarouselButton: ForwardRefComponent<CarouselButtonProps> = React.forwardRef((props, ref) => {\n const state = useCarouselButton_unstable(props, ref);\n\n useCarouselButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);\n\n return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["React","useCarouselButton_unstable","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCustomStyleHook_unstable","CarouselButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCAEY,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselButton_unstable } from './useCarouselButton';\nimport { renderCarouselButton_unstable } from './renderCarouselButton';\nimport { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\nimport type { CarouselButtonProps } from './CarouselButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A default navigation button that will set value to the next/previous page,\n * driven by it's type 'next' or 'previous'.\n */\nexport const CarouselButton: ForwardRefComponent<CarouselButtonProps> = React.forwardRef((props, ref) => {\n const state = useCarouselButton_unstable(props, ref);\n\n useCarouselButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);\n\n return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["React","useCarouselButton_unstable","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCustomStyleHook_unstable","CarouselButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCAEY,yBAAsB;sCACnB,4BAAyB;+CACtB,sCAAmC;qCAExC,kCAAkC;AAMvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
|
|
@@ -25,7 +25,7 @@ _export(exports, {
|
|
|
25
25
|
return _useCarouselButton.useCarouselButton_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _CarouselButton = require("./CarouselButton");
|
|
29
|
-
const _renderCarouselButton = require("./renderCarouselButton");
|
|
30
|
-
const _useCarouselButton = require("./useCarouselButton");
|
|
31
|
-
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
|
|
28
|
+
const _CarouselButton = require("./CarouselButton.cjs");
|
|
29
|
+
const _renderCarouselButton = require("./renderCarouselButton.cjs");
|
|
30
|
+
const _useCarouselButton = require("./useCarouselButton.cjs");
|
|
31
|
+
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/index.ts"],"sourcesContent":["export { CarouselButton } from './CarouselButton';\nexport type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton.types';\nexport { renderCarouselButton_unstable } from './renderCarouselButton';\nexport { useCarouselButton_unstable } from './useCarouselButton';\nexport { carouselButtonClassNames, useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\n"],"names":["CarouselButton","renderCarouselButton_unstable","useCarouselButton_unstable","carouselButtonClassNames","useCarouselButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/index.ts"],"sourcesContent":["export { CarouselButton } from './CarouselButton';\nexport type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton.types';\nexport { renderCarouselButton_unstable } from './renderCarouselButton';\nexport { useCarouselButton_unstable } from './useCarouselButton';\nexport { carouselButtonClassNames, useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\n"],"names":["CarouselButton","renderCarouselButton_unstable","useCarouselButton_unstable","carouselButtonClassNames","useCarouselButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,sBAAmB;sCAEJ,4BAAyB;mCAC5B,yBAAsB;+CACU,sCAAmC"}
|
package/lib-commonjs/components/CarouselButton/{useCarouselButton.js → useCarouselButton.cjs}
RENAMED
|
@@ -14,8 +14,8 @@ const _reactbutton = require("@fluentui/react-button");
|
|
|
14
14
|
const _reacticons = require("@fluentui/react-icons");
|
|
15
15
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
16
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
17
|
-
const _CarouselContext = require("../CarouselContext");
|
|
18
|
-
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
|
|
17
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
18
|
+
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles.cjs");
|
|
19
19
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
20
20
|
const useCarouselButton_unstable = (props, ref)=>{
|
|
21
21
|
const { navType = 'next', ...buttonProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next', ...buttonProps } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>(undefined);\n const circular = useCarouselContext(ctx => ctx.circular);\n const [canLoop, setCanLoop] = React.useState(circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular && canLoop) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n if (data.canLoop !== undefined) {\n // Only update canLoop if it has been defined by the carousel engine\n setCanLoop(data.canLoop);\n }\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...buttonProps,\n // eslint-disable-next-line react-hooks/refs\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","buttonProps","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","undefined","circular","ctx","canLoop","setCanLoop","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"mappings":"AAAA;;;;;+BA6Bac;;;;;;;6BA1BsB,yBAAyB;4BACJ,wBAAwB;gCAOzE,4BAA4B;iEACZ,QAAQ;iCAEmC,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render CarouselButton.\n *\n * The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n *\n * @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next', ...buttonProps } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>(undefined);\n const circular = useCarouselContext(ctx => ctx.circular);\n const [canLoop, setCanLoop] = React.useState(circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular && canLoop) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n if (data.canLoop !== undefined) {\n // Only update canLoop if it has been defined by the carousel engine\n setCanLoop(data.canLoop);\n }\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...buttonProps,\n // eslint-disable-next-line react-hooks/refs\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","buttonProps","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","undefined","circular","ctx","canLoop","setCanLoop","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"mappings":"AAAA;;;;;+BA6Bac;;;;;;;6BA1BsB,yBAAyB;4BACJ,wBAAwB;gCAOzE,4BAA4B;iEACZ,QAAQ;iCAEmC,wBAAqB;+CAG9C,sCAAmC;qCAC5B,kCAAkC;AAW3E,mCAAmC,CACxCC,OACAC;IAEA,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGC,aAAa,GAAGH;IAE7C,+EAA+E;IAC/E,MAAM,CAACI,aAAaC,eAAe,GAAGZ,OAAMa,QAAQ,CAAC;IAErD,MAAM,EAAEC,GAAG,EAAE,OAAGT,uCAAAA;IAChB,MAAMU,YAAYf,OAAMgB,MAAM,CAAoBC;IAClD,MAAMC,eAAWhB,4CAAAA,EAAmBiB,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAM,CAACE,SAASC,WAAW,GAAGrB,OAAMa,QAAQ,CAACK;IAC7C,MAAMI,mBAAepB,4CAAAA,EAAmBiB,CAAAA,MAAOA,IAAIG,YAAY;IAC/D,MAAMC,4BAAwBrB,4CAAAA,EAAmBiB,CAAAA,MAAOA,IAAII,qBAAqB;IACjF,MAAMC,yBAAqBtB,4CAAAA,EAAmBiB,CAAAA,MAAOA,IAAIK,kBAAkB;IAC3E,MAAMC,oBAAgBvB,4CAAAA,EAAmBiB,CAAAA,MAAOA,IAAIM,aAAa;IAEjE,MAAMC,iBAAaxB,4CAAAA,EAAmBiB,CAAAA;QACpC,IAAID,YAAYE,SAAS;YACvB,OAAO;QACT;QAEA,IAAIX,YAAY,QAAQ;YACtB,OAAOU,IAAIQ,WAAW,KAAK;QAC7B;QAEA,OAAOR,IAAIQ,WAAW,KAAKhB,cAAc;IAC3C;IAEA,MAAMiB,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,YAAYR,sBAAsBM,OAAOpB;QAE/C,IAAIuB,YAAY;QAChB,IAAIvB,YAAY,QAAQ;YACtBuB,YAAYD,cAAc;QAC5B,OAAO;YACLC,YAAYD,cAAcpB,cAAc;QAC1C;QAEA,IAAI,CAACO,YAAYc,cAAaV,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcW,OAAAA,AAAO,GAAE;YACnD,6BAA6B;YAC7B,MAAMC,aAA4CZ,aAAaW,OAAO,CAACE,gBAAgB,CACrF,CAAC,CAAC,EAAEhC,uDAAAA,CAAyBiC,IAAI,EAAE;YAErCF,WAAWG,OAAO,CAACC,CAAAA;gBACjB,IAAIA,eAAevB,UAAUkB,OAAO,EAAE;oBACpCK,WAAWC,KAAK;gBAClB;YACF;QACF;QAEAd;IACF;QAEA3B,yCAAAA,EAA0B;QACxB,OAAO0B,mBAAmB,CAACgB;YACzB,IAAIA,KAAKpB,OAAO,KAAKH,WAAW;gBAC9B,oEAAoE;gBACpEI,WAAWmB,KAAKpB,OAAO;YACzB;YACAR,eAAe4B,KAAKC,aAAa;QACnC;IACF,GAAG;QAACjB;KAAmB;IAEvB,MAAMkB,gBAAgB5B,QAAQ,QAAA,WAAA,GAAQ,OAAA,aAAA,CAACpB,+BAAAA,EAAAA,QAAAA,WAAAA,GAAyB,OAAA,aAAA,CAACD,8BAAAA,EAAAA;IACjE,MAAMkD,gBAAgB7B,QAAQ,QAAA,WAAA,GAAQ,OAAA,aAAA,CAACrB,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwB,OAAA,aAAA,CAACC,+BAAAA,EAAAA;IAEhE,OAAO;QACLe;QACA,wEAAwE;QACxE,OAAGjB,+BAAAA,EACD;YACEoD,MAAM/C,oBAAAA,CAAKgD,QAAQ,CAACtC,MAAMqC,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUtC,YAAY,SAASiC,gBAAgBC;gBACjD;gBACAK,iBAAiB;gBACjBC,aAAa;YACf;YACAC,UAAUxB;YACVyB,UAAUzB,aAAa,CAAC,IAAI;YAC5B,iBAAiBA;YACjB0B,YAAY;YACZ,GAAG1C,WAAW;YACd,4CAA4C;YAC5C2C,aAASzD,gCAAAA,MAAiBD,8BAAAA,EAAeiC,aAAarB,MAAM8C,OAAO;QACrE,OACAtD,6BAAAA,EAAcS,KAAKO,WACpB;IACH;AACF,EAAE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCarouselButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { useButtonStyles_unstable } from \"@fluentui/react-button\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const carouselButtonClassNames = {\n root: 'fui-CarouselButton',\n icon: 'fui-CarouselButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n marginTop: 'auto',\n marginBottom: 'auto',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n pointerEvents: 'all',\n ':hover': {\n cursor: 'pointer'\n }\n }\n});\n/**\n * Apply styling to the CarouselButton slots based on the state\n */ export const useCarouselButtonStyles_unstable = (state)=>{\n 'use no memo'; // justified: compiler would optimize useCarouselButtonStyles_unstable — manual opt-out to preserve runtime behavior\n const styles = useStyles();\n state = {\n ...state,\n ...useButtonStyles_unstable(state)\n };\n state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","tokens","carouselButtonClassNames","root","icon","useStyles","B6of3ja","jrapky","sj55zd","De3pzq","Bkecrkj","eoavqd","d","h","useCarouselButtonStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,wBAAwB;;;oCAoBY;;;;uBAvBR,gBAAgB;6BAChB,wBAAwB;AAE1D,iCAAiC;IACpCC,IAAI,EAAE,oBAAoB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGP,mBAAA,EAAA;IAAAK,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAWrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IAAE,oHAAA;IACf,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;IAC1BU,KAAK,GAAG;QACJ,GAAGA,KAAK;QACR,OAAGf,qCAAwB,EAACe,KAAK,CAAA;IACrC,CAAC;IACDA,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGlB,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACrG,IAAIF,KAAK,CAACX,IAAI,EAAE;QACZW,KAAK,CAACX,IAAI,CAACa,SAAS,OAAGlB,mBAAY,EAACG,wBAAwB,CAACE,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;IAC5F;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "CarouselCard", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useCarouselCard = require("./useCarouselCard");
|
|
15
|
-
const _renderCarouselCard = require("./renderCarouselCard");
|
|
16
|
-
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
|
|
14
|
+
const _useCarouselCard = require("./useCarouselCard.cjs");
|
|
15
|
+
const _renderCarouselCard = require("./renderCarouselCard.cjs");
|
|
16
|
+
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const CarouselCard = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useCarouselCard.useCarouselCard_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n const state = useCarouselCard_unstable(props, ref);\n\n useCarouselCardStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n const state = useCarouselCard_unstable(props, ref);\n\n useCarouselCardStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,uBAAoB;oCACjB,0BAAuB;6CACpB,oCAAiC;qCAEpC,kCAAkC;AAUvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOP,+CAAAA,EAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
|
|
@@ -25,7 +25,7 @@ _export(exports, {
|
|
|
25
25
|
return _useCarouselCard.useCarouselCard_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _CarouselCard = require("./CarouselCard");
|
|
29
|
-
const _renderCarouselCard = require("./renderCarouselCard");
|
|
30
|
-
const _useCarouselCard = require("./useCarouselCard");
|
|
31
|
-
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
|
|
28
|
+
const _CarouselCard = require("./CarouselCard.cjs");
|
|
29
|
+
const _renderCarouselCard = require("./renderCarouselCard.cjs");
|
|
30
|
+
const _useCarouselCard = require("./useCarouselCard.cjs");
|
|
31
|
+
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselCard/index.ts"],"sourcesContent":["export { CarouselCard } from './CarouselCard';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\nexport { renderCarouselCard_unstable } from './renderCarouselCard';\nexport { useCarouselCard_unstable } from './useCarouselCard';\nexport { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\n"],"names":["CarouselCard","renderCarouselCard_unstable","useCarouselCard_unstable","carouselCardClassNames","useCarouselCardStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZG,mDAAsB;;;eAFtBF,+CAA2B;;;eAEHG,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselCard/index.ts"],"sourcesContent":["export { CarouselCard } from './CarouselCard';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\nexport { renderCarouselCard_unstable } from './renderCarouselCard';\nexport { useCarouselCard_unstable } from './useCarouselCard';\nexport { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\n"],"names":["CarouselCard","renderCarouselCard_unstable","useCarouselCard_unstable","carouselCardClassNames","useCarouselCardStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZG,mDAAsB;;;eAFtBF,+CAA2B;;;eAEHG,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,oBAAiB;oCAEF,0BAAuB;iCAC1B,uBAAoB;6CACU,oCAAiC"}
|
|
@@ -13,10 +13,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
13
13
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
16
|
-
const _CarouselContext = require("../CarouselContext");
|
|
17
|
-
const _useEmblaCarousel = require("../useEmblaCarousel");
|
|
18
|
-
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
|
|
19
|
-
const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext");
|
|
16
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
17
|
+
const _useEmblaCarousel = require("../useEmblaCarousel.cjs");
|
|
18
|
+
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles.cjs");
|
|
19
|
+
const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext.cjs");
|
|
20
20
|
const useCarouselCard_unstable = (props, ref)=>{
|
|
21
21
|
const { autoSize } = props;
|
|
22
22
|
const elementRef = _react.useRef(null);
|
package/lib-commonjs/components/CarouselCard/{useCarouselCard.js.map → useCarouselCard.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselCard/useCarouselCard.ts"],"sourcesContent":["'use client';\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Create the state required to render CarouselCard.\n *\n * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n *\n * @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n // We want to prevent any browser scroll intervention for 'offscreen' focus\n containerRef?.current?.scrollTo(0, 0);\n selectPageByElement(e, e.currentTarget, false);\n }\n // Mouse focus event has been consumed\n isMouseEvent.current = false;\n },\n [selectPageByElement, containerRef],\n );\n\n const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n\n const handlePointerUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n // eslint-disable-next-line react-hooks/refs\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);\n // eslint-disable-next-line react-hooks/refs\n const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);\n // eslint-disable-next-line react-hooks/refs\n const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);\n\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onPointerUp,\n onPointerDown,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","containerRef","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocus","useCallback","e","defaultPrevented","currentTarget","scrollTo","handlePointerDown","handlePointerUp","onFocusCapture","onPointerUp","onPointerDown","state","components","always","role","undefined","elementType"],"mappings":"AAAA;;;;;+BA6Baa;;;;;;;8BA3BqB,0BAA0B;gCAQrD,4BAA4B;iEACZ,QAAQ;iCAEmC,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselCard/useCarouselCard.ts"],"sourcesContent":["'use client';\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Create the state required to render CarouselCard.\n *\n * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n *\n * @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n // We want to prevent any browser scroll intervention for 'offscreen' focus\n containerRef?.current?.scrollTo(0, 0);\n selectPageByElement(e, e.currentTarget, false);\n }\n // Mouse focus event has been consumed\n isMouseEvent.current = false;\n },\n [selectPageByElement, containerRef],\n );\n\n const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n\n const handlePointerUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n // eslint-disable-next-line react-hooks/refs\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);\n // eslint-disable-next-line react-hooks/refs\n const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);\n // eslint-disable-next-line react-hooks/refs\n const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);\n\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onPointerUp,\n onPointerDown,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","containerRef","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocus","useCallback","e","defaultPrevented","currentTarget","scrollTo","handlePointerDown","handlePointerUp","onFocusCapture","onPointerUp","onPointerDown","state","components","always","role","undefined","elementType"],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
|
-
const _CarouselContext = require("../CarouselContext");
|
|
21
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
22
22
|
const carouselCardClassNames = {
|
|
23
23
|
root: 'fui-CarouselCard'
|
|
24
24
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { useCarouselContext_unstable as useCarouselContext } from \"../CarouselContext.js\";\nexport const carouselCardClassNames = {\n root: 'fui-CarouselCard'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%'\n },\n autoSize: {\n flex: '0 0 auto' /* Adapt slide size to its content */ ,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%'\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n const { autoSize } = state;\n const appearance = useCarouselContext((context)=>context.appearance);\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","elevated","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","B68tc82","Bmxbyg5","Bpg54ce","d","p","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,sBAAsB;;;kCAwBY;eAA9BuB;;;uBA3BwB,gBAAgB;iCAES,uBAAuB;AAClF,+BAA+B;IAClCtB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAL,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,MAAM,EAAEhB,QAAAA,EAAU,GAAGgB,KAAK;IAC1B,MAAMC,UAAU,OAAG1B,4CAAkB,EAAE2B,OAAO,IAAGA,OAAO,CAACD,UAAU,CAAC;IACpE,MAAME,MAAM,GAAGzB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAsB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,OAAGhC,mBAAY,EAACI,sBAAsB,CAACC,IAAI,EAAE0B,MAAM,CAAC1B,IAAI,EAAEwB,UAAU,KAAK,UAAU,IAAIE,MAAM,CAAChB,QAAQ,EAAEH,QAAQ,IAAImB,MAAM,CAACnB,QAAQ,EAAEgB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,CAAC;IAC9K,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -19,7 +19,7 @@ _export(exports, {
|
|
|
19
19
|
});
|
|
20
20
|
const _react = require("@griffel/react");
|
|
21
21
|
const _reacttheme = require("@fluentui/react-theme");
|
|
22
|
-
const _CarouselContext = require("../CarouselContext");
|
|
22
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
23
23
|
const carouselCardClassNames = {
|
|
24
24
|
root: 'fui-CarouselCard'
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n root: 'fui-CarouselCard',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%',\n },\n autoSize: {\n flex: '0 0 auto' /* Adapt slide size to its content */,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%',\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden',\n },\n});\n\n/**\n * Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n const { autoSize } = state;\n const appearance = useCarouselContext(context => context.appearance);\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselCardClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n autoSize && styles.autoSize,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,sBAAAA;;;IA4BAc,8BAAAA;;;;uBAlC4B,iBAAiB;4BAEnC,wBAAwB;iCACmB,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n root: 'fui-CarouselCard',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%',\n },\n autoSize: {\n flex: '0 0 auto' /* Adapt slide size to its content */,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%',\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden',\n },\n});\n\n/**\n * Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n const { autoSize } = state;\n const appearance = useCarouselContext(context => context.appearance);\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselCardClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n autoSize && styles.autoSize,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,sBAAAA;;;IA4BAc,8BAAAA;;;;uBAlC4B,iBAAiB;4BAEnC,wBAAwB;iCACmB,wBAAqB;AAGhF,+BAAkE;IACvEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,MAAM;QACNC,UAAU;IACZ;IACAC,UAAU;QACRF,MAAM,WAAW,mCAAmC;QACpDG,UAAU;QACVC,OAAO;QACPH,UAAU;IACZ;IACAI,UAAU;QACRC,cAAcZ,kBAAAA,CAAOa,kBAAkB;QACvCC,WAAWd,kBAAAA,CAAOe,QAAQ;QAC1BC,UAAU;IACZ;AACF;AAKO,uCAAuC,CAACE;IAC7C,MAAM,EAAEV,QAAQ,EAAE,GAAGU;IACrB,MAAMC,iBAAajB,4CAAAA,EAAmBkB,CAAAA,UAAWA,QAAQD,UAAU;IAEnE,MAAME,SAAShB;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACkB,SAAS,OAAGvB,mBAAAA,EACrBI,uBAAuBC,IAAI,EAC3BiB,OAAOjB,IAAI,EACXe,eAAe,cAAcE,OAAOV,QAAQ,EAC5CH,YAAYa,OAAOb,QAAQ,EAC3BU,MAAMd,IAAI,CAACkB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -11,10 +11,10 @@ Object.defineProperty(exports, "CarouselNav", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useCarouselNavContextValues = require("./useCarouselNavContextValues");
|
|
15
|
-
const _renderCarouselNav = require("./renderCarouselNav");
|
|
16
|
-
const _useCarouselNav = require("./useCarouselNav");
|
|
17
|
-
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");
|
|
14
|
+
const _useCarouselNavContextValues = require("./useCarouselNavContextValues.cjs");
|
|
15
|
+
const _renderCarouselNav = require("./renderCarouselNav.cjs");
|
|
16
|
+
const _useCarouselNav = require("./useCarouselNav.cjs");
|
|
17
|
+
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles.cjs");
|
|
18
18
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
19
19
|
const CarouselNav = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
20
20
|
const state = (0, _useCarouselNav.useCarouselNav_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './useCarouselNavContextValues';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;6CAGsB,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './useCarouselNavContextValues';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;6CAGsB,mCAAgC;mCAC1C,yBAAsB;gCACzB,sBAAmB;4CACb,mCAAgC;qCAClC,kCAAkC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;IAC7C,MAAME,oBAAgBV,iEAAAA,EAAqCS;QAE3DN,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
|
|
@@ -25,7 +25,7 @@ _export(exports, {
|
|
|
25
25
|
return _useCarouselNav.useCarouselNav_unstable;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
const _CarouselNav = require("./CarouselNav");
|
|
29
|
-
const _renderCarouselNav = require("./renderCarouselNav");
|
|
30
|
-
const _useCarouselNav = require("./useCarouselNav");
|
|
31
|
-
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");
|
|
28
|
+
const _CarouselNav = require("./CarouselNav.cjs");
|
|
29
|
+
const _renderCarouselNav = require("./renderCarouselNav.cjs");
|
|
30
|
+
const _useCarouselNav = require("./useCarouselNav.cjs");
|
|
31
|
+
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/index.ts"],"sourcesContent":["export { CarouselNav } from './CarouselNav';\nexport type {\n CarouselNavContextValue,\n CarouselNavProps,\n CarouselNavSlots,\n CarouselNavState,\n NavButtonRenderFunction,\n} from './CarouselNav.types';\nexport { renderCarouselNav_unstable } from './renderCarouselNav';\nexport { useCarouselNav_unstable } from './useCarouselNav';\nexport { carouselNavClassNames, useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\n"],"names":["CarouselNav","renderCarouselNav_unstable","useCarouselNav_unstable","carouselNavClassNames","useCarouselNavStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BATJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/index.ts"],"sourcesContent":["export { CarouselNav } from './CarouselNav';\nexport type {\n CarouselNavContextValue,\n CarouselNavProps,\n CarouselNavSlots,\n CarouselNavState,\n NavButtonRenderFunction,\n} from './CarouselNav.types';\nexport { renderCarouselNav_unstable } from './renderCarouselNav';\nexport { useCarouselNav_unstable } from './useCarouselNav';\nexport { carouselNavClassNames, useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\n"],"names":["CarouselNav","renderCarouselNav_unstable","useCarouselNav_unstable","carouselNavClassNames","useCarouselNavStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BATJ,mBAAgB;mCAQD,yBAAsB;gCACzB,sBAAmB;4CACU,mCAAgC"}
|
|
@@ -10,8 +10,8 @@ Object.defineProperty(exports, "renderCarouselNav_unstable", {
|
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
|
-
const _CarouselNavContext = require("./CarouselNavContext");
|
|
14
|
-
const _CarouselNavIndexContext = require("./CarouselNavIndexContext");
|
|
13
|
+
const _CarouselNavContext = require("./CarouselNavContext.cjs");
|
|
14
|
+
const _CarouselNavIndexContext = require("./CarouselNavIndexContext.cjs");
|
|
15
15
|
const renderCarouselNav_unstable = (state, contextValues)=>{
|
|
16
16
|
(0, _reactutilities.assertSlots)(state);
|
|
17
17
|
const { totalSlides, renderNavButton } = state;
|
package/lib-commonjs/components/CarouselNav/{renderCarouselNav.js.map → renderCarouselNav.cjs.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNav/renderCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavState, CarouselNavSlots } from './CarouselNav.types';\nimport { CarouselNavContextProvider, type CarouselNavContextValues } from './CarouselNavContext';\nimport { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';\n\n/**\n * Render the final JSX of CarouselNav\n */\nexport const renderCarouselNav_unstable = (\n state: CarouselNavState,\n contextValues: CarouselNavContextValues,\n): JSXElement => {\n assertSlots<CarouselNavSlots>(state);\n\n const { totalSlides, renderNavButton } = state;\n\n return (\n <state.root>\n <CarouselNavContextProvider value={contextValues.carouselNav}>\n {new Array(totalSlides).fill(null).map((_, index) => (\n <CarouselNavIndexContextProvider key={index} value={index}>\n {renderNavButton(index)}\n </CarouselNavIndexContextProvider>\n ))}\n </CarouselNavContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CarouselNavContextProvider","CarouselNavIndexContextProvider","renderCarouselNav_unstable","state","contextValues","totalSlides","renderNavButton","root","value","carouselNav","Array","fill","map","_","index"],"mappings":";;;;+BAaaG;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;oCAIkB,
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNav/renderCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavState, CarouselNavSlots } from './CarouselNav.types';\nimport { CarouselNavContextProvider, type CarouselNavContextValues } from './CarouselNavContext';\nimport { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';\n\n/**\n * Render the final JSX of CarouselNav\n */\nexport const renderCarouselNav_unstable = (\n state: CarouselNavState,\n contextValues: CarouselNavContextValues,\n): JSXElement => {\n assertSlots<CarouselNavSlots>(state);\n\n const { totalSlides, renderNavButton } = state;\n\n return (\n <state.root>\n <CarouselNavContextProvider value={contextValues.carouselNav}>\n {new Array(totalSlides).fill(null).map((_, index) => (\n <CarouselNavIndexContextProvider key={index} value={index}>\n {renderNavButton(index)}\n </CarouselNavIndexContextProvider>\n ))}\n </CarouselNavContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CarouselNavContextProvider","CarouselNavIndexContextProvider","renderCarouselNav_unstable","state","contextValues","totalSlides","renderNavButton","root","value","carouselNav","Array","fill","map","_","index"],"mappings":";;;;+BAaaG;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;oCAIkB,0BAAuB;yCACjD,+BAA4B;AAKrE,mCAAmC,CACxCC,OACAC;QAEAL,2BAAAA,EAA8BI;IAE9B,MAAM,EAAEE,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEzC,OAAA,WAAA,OACE,eAAA,EAACA,MAAMI,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,8CAAAA,EAAAA;YAA2BQ,OAAOJ,cAAcK,WAAW;sBACzD,IAAIC,MAAML,aAAaM,IAAI,CAAC,MAAMC,GAAG,CAAC,CAACC,GAAGC,QAAAA,WAAAA,OACzC,eAAA,EAACb,wDAAAA,EAAAA;oBAA4CO,OAAOM;8BACjDR,gBAAgBQ;mBADmBA;;;AAOhD,EAAE"}
|
|
@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useCarouselNav_unstable", {
|
|
|
11
11
|
});
|
|
12
12
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const _CarouselContext = require("../CarouselContext");
|
|
14
|
+
const _CarouselContext = require("../CarouselContext.cjs");
|
|
15
15
|
const useCarouselNav_unstable = (props, ref)=>{
|
|
16
16
|
const { appearance } = props;
|
|
17
17
|
const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
|