npm - @fluentui/react-carousel - Versions diffs - 9.2.0 → 9.3.0 - Mend

@fluentui/react-carousel 9.2.0 → 9.3.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.

Files changed (213) hide show

package/lib/components/useEmblaCarousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEmblaCarousel.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' \| 'direction' \| 'loop' \| 'slidesToScroll' \| 'watchDrag' \| 'containScroll'> & {\n defaultActiveIndex: number \| undefined;\n activeIndex: number \| undefined;\n motion?: CarouselMotion;\n },\n) {\n const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType \| null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay.reset();\n }, []);\n\n /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean) => {\n autoplayRef.current = autoplay;\n if (autoplay) {\n emblaApi.current?.plugins().autoplay.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else {\n emblaApi.current?.plugins().autoplay.stop();\n }\n },\n [resetAutoplay],\n );\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n rootNode: (emblaRoot: HTMLElement) => {\n return emblaRoot.querySelector(sliderClassname) ?? emblaRoot;\n },\n }),\n ];\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n return plugins;\n }, [motion]);\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement \| null = null;\n\n const handleIndexChange = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n const handleReinit = () => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n for (const listener of listeners.current) {\n listener(data);\n }\n };\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement \| null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.destroy();\n }\n\n if (newElement) {\n currentElement = newElement;\n emblaApi.current = EmblaCarousel(\n newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, setActiveIndex]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' \| 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n\n if (activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = { align, direction, loop, slidesToScroll, watchDrag, containScroll };\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, direction, loop, slidesToScroll, watchDrag, containScroll, getPlugins]);\n\n return {\n activeIndex,\n carouselApi,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","motion","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","getPlugins","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","rootNode","emblaRoot","querySelector","push","listeners","Set","subscribeForValues","listener","add","delete","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","index","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["import { type EventHandler, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport EmblaCarousel, { EmblaPluginType, type EmblaCarouselType, type EmblaOptionsType } from 'embla-carousel';\nimport * as React from 'react';\n\nimport { carouselCardClassNames } from './CarouselCard/useCarouselCardStyles.styles';\nimport { carouselSliderClassNames } from './CarouselSlider/useCarouselSliderStyles.styles';\nimport { CarouselMotion, CarouselUpdateData, CarouselVisibilityEventDetail } from '../Carousel';\nimport Autoplay from 'embla-carousel-autoplay';\nimport Fade from 'embla-carousel-fade';\nimport { pointerEventPlugin } from './pointerEvents';\nimport type { CarouselIndexChangeData } from './CarouselContext.types';\n\nconst sliderClassname = `.${carouselSliderClassNames.root}`;\n\nconst DEFAULT_EMBLA_OPTIONS: EmblaOptionsType = {\n containScroll: 'trimSnaps',\n inViewThreshold: 0.99,\n watchDrag: false,\n skipSnaps: true,\n\n container: sliderClassname,\n slides: `.${carouselCardClassNames.root}`,\n};\n\nexport const EMBLA_VISIBILITY_EVENT = 'embla:visibilitychange';\n\nexport function setTabsterDefault(element: Element, isDefault: boolean) {\n const tabsterAttr = element.getAttribute('data-tabster');\n\n if (tabsterAttr) {\n const tabsterAttributes = JSON.parse(tabsterAttr);\n if (tabsterAttributes.focusable) {\n // If tabster.focusable isn't present, we will ignore.\n tabsterAttributes.focusable.isDefault = isDefault;\n element.setAttribute('data-tabster', JSON.stringify(tabsterAttributes));\n }\n }\n}\n\nexport function useEmblaCarousel(\n options: Pick<EmblaOptionsType, 'align' \| 'direction' \| 'loop' \| 'slidesToScroll' \| 'watchDrag' \| 'containScroll'> & {\n defaultActiveIndex: number \| undefined;\n activeIndex: number \| undefined;\n motion?: CarouselMotion;\n onDragIndexChange?: EventHandler<CarouselIndexChangeData>;\n },\n) {\n const { align, direction, loop, slidesToScroll, watchDrag, containScroll, motion, onDragIndexChange } = options;\n const [activeIndex, setActiveIndex] = useControllableState({\n defaultState: options.defaultActiveIndex,\n state: options.activeIndex,\n initialState: 0,\n });\n\n const onDragEvent = useEventCallback((event: PointerEvent \| MouseEvent, index: number) => {\n onDragIndexChange?.(event, { event, type: 'drag', index });\n });\n\n const emblaOptions = React.useRef<EmblaOptionsType>({\n align,\n direction,\n loop,\n slidesToScroll,\n startIndex: activeIndex,\n watchDrag,\n containScroll,\n });\n\n const emblaApi = React.useRef<EmblaCarouselType \| null>(null);\n const autoplayRef = React.useRef<boolean>(false);\n\n const resetAutoplay = React.useCallback(() => {\n emblaApi.current?.plugins().autoplay.reset();\n }, []);\n\n /* Our autoplay button, which is required by standards for autoplay to be enabled, will handle controlled state */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean) => {\n autoplayRef.current = autoplay;\n if (autoplay) {\n emblaApi.current?.plugins().autoplay.play();\n // Reset after play to ensure timing and any focus/mouse pause state is reset.\n resetAutoplay();\n } else {\n emblaApi.current?.plugins().autoplay.stop();\n }\n },\n [resetAutoplay],\n );\n\n const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [\n Autoplay({\n playOnInit: autoplayRef.current,\n stopOnInteraction: !autoplayRef.current,\n stopOnMouseEnter: true,\n stopOnFocusIn: true,\n }),\n ];\n\n // Optionally add Fade plugin\n if (motion === 'fade') {\n plugins.push(Fade());\n }\n\n if (watchDrag) {\n plugins.push(\n pointerEventPlugin({\n onSelectViaDrag: onDragEvent,\n }),\n );\n }\n\n return plugins;\n }, [motion, onDragEvent, watchDrag]);\n\n // Listeners contains callbacks for UI elements that may require state update based on embla changes\n const listeners = React.useRef(new Set<(data: CarouselUpdateData) => void>());\n const subscribeForValues = React.useCallback((listener: (data: CarouselUpdateData) => void) => {\n listeners.current.add(listener);\n\n return () => {\n listeners.current.delete(listener);\n };\n }, []);\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\n let currentElement: HTMLDivElement \| null = null;\n\n const handleIndexChange = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const actualIndex = emblaApi.current?.internalEngine().slideRegistry[newIndex][0] ?? 0;\n\n // We set the active or first index of group on-screen as the selected tabster index\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n const handleReinit = () => {\n const nodes: HTMLElement[] = emblaApi.current?.slideNodes() ?? [];\n const groupIndexList: number[][] = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const navItemsCount = groupIndexList.length > 0 ? groupIndexList.length : nodes.length;\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n };\n\n for (const listener of listeners.current) {\n listener(data);\n }\n };\n const handleVisibilityChange = () => {\n const cardElements = emblaApi.current?.slideNodes();\n const visibleIndexes = emblaApi.current?.slidesInView() ?? [];\n\n cardElements?.forEach((cardElement, index) => {\n cardElement.dispatchEvent(\n new CustomEvent<CarouselVisibilityEventDetail>(EMBLA_VISIBILITY_EVENT, {\n bubbles: false,\n detail: { isVisible: visibleIndexes.includes(index) },\n }),\n );\n });\n };\n\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement \| null) {\n if (currentElement) {\n emblaApi.current?.off('slidesInView', handleVisibilityChange);\n emblaApi.current?.off('select', handleIndexChange);\n emblaApi.current?.off('reInit', handleReinit);\n emblaApi.current?.destroy();\n }\n\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n const wrapperElement = viewportRef.current ?? newElement;\n if (wrapperElement) {\n currentElement = wrapperElement;\n emblaApi.current = EmblaCarousel(\n wrapperElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n emblaApi.current?.on('reInit', handleReinit);\n emblaApi.current?.on('slidesInView', handleVisibilityChange);\n emblaApi.current?.on('select', handleIndexChange);\n }\n },\n };\n }, [getPlugins, setActiveIndex]);\n\n const carouselApi = React.useMemo(\n () => ({\n scrollToElement: (element: HTMLElement, jump?: boolean) => {\n const cardElements = emblaApi.current?.slideNodes();\n const groupIndexList = emblaApi.current?.internalEngine().slideRegistry ?? [];\n const cardIndex = cardElements?.indexOf(element) ?? 0;\n const groupIndex = groupIndexList.findIndex(group => {\n return group.includes(cardIndex);\n });\n const indexFocus = groupIndex ?? cardIndex;\n emblaApi.current?.scrollTo(indexFocus, jump);\n\n return indexFocus;\n },\n scrollToIndex: (index: number, jump?: boolean) => {\n emblaApi.current?.scrollTo(index, jump);\n },\n scrollInDirection: (dir: 'prev' \| 'next') => {\n if (dir === 'prev') {\n emblaApi.current?.scrollPrev();\n } else {\n emblaApi.current?.scrollNext();\n }\n\n return emblaApi.current?.selectedScrollSnap() ?? 0;\n },\n }),\n [],\n );\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\n\n React.useEffect(() => {\n const plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n };\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, direction, loop, slidesToScroll, watchDrag, containScroll, getPlugins]);\n\n return {\n activeIndex,\n carouselApi,\n viewportRef,\n containerRef,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useControllableState","useEventCallback","EmblaCarousel","React","carouselCardClassNames","carouselSliderClassNames","Autoplay","Fade","pointerEventPlugin","sliderClassname","root","DEFAULT_EMBLA_OPTIONS","containScroll","inViewThreshold","watchDrag","skipSnaps","container","slides","EMBLA_VISIBILITY_EVENT","setTabsterDefault","element","isDefault","tabsterAttr","getAttribute","tabsterAttributes","JSON","parse","focusable","setAttribute","stringify","useEmblaCarousel","options","align","direction","loop","slidesToScroll","motion","onDragIndexChange","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","enableAutoplay","play","stop","getPlugins","playOnInit","stopOnInteraction","stopOnMouseEnter","stopOnFocusIn","push","onSelectViaDrag","listeners","Set","subscribeForValues","listener","add","delete","viewportRef","containerRef","useMemo","currentElement","handleIndexChange","newIndex","selectedScrollSnap","slideNodes","actualIndex","internalEngine","slideRegistry","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","data","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","wrapperElement","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollTo","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","currentActiveIndex","reInit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/index.js CHANGED Viewed

@@ -8,3 +8,4 @@ export { CarouselNavImageButton, carouselNavImageButtonClassNames, renderCarouse
 export { CarouselSlider, carouselSliderClassNames, renderCarouselSlider_unstable, useCarouselSliderStyles_unstable, useCarouselSlider_unstable } from './CarouselSlider';
 export { CarouselNavContainer, carouselNavContainerClassNames, renderCarouselNavContainer_unstable, useCarouselNavContainerStyles_unstable, useCarouselNavContainer_unstable } from './CarouselNavContainer';
 export { carouselContextDefaultValue, CarouselProvider, useCarouselContext_unstable } from './CarouselContext';
+export { CarouselViewport, carouselViewportClassNames, renderCarouselViewport_unstable, useCarouselViewportStyles_unstable, useCarouselViewport_unstable } from './CarouselViewport';

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton';\nexport {\n CarouselButton,\n carouselButtonClassNames,\n renderCarouselButton_unstable,\n useCarouselButtonStyles_unstable,\n useCarouselButton_unstable,\n} from './CarouselButton';\nexport type { CarouselNavProps, CarouselNavSlots, CarouselNavState, NavButtonRenderFunction } from './CarouselNav';\nexport {\n CarouselNav,\n carouselNavClassNames,\n renderCarouselNav_unstable,\n useCarouselNavStyles_unstable,\n useCarouselNav_unstable,\n} from './CarouselNav';\nexport type { CarouselNavButtonProps, CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton';\nexport {\n CarouselNavButton,\n carouselNavButtonClassNames,\n renderCarouselNavButton_unstable,\n useCarouselNavButtonStyles_unstable,\n useCarouselNavButton_unstable,\n} from './CarouselNavButton';\nexport type { CarouselProps, CarouselSlots, CarouselState, CarouselAnnouncerFunction } from './Carousel';\nexport {\n Carousel,\n carouselClassNames,\n renderCarousel_unstable,\n useCarouselStyles_unstable,\n useCarousel_unstable,\n} from './Carousel';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard';\nexport {\n CarouselCard,\n carouselCardClassNames,\n renderCarouselCard_unstable,\n useCarouselCardStyles_unstable,\n useCarouselCard_unstable,\n} from './CarouselCard';\nexport type {\n CarouselAutoplayButtonProps,\n CarouselAutoplayButtonSlots,\n CarouselAutoplayButtonState,\n} from './CarouselAutoplayButton';\nexport {\n CarouselAutoplayButton,\n carouselAutoplayButtonClassNames,\n renderCarouselAutoplayButton_unstable,\n useCarouselAutoplayButtonStyles_unstable,\n useCarouselAutoplayButton_unstable,\n} from './CarouselAutoplayButton';\nexport type {\n CarouselNavImageButtonProps,\n CarouselNavImageButtonSlots,\n CarouselNavImageButtonState,\n} from './CarouselNavImageButton';\nexport {\n CarouselNavImageButton,\n carouselNavImageButtonClassNames,\n renderCarouselNavImageButton_unstable,\n useCarouselNavImageButtonStyles_unstable,\n useCarouselNavImageButton_unstable,\n} from './CarouselNavImageButton';\nexport {\n CarouselSlider,\n carouselSliderClassNames,\n renderCarouselSlider_unstable,\n useCarouselSliderStyles_unstable,\n useCarouselSlider_unstable,\n} from './CarouselSlider';\nexport type { CarouselSliderProps, CarouselSliderSlots, CarouselSliderState } from './CarouselSlider';\nexport type {\n CarouselNavContainerProps,\n CarouselNavContainerSlots,\n CarouselNavContainerState,\n} from './CarouselNavContainer';\nexport {\n CarouselNavContainer,\n carouselNavContainerClassNames,\n renderCarouselNavContainer_unstable,\n useCarouselNavContainerStyles_unstable,\n useCarouselNavContainer_unstable,\n} from './CarouselNavContainer';\nexport { carouselContextDefaultValue, CarouselProvider, useCarouselContext_unstable } from './CarouselContext';\nexport type { CarouselIndexChangeData, CarouselContextValue, CarouselContextValues } from './CarouselContext';\n"],"names":["CarouselButton","carouselButtonClassNames","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCarouselButton_unstable","CarouselNav","carouselNavClassNames","renderCarouselNav_unstable","useCarouselNavStyles_unstable","useCarouselNav_unstable","CarouselNavButton","carouselNavButtonClassNames","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCarouselNavButton_unstable","Carousel","carouselClassNames","renderCarousel_unstable","useCarouselStyles_unstable","useCarousel_unstable","CarouselCard","carouselCardClassNames","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCarouselCard_unstable","CarouselAutoplayButton","carouselAutoplayButtonClassNames","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCarouselAutoplayButton_unstable","CarouselNavImageButton","carouselNavImageButtonClassNames","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCarouselNavImageButton_unstable","CarouselSlider","carouselSliderClassNames","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSlider_unstable","CarouselNavContainer","carouselNavContainerClassNames","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCarouselNavContainer_unstable","carouselContextDefaultValue","CarouselProvider","useCarouselContext_unstable"],"rangeMappings":"~~;;;;;;;;;~~","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAE7B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAMxB,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAMlC,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAClC,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAO1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,mCAAmC,EACnCC,sCAAsC,EACtCC,gCAAgC,QAC3B,yBAAyB;AAChC,SAASC,2BAA2B,EAAEC,gBAAgB,EAAEC,2BAA2B,QAAQ,oBAAoB"}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton';\nexport {\n CarouselButton,\n carouselButtonClassNames,\n renderCarouselButton_unstable,\n useCarouselButtonStyles_unstable,\n useCarouselButton_unstable,\n} from './CarouselButton';\nexport type { CarouselNavProps, CarouselNavSlots, CarouselNavState, NavButtonRenderFunction } from './CarouselNav';\nexport {\n CarouselNav,\n carouselNavClassNames,\n renderCarouselNav_unstable,\n useCarouselNavStyles_unstable,\n useCarouselNav_unstable,\n} from './CarouselNav';\nexport type { CarouselNavButtonProps, CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton';\nexport {\n CarouselNavButton,\n carouselNavButtonClassNames,\n renderCarouselNavButton_unstable,\n useCarouselNavButtonStyles_unstable,\n useCarouselNavButton_unstable,\n} from './CarouselNavButton';\nexport type { CarouselProps, CarouselSlots, CarouselState, CarouselAnnouncerFunction } from './Carousel';\nexport {\n Carousel,\n carouselClassNames,\n renderCarousel_unstable,\n useCarouselStyles_unstable,\n useCarousel_unstable,\n} from './Carousel';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard';\nexport {\n CarouselCard,\n carouselCardClassNames,\n renderCarouselCard_unstable,\n useCarouselCardStyles_unstable,\n useCarouselCard_unstable,\n} from './CarouselCard';\nexport type {\n CarouselAutoplayButtonProps,\n CarouselAutoplayButtonSlots,\n CarouselAutoplayButtonState,\n} from './CarouselAutoplayButton';\nexport {\n CarouselAutoplayButton,\n carouselAutoplayButtonClassNames,\n renderCarouselAutoplayButton_unstable,\n useCarouselAutoplayButtonStyles_unstable,\n useCarouselAutoplayButton_unstable,\n} from './CarouselAutoplayButton';\nexport type {\n CarouselNavImageButtonProps,\n CarouselNavImageButtonSlots,\n CarouselNavImageButtonState,\n} from './CarouselNavImageButton';\nexport {\n CarouselNavImageButton,\n carouselNavImageButtonClassNames,\n renderCarouselNavImageButton_unstable,\n useCarouselNavImageButtonStyles_unstable,\n useCarouselNavImageButton_unstable,\n} from './CarouselNavImageButton';\nexport {\n CarouselSlider,\n carouselSliderClassNames,\n renderCarouselSlider_unstable,\n useCarouselSliderStyles_unstable,\n useCarouselSlider_unstable,\n} from './CarouselSlider';\nexport type { CarouselSliderProps, CarouselSliderSlots, CarouselSliderState } from './CarouselSlider';\nexport type {\n CarouselNavContainerProps,\n CarouselNavContainerSlots,\n CarouselNavContainerState,\n} from './CarouselNavContainer';\nexport {\n CarouselNavContainer,\n carouselNavContainerClassNames,\n renderCarouselNavContainer_unstable,\n useCarouselNavContainerStyles_unstable,\n useCarouselNavContainer_unstable,\n} from './CarouselNavContainer';\nexport { carouselContextDefaultValue, CarouselProvider, useCarouselContext_unstable } from './CarouselContext';\nexport type { CarouselIndexChangeData, CarouselContextValue, CarouselContextValues } from './CarouselContext';\nexport type { CarouselViewportProps, CarouselViewportSlots, CarouselViewportState } from './CarouselViewport';\nexport {\n CarouselViewport,\n carouselViewportClassNames,\n renderCarouselViewport_unstable,\n useCarouselViewportStyles_unstable,\n useCarouselViewport_unstable,\n} from './CarouselViewport';\n"],"names":["CarouselButton","carouselButtonClassNames","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCarouselButton_unstable","CarouselNav","carouselNavClassNames","renderCarouselNav_unstable","useCarouselNavStyles_unstable","useCarouselNav_unstable","CarouselNavButton","carouselNavButtonClassNames","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCarouselNavButton_unstable","Carousel","carouselClassNames","renderCarousel_unstable","useCarouselStyles_unstable","useCarousel_unstable","CarouselCard","carouselCardClassNames","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCarouselCard_unstable","CarouselAutoplayButton","carouselAutoplayButtonClassNames","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCarouselAutoplayButton_unstable","CarouselNavImageButton","carouselNavImageButtonClassNames","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCarouselNavImageButton_unstable","CarouselSlider","carouselSliderClassNames","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSlider_unstable","CarouselNavContainer","carouselNavContainerClassNames","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCarouselNavContainer_unstable","carouselContextDefaultValue","CarouselProvider","useCarouselContext_unstable","CarouselViewport","carouselViewportClassNames","renderCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCarouselViewport_unstable"],"rangeMappings":";;;;;;;;;;","mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAE7B,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAMxB,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAMlC,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAClC,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAO1B,SACEC,oBAAoB,EACpBC,8BAA8B,EAC9BC,mCAAmC,EACnCC,sCAAsC,EACtCC,gCAAgC,QAC3B,yBAAyB;AAChC,SAASC,2BAA2B,EAAEC,gBAAgB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAG/G,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB"}

package/lib-commonjs/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Carousel.ts"],"sourcesContent":["export * from './components/Carousel/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/Carousel.ts"],"sourcesContent":["export * from './components/Carousel/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselAutoplayButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselAutoplayButton.ts"],"sourcesContent":["export * from './components/CarouselAutoplayButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselAutoplayButton.ts"],"sourcesContent":["export * from './components/CarouselAutoplayButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselButton.ts"],"sourcesContent":["export * from './components/CarouselButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselButton.ts"],"sourcesContent":["export * from './components/CarouselButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselCard.ts"],"sourcesContent":["export * from './components/CarouselCard/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselCard.ts"],"sourcesContent":["export * from './components/CarouselCard/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselContext.ts"],"sourcesContent":["export * from './components/CarouselContext';\nexport * from './components/CarouselContext.types';\n"],"names":[],"rangeMappings":";;;;;;","mappings":";;;;;uBAAc;uBACA"}
1	+ {"version":3,"sources":["../src/CarouselContext.ts"],"sourcesContent":["export * from './components/CarouselContext';\nexport * from './components/CarouselContext.types';\n"],"names":[],"rangeMappings":";;;;;;","mappings":";;;;;uBAAc;uBACA"}

package/lib-commonjs/CarouselNav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselNav.ts"],"sourcesContent":["export * from './components/CarouselNav/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselNav.ts"],"sourcesContent":["export * from './components/CarouselNav/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselNavButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselNavButton.ts"],"sourcesContent":["export * from './components/CarouselNavButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselNavButton.ts"],"sourcesContent":["export * from './components/CarouselNavButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselNavContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselNavContainer.ts"],"sourcesContent":["export * from './components/CarouselNavContainer/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselNavContainer.ts"],"sourcesContent":["export * from './components/CarouselNavContainer/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselNavImageButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselNavImageButton.ts"],"sourcesContent":["export * from './components/CarouselNavImageButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselNavImageButton.ts"],"sourcesContent":["export * from './components/CarouselNavImageButton/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselSlider.ts"],"sourcesContent":["export * from './components/CarouselSlider/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
1	+ {"version":3,"sources":["../src/CarouselSlider.ts"],"sourcesContent":["export * from './components/CarouselSlider/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/CarouselViewport.js ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/CarouselViewport/index"), exports);

package/lib-commonjs/CarouselViewport.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../src/CarouselViewport.ts"],"sourcesContent":["export * from './components/CarouselViewport/index';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/components/Carousel/Carousel.js CHANGED Viewed

@@ -14,13 +14,12 @@ const _useCarousel = require("./useCarousel");
 const _renderCarousel = require("./renderCarousel");
 const _useCarouselStylesstyles = require("./useCarouselStyles.styles");
 const _useCarouselContextValues = require("./useCarouselContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Carousel = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarousel.useCarousel_unstable)(props, ref);
     (0, _useCarouselStylesstyles.useCarouselStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselStyles_unstable')(state);
     const contextValues = (0, _useCarouselContextValues.useCarouselContextValues_unstable)(state);
-    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
-    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
-    // useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);
     return (0, _renderCarousel.renderCarousel_unstable)(state, contextValues);
 });
 Carousel.displayName = 'Carousel';

package/lib-commonjs/components/Carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarousel_unstable } from './useCarousel';\nimport { renderCarousel_unstable } from './renderCarousel';\nimport { useCarouselStyles_unstable } from './useCarouselStyles.styles';\nimport type { CarouselProps } from './Carousel.types';\nimport { useCarouselContextValues_unstable } from './useCarouselContextValues';\n\n/*\n Carousel is the context wrapper and container for all carousel content/controls,\n * it has no direct style or slot opinions.\n \n Carousel also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Carousel: ForwardRefComponent<CarouselProps> = React.forwardRef((props, ref) => {\n const state = useCarousel_unstable(props, ref);\n\n useCarouselStyles_unstable(state);\n\n const contextValues = useCarouselContextValues_unstable(state);\n ~~// TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts~~\n ~~// https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n // useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);\n~~ return renderCarousel_unstable(state, contextValues);\n});\n\nCarousel.displayName = 'Carousel';\n"],"names":["Carousel","React","forwardRef","props","ref","state","useCarousel_unstable","useCarouselStyles_unstable","contextValues","useCarouselContextValues_unstable","renderCarousel_unstable","displayName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAcaA~~;;;eAAAA;;;;~~iEAdU~~;6BAEc;gCACG;yCACG;0CAEO;~~AAQ3C~~,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;~~IAE3B~~,~~MAAMG~~,gBAAgBC,IAAAA,2DAAAA,~~EAAkCJ~~;~~IACxD~~,~~8HAA8H;IAC9H~~,~~wGAAwG;IACxG,oEAAoE;IACpE,OAAOK,~~IAAAA,uCAAAA,~~EAAwBL~~,~~OAAOG~~;AACxC;~~AAEAR~~,~~SAASW~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarousel_unstable } from './useCarousel';\nimport { renderCarousel_unstable } from './renderCarousel';\nimport { useCarouselStyles_unstable } from './useCarouselStyles.styles';\nimport type { CarouselProps } from './Carousel.types';\nimport { useCarouselContextValues_unstable } from './useCarouselContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Carousel is the context wrapper and container for all carousel content/controls,\n * it has no direct style or slot opinions.\n \n Carousel also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Carousel: ForwardRefComponent<CarouselProps> = React.forwardRef((props, ref) => {\n const state = useCarousel_unstable(props, ref);\n\n useCarouselStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);\n\n const contextValues = useCarouselContextValues_unstable(state);\n\n return renderCarousel_unstable(state, contextValues);\n});\n\nCarousel.displayName = 'Carousel';\n"],"names":["Carousel","React","forwardRef","props","ref","state","useCarousel_unstable","useCarouselStyles_unstable","useCustomStyleHook_unstable","contextValues","useCarouselContextValues_unstable","renderCarousel_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BAEc;gCACG;yCACG;0CAEO;qCACN;AAQrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAE1D,MAAMI,gBAAgBC,IAAAA,2DAAAA,EAAkCL;IAExD,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOI;AACxC;AAEAT,SAASY,WAAW,GAAG"}

package/lib-commonjs/components/Carousel/Carousel.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/*\n Children function replacement, passes through updated context index and carousel information for localization\n /\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/\n List of integrated motion types\n /\nexport type CarouselMotion = 'slide' \| 'fade';\n\n/\n Carousel Props\n /\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /\n The initial page to display in uncontrolled mode.\n /\n defaultActiveIndex?: number;\n\n /\n The alignment of the carousel.\n /\n align?: 'center' \| 'start' \| 'end';\n\n /\n The value of the currently active page.\n /\n activeIndex?: number;\n\n /\n Callback to notify a page change.\n /\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /\n Circular enables the carousel to loop back around on navigation past trailing index.\n /\n circular?: boolean;\n\n /\n Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n /\n groupSize?: number \| 'auto';\n\n /\n Enables drag to scroll on carousel items.\n * Defaults to: False\n /\n draggable?: boolean;\n\n /\n Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n /\n whitespace?: boolean;\n\n /\n Sets motion to fade in/out style with minimal movement\n * Defaults: false\n /\n motion?: CarouselMotion;\n\n /\n Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n /\n announcement?: CarouselAnnouncerFunction;\n};\n\n/\n State used in rendering Carousel\n /\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/\n @internal\n /\nexport interface CarouselUpdateData {\n /\n The current carousel index, a change in index will not trigger the callback (use context index instead).\n /\n activeIndex: number;\n /\n The total number of slides to be navigated, accounts for grouping.\n /\n navItemsCount: number;\n /\n A breakdown of the card indexes contained within each slide index.\n /\n groupIndexList: number[][];\n /\n An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAwFA;;CAEC"}
1	+ {"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/*\n Children function replacement, passes through updated context index and carousel information for localization\n /\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/\n List of integrated motion types\n /\nexport type CarouselMotion = 'slide' \| 'fade';\n\n/\n Carousel Props\n /\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /\n The initial page to display in uncontrolled mode.\n /\n defaultActiveIndex?: number;\n\n /\n The alignment of the carousel.\n /\n align?: 'center' \| 'start' \| 'end';\n\n /\n The value of the currently active page.\n /\n activeIndex?: number;\n\n /\n Callback to notify a page change.\n /\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /\n Circular enables the carousel to loop back around on navigation past trailing index.\n /\n circular?: boolean;\n\n /\n Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n /\n groupSize?: number \| 'auto';\n\n /\n Enables drag to scroll on carousel items.\n * Defaults to: False\n /\n draggable?: boolean;\n\n /\n Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n /\n whitespace?: boolean;\n\n /\n Sets motion to fade in/out style with minimal movement\n * Defaults: false\n /\n motion?: CarouselMotion;\n\n /\n Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n /\n announcement?: CarouselAnnouncerFunction;\n};\n\n/\n State used in rendering Carousel\n /\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/\n @internal\n /\nexport interface CarouselUpdateData {\n /\n The current carousel index, a change in index will not trigger the callback (use context index instead).\n /\n activeIndex: number;\n /\n The total number of slides to be navigated, accounts for grouping.\n /\n navItemsCount: number;\n /\n A breakdown of the card indexes contained within each slide index.\n /\n groupIndexList: number[][];\n /\n An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n}\n"],"names":[],"rangeMappings":";;","mappings":"AAwFA;;CAEC"}

package/lib-commonjs/components/Carousel/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Carousel';\nexport * from './Carousel.types';\nexport * from './renderCarousel';\nexport * from './useCarousel';\nexport * from './useCarouselStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
1	+ {"version":3,"sources":["../src/components/Carousel/index.ts"],"sourcesContent":["export * from './Carousel';\nexport * from './Carousel.types';\nexport * from './renderCarousel';\nexport * from './useCarousel';\nexport * from './useCarouselStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/Carousel/renderCarousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } 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) => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["renderCarousel_unstable","state","contextValues","assertSlots","_jsx","CarouselProvider","value","carousel","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;iCAEK;AAM1B,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,iCAAAA,EAAAA;QAAiBC,OAAOJ,cAAcK,QAAQ;kBAC7C,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
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 { 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) => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["renderCarousel_unstable","state","contextValues","assertSlots","_jsx","CarouselProvider","value","carousel","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;iCAEK;AAM1B,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,iCAAAA,EAAAA;QAAiBC,OAAOJ,cAAcK,QAAQ;kBAC7C,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}

package/lib-commonjs/components/Carousel/useCarousel.js CHANGED Viewed

@@ -17,7 +17,7 @@ function useCarousel_unstable(props, ref) {
     'use no memo';
     const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide' } = props;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
+    const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
         align,
         direction: dir,
         loop: circular,
@@ -26,7 +26,8 @@ function useCarousel_unstable(props, ref) {
         activeIndex: props.activeIndex,
         watchDrag: draggable,
         containScroll: whitespace ? false : 'keepSnaps',
-        motion
+        motion,
+        onDragIndexChange: onActiveIndexChange
     });
     const selectPageByElement = (0, _reactutilities.useEventCallback)((event, element, jump)=>{
         const foundIndex = carouselApi.scrollToElement(element, jump);
@@ -54,7 +55,7 @@ function useCarousel_unstable(props, ref) {
         });
         return nextPageIndex;
     });
-    const mergedRefs = (0, _reactutilities.useMergedRefs)(ref, containerRef);
+    const mergedContainerRef = (0, _reactutilities.useMergedRefs)(ref, containerRef);
     // Announce carousel updates
     const announcementTextRef = _react.useRef('');
     const totalNavLength = _react.useRef(0);
@@ -101,7 +102,7 @@ function useCarousel_unstable(props, ref) {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref: mergedRefs,
+            ref: mergedContainerRef,
             role: 'region',
             ...props
         }), {
@@ -109,7 +110,8 @@ function useCarousel_unstable(props, ref) {
         }),
         activeIndex,
         circular,
-        containerRef: mergedRefs,
+        containerRef: mergedContainerRef,
+        viewportRef,
         selectPageByElement,
         selectPageByDirection,
         selectPageByIndex,

package/lib-commonjs/components/Carousel/useCarousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarousel.ts"],"sourcesContent":["import { 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';\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 } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, 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 });\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 ~~mergedRefs~~ = 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: ~~mergedRefs~~,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n circular,\n containerRef: ~~mergedRefs~~,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","dir","useFluent","activeIndex","carouselApi","containerRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","selectPageByElement","useEventCallback","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","~~mergedRefs~~","useMergedRefs","announcementTextRef","React","useRef","totalNavLength","navGroupRef","announce","useAnnounce","updateAnnouncement","current","announcementText","polite","useIsomorphicLayoutEffect","data","navItemsCount","groupIndexList","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BAwBgBA;;;eAAAA;;;;qCAxBgC;gCAOzC;iEACgB;kCAIU;AAY1B,SAASA,qBAAqBC,KAAoB,EAAEC,GAA8B;IACvF;IAEA,MAAM,EACJC,QAAQ,QAAQ,EAChBC,WAAW,KAAK,EAChBC,mBAAmB,EACnBC,YAAY,MAAM,EAClBC,YAAY,KAAK,EACjBC,aAAa,KAAK,EAClBC,YAAY,EACZC,SAAS,OAAO,EACjB,GAAGT;IAEJ,MAAM,EAAEU,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChB,MAAM,EAAEC,WAAW,EAAEC,WAAW,EAAEC,YAAY,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,aAAa,EAAE,~~GACjGC~~,IAAAA,kCAAAA,EAAiB;~~QACfhB~~;~~QACAiB~~,~~WAAWT~~;~~QACXU~~,~~MAAMjB~~;~~QACNkB~~,~~gBAAgBhB~~;~~QAChBiB~~,~~oBAAoBtB~~,~~MAAMsB~~,kBAAkB;~~QAC5CV~~,aAAaZ,MAAMY,WAAW;~~QAC9BW~~,~~WAAWjB~~;~~QACXkB~~,~~eAAejB~~,aAAa,QAAQ;QACpCE;~~IACF~~;IAEF,~~MAAMgB~~,sBAAmEC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC,SAASC;QACzG,MAAMC,~~aAAajB~~,~~YAAYkB~~,eAAe,CAACH,SAASC;~~QACxDzB~~,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~oBAAsBuB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC,OAAOH;QAAW;QAEvE,OAAOA;IACT;IAEA,MAAMI,oBAA+DR,IAAAA,gCAAAA,EAAiB,CAACC,OAAOM,OAAOJ;~~QACnGhB~~,~~YAAYsB~~,aAAa,CAACF,OAAOJ;~~QAEjCzB~~,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~oBAAsBuB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC;QAAM;IAC7D;IAEA,MAAMG,wBAAuEV,IAAAA,gCAAAA,EAAiB,CAACC,~~OAAOR~~;QACpG,~~MAAMkB~~,~~gBAAgBxB~~,~~YAAYyB~~,iBAAiB,~~CAACnB~~;~~QACpDf~~,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~oBAAsBuB~~,OAAO;YAAEA;YAAOK,MAAM;YAASC,OAAOI;QAAc;QAE1E,OAAOA;IACT;IAEA,MAAME,~~aAAaC~~,IAAAA,6BAAAA,~~EAAcvC~~,KAAKa;~~IAEtC~~,4BAA4B;IAC5B,~~MAAM2B~~,sBAAsBC,OAAMC,MAAM,CAAS;IACjD,MAAMC,iBAAiBF,OAAMC,MAAM,CAAS;IAC5C,MAAME,cAAcH,OAAMC,MAAM,CAAa,EAAE;IAE/C,MAAM,EAAEG,QAAQ,EAAE,GAAGC,IAAAA,gCAAAA;IAErB,MAAMC,qBAAqBtB,IAAAA,gCAAAA,EAAiB;QAC1C,IAAIkB,eAAeK,OAAO,IAAI,KAAK,~~CAACzC~~,cAAc;YAChD,+CAA+C;YAC/C;QACF;QAEA,~~MAAM0C~~,~~mBAAmB1C~~,aAAaI,~~aAAagC~~,eAAeK,OAAO,EAAEJ,YAAYI,OAAO;QAE9F,IAAIC,qBAAqBT,oBAAoBQ,OAAO,EAAE;YACpDR,oBAAoBQ,OAAO,GAAGC;YAC9BJ,SAASI,kBAAkB;gBAAEC,QAAQ;YAAK;QAC5C;IACF;IAEAC,IAAAA,yCAAAA,EAA0B;QACxB,oDAAoD;QACpD,~~OAAOrC~~,~~mBAAmBsC~~,CAAAA;YACxB,IAAIT,eAAeK,OAAO,IAAI,KAAKI,KAAKC,aAAa,GAAG,~~KAAK9C~~,cAAc;gBACzE,~~MAAM0C~~,~~mBAAmB1C~~,~~aAAa6C~~,~~KAAKzC~~,WAAW,~~EAAEyC~~,KAAKC,aAAa,EAAED,KAAKE,cAAc;gBAC/F,mFAAmF;gBACnFd,oBAAoBQ,OAAO,GAAGC;YAChC;YACAN,eAAeK,OAAO,GAAGI,KAAKC,aAAa;YAC3CT,YAAYI,OAAO,GAAGI,KAAKE,cAAc;YACzCP;QACF;IACF,GAAG;~~QAACjC~~;~~QAAoBiC~~;~~QAAoBxC~~;KAAa;~~IAEzD4C~~,IAAAA,yCAAAA,EAA0B;QACxBJ;IACF,GAAG;~~QAACpC~~;~~QAAaoC~~;KAAmB;IAEpC,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;~~YAC9B3D~~,~~KAAKsC~~;YACLsB,MAAM;YACN,~~GAAG7D~~,KAAK;QACV,IACA;~~YAAE8D~~,aAAa;QAAM;~~QAGvBlD~~;QACAT;QACAW,~~cAAcyB~~;~~QACdd~~;QACAW;QACAF;~~QACAnB~~;QACAC;QACAC;IACF;AACF"}
1	+ {"version":3,"sources":["../src/components/Carousel/useCarousel.ts"],"sourcesContent":["import { 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';\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 } = 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 });\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 circular,\n containerRef: mergedContainerRef,\n viewportRef,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","dir","useFluent","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","useEmblaCarousel","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","selectPageByElement","useEventCallback","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","useMergedRefs","announcementTextRef","React","useRef","totalNavLength","navGroupRef","announce","useAnnounce","updateAnnouncement","current","announcementText","polite","useIsomorphicLayoutEffect","data","navItemsCount","groupIndexList","components","root","slot","always","getIntrinsicElementProps","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Carousel/useCarouselContextValues.js CHANGED Viewed

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useCarouselContextValues_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useCarouselContextValues_unstable(state) {
-    const { activeIndex, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef } = state;
+    const { activeIndex, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef, viewportRef } = state;
     const carousel = _react.useMemo(()=>({
             activeIndex,
             selectPageByElement,
@@ -21,7 +21,8 @@ function useCarouselContextValues_unstable(state) {
             enableAutoplay,
             resetAutoplay,
             circular,
-            containerRef
+            containerRef,
+            viewportRef
         }), [
         activeIndex,
         selectPageByElement,
@@ -31,7 +32,8 @@ function useCarouselContextValues_unstable(state) {
         enableAutoplay,
         resetAutoplay,
         circular,
-        containerRef
+        containerRef,
+        viewportRef
     ]);
     return {
         carousel

package/lib-commonjs/components/Carousel/useCarouselContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { CarouselContextValues } from '../CarouselContext.types';\nimport type { CarouselState } from './Carousel.types';\n\nexport function useCarouselContextValues_unstable(state: CarouselState): CarouselContextValues {\n const {\n activeIndex,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n } = state;\n\n const carousel = React.useMemo(\n () => ({\n activeIndex,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n }),\n [\n activeIndex,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n ],\n );\n\n return { carousel };\n}\n"],"names":["useCarouselContextValues_unstable","state","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","carousel","React","useMemo"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;AAKhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,~~EACb~~,~~GAAGT~~;IAEJ,~~MAAMU~~,WAAWC,OAAMC,OAAO,CAC5B,IAAO,CAAA;~~YACLX~~;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;~~QACER~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}
1	+ {"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { CarouselContextValues } from '../CarouselContext.types';\nimport type { CarouselState } from './Carousel.types';\n\nexport function useCarouselContextValues_unstable(state: CarouselState): CarouselContextValues {\n const {\n activeIndex,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n } = state;\n\n const carousel = React.useMemo(\n () => ({\n activeIndex,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n }),\n [\n activeIndex,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n ],\n );\n\n return { carousel };\n}\n"],"names":["useCarouselContextValues_unstable","state","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","viewportRef","carousel","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;AAKhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACZ,GAAGV;IAEJ,MAAMW,WAAWC,OAAMC,OAAO,CAC5B,IAAO,CAAA;YACLZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}

package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js CHANGED Viewed

@@ -24,22 +24,13 @@ const carouselClassNames = {
  * Styles for the root slot
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
-        z8tnut: "fr4fn7s",
-        B68tc82: 0,
-        Bmxbyg5: 0,
-        Bpg54ce: "f1a3p1vp",
+        B68tc82: "f1p9o1ba",
         Eiaeu8: "f1115ve7",
         qhf8xq: "f10pi13n"
     }
 }, {
     d: [
-        ".fr4fn7s{padding-top:var(--strokeWidthThick);}",
-        [
-            ".f1a3p1vp{overflow:hidden;}",
-            {
-                p: -1
-            }
-        ],
+        ".f1p9o1ba{overflow-x:hidden;}",
         ".f1115ve7{overflow-anchor:none;}",
         ".f10pi13n{position:relative;}"
     ]
@@ -49,4 +40,4 @@ const useCarouselStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(carouselClassNames.root, styles.root, state.root.className);
     return state;
-}; //# sourceMappingURL=useCarouselStyles.styles.js.map
+};

package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["import { 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 ~~paddingTop:~~ ~~tokens.strokeWidthThick,\~~n ~~overflow~~: 'hidden',\n overflowAnchor: 'none',\n position: 'relative'\n }\n});\n/\n Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["carouselClassNames","useCarouselStyles_unstable","root","useStyles","__styles","~~z8tnut","~~B68tc82","~~Bmxbyg5","Bpg54ce","~~Eiaeu8","qhf8xq","d","~~p","~~state","styles","className","mergeClasses"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;~~IAEaA~~,kBAAkB;eAAlBA;;IAeIC,0BAA0B;eAA1BA;;;~~uBAjBwB~~;~~AAElC~~,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,~~QAAA;QAAAC,~~SAAA;QAAAC,~~SAAA;QAAAC,SAAA;QAAAC,~~QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;~~YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;~~QAAA;~~QAAA;~~KAAA;AAAA;AAUX,~~MAAMX~~,~~6BAA8BY~~,CAAAA;IAC3C;IACA,MAAMC,~~SAASX~~;~~IACfU~~,~~MAAMX~~,IAAI,~~CAACa~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChB~~,mBAAmBE,IAAI,~~EAAEY~~,~~OAAOZ~~,IAAI,~~EAAEW~~,~~MAAMX~~,IAAI,~~CAACa~~,SAAS;IAC9F,OAAOF;AACX"}
1	+ {"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\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});\n/\n Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["carouselClassNames","useCarouselStyles_unstable","root","useStyles","__styles","B68tc82","Eiaeu8","qhf8xq","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,kBAAkB;eAAlBA;;IAeIC,0BAA0B;eAA1BA;;;uBAhBwB;AAClC,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAUX,MAAMP,6BAA8BQ,CAAAA;IAC3C;IACA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACZ,mBAAmBE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAC9F,OAAOF;AACX"}

package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.js CHANGED Viewed

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton");
 const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton");
 const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselAutoplayButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselAutoplayButton.useCarouselAutoplayButton_unstable)(props, ref);
     (0, _useCarouselAutoplayButtonStylesstyles.useCarouselAutoplayButtonStyles_unstable)(state);
-    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
-    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
-    // useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselAutoplayButtonStyles_unstable')(state);
     return (0, _renderCarouselAutoplayButton.renderCarouselAutoplayButton_unstable)(state);
 });
 CarouselAutoplayButton.displayName = 'CarouselAutoplayButton';

package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselAutoplayButton.tsx"],"sourcesContent":["import * 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';\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 // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n // useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);\n return renderCarouselAutoplayButton_unstable(state);\n },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["CarouselAutoplayButton","React","forwardRef","props","ref","state","useCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","renderCarouselAutoplayButton_unstable","displayName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAaaA~~;;;eAAAA;;;;~~iEAbU~~;2CAE4B;8CACG;uDACG;~~AASlD~~,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;~~IACzC~~,~~8HAA8H;IAC9H~~,~~wGAAwG;IACxG~~,~~kFAAkF~~;~~IAClF~~,~~OAAOG~~,IAAAA,mEAAAA,~~EAAsCH~~;AAC/C;AAGFL,~~uBAAuBS~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx"],"sourcesContent":["import * 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":["CarouselAutoplayButton","React","forwardRef","props","ref","state","useCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselAutoplayButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;2CAE4B;8CACG;uDACG;qCAEb;AAQrC,MAAMA,yBAAAA,WAAAA,GAA2EC,OAAMC,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCH,OAAOC;IAExDG,IAAAA,+EAAAA,EAAyCF;IACzCG,IAAAA,gDAAAA,EAA4B,4CAA4CH;IAExE,OAAOI,IAAAA,mEAAAA,EAAsCJ;AAC/C;AAGFL,uBAAuBU,WAAW,GAAG"}

package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselAutoplayButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselAutoplayButtonSlots = ButtonSlots & {\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\nexport type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>> & {\n /*\n The updated autoplay value.\n /\n checked: boolean;\n};\n\nexport type CarouselAutoplayAriaLabelFunction = (autoplay: boolean) => string;\n\n/\n CarouselAutoplayButton Props\n /\nexport type CarouselAutoplayButtonProps = ToggleButtonProps &\n ComponentProps<CarouselAutoplayButtonSlots> & {\n /\n Callback that informs the user when internal autoplay value has changed\n /\n onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;\n };\n\n/\n State used in rendering CarouselAutoplayButton\n */\nexport type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAGuB"}
1	+ {"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselAutoplayButtonSlots = ButtonSlots & {\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\nexport type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement \| HTMLAnchorElement>> & {\n /*\n The updated autoplay value.\n /\n checked: boolean;\n};\n\nexport type CarouselAutoplayAriaLabelFunction = (autoplay: boolean) => string;\n\n/\n CarouselAutoplayButton Props\n /\nexport type CarouselAutoplayButtonProps = ToggleButtonProps &\n ComponentProps<CarouselAutoplayButtonSlots> & {\n /\n Callback that informs the user when internal autoplay value has changed\n /\n onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;\n };\n\n/\n State used in rendering CarouselAutoplayButton\n */\nexport type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAGuB"}

package/lib-commonjs/components/CarouselAutoplayButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselAutoplayButton';\nexport * from './CarouselAutoplayButton.types';\nexport * from './renderCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
1	+ {"version":3,"sources":["../src/components/CarouselAutoplayButton/index.ts"],"sourcesContent":["export * from './CarouselAutoplayButton';\nexport * from './CarouselAutoplayButton.types';\nexport * from './renderCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButton';\nexport * from './useCarouselAutoplayButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderCarouselAutoplayButton.tsx"],"sourcesContent":["/** ~~@jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport~~ { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonState, CarouselAutoplayButtonSlots } from './CarouselAutoplayButton.types';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\n\n/\n Render the final JSX of CarouselAutoplayButton\n */\nexport const renderCarouselAutoplayButton_unstable = (state: CarouselAutoplayButtonState) => {\n assertSlots<CarouselAutoplayButtonSlots>(state);\n\n // We render the underlying react-button with injected carousel functionality\n return renderToggleButton_unstable(state);\n};\n"],"names":["renderCarouselAutoplayButton_unstable","state","assertSlots","renderToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+~~BAUaA~~;;;eAAAA;;;~~gCATb~~;~~6BAI4C~~;AAKrC,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,6EAA6E;IAC7E,OAAOE,IAAAA,wCAAAA,EAA4BF;AACrC"}
1	+ {"version":3,"sources":["../src/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonState, CarouselAutoplayButtonSlots } from './CarouselAutoplayButton.types';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\n\n/*\n Render the final JSX of CarouselAutoplayButton\n */\nexport const renderCarouselAutoplayButton_unstable = (state: CarouselAutoplayButtonState) => {\n assertSlots<CarouselAutoplayButtonSlots>(state);\n\n // We render the underlying react-button with injected carousel functionality\n return renderToggleButton_unstable(state);\n};\n"],"names":["renderCarouselAutoplayButton_unstable","state","assertSlots","renderToggleButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;gCAPe;6BAEgB;AAKrC,MAAMA,wCAAwC,CAACC;IACpDC,IAAAA,2BAAAA,EAAyCD;IAEzC,6EAA6E;IAC7E,OAAOE,IAAAA,wCAAAA,EAA4BF;AACrC"}

package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselAutoplayButton.tsx"],"sourcesContent":["import type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} 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 } = 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 return () => {\n // We disable autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [enableAutoplay]);\n\n useIsomorphicLayoutEffect(() => {\n // Enable/disable autoplay on state change\n enableAutoplay(autoplay);\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 ...props,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","autoplay","setAutoplay","useControllableState","state","defaultState","initialState","enableAutoplay","useCarouselContext","ctx","React","useEffect","useIsomorphicLayoutEffect","handleClick","event","isDefaultPrevented","newValue","type","useToggleButton_unstable","icon","slot","optional","defaultProps","children","createElement","PauseCircleRegular","PlayCircleRegular","renderByDefault","elementType","onClick","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBaA;;;eAAAA;;;;6BAvB4B;4BACa;gCAO/C;iEACgB;iCAG2C;AAW3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGJ;IAErD,MAAM,CAACK,UAAUC,YAAY,GAAGC,IAAAA,oCAAAA,EAAqB;QACnDC,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,iBAAiBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IAEnEG,OAAMC,SAAS,CAAC;QACd,OAAO;YACL,oDAAoD;YACpDJ,eAAe;QACjB;IACF,GAAG;QAACA;KAAe;IAEnBK,IAAAA,yCAAAA,EAA0B;QACxB,0CAA0C;QAC1CL,eAAeN;IACjB,GAAG;QAACA;QAAUM;KAAe;IAE7B,MAAMM,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACf;QAElBC,YAAYc;QACZlB,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBgB,OAAO;YAAEA;YAAOG,MAAM;YAASlB,SAASiB;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,GAAGE,IAAAA,qCAAAA,EACD;YACEC,MAAMC,oBAAAA,CAAKC,QAAQ,CAACzB,MAAMuB,IAAI,EAAE;gBAC9BG,cAAc;oBACZC,UAAUtB,WAAAA,WAAAA,GAAWS,OAAAc,aAAA,CAACC,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwBf,OAAAc,aAAA,CAACE,6BAAAA,EAAAA;gBACjD;gBACAC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGhC,KAAK;YACRG,SAASE;YACT4B,SAASC,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAelB,aAAajB,MAAMiC,OAAO;QACrE,GACAhC,IACD;IACH;AACF"}
1	+ {"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["import type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n slot,\n useControllableState,\n useEventCallback,\n useIsomorphicLayoutEffect,\n} 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 } = 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 return () => {\n // We disable autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [enableAutoplay]);\n\n useIsomorphicLayoutEffect(() => {\n // Enable/disable autoplay on state change\n enableAutoplay(autoplay);\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 ...props,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","autoplay","setAutoplay","useControllableState","state","defaultState","initialState","enableAutoplay","useCarouselContext","ctx","React","useEffect","useIsomorphicLayoutEffect","handleClick","event","isDefaultPrevented","newValue","type","useToggleButton_unstable","icon","slot","optional","defaultProps","children","createElement","PauseCircleRegular","PlayCircleRegular","renderByDefault","elementType","onClick","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAwBaA;;;eAAAA;;;;6BAvB4B;4BACa;gCAO/C;iEACgB;iCAG2C;AAW3D,MAAMA,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGJ;IAErD,MAAM,CAACK,UAAUC,YAAY,GAAGC,IAAAA,oCAAAA,EAAqB;QACnDC,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,iBAAiBC,IAAAA,4CAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IAEnEG,OAAMC,SAAS,CAAC;QACd,OAAO;YACL,oDAAoD;YACpDJ,eAAe;QACjB;IACF,GAAG;QAACA;KAAe;IAEnBK,IAAAA,yCAAAA,EAA0B;QACxB,0CAA0C;QAC1CL,eAAeN;IACjB,GAAG;QAACA;QAAUM;KAAe;IAE7B,MAAMM,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACf;QAElBC,YAAYc;QACZlB,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBgB,OAAO;YAAEA;YAAOG,MAAM;YAASlB,SAASiB;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,GAAGE,IAAAA,qCAAAA,EACD;YACEC,MAAMC,oBAAAA,CAAKC,QAAQ,CAACzB,MAAMuB,IAAI,EAAE;gBAC9BG,cAAc;oBACZC,UAAUtB,WAAAA,WAAAA,GAAWS,OAAAc,aAAA,CAACC,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwBf,OAAAc,aAAA,CAACE,6BAAAA,EAAAA;gBACjD;gBACAC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGhC,KAAK;YACRG,SAASE;YACT4B,SAASC,IAAAA,gCAAAA,EAAiBC,IAAAA,8BAAAA,EAAelB,aAAajB,MAAMiC,OAAO;QACrE,GACAhC,IACD;IACH;AACF"}

package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js CHANGED Viewed

@@ -68,4 +68,4 @@ const useCarouselAutoplayButtonStyles_unstable = (state)=>{
         state.icon.className = (0, _react.mergeClasses)(carouselAutoplayButtonClassNames.icon, state.icon.className);
     }
     return state;
-}; //# sourceMappingURL=useCarouselAutoplayButtonStyles.styles.js.map
+};

package/lib-commonjs/components/CarouselButton/CarouselButton.js CHANGED Viewed

@@ -13,12 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useCarouselButton = require("./useCarouselButton");
 const _renderCarouselButton = require("./renderCarouselButton");
 const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const CarouselButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useCarouselButton.useCarouselButton_unstable)(props, ref);
     (0, _useCarouselButtonStylesstyles.useCarouselButtonStyles_unstable)(state);
-    // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts
-    // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md
-    // useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselButtonStyles_unstable')(state);
     return (0, _renderCarouselButton.renderCarouselButton_unstable)(state);
 });
 CarouselButton.displayName = 'CarouselButton';

