@fluentui/react-carousel 9.8.5 → 9.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -10
- package/dist/index.d.ts +13 -12
- package/lib/components/Carousel/Carousel.js +1 -0
- package/lib/components/Carousel/Carousel.js.map +1 -1
- package/lib/components/Carousel/renderCarousel.js.map +1 -1
- package/lib/components/Carousel/useCarousel.js +1 -0
- package/lib/components/Carousel/useCarousel.js.map +1 -1
- package/lib/components/Carousel/useCarouselContextValues.js +1 -0
- package/lib/components/Carousel/useCarouselContextValues.js.map +1 -1
- package/lib/components/Carousel/useCarouselStyles.styles.js +2 -0
- package/lib/components/Carousel/useCarouselStyles.styles.js.map +1 -1
- package/lib/components/Carousel/useCarouselStyles.styles.raw.js +1 -0
- package/lib/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js +1 -0
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js +1 -0
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +2 -0
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +1 -0
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselButton/CarouselButton.js +1 -0
- package/lib/components/CarouselButton/CarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/renderCarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButton.js +2 -1
- package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.js +2 -0
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.raw.js +1 -0
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselCard/CarouselCard.js +1 -0
- package/lib/components/CarouselCard/CarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/renderCarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCard.js +1 -0
- package/lib/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.js +2 -0
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js +1 -0
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselContext.js +1 -0
- package/lib/components/CarouselContext.js.map +1 -1
- package/lib/components/CarouselContext.types.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNav.js +1 -0
- package/lib/components/CarouselNav/CarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNavContext.js +1 -0
- package/lib/components/CarouselNav/CarouselNavContext.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNavIndexContext.js +1 -0
- package/lib/components/CarouselNav/CarouselNavIndexContext.js.map +1 -1
- package/lib/components/CarouselNav/renderCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNav.js +1 -0
- package/lib/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.js +2 -0
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js +1 -0
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavButton/CarouselNavButton.js +1 -0
- package/lib/components/CarouselNavButton/CarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/renderCarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButton.js +2 -1
- package/lib/components/CarouselNavButton/useCarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +2 -0
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +1 -0
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavContainer/CarouselNavContainer.js +1 -0
- package/lib/components/CarouselNavContainer/CarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +2 -0
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +1 -0
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js +1 -0
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/renderCarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js +2 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +2 -0
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +1 -0
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSlider.js +1 -0
- package/lib/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSliderContext.js +1 -0
- package/lib/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
- package/lib/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSlider.js +1 -0
- package/lib/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js +2 -0
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +1 -0
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.js +1 -0
- package/lib/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewport.js +1 -0
- package/lib/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js +2 -0
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -0
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
- package/lib/components/useEmblaCarousel.js +1 -0
- package/lib/components/useEmblaCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/Carousel.js +1 -0
- package/lib-commonjs/components/Carousel/Carousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/renderCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarousel.js +1 -0
- package/lib-commonjs/components/Carousel/useCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselContextValues.js +1 -0
- package/lib-commonjs/components/Carousel/useCarouselContextValues.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js +1 -0
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.js +1 -0
- package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js +1 -0
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/CarouselButton.js +1 -0
- package/lib-commonjs/components/CarouselButton/CarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/renderCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js +2 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/CarouselCard.js +1 -0
- package/lib-commonjs/components/CarouselCard/CarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/renderCarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCard.js +1 -0
- package/lib-commonjs/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselContext.js +1 -0
- package/lib-commonjs/components/CarouselContext.js.map +1 -1
- package/lib-commonjs/components/CarouselContext.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNav.js +1 -0
- package/lib-commonjs/components/CarouselNav/CarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNavContext.js +1 -0
- package/lib-commonjs/components/CarouselNav/CarouselNavContext.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNavIndexContext.js +1 -0
- package/lib-commonjs/components/CarouselNav/CarouselNavIndexContext.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/renderCarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNav.js +1 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.js +1 -0
- package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButton.js +2 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.js +1 -0
- package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.js +1 -0
- package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/renderCarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButton.js +2 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSlider.js +1 -0
- package/lib-commonjs/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js +1 -0
- package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js +1 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.js +1 -0
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js +1 -0
- package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js +1 -0
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/useEmblaCarousel.js +1 -0
- package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
- package/package.json +13 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nimport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nimport { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';\nimport type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A variant child element of CarouselNav, a singular image button that displays a\n * preview of card content and will set the carousels active value on click.\n */\nexport const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps> = React.forwardRef(\n (props, ref) => {\n const state = useCarouselNavImageButton_unstable(props, ref);\n\n useCarouselNavImageButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);\n\n return renderCarouselNavImageButton_unstable(state);\n },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["React","useCarouselNavImageButton_unstable","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavImageButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAEpG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/renderCarouselNavImageButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState) => {\n assertSlots<CarouselNavImageButtonSlots>(state);\n\n return (\n <state.root>\n <state.image />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCarouselNavImageButton_unstable","state","root","image"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/renderCarouselNavImageButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState): JSXElement => {\n assertSlots<CarouselNavImageButtonSlots>(state);\n\n return (\n <state.root>\n <state.image />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCarouselNavImageButton_unstable","state","root","image"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,KAAK;;AAGlB,EAAE"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { useARIAButtonProps } from '@fluentui/react-aria';
|
|
2
3
|
import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
4
|
import { useTabsterAttributes } from '@fluentui/react-tabster';
|
|
@@ -29,7 +30,7 @@ import { useCarouselContext_unstable as useCarouselContext } from '../CarouselCo
|
|
|
29
30
|
isDefault: selected
|
|
30
31
|
}
|
|
31
32
|
});
|
|
32
|
-
const buttonRef = React.useRef();
|
|
33
|
+
const buttonRef = React.useRef(undefined);
|
|
33
34
|
const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
|
|
34
35
|
elementType: 'button',
|
|
35
36
|
defaultProps: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement, type ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport * as React from 'react';\n\nimport { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavImageButtonProps, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\n\n/**\n * Create the state required to render CarouselNavImageButton.\n *\n * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,\n * before being passed to renderCarouselNavImageButton_unstable.\n *\n * @param props - props from this instance of CarouselNavImageButton\n * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton\n */\nexport const useCarouselNavImageButton_unstable = (\n props: CarouselNavImageButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselNavImageButtonState => {\n const { onClick, as = 'button' } = props;\n\n const index = useCarouselNavIndexContext();\n const selectPageByIndex = useCarouselContext(ctx => ctx.selectPageByIndex);\n const selected = useCarouselContext(ctx => ctx.activeIndex === index);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n const handleClick: ARIAButtonSlotProps['onClick'] = useEventCallback(event => {\n onClick?.(event);\n\n if (!event.defaultPrevented && isHTMLElement(event.target)) {\n selectPageByIndex(event, index);\n }\n });\n\n const defaultTabProps = useTabsterAttributes({\n focusable: { isDefault: selected },\n });\n\n const buttonRef = React.useRef<HTMLElement>(undefined);\n const _carouselButton = slot.always<ARIAButtonSlotProps>(\n getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)),\n {\n elementType: 'button',\n defaultProps: {\n ref: useMergedRefs(ref, buttonRef),\n role: 'tab',\n type: 'button',\n 'aria-selected': selected,\n ...defaultTabProps,\n },\n },\n );\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n const controlList = data.groupIndexList?.[index] ?? [];\n const _controlledSlideIds = controlList\n .map((slideIndex: number) => {\n return data.slideNodes[slideIndex].id;\n })\n .join(' ');\n if (buttonRef.current) {\n buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);\n }\n });\n }, [subscribeForValues, index]);\n\n // Override onClick\n _carouselButton.onClick = handleClick;\n\n const image = slot.always(\n getIntrinsicElementProps('img', {\n 'aria-hidden': true, // Hidden as button is responsible for navigation description\n alt: '',\n role: 'presentation',\n ...props.image,\n }),\n { elementType: 'img' },\n );\n\n return {\n components: {\n root: 'button',\n image: 'img',\n },\n root: _carouselButton,\n image,\n selected,\n };\n};\n"],"names":["useARIAButtonProps","getIntrinsicElementProps","isHTMLElement","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","useTabsterAttributes","React","useCarouselNavIndexContext","useCarouselContext_unstable","useCarouselContext","useCarouselNavImageButton_unstable","props","ref","onClick","as","index","selectPageByIndex","ctx","selected","activeIndex","subscribeForValues","handleClick","event","defaultPrevented","target","defaultTabProps","focusable","isDefault","buttonRef","useRef","undefined","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"mappings":"AAAA;AAEA,SAA2DA,kBAAkB,QAAQ,uBAAuB;AAC5G,SACEC,wBAAwB,EACxBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,QACR,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,yCAAyC;AACpF,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,QAAQR;IACd,MAAMS,oBAAoBP,mBAAmBQ,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,WAAWT,mBAAmBQ,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,qBAAqBX,mBAAmBQ,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,cAA8CnB,iBAAiBoB,CAAAA;QACnET,oBAAAA,8BAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,IAAIvB,cAAcsB,MAAME,MAAM,GAAG;YAC1DR,kBAAkBM,OAAOP;QAC3B;IACF;IAEA,MAAMU,kBAAkBpB,qBAAqB;QAC3CqB,WAAW;YAAEC,WAAWT;QAAS;IACnC;IAEA,MAAMU,YAAYtB,MAAMuB,MAAM,CAAcC;IAC5C,MAAMC,kBAAkB9B,KAAK+B,MAAM,CACjCjC,yBAAyBe,IAAIhB,mBAAmBa,MAAMG,EAAE,EAAEH,SAC1D;QACEsB,aAAa;QACbC,cAAc;YACZtB,KAAKR,cAAcQ,KAAKgB;YACxBO,MAAM;YACNC,MAAM;YACN,iBAAiBlB;YACjB,GAAGO,eAAe;QACpB;IACF;IAGFtB,0BAA0B;QACxB,OAAOiB,mBAAmBiB,CAAAA;gBACJA;gBAAAA;YAApB,MAAMC,cAAcD,CAAAA,8BAAAA,uBAAAA,KAAKE,cAAc,cAAnBF,2CAAAA,oBAAqB,CAACtB,MAAM,cAA5BsB,wCAAAA,6BAAgC,EAAE;YACtD,MAAMG,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIjB,UAAUkB,OAAO,EAAE;gBACrBlB,UAAUkB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACpB;QAAoBL;KAAM;IAE9B,mBAAmB;IACnBgB,gBAAgBlB,OAAO,GAAGQ;IAE1B,MAAM2B,QAAQ/C,KAAK+B,MAAM,CACvBjC,yBAAyB,OAAO;QAC9B,eAAe;QACfkD,KAAK;QACLd,MAAM;QACN,GAAGxB,MAAMqC,KAAK;IAChB,IACA;QAAEf,aAAa;IAAM;IAGvB,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMpB;QACNiB;QACA9B;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer'\n }\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px'\n }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n if (state.image) {\n var _state_image;\n state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,KAAA;IAAAwB,MAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;IAAAN,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;EAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;IACb,IAAIsC,YAAY;IAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;EAC/N;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n root: 'fui-CarouselNavImageButton',\n image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n boxSizing: 'content-box',\n padding: '0px',\n margin: `0 ${tokens.spacingHorizontalXS}`,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n borderRadius: tokens.borderRadiusSmall,\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n overflow: 'hidden',\n ':hover': {\n cursor: 'pointer',\n },\n },\n image: {\n width: imageButtonSize + 'px',\n height: imageButtonSize + 'px',\n borderRadius: tokens.borderRadiusSmall,\n },\n selected: {\n width: selectedImageButtonSize + 'px',\n height: selectedImageButtonSize + 'px',\n },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n 'use no memo';\n\n const { selected } = state;\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n carouselNavImageButtonClassNames.root,\n styles.root,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.image) {\n state.image.className = mergeClasses(\n carouselNavImageButtonClassNames.image,\n styles.image,\n selected && styles.selected,\n state.image?.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,OAAOU,mBAAmB,EAAE;QACzC,GAAGX,WAAWY,WAAW,CAACX,OAAOY,sBAAsB,CAAC;QACxDC,cAAcb,OAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,OAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,2CAA2C,CACtDC;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEfe,MAAMnB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAKbkB;QAJFA,MAAMlB,KAAK,CAACoB,SAAS,GAAGzB,aACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,GAC3BE,eAAAA,MAAMlB,KAAK,cAAXkB,mCAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n const state = useCarouselSlider_unstable(props, ref);\n\n useCarouselSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n\n const context = useCarouselSliderContextValues_unstable(state);\n return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,uCAAuC,QAAQ,0BAA0B;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IACjCL,4BAA4B,oCAAoCK;IAEhE,MAAMC,UAAUP,wCAAwCM;IACxD,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n cardFocus: false,\n};\n\nexport const useCarouselSliderContext = (): CarouselSliderContextValue =>\n React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n const { cardFocus } = state;\n const carouselSlider = React.useMemo(\n () => ({\n cardFocus,\n }),\n [cardFocus],\n );\n\n return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;EAAkC;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/renderCarouselSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n state: CarouselSliderState,\n contextValues: CarouselSliderContextValues,\n) => {\n assertSlots<CarouselSliderSlots>(state);\n\n return (\n <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n <state.root />\n </CarouselSliderContextProvider>\n );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselSlider_unstable","state","contextValues","value","carouselSlider","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/renderCarouselSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n state: CarouselSliderState,\n contextValues: CarouselSliderContextValues,\n): JSXElement => {\n assertSlots<CarouselSliderSlots>(state);\n\n return (\n <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n <state.root />\n </CarouselSliderContextProvider>\n );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselSlider_unstable","state","contextValues","value","carouselSlider","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,6BAA6B,QAAqC,0BAA0B;AAErG;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n props: CarouselSliderProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n const { cardFocus = false } = props;\n const circular = useCarouselContext(ctx => ctx.circular);\n const focusableGroupAttr = useArrowNavigationGroup({\n circular,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const focusProps = cardFocus ? focusableGroupAttr : {};\n\n return {\n cardFocus,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'group',\n ...props,\n ...focusProps,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","d","useCarouselSliderStyles_unstable","state","styles","className"],"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","d","useCarouselSliderStyles_unstable","state","styles","className"],"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselSliderClassNames = {\n root: 'fui-CarouselSlider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n overflowAnchor: 'none'\n }\n});\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */ export const useCarouselSliderStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,wBAAwB,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSliderStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselSliderSlots, CarouselSliderState } from './CarouselSlider.types';\n\nexport const carouselSliderClassNames: SlotClassNames<CarouselSliderSlots> = {\n root: 'fui-CarouselSlider',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n overflowAnchor: 'none',\n },\n});\n\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */\nexport const useCarouselSliderStyles_unstable = (state: CarouselSliderState): CarouselSliderState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","carouselSliderClassNames","root","useStyles","display","overflowAnchor","useCarouselSliderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAK1D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,yBAAyBC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEpG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselViewport_unstable } from './useCarouselViewport';\nimport { renderCarouselViewport_unstable } from './renderCarouselViewport';\nimport { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';\nimport type { CarouselViewportProps } from './CarouselViewport.types';\nimport { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselViewport component - TODO: add more docs\n */\nexport const CarouselViewport: ForwardRefComponent<CarouselViewportProps> = React.forwardRef((props, ref) => {\n const state = useCarouselViewport_unstable(props, ref);\n\n useCarouselViewportStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselViewportStyles_unstable')(state);\n\n const context = useCarouselSliderContextValues_unstable(state);\n\n return renderCarouselViewport_unstable(state, context);\n});\n\nCarouselViewport.displayName = 'CarouselViewport';\n"],"names":["React","useCarouselViewport_unstable","renderCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselViewport","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAExF,SAASC,uCAAuC,QAAQ,0CAA0C;AAClG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,iCAA+DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQT,6BAA6BO,OAAOC;IAElDN,mCAAmCO;IACnCL,4BAA4B,sCAAsCK;IAElE,MAAMC,UAAUP,wCAAwCM;IAExD,OAAOR,gCAAgCQ,OAAOC;AAChD,GAAG;AAEHL,iBAAiBM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselViewport/renderCarouselViewport.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselViewportState, CarouselViewportSlots } from './CarouselViewport.types';\nimport { CarouselSliderContextValues, CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselViewport\n */\nexport const renderCarouselViewport_unstable = (\n state: CarouselViewportState,\n contextValues: CarouselSliderContextValues,\n) => {\n assertSlots<CarouselViewportSlots>(state);\n\n return (\n <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n <state.root />\n </CarouselSliderContextProvider>\n );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselViewport_unstable","state","contextValues","value","carouselSlider","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselViewport/renderCarouselViewport.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselViewportState, CarouselViewportSlots } from './CarouselViewport.types';\nimport { CarouselSliderContextValues, CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselViewport\n */\nexport const renderCarouselViewport_unstable = (\n state: CarouselViewportState,\n contextValues: CarouselSliderContextValues,\n): JSXElement => {\n assertSlots<CarouselViewportSlots>(state);\n\n return (\n <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n <state.root />\n </CarouselSliderContextProvider>\n );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselViewport_unstable","state","contextValues","value","carouselSlider","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAAsCC,6BAA6B,QAAQ,0CAA0C;AAErH;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEAJ,YAAmCG;IAEnC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewport.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewport.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CarouselViewportProps, CarouselViewportState } from './CarouselViewport.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselViewport.\n *\n * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable,\n * before being passed to renderCarouselViewport_unstable.\n *\n * @param props - props from this instance of CarouselViewport\n * @param ref - reference to root HTMLDivElement of CarouselViewport\n */\nexport const useCarouselViewport_unstable = (\n props: CarouselViewportProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselViewportState => {\n const hasFocus = React.useRef(false);\n const hasMouse = React.useRef(false);\n const viewportRef = useCarouselContext(ctx => ctx.viewportRef);\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n const handleFocusCapture = React.useCallback(() => {\n hasFocus.current = true;\n // Will pause autoplay when focus is captured within viewport (if autoplay is initialized)\n enableAutoplay(false, true);\n }, [enableAutoplay]);\n\n const handleBlurCapture = React.useCallback(\n (e: React.FocusEvent) => {\n // Will enable autoplay (if initialized) when focus exits viewport\n if (!e.currentTarget.contains(e.relatedTarget)) {\n hasFocus.current = false;\n if (!hasMouse.current) {\n enableAutoplay(true, true);\n }\n }\n },\n [enableAutoplay],\n );\n\n const handleMouseEnter = React.useCallback(() => {\n hasMouse.current = true;\n enableAutoplay(false, true);\n }, [enableAutoplay]);\n const handleMouseLeave = React.useCallback(() => {\n hasMouse.current = false;\n if (!hasFocus.current) {\n enableAutoplay(true, true);\n }\n }, [enableAutoplay]);\n\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n const onBlurCapture = mergeCallbacks(props.onBlurCapture, handleBlurCapture);\n const onMouseEnter = mergeCallbacks(props.onMouseEnter, handleMouseEnter);\n const onMouseLeave = mergeCallbacks(props.onMouseLeave, handleMouseLeave);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, viewportRef),\n role: 'presentation',\n // Draggable ensures dragging is supported (even if not enabled)\n draggable: true,\n ...props,\n onFocusCapture,\n onBlurCapture,\n onMouseEnter,\n onMouseLeave,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useMergedRefs","useCarouselContext_unstable","useCarouselContext","useCarouselViewport_unstable","props","ref","hasFocus","useRef","hasMouse","viewportRef","ctx","enableAutoplay","handleFocusCapture","useCallback","current","handleBlurCapture","e","currentTarget","contains","relatedTarget","handleMouseEnter","handleMouseLeave","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","components","root","always","role","draggable","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1G,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,WAAWV,MAAMW,MAAM,CAAC;IAC9B,MAAMC,WAAWZ,MAAMW,MAAM,CAAC;IAC9B,MAAME,cAAcP,mBAAmBQ,CAAAA,MAAOA,IAAID,WAAW;IAC7D,MAAME,iBAAiBT,mBAAmBQ,CAAAA,MAAOA,IAAIC,cAAc;IAEnE,MAAMC,qBAAqBhB,MAAMiB,WAAW,CAAC;QAC3CP,SAASQ,OAAO,GAAG;QACnB,0FAA0F;QAC1FH,eAAe,OAAO;IACxB,GAAG;QAACA;KAAe;IAEnB,MAAMI,oBAAoBnB,MAAMiB,WAAW,CACzC,CAACG;QACC,kEAAkE;QAClE,IAAI,CAACA,EAAEC,aAAa,CAACC,QAAQ,CAACF,EAAEG,aAAa,GAAG;YAC9Cb,SAASQ,OAAO,GAAG;YACnB,IAAI,CAACN,SAASM,OAAO,EAAE;gBACrBH,eAAe,MAAM;YACvB;QACF;IACF,GACA;QAACA;KAAe;IAGlB,MAAMS,mBAAmBxB,MAAMiB,WAAW,CAAC;QACzCL,SAASM,OAAO,GAAG;QACnBH,eAAe,OAAO;IACxB,GAAG;QAACA;KAAe;IACnB,MAAMU,mBAAmBzB,MAAMiB,WAAW,CAAC;QACzCL,SAASM,OAAO,GAAG;QACnB,IAAI,CAACR,SAASQ,OAAO,EAAE;YACrBH,eAAe,MAAM;QACvB;IACF,GAAG;QAACA;KAAe;IAEnB,MAAMW,iBAAiBxB,eAAeM,MAAMkB,cAAc,EAAEV;IAC5D,MAAMW,gBAAgBzB,eAAeM,MAAMmB,aAAa,EAAER;IAC1D,MAAMS,eAAe1B,eAAeM,MAAMoB,YAAY,EAAEJ;IACxD,MAAMK,eAAe3B,eAAeM,MAAMqB,YAAY,EAAEJ;IAExD,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAM5B,KAAK6B,MAAM,CACf/B,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKI;YACxBoB,MAAM;YACN,gEAAgE;YAChEC,WAAW;YACX,GAAG1B,KAAK;YACRkB;YACAC;YACAC;YACAC;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","carouselViewportClassNames","root","useStyles","B2u0y6b","a9b677","d","useCarouselViewportStyles_unstable","state","styles","className"],"sources":["useCarouselViewportStyles.styles.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","carouselViewportClassNames","root","useStyles","B2u0y6b","a9b677","d","useCarouselViewportStyles_unstable","state","styles","className"],"sources":["useCarouselViewportStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselViewportClassNames = {\n root: 'fui-CarouselViewport'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n maxWidth: '100%',\n width: 'auto'\n }\n});\n/**\n * Apply styling to the CarouselViewport slots based on the state\n */ export const useCarouselViewportStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,0BAA0B,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewportStyles.styles.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewportStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselViewportSlots, CarouselViewportState } from './CarouselViewport.types';\n\nexport const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots> = {\n root: 'fui-CarouselViewport',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n maxWidth: '100%',\n width: 'auto',\n },\n});\n\n/**\n * Apply styling to the CarouselViewport slots based on the state\n */\nexport const useCarouselViewportStyles_unstable = (state: CarouselViewportState): CarouselViewportState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","carouselViewportClassNames","root","useStyles","maxWidth","width","useCarouselViewportStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAU;QACVC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,2BAA2BC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEtG,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
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\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\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 onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n autoplayInterval?: number;\n },\n) {\n const {\n align,\n autoplayInterval,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n\n const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\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 duration: motionDuration,\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 const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n delay: autoplayInterval,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motionType === '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 }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\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 if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\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 updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\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 const canLoop = emblaApi.current?.internalEngine().slideLooper.canLoop();\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n canLoop,\n };\n\n updateIndex();\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n updateIndex();\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement> = React.useMemo(() => {\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 // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (emblaApi.current) {\n // Stop autoplay before reinitializing.\n emblaApi.current.plugins?.().autoplay?.stop();\n emblaApi.current.off('slidesInView', handleVisibilityChange);\n emblaApi.current.off('select', handleIndexChange);\n emblaApi.current.off('reInit', handleReinit);\n emblaApi.current.off('autoplay:select', handleIndexChange);\n\n emblaApi.current.destroy();\n emblaApi.current = null;\n }\n\n if (newElement) {\n const newEmblaApi = EmblaCarousel(\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n viewportRef.current ?? newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n newEmblaApi.on('reInit', handleReinit);\n newEmblaApi.on('slidesInView', handleVisibilityChange);\n newEmblaApi.on('select', handleIndexChange);\n newEmblaApi.on('autoplay:select', handleIndexChange);\n\n emblaApi.current = newEmblaApi;\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\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 plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n duration: motionDuration,\n };\n\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\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","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","canLoop","slideLooper","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","newEmblaApi","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/useEmblaCarousel.ts"],"sourcesContent":["'use client';\n\nimport { 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\ntype EmblaEventHandler = Parameters<EmblaCarouselType['on']>[1];\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): void {\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 onAutoplayIndexChange?: EventHandler<CarouselIndexChangeData>;\n autoplayInterval?: number;\n },\n): {\n activeIndex: number;\n carouselApi: {\n scrollToElement: (element: HTMLElement, jump?: boolean) => number;\n scrollToIndex: (index: number, jump?: boolean) => void;\n scrollInDirection: (dir: 'prev' | 'next') => number;\n };\n viewportRef: React.RefObject<HTMLDivElement | null>;\n containerRef: React.RefObject<HTMLDivElement | null>;\n subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;\n enableAutoplay: (autoplay: boolean, temporary?: boolean) => void;\n resetAutoplay: () => void;\n} {\n const {\n align,\n autoplayInterval,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n motion,\n onDragIndexChange,\n onAutoplayIndexChange,\n } = options;\n\n const motionType = typeof motion === 'string' ? motion : motion?.kind ?? 'slide';\n const motionDuration = typeof motion === 'string' ? 25 : motion?.duration ?? 25;\n\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 duration: motionDuration,\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 const getPlugins = React.useCallback(() => {\n const plugins: EmblaPluginType[] = [];\n\n plugins.push(\n Autoplay({\n playOnInit: autoplayRef.current,\n delay: autoplayInterval,\n /* stopOnInteraction: false causes autoplay to restart on interaction end*/\n /* we'll handle this logic to ensure autoplay state is respected */\n stopOnInteraction: true,\n stopOnFocusIn: false, // We'll handle this one manually to prevent conflicts with tabster\n stopOnMouseEnter: false, // We will handle this manually to align functionality\n }),\n );\n\n // Optionally add Fade plugin\n if (motionType === '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 }, [motionType, onDragEvent, watchDrag, autoplayInterval]);\n\n /* This function enables autoplay to pause/play without affecting underlying state\n * Useful for pausing on focus etc. without having to reinitialize or set autoplay to off\n */\n const enableAutoplay = React.useCallback(\n (autoplay: boolean, temporary?: boolean) => {\n if (!temporary) {\n autoplayRef.current = autoplay;\n }\n\n if (autoplay && autoplayRef.current) {\n // Autoplay should only enable in the case where underlying state is true, temporary should not override\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 if (!autoplay) {\n emblaApi.current?.plugins().autoplay?.stop();\n }\n },\n [resetAutoplay],\n );\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 updateIndex = () => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slides = emblaApi.current?.slideNodes();\n const slideRegistry = emblaApi.current?.internalEngine().slideRegistry;\n const actualIndex = slideRegistry?.[newIndex]?.[0] ?? 0;\n\n // We set the first card in the current group as the default tabster index for focus capture\n slides?.forEach((slide, slideIndex) => {\n setTabsterDefault(slide, slideIndex === actualIndex);\n });\n setActiveIndex(newIndex);\n };\n\n const handleReinit = useEventCallback(() => {\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 const canLoop = emblaApi.current?.internalEngine().slideLooper.canLoop();\n\n const data: CarouselUpdateData = {\n navItemsCount,\n activeIndex: emblaApi.current?.selectedScrollSnap() ?? 0,\n groupIndexList,\n slideNodes: nodes,\n canLoop,\n };\n\n updateIndex();\n emblaApi.current?.scrollTo(activeIndex, false);\n for (const listener of listeners.current) {\n listener(data);\n }\n });\n\n const handleIndexChange: EmblaEventHandler = useEventCallback((_, eventType) => {\n const newIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n updateIndex();\n if (eventType === 'autoplay:select') {\n const noopEvent = new Event('autoplay');\n onAutoplayIndexChange?.(noopEvent, { event: noopEvent, type: 'autoplay', index: newIndex });\n }\n });\n\n const viewportRef: React.RefObject<HTMLDivElement | null> = React.useRef(null);\n const containerRef: React.RefObject<HTMLDivElement | null> = React.useMemo(() => {\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 // Get plugins using autoplayRef to prevent state change recreating EmblaCarousel\n const plugins = getPlugins();\n\n return {\n set current(newElement: HTMLDivElement | null) {\n if (emblaApi.current) {\n // Stop autoplay before reinitializing.\n emblaApi.current.plugins?.().autoplay?.stop();\n emblaApi.current.off('slidesInView', handleVisibilityChange);\n emblaApi.current.off('select', handleIndexChange);\n emblaApi.current.off('reInit', handleReinit);\n emblaApi.current.off('autoplay:select', handleIndexChange);\n\n emblaApi.current.destroy();\n emblaApi.current = null;\n }\n\n if (newElement) {\n const newEmblaApi = EmblaCarousel(\n // Use direct viewport if available, else fallback to container (includes Carousel controls).\n viewportRef.current ?? newElement,\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n\n newEmblaApi.on('reInit', handleReinit);\n newEmblaApi.on('slidesInView', handleVisibilityChange);\n newEmblaApi.on('select', handleIndexChange);\n newEmblaApi.on('autoplay:select', handleIndexChange);\n\n emblaApi.current = newEmblaApi;\n }\n },\n };\n }, [getPlugins, handleIndexChange, handleReinit]);\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 plugins = getPlugins();\n\n emblaOptions.current = {\n startIndex: emblaOptions.current.startIndex,\n align,\n direction,\n loop,\n slidesToScroll,\n watchDrag,\n containScroll,\n duration: motionDuration,\n };\n\n // Stop autoplay before reinitializing.\n emblaApi.current?.plugins?.().autoplay?.stop();\n emblaApi.current?.reInit(\n {\n ...DEFAULT_EMBLA_OPTIONS,\n ...emblaOptions.current,\n },\n plugins,\n );\n }, [align, containScroll, direction, getPlugins, loop, slidesToScroll, watchDrag, motionDuration]);\n\n React.useEffect(() => {\n // Scroll to controlled values on update\n // If active index is out of bounds, re-init will handle instead\n const currentActiveIndex = emblaApi.current?.selectedScrollSnap() ?? 0;\n const slideLength = emblaApi.current?.slideNodes()?.length ?? 0;\n emblaOptions.current.startIndex = activeIndex;\n if (activeIndex < slideLength && activeIndex !== currentActiveIndex) {\n emblaApi.current?.scrollTo(activeIndex);\n }\n }, [activeIndex]);\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","autoplayInterval","direction","loop","slidesToScroll","motion","onDragIndexChange","onAutoplayIndexChange","motionType","kind","motionDuration","duration","activeIndex","setActiveIndex","defaultState","defaultActiveIndex","state","initialState","onDragEvent","event","index","type","emblaOptions","useRef","startIndex","emblaApi","autoplayRef","resetAutoplay","useCallback","current","plugins","autoplay","reset","getPlugins","push","playOnInit","delay","stopOnInteraction","stopOnFocusIn","stopOnMouseEnter","onSelectViaDrag","enableAutoplay","temporary","play","stop","listeners","Set","subscribeForValues","listener","add","delete","updateIndex","slideRegistry","newIndex","selectedScrollSnap","slideNodes","internalEngine","actualIndex","forEach","slide","slideIndex","handleReinit","nodes","groupIndexList","navItemsCount","length","canLoop","slideLooper","data","scrollTo","handleIndexChange","_","eventType","noopEvent","Event","viewportRef","containerRef","useMemo","handleVisibilityChange","cardElements","visibleIndexes","slidesInView","cardElement","dispatchEvent","CustomEvent","bubbles","detail","isVisible","includes","newElement","off","destroy","newEmblaApi","on","carouselApi","scrollToElement","jump","cardIndex","indexOf","groupIndex","findIndex","group","indexFocus","scrollToIndex","scrollInDirection","dir","scrollPrev","scrollNext","useEffect","reInit","currentActiveIndex","slideLength"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * 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":["React","useCarousel_unstable","renderCarousel_unstable","useCarouselStyles_unstable","useCarouselContextValues_unstable","useCustomStyleHook_unstable","Carousel","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAEM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAEtB,6BAA6B;qCACnC,kCAAkC;AAQvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;QAE1CN,mDAAAA,EAA2BO;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,MAAMC,oBAAgBP,2DAAAA,EAAkCM;IAExD,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { 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":["assertSlots","CarouselProvider","renderCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues): JSXElement => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["assertSlots","CarouselProvider","renderCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;iCAGvB,qBAAqB;AAM/C,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,iCAAAA,EAAAA;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/useCarousel.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/useCarousel.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n getIntrinsicElementProps,\n slot,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselProps, CarouselState } from './Carousel.types';\nimport type { CarouselContextValue } from '../CarouselContext.types';\nimport { useEmblaCarousel } from '../useEmblaCarousel';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Carousel.\n *\n * The returned state can be modified with hooks such as useCarouselStyles_unstable,\n * before being passed to renderCarousel_unstable.\n *\n * @param props - props from this instance of Carousel\n * @param ref - reference to root HTMLDivElement of Carousel\n */\nexport function useCarousel_unstable(props: CarouselProps, ref: React.Ref<HTMLDivElement>): CarouselState {\n 'use no memo';\n\n const {\n align = 'center',\n circular = false,\n onActiveIndexChange,\n groupSize = 'auto',\n draggable = false,\n whitespace = false,\n announcement,\n motion = 'slide',\n autoplayInterval = 4000,\n } = props;\n\n const { dir } = useFluent();\n const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } =\n useEmblaCarousel({\n align,\n direction: dir,\n loop: circular,\n slidesToScroll: groupSize,\n defaultActiveIndex: props.defaultActiveIndex,\n activeIndex: props.activeIndex,\n watchDrag: draggable,\n containScroll: whitespace ? false : 'keepSnaps',\n motion,\n onDragIndexChange: onActiveIndexChange,\n onAutoplayIndexChange: onActiveIndexChange,\n autoplayInterval,\n });\n\n const selectPageByElement: CarouselContextValue['selectPageByElement'] = useEventCallback((event, element, jump) => {\n const foundIndex = carouselApi.scrollToElement(element, jump);\n onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });\n\n return foundIndex;\n });\n\n const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {\n carouselApi.scrollToIndex(index, jump);\n\n onActiveIndexChange?.(event, { event, type: 'click', index });\n });\n\n const selectPageByDirection: CarouselContextValue['selectPageByDirection'] = useEventCallback((event, direction) => {\n const nextPageIndex = carouselApi.scrollInDirection(direction);\n onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });\n\n return nextPageIndex;\n });\n\n const mergedContainerRef = useMergedRefs(ref, containerRef);\n\n // Announce carousel updates\n const announcementTextRef = React.useRef<string>('');\n const totalNavLength = React.useRef<number>(0);\n const navGroupRef = React.useRef<number[][]>([]);\n\n const { announce } = useAnnounce();\n\n const updateAnnouncement = useEventCallback(() => {\n if (totalNavLength.current <= 0 || !announcement) {\n // Ignore announcements until slides discovered\n return;\n }\n\n const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);\n\n if (announcementText !== announcementTextRef.current) {\n announcementTextRef.current = announcementText;\n announce(announcementText, { polite: true });\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // Subscribe to any non-index carousel state changes\n return subscribeForValues(data => {\n if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {\n const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);\n // Initialize our string to prevent updateAnnouncement from reading an initial load\n announcementTextRef.current = announcementText;\n }\n totalNavLength.current = data.navItemsCount;\n navGroupRef.current = data.groupIndexList;\n updateAnnouncement();\n });\n }, [subscribeForValues, updateAnnouncement, announcement]);\n\n useIsomorphicLayoutEffect(() => {\n updateAnnouncement();\n }, [activeIndex, updateAnnouncement]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: mergedContainerRef,\n role: 'region',\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n activeIndex,\n circular,\n containerRef: mergedContainerRef,\n viewportRef,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n };\n}\n"],"names":["useFluent_unstable","useFluent","getIntrinsicElementProps","slot","useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useEmblaCarousel","useAnnounce","useCarousel_unstable","props","ref","align","circular","onActiveIndexChange","groupSize","draggable","whitespace","announcement","motion","autoplayInterval","dir","activeIndex","carouselApi","containerRef","viewportRef","subscribeForValues","enableAutoplay","resetAutoplay","direction","loop","slidesToScroll","defaultActiveIndex","watchDrag","containScroll","onDragIndexChange","onAutoplayIndexChange","selectPageByElement","event","element","jump","foundIndex","scrollToElement","type","index","selectPageByIndex","scrollToIndex","selectPageByDirection","nextPageIndex","scrollInDirection","mergedContainerRef","announcementTextRef","useRef","totalNavLength","navGroupRef","announce","updateAnnouncement","current","announcementText","polite","data","navItemsCount","groupIndexList","components","root","always","role","elementType"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["'use client';\n\nimport * 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":["React","useCarouselContextValues_unstable","state","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","viewportRef","carousel","useMemo"],"mappings":"AAAA;;;;;+BAOgBC;;;;;;;iEALO,QAAQ;AAKxB,2CAA2CC,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,WAAWb,OAAMc,OAAO,CAC5B,IAAO,CAAA;YACLX;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QACET;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}
|