@fluentui/react-carousel 9.8.0 → 9.8.2
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 +34 -2
- package/lib/Carousel.js.map +1 -1
- package/lib/CarouselAutoplayButton.js.map +1 -1
- package/lib/CarouselButton.js.map +1 -1
- package/lib/CarouselCard.js.map +1 -1
- package/lib/CarouselContext.js.map +1 -1
- package/lib/CarouselNav.js.map +1 -1
- package/lib/CarouselNavButton.js.map +1 -1
- package/lib/CarouselNavContainer.js.map +1 -1
- package/lib/CarouselNavImageButton.js.map +1 -1
- package/lib/CarouselSlider.js.map +1 -1
- package/lib/CarouselViewport.js.map +1 -1
- package/lib/components/Carousel/Carousel.js.map +1 -1
- package/lib/components/Carousel/Carousel.types.js.map +1 -1
- package/lib/components/Carousel/index.js.map +1 -1
- package/lib/components/Carousel/renderCarousel.js.map +1 -1
- package/lib/components/Carousel/useCarousel.js.map +1 -1
- package/lib/components/Carousel/useCarouselContextValues.js.map +1 -1
- package/lib/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/index.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselButton/CarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/CarouselButton.types.js.map +1 -1
- package/lib/components/CarouselButton/index.js.map +1 -1
- package/lib/components/CarouselButton/renderCarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib/components/CarouselButton/useCarouselButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselCard/CarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/CarouselCard.types.js.map +1 -1
- package/lib/components/CarouselCard/index.js.map +1 -1
- package/lib/components/CarouselCard/renderCarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselContext.js.map +1 -1
- package/lib/components/CarouselContext.types.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNav.types.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNavContext.js.map +1 -1
- package/lib/components/CarouselNav/CarouselNavIndexContext.js.map +1 -1
- package/lib/components/CarouselNav/index.js.map +1 -1
- package/lib/components/CarouselNav/renderCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavButton/CarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/CarouselNavButton.types.js.map +1 -1
- package/lib/components/CarouselNavButton/index.js.map +1 -1
- package/lib/components/CarouselNavButton/renderCarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButton.js.map +1 -1
- package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavContainer/CarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
- package/lib/components/CarouselNavContainer/index.js.map +1 -1
- package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map +1 -1
- package/lib/components/CarouselNavImageButton/index.js.map +1 -1
- package/lib/components/CarouselNavImageButton/renderCarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js.map +1 -1
- package/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSlider.types.js.map +1 -1
- package/lib/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
- package/lib/components/CarouselSlider/index.js.map +1 -1
- package/lib/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/CarouselViewport.types.js.map +1 -1
- package/lib/components/CarouselViewport/index.js.map +1 -1
- package/lib/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
- package/lib/components/pointerEvents.js.map +1 -1
- package/lib/components/useEmblaCarousel.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Carousel.js.map +1 -1
- package/lib-commonjs/CarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/CarouselButton.js.map +1 -1
- package/lib-commonjs/CarouselCard.js.map +1 -1
- package/lib-commonjs/CarouselContext.js.map +1 -1
- package/lib-commonjs/CarouselNav.js.map +1 -1
- package/lib-commonjs/CarouselNavButton.js.map +1 -1
- package/lib-commonjs/CarouselNavContainer.js.map +1 -1
- package/lib-commonjs/CarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/CarouselSlider.js.map +1 -1
- package/lib-commonjs/CarouselViewport.js.map +1 -1
- package/lib-commonjs/components/Carousel/Carousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/Carousel.types.js.map +1 -1
- package/lib-commonjs/components/Carousel/index.js.map +1 -1
- package/lib-commonjs/components/Carousel/renderCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarousel.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselContextValues.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Carousel/useCarouselStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/CarouselAutoplayButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/index.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/renderCarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButton.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/CarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/CarouselButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/index.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/renderCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButton.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselButton/useCarouselButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/CarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/CarouselCard.types.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/index.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/renderCarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCard.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNav.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNavContext.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/CarouselNavIndexContext.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/index.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/renderCarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNav.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/CarouselNavButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/index.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/index.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/CarouselNavImageButton.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/index.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/renderCarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButton.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSlider.types.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/CarouselSliderContext.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/index.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/renderCarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSlider.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/CarouselViewport.types.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/index.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/renderCarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewport.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/pointerEvents.js.map +1 -1
- package/lib-commonjs/components/useEmblaCarousel.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavButtonClassNames = {\n root: 'fui-CarouselNavButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference'\n }\n }\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n opacity: 0.6\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`,\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px'\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 0.65\n }\n }\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1\n }\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1\n }\n }\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1\n },\n ':hover': {\n '::after': {\n opacity: 0.75\n }\n },\n ':active': {\n '::after': {\n opacity: 1\n }\n }\n }\n});\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */ export const useCarouselNavButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { selected, appearance } = state;\n state.root.className = mergeClasses(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","Bceei9c","Bkecrkj","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B7ck84d","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","Bsft5z2","ap17g6","li1rpt","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","Bjuhk93","B1q35kw","Bw17bha","Bcgy8vk","Du69r6","Gp14am","vfts7","Bhxzhr1","G63luc","s924m2","Barhvk9","Ihftqj","wywymt","B0n5ga8","Bm2nyyq","xrcqlc","e1d83w","Dlnsje","a2br6o","Bjyk6c5","go7t6h","qx5q1e","f7digc","Bfz3el7","rootUnselected","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byu6kyc","n8qw10","Bbjhlyh","i2cumq","Bunx835","Bdrgwmp","mqozju","lbo84a","Bksnhdo","Bci5o5g","u5e7qz","Bn40d3w","B7b6zxw","B8q5s1w","B5gfjzb","Bbcte9g","Bqz3imu","Bj9ihqo","Bl51kww","B3bvztg","Btyt4dx","Brhw1f9","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bp15pi3","Bay5ve9","Bni0232","rootSelected","brand","Glksuk","Blzl0y7","unselectedBrand","d","p","m","h","a","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
|
package/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference',\n },\n },\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n opacity: 0.6,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px',\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 0.65,\n },\n },\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1,\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1,\n },\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1,\n },\n },\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const { selected, appearance } = state;\n\n state.root.className = mergeClasses(\n carouselNavButtonClassNames.root,\n styles.root,\n selected ? styles.rootSelected : styles.rootUnselected,\n appearance === 'brand' && styles.brand,\n !selected && appearance === 'brand' && styles.unselectedBrand,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavButtonClassNames: SlotClassNames<CarouselNavButtonSlots> = {\n root: 'fui-CarouselNavButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n cursor: 'pointer',\n pointerEvents: 'all',\n width: tokens.spacingHorizontalS,\n height: tokens.spacingVerticalS,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxSizing: 'content-box',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderWidth(0),\n '::after': {\n content: '\"\"',\n display: 'block',\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: 'none',\n height: tokens.spacingVerticalS,\n width: tokens.spacingHorizontalS,\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralForeground1,\n '@media (forced-colors: active)': {\n // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)\n forcedColorAdjust: 'none',\n backgroundColor: 'white',\n mixBlendMode: 'difference',\n },\n },\n },\n rootUnselected: {\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n opacity: 0.6,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n rootSelected: {\n width: tokens.spacingHorizontalL,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,\n outline: `${tokens.strokeWidthThin} solid transparent`, // For high contrast\n ...createCustomFocusIndicatorStyle({\n border: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n margin: `calc(-1 * ${tokens.strokeWidthThick})`,\n borderRadius: tokens.borderRadiusMedium,\n }),\n '::after': {\n width: tokens.spacingHorizontalL,\n borderRadius: '4px',\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 0.65,\n },\n },\n },\n brand: {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackground,\n opacity: 1,\n },\n ':hover': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n opacity: 1,\n },\n },\n ':active': {\n '::after': {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n opacity: 1,\n },\n },\n },\n unselectedBrand: {\n '::after': {\n opacity: 0.6,\n backgroundColor: tokens.colorNeutralForeground1,\n },\n ':hover': {\n '::after': {\n opacity: 0.75,\n },\n },\n ':active': {\n '::after': {\n opacity: 1,\n },\n },\n },\n});\n\n/**\n * Apply styling to the CarouselNavButton slots based on the state\n */\nexport const useCarouselNavButtonStyles_unstable = (state: CarouselNavButtonState): CarouselNavButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n const { selected, appearance } = state;\n\n state.root.className = mergeClasses(\n carouselNavButtonClassNames.root,\n styles.root,\n selected ? styles.rootSelected : styles.rootUnselected,\n appearance === 'brand' && styles.brand,\n !selected && appearance === 'brand' && styles.unselectedBrand,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavButtonClassNames","root","useStyles","cursor","pointerEvents","width","spacingHorizontalS","height","spacingVerticalS","padding","boxSizing","backgroundColor","colorTransparentBackground","borderWidth","content","display","borderRadius","border","colorNeutralForeground1","color","forcedColorAdjust","mixBlendMode","rootUnselected","outline","strokeWidthThin","strokeWidthThick","colorStrokeFocus2","margin","borderRadiusMedium","opacity","rootSelected","spacingHorizontalL","spacingHorizontalXS","brand","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","unselectedBrand","useCarouselNavButtonStyles_unstable","state","styles","selected","appearance","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nimport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nimport { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';\nimport type { CarouselNavContainerProps } from './CarouselNavContainer.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls\n */\nexport const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNavContainer_unstable(props, ref);\n\n useCarouselNavContainerStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nimport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nimport { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';\nimport type { CarouselNavContainerProps } from './CarouselNavContainer.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls\n */\nexport const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNavContainer_unstable(props, ref);\n\n useCarouselNavContainerStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["React","useCarouselNavContainer_unstable","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCustomStyleHook_unstable","CarouselNavContainer","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;yCAEkB,4BAA4B;4CACzB,+BAA+B;qDAC5B,yCAAyC;qCAEpD,kCAAkC;AAKvE,6BAAMA,WAAAA,GAAuEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQR,6DAAAA,EAAiCM,OAAOC;QAEtDL,2EAAAA,EAAuCM;QACvCL,gDAAAA,EAA4B,0CAA0CK;IAEtE,WAAOP,+DAAAA,EAAoCO;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /**\n * Default: 'inline'\n * Defines the nav container layout:\n *\n * 'inline' - Default controls inline with carousel view\n *\n * inline-wide - Similar to inline but places nav buttons on far left/right\n *\n * 'overlay' - Controls overlaid on bottom of carousel viewport,\n *\n * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n *\n * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n */\n layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /**\n * Default: 'inline'\n * Defines the nav container layout:\n *\n * 'inline' - Default controls inline with carousel view\n *\n * inline-wide - Similar to inline but places nav buttons on far left/right\n *\n * 'overlay' - Controls overlaid on bottom of carousel viewport,\n *\n * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n *\n * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n */\n layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/index.ts"],"sourcesContent":["export { CarouselNavContainer } from './CarouselNavContainer';\nexport type {\n CarouselNavContainerProps,\n CarouselNavContainerSlots,\n CarouselNavContainerState,\n} from './CarouselNavContainer.types';\nexport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nexport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nexport {\n carouselNavContainerClassNames,\n useCarouselNavContainerStyles_unstable,\n} from './useCarouselNavContainerStyles.styles';\n"],"names":["CarouselNavContainer","
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/index.ts"],"sourcesContent":["export { CarouselNavContainer } from './CarouselNavContainer';\nexport type {\n CarouselNavContainerProps,\n CarouselNavContainerSlots,\n CarouselNavContainerState,\n} from './CarouselNavContainer.types';\nexport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nexport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nexport {\n carouselNavContainerClassNames,\n useCarouselNavContainerStyles_unstable,\n} from './useCarouselNavContainerStyles.styles';\n"],"names":["CarouselNavContainer","renderCarouselNavContainer_unstable","useCarouselNavContainer_unstable","carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0CAAoB;;;eAS3BG,mEAA8B;;;eAHvBF,+DAAmC;;;eAI1CG,2EAAsC;;;eAH/BF,yDAAgC;;;sCAPJ,yBAAyB;4CAMV,+BAA+B;yCAClC,4BAA4B;qDAItE,yCAAyC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n assertSlots<CarouselNavContainerSlots>(state);\n\n return (\n <state.root>\n {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n {state.autoplayTooltip && state.autoplay && (\n <state.autoplayTooltip>\n <state.autoplay />\n </state.autoplayTooltip>\n )}\n {!state.prevTooltip && state.prev && <state.prev />}\n {state.prevTooltip && state.prev && (\n <state.prevTooltip>\n <state.prev />\n </state.prevTooltip>\n )}\n {state.root.children}\n {!state.nextTooltip && state.next && <state.next />}\n {state.nextTooltip && state.next && (\n <state.nextTooltip>\n <state.next />\n </state.nextTooltip>\n )}\n </state.root>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n assertSlots<CarouselNavContainerSlots>(state);\n\n return (\n <state.root>\n {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n {state.autoplayTooltip && state.autoplay && (\n <state.autoplayTooltip>\n <state.autoplay />\n </state.autoplayTooltip>\n )}\n {!state.prevTooltip && state.prev && <state.prev />}\n {state.prevTooltip && state.prev && (\n <state.prevTooltip>\n <state.prev />\n </state.prevTooltip>\n )}\n {state.root.children}\n {!state.nextTooltip && state.next && <state.next />}\n {state.nextTooltip && state.next && (\n <state.nextTooltip>\n <state.next />\n </state.nextTooltip>\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplayTooltip","autoplay","prevTooltip","prev","children","nextTooltip","next"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,4CAA4C,CAACC;QAClDF,2BAAAA,EAAuCE;IAEvC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACR,CAACD,MAAME,eAAe,IAAIF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;YAC3DH,MAAME,eAAe,IAAIF,MAAMG,QAAQ,IAAA,WAAA,OACtC,eAAA,EAACH,MAAME,eAAe,EAAA;0BACpB,WAAA,OAAA,eAAA,EAACF,MAAMG,QAAQ,EAAA,CAAA;;YAGlB,CAACH,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;YAC/CL,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,IAAA,WAAA,OAC9B,eAAA,EAACL,MAAMI,WAAW,EAAA;0BAChB,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;YAGdL,MAAMC,IAAI,CAACK,QAAQ;YACnB,CAACN,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,IAAI,EAAA,CAAA;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,OAC9B,eAAA,EAACR,MAAMO,WAAW,EAAA;0BAChB,WAAA,OAAA,eAAA,EAACP,MAAMQ,IAAI,EAAA,CAAA;;;;AAKrB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"mappings":";;;;+BAgBaM;;;;;;;iEAhBU,QAAQ;gCACgB,4BAA4B;wCAEpC,mDAAmD;gCAC3D,mCAAmC;8BAC1C,0BAA0B;AAW3C,yCAAyC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX,8CAAAA;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN,8BAAAA;YACNY,MAAMZ,8BAAAA;YACNa,UAAUd,8CAAAA;YACVgB,aAAad,qBAAAA;YACbe,aAAaf,qBAAAA;YACba,iBAAiBb,qBAAAA;QACnB;QACAiB,MAAMpB,oBAAAA,CAAKqB,MAAM,CACftB,4CAAAA,EAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","mc9l5x","Beiy3e4","Brf1p80","a9b677","Bkecrkj","inline","B6of3ja","overlay","qhf8xq","B5kzvoi","B7ck84d","overlayWide","nextWide","Frg6f3","prevWide","t21cq0","nextOverlayWide","prevOverlayWide","autoplayOverlayWide","expanded","Bqenvij","Bt984gj","c7y7m3","yx0ijg","v4amzz","nextOverlayExpanded","j35jbq","Bhzewxz","Bz10aip","prevOverlayExpanded","oyh7mz","autoplayExpanded","jrapky","d","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */\n nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none',\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM,\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box',\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM,\n },\n nextWide: {\n marginLeft: 'auto',\n },\n prevWide: {\n marginRight: 'auto',\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM,\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0,\n },\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM,\n },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n 'use no memo';\n\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n carouselNavContainerClassNames.root,\n styles.root,\n isOverlay ? styles.overlay : styles.inline,\n isOverlay && isWide && styles.overlayWide,\n layout === 'overlay-expanded' && styles.expanded,\n state.root.className,\n );\n\n if (state.next) {\n state.next.className = mergeClasses(\n carouselNavContainerClassNames.next,\n styles.next,\n isWide && styles.nextWide,\n isWide && isOverlay && styles.nextOverlayWide,\n layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n state.next.className,\n );\n }\n if (state.prev) {\n state.prev.className = mergeClasses(\n carouselNavContainerClassNames.prev,\n styles.prev,\n isWide && styles.prevWide,\n !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n state.prev.className,\n );\n }\n\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(\n carouselNavContainerClassNames.autoplay,\n styles.autoplay,\n layout === 'overlay-expanded' && styles.autoplayExpanded,\n isWide && isOverlay && styles.autoplayOverlayWide,\n state.autoplay.className,\n );\n }\n\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerSlots, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavContainerClassNames: SlotClassNames<CarouselNavContainerSlots> = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n */\n nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none',\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM,\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box',\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM,\n },\n nextWide: {\n marginLeft: 'auto',\n },\n prevWide: {\n marginRight: 'auto',\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM,\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM,\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0,\n },\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)',\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM,\n },\n});\n\n/**\n * Apply styling to the CarouselNavContainer slots based on the state\n */\nexport const useCarouselNavContainerStyles_unstable = (state: CarouselNavContainerState): CarouselNavContainerState => {\n 'use no memo';\n\n const { layout } = state;\n const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' || layout === 'overlay-wide';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n carouselNavContainerClassNames.root,\n styles.root,\n isOverlay ? styles.overlay : styles.inline,\n isOverlay && isWide && styles.overlayWide,\n layout === 'overlay-expanded' && styles.expanded,\n state.root.className,\n );\n\n if (state.next) {\n state.next.className = mergeClasses(\n carouselNavContainerClassNames.next,\n styles.next,\n isWide && styles.nextWide,\n isWide && isOverlay && styles.nextOverlayWide,\n layout === 'overlay-expanded' && styles.nextOverlayExpanded,\n state.next.className,\n );\n }\n if (state.prev) {\n state.prev.className = mergeClasses(\n carouselNavContainerClassNames.prev,\n styles.prev,\n isWide && styles.prevWide,\n !state.autoplay && isWide && isOverlay && styles.prevOverlayWide,\n layout === 'overlay-expanded' && styles.prevOverlayExpanded,\n state.prev.className,\n );\n }\n\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(\n carouselNavContainerClassNames.autoplay,\n styles.autoplay,\n layout === 'overlay-expanded' && styles.autoplayExpanded,\n isWide && isOverlay && styles.autoplayOverlayWide,\n state.autoplay.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","display","flexDirection","justifyContent","width","pointerEvents","inline","marginTop","spacingVerticalM","overlay","position","bottom","boxSizing","overlayWide","nextWide","marginLeft","prevWide","marginRight","nextOverlayWide","spacingHorizontalM","prevOverlayWide","autoplayOverlayWide","expanded","height","alignItems","spacingVerticalL","marginBottom","nextOverlayExpanded","right","top","transform","prevOverlayExpanded","left","autoplayExpanded","spacingHorizontalXS","useCarouselNavContainerStyles_unstable","state","layout","isOverlay","isWide","styles","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["import * 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["import * 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":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;2CAEoB,8BAA8B;8CAC3B,iCAAiC;uDAC9B,2CAA2C;qCAExD,kCAAkC;AAMvE,+BAAMA,WAAAA,GAA2EL,OAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQR,iEAAAA,EAAmCM,OAAOC;QAExDL,+EAAAA,EAAyCM;QACzCL,gDAAAA,EAA4B,4CAA4CK;IAExE,WAAOP,mEAAAA,EAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Required: The image within the button\n */\n image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n};\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n /**\n * ARIA compliant nav buttons used to jump to pages\n */\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Required: The image within the button\n */\n image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n /**\n * Enables selection state control\n */\n selected?: boolean;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAKE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/index.ts"],"sourcesContent":["export { CarouselNavImageButton } from './CarouselNavImageButton';\nexport type {\n CarouselNavImageButtonProps,\n CarouselNavImageButtonSlots,\n CarouselNavImageButtonState,\n} from './CarouselNavImageButton.types';\nexport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nexport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nexport {\n carouselNavImageButtonClassNames,\n useCarouselNavImageButtonStyles_unstable,\n} from './useCarouselNavImageButtonStyles.styles';\n"],"names":["CarouselNavImageButton","
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/index.ts"],"sourcesContent":["export { CarouselNavImageButton } from './CarouselNavImageButton';\nexport type {\n CarouselNavImageButtonProps,\n CarouselNavImageButtonSlots,\n CarouselNavImageButtonState,\n} from './CarouselNavImageButton.types';\nexport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nexport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nexport {\n carouselNavImageButtonClassNames,\n useCarouselNavImageButtonStyles_unstable,\n} from './useCarouselNavImageButtonStyles.styles';\n"],"names":["CarouselNavImageButton","renderCarouselNavImageButton_unstable","useCarouselNavImageButton_unstable","carouselNavImageButtonClassNames","useCarouselNavImageButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8CAAsB;;;eAS7BG,uEAAgC;;;eAHzBF,mEAAqC;;;eAI5CG,+EAAwC;;;eAHjCF,6DAAkC;;;wCAPJ,2BAA2B;8CAMZ,iCAAiC;2CACpC,8BAA8B;uDAI1E,2CAA2C"}
|
|
@@ -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":["
|
|
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":";;;;+BASaC;;;;;;4BARb,gDAAiD;gCAErB,4BAA4B;AAMjD,8CAA8C,CAACC;QACpDF,2BAAAA,EAAyCE;IAEzC,OAAA,WAAA,GACE,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;;AAGlB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["import { 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>();\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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButton.ts"],"sourcesContent":["import { 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>();\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","_carouselButton","always","elementType","defaultProps","role","type","data","controlList","groupIndexList","_controlledSlideIds","map","slideIndex","slideNodes","id","join","current","setAttribute","image","alt","components","root"],"mappings":";;;;+BAyBaY;;;;;;;2BAzBwE,uBAAuB;gCAQrG,4BAA4B;8BACE,0BAA0B;iEACxC,QAAQ;yCAEY,yCAAyC;iCAClB,qBAAqB;AAYhF,2CAA2C,CAChDC,OACAC;IAEA,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,EAAE,GAAGH;IAEnC,MAAMI,YAAQR,mDAAAA;IACd,MAAMS,wBAAoBP,4CAAAA,EAAmBQ,CAAAA,MAAOA,IAAID,iBAAiB;IACzE,MAAME,eAAWT,4CAAAA,EAAmBQ,CAAAA,MAAOA,IAAIE,WAAW,KAAKJ;IAC/D,MAAMK,yBAAqBX,4CAAAA,EAAmBQ,CAAAA,MAAOA,IAAIG,kBAAkB;IAE3E,MAAMC,kBAA8CnB,gCAAAA,EAAiBoB,CAAAA;QACnET,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUS;QAEV,IAAI,CAACA,MAAMC,gBAAgB,QAAIvB,6BAAAA,EAAcsB,MAAME,MAAM,GAAG;YAC1DR,kBAAkBM,OAAOP;QAC3B;IACF;IAEA,MAAMU,sBAAkBpB,kCAAAA,EAAqB;QAC3CqB,WAAW;YAAEC,WAAWT;QAAS;IACnC;IAEA,MAAMU,YAAYtB,OAAMuB,MAAM;IAC9B,MAAMC,kBAAkB7B,oBAAAA,CAAK8B,MAAM,KACjChC,wCAAAA,EAAyBe,QAAIhB,6BAAAA,EAAmBa,MAAMG,EAAE,EAAEH,SAC1D;QACEqB,aAAa;QACbC,cAAc;YACZrB,SAAKR,6BAAAA,EAAcQ,KAAKgB;YACxBM,MAAM;YACNC,MAAM;YACN,iBAAiBjB;YACjB,GAAGO,eAAe;QACpB;IACF;QAGFtB,yCAAAA,EAA0B;QACxB,OAAOiB,mBAAmBgB,CAAAA;gBACJA;gBAAAA;YAApB,MAAMC,cAAcD,CAAAA,6BAAAA,CAAAA,uBAAAA,KAAKE,cAAAA,AAAc,MAAA,QAAnBF,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAqB,CAACrB,MAAAA,AAAM,MAAA,QAA5BqB,+BAAAA,KAAAA,IAAAA,6BAAgC,EAAE;YACtD,MAAMG,sBAAsBF,YACzBG,GAAG,CAAC,CAACC;gBACJ,OAAOL,KAAKM,UAAU,CAACD,WAAW,CAACE,EAAE;YACvC,GACCC,IAAI,CAAC;YACR,IAAIhB,UAAUiB,OAAO,EAAE;gBACrBjB,UAAUiB,OAAO,CAACC,YAAY,CAAC,iBAAiBP;YAClD;QACF;IACF,GAAG;QAACnB;QAAoBL;KAAM;IAE9B,mBAAmB;IACnBe,gBAAgBjB,OAAO,GAAGQ;IAE1B,MAAM0B,QAAQ9C,oBAAAA,CAAK8B,MAAM,KACvBhC,wCAAAA,EAAyB,OAAO;QAC9B,eAAe;QACfiD,KAAK;QACLd,MAAM;QACN,GAAGvB,MAAMoC,KAAK;IAChB,IACA;QAAEf,aAAa;IAAM;IAGvB,OAAO;QACLiB,YAAY;YACVC,MAAM;YACNH,OAAO;QACT;QACAG,MAAMpB;QACNiB;QACA7B;IACF;AACF,EAAE"}
|
package/lib-commonjs/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["import { 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"],"names":["
|
|
1
|
+
{"version":3,"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["import { 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"],"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"],"mappings":";;;;;;;;;;;IAEaI,gCAAgC;;;4CAkCY;;;;uBApCJ,gBAAgB;AAE9D,yCAAyC;IAC5CC,IAAI,EAAE,4BAA4B;IAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA7B,KAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAuBrB,CAAC;AAGS,MAAMC,4CAA4CC,KAAK,IAAG;IACjE,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;IAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;IAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;QACb,IAAIsC,YAAY;QAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,OAAG1C,mBAAY,EAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAAA,AAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;IAC/N;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["import { 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;IAKaI,gCAAAA;;;4CAuCAmB;eAAAA;;;uBA5CwC,iBAAiB;4BAG/C,wBAAwB;AAExC,yCAAsF;IAC3FlB,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,kBAAAA,CAAOU,mBAAmB,EAAE;QACzC,GAAGX,iBAAAA,CAAWY,WAAW,CAACX,kBAAAA,CAAOY,sBAAsB,CAAC;QACxDC,cAAcb,kBAAAA,CAAOc,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,kBAAAA,CAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAKO,iDAAiD,CACtDgB;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEfe,MAAMnB,IAAI,CAACqB,SAAS,OAAGzB,mBAAAA,EACrBG,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,OAAGzB,mBAAAA,EACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,EAAA,CAC3BE,eAAAA,MAAMlB,KAAAA,AAAK,MAAA,QAAXkB,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["import * 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["import * 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":";;;;+BAaaM;;;;;;;iEAbU,QAAQ;mCAGY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;uCAE5B,0BAA0B;qCACtC,kCAAkC;AAKvE,uBAAMA,WAAAA,GAA2DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQT,6CAAAA,EAA2BO,OAAOC;QAEhDN,+DAAAA,EAAiCO;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,MAAMC,cAAUP,8DAAAA,EAAwCM;IACxD,WAAOR,mDAAAA,EAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /**\n * The root viewport/window of the carousel\n */\n root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /**\n * cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n *\n * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n *\n * Defaults: false\n */\n cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /**\n * The root viewport/window of the carousel\n */\n root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /**\n * cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n *\n * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n *\n * Defaults: false\n */\n cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WAAmG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["import * 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 = () =>\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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["import * 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 = () =>\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":";;;;;;;;;;;iCAYaQ;;;qCAPAJ;;;4BAIAE;;;2CAYGI;;;;;iEArBO,QAAQ;AAG/B,MAAMT,sCAAwBD,OAAME,aAAa,CAAyCC;AAEnF,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEK,MAAMC,2BAA2B;QACtCN;WAAAA,qBAAAA,OAAMO,UAAU,CAACN,sBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA2CI;EAAkC;AAExE,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AASrE,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,OAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;SACF,CAAA,EACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/index.ts"],"sourcesContent":["export { CarouselSlider } from './CarouselSlider';\nexport type {\n CarouselSliderContextValue,\n CarouselSliderProps,\n CarouselSliderSlots,\n CarouselSliderState,\n} from './CarouselSlider.types';\nexport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nexport { useCarouselSlider_unstable } from './useCarouselSlider';\nexport { carouselSliderClassNames, useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\n"],"names":["CarouselSlider","
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/index.ts"],"sourcesContent":["export { CarouselSlider } from './CarouselSlider';\nexport type {\n CarouselSliderContextValue,\n CarouselSliderProps,\n CarouselSliderSlots,\n CarouselSliderState,\n} from './CarouselSlider.types';\nexport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nexport { useCarouselSlider_unstable } from './useCarouselSlider';\nexport { carouselSliderClassNames, useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\n"],"names":["CarouselSlider","renderCarouselSlider_unstable","useCarouselSlider_unstable","carouselSliderClassNames","useCarouselSliderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eASdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCARJ,mBAAmB;sCAOJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}
|
|
@@ -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":["
|
|
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":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;uCAEmB,0BAA0B;AAK9F,sCAAsC,CAC3CC,OACAC;QAEAJ,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,eAAA,EAACF,oDAAAA,EAAAA;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["import { 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["import { 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":";;;;+BAgBaM;;;;;;;gCAhBkC,4BAA4B;iEACpD,QAAQ;8BAGS,0BAA0B;iCACA,qBAAqB;AAWhF,mCAAmC,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,gDAAAA,EAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,yBAAqBT,qCAAAA,EAAwB;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,oBAAAA,CAAKkB,MAAM,KACfnB,wCAAAA,EAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["import { 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"],"names":["
|
|
1
|
+
{"version":3,"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["import { 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"],"names":["__styles","mergeClasses","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","d","useCarouselSliderStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IACaE,wBAAwB;;;oCAaY;;;;uBAdR,gBAAgB;AAClD,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGJ,mBAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,wBAAwB,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACrG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSliderStyles.styles.ts"],"sourcesContent":["import { 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSliderStyles.styles.ts"],"sourcesContent":["import { 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":";;;;;;;;;;;IAKaE,wBAAAA;;;oCAiBAK;eAAAA;;;uBAtB4B,iBAAiB;AAKnD,iCAAsE;IAC3EJ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,gBAAgB;IAClB;AACF;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EAAaC,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":["import * 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.tsx"],"sourcesContent":["import * 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":";;;;+BAYaM;;;;;;;iEAZU,QAAQ;qCAEc,wBAAwB;wCACrB,2BAA2B;iDACxB,qCAAqC;uCAEhC,0CAA0C;qCACtD,kCAAkC;AAKvE,yBAAMA,WAAAA,GAA+DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,YAAQT,iDAAAA,EAA6BO,OAAOC;QAElDN,mEAAAA,EAAmCO;QACnCL,gDAAAA,EAA4B,sCAAsCK;IAElE,MAAMC,cAAUP,8DAAAA,EAAwCM;IAExD,WAAOR,uDAAAA,EAAgCQ,OAAOC;AAChD,GAAG;AAEHL,iBAAiBM,WAAW,GAAG"}
|