package/lib-commonjs/components/CarouselButton/CarouselButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselButton.tsx"],"sourcesContent":["import * 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';\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 // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts\n // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md\n // useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);\n\n return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["CarouselButton","React","forwardRef","props","ref","state","useCarouselButton_unstable","useCarouselButtonStyles_unstable","renderCarouselButton_unstable","displayName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAWaA~~;;;eAAAA;;;;~~iEAXU~~;mCAEoB;sCACG;+CACG;~~AAO1C~~,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;~~IACjC~~,~~8HAA8H;IAC9H~~,~~wGAAwG;IACxG~~,~~0EAA0E~~;~~IAE1E~~,~~OAAOG~~,IAAAA,mDAAAA,~~EAA8BH~~;AACvC;AAEAL,~~eAAeS~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/CarouselButton/CarouselButton.tsx"],"sourcesContent":["import * 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":["CarouselButton","React","forwardRef","props","ref","state","useCarouselButton_unstable","useCarouselButtonStyles_unstable","useCustomStyleHook_unstable","renderCarouselButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;mCAEoB;sCACG;+CACG;qCAEL;AAMrC,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjCG,IAAAA,gDAAAA,EAA4B,oCAAoCH;IAEhE,OAAOI,IAAAA,mDAAAA,EAA8BJ;AACvC;AAEAL,eAAeU,WAAW,GAAG"}

package/lib-commonjs/components/CarouselButton/CarouselButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["CarouselButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\nexport type CarouselButtonSlots = ButtonSlots & {\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/*\n CarouselButton Props\n /\nexport type CarouselButtonProps = Partial<ButtonProps> &\n ComponentProps<CarouselButtonSlots> & {\n /\n Dictates whether button will be of type go next or go previous\n * Default: 'next'\n /\n navType?: 'prev' \| 'next';\n };\n\n/\n State used in rendering CarouselButton\n */\nexport type CarouselButtonState = ButtonState &\n ComponentState<CarouselButtonSlots> &\n Required<Pick<CarouselButtonProps, 'navType'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}
1	+ {"version":3,"sources":["../src/components/CarouselButton/CarouselButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\nexport type CarouselButtonSlots = ButtonSlots & {\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/*\n CarouselButton Props\n /\nexport type CarouselButtonProps = Partial<ButtonProps> &\n ComponentProps<CarouselButtonSlots> & {\n /\n Dictates whether button will be of type go next or go previous\n * Default: 'next'\n /\n navType?: 'prev' \| 'next';\n };\n\n/\n State used in rendering CarouselButton\n */\nexport type CarouselButtonState = ButtonState &\n ComponentState<CarouselButtonSlots> &\n Required<Pick<CarouselButtonProps, 'navType'>>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}

package/lib-commonjs/components/CarouselButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CarouselButton';\nexport * from './CarouselButton.types';\nexport * from './renderCarouselButton';\nexport * from './useCarouselButton';\nexport * from './useCarouselButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
1	+ {"version":3,"sources":["../src/components/CarouselButton/index.ts"],"sourcesContent":["export * from './CarouselButton';\nexport * from './CarouselButton.types';\nexport * from './renderCarouselButton';\nexport * from './useCarouselButton';\nexport * from './useCarouselButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}