npm - @fluentui/react-carousel - Versions diffs - 9.9.7 → 9.9.8 - Mend

@fluentui/react-carousel 9.9.7 → 9.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,24 +1,39 @@
 # Change Log - @fluentui/react-carousel
-This log was last generated on Thu, 23 Apr 2026 11:59:41 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:10 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.9.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.9.8)
+Tue, 26 May 2026 09:34:10 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.9.7..@fluentui/react-carousel_v9.9.8)
+### Patches
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-button to v9.9.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.9.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.9.7)
-Thu, 23 Apr 2026 11:59:41 GMT
+Thu, 23 Apr 2026 14:21:04 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.9.6..@fluentui/react-carousel_v9.9.7)
 ### Patches
 - perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
-- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-button to v9.9.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tooltip to v9.10.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-button to v9.9.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ## [9.9.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.9.6)

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

@@ -43,6 +43,7 @@ export const useCarouselStyles_unstable = state => {
   const {
     appearance
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","carouselClassNames","root","useStyles","B68tc82","Eiaeu8","qhf8xq","elevated","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useCarouselStyles_unstable","state","styles","appearance","className"],"sources":["useCarouselStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselClassNames = {\n root: 'fui-Carousel'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative'\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL\n }\n});\n/\n Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance } = state;\n state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEoB;EAAW,CAAC,GAAGF,KAAK;~~EAC5BA~~,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAGzB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,UAAU,KAAK,UAAU,IAAID,MAAM,CAACf,QAAQ,EAAEc,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC7I,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","carouselClassNames","root","useStyles","B68tc82","Eiaeu8","qhf8xq","elevated","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useCarouselStyles_unstable","state","styles","appearance","className"],"sources":["useCarouselStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselClassNames = {\n root: 'fui-Carousel'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative'\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL\n }\n});\n/\n Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEoB;EAAW,CAAC,GAAGF,KAAK;EAC5B;EACAA,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAGzB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,UAAU,KAAK,UAAU,IAAID,MAAM,CAACf,QAAQ,EAAEc,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC7I,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Carousel/useCarouselStyles.styles.raw.js CHANGED Viewed

@@ -26,6 +26,7 @@ export const carouselClassNames = {
     'use no memo';
     const styles = useStyles();
     const { appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
     return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Carousel/useCarouselStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { CarouselSlots, CarouselState } from './Carousel.types';\n\nexport const carouselClassNames: SlotClassNames<CarouselSlots> = {\n root: 'fui-Carousel',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative',\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL,\n },\n});\n\n/\n Apply styling to the Carousel slots based on the state\n */\nexport const useCarouselStyles_unstable = (state: CarouselState): CarouselState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance } = state;\n\n state.root.className = mergeClasses(\n carouselClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselClassNames","root","useStyles","overflowX","overflowAnchor","position","elevated","margin","spacingVerticalL","padding","useCarouselStyles_unstable","state","styles","appearance","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJ,kFAAkF;QAClFE,WAAW;QACXC,gBAAgB;QAChBC,UAAU;IACZ;IACAC,UAAU;QACR,+DAA+D;QAC/D,iEAAiE;QACjEC,QAAQR,OAAOS,gBAAgB;QAC/BC,SAASV,OAAOS,gBAAgB;IAClC;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,UAAU,EAAE,GAAGF;~~IAEvBA~~,MAAMV,IAAI,CAACa,SAAS,GAAGhB,aACrBE,mBAAmBC,IAAI,EACvBW,OAAOX,IAAI,EACXY,eAAe,cAAcD,OAAON,QAAQ,EAC5CK,MAAMV,IAAI,CAACa,SAAS;IAEtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Carousel/useCarouselStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { CarouselSlots, CarouselState } from './Carousel.types';\n\nexport const carouselClassNames: SlotClassNames<CarouselSlots> = {\n root: 'fui-Carousel',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative',\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL,\n },\n});\n\n/\n Apply styling to the Carousel slots based on the state\n */\nexport const useCarouselStyles_unstable = (state: CarouselState): CarouselState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselClassNames","root","useStyles","overflowX","overflowAnchor","position","elevated","margin","spacingVerticalL","padding","useCarouselStyles_unstable","state","styles","appearance","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJ,kFAAkF;QAClFE,WAAW;QACXC,gBAAgB;QAChBC,UAAU;IACZ;IACAC,UAAU;QACR,+DAA+D;QAC/D,iEAAiE;QACjEC,QAAQR,OAAOS,gBAAgB;QAC/BC,SAASV,OAAOS,gBAAgB;IAClC;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,UAAU,EAAE,GAAGF;IAEvB,oDAAoD;IACpDA,MAAMV,IAAI,CAACa,SAAS,GAAGhB,aACrBE,mBAAmBC,IAAI,EACvBW,OAAOX,IAAI,EACXY,eAAe,cAAcD,OAAON,QAAQ,EAC5CK,MAAMV,IAAI,CAACa,SAAS;IAEtB,OAAOH;AACT,EAAE"}

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

@@ -35,8 +35,10 @@ export const useCarouselAutoplayButtonStyles_unstable = state => {
   const styles = useStyles();
   useToggleButtonStyles_unstable(state);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);
   }
   return state;

package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","Bkecrkj","B6of3ja","jrapky","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","De3pzq","eoavqd","d","h","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"sources":["useCarouselAutoplayButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselAutoplayButtonClassNames = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer'\n }\n }\n});\n/\n Apply styling to the CarouselAutoplayButton slots based on the state\n */ export const useCarouselAutoplayButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n useToggleButtonStyles_unstable(state);\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BL,8BAA8B,CAACmB,KAAK,CAAC;~~EACrCA~~,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,gCAAgC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC7G,IAAIF,KAAK,CAACf,IAAI,EAAE;~~IACZe~~,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGvB,YAAY,CAACI,gCAAgC,CAACE,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACpG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","Bkecrkj","B6of3ja","jrapky","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","De3pzq","eoavqd","d","h","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"sources":["useCarouselAutoplayButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselAutoplayButtonClassNames = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer'\n }\n }\n});\n/\n Apply styling to the CarouselAutoplayButton slots based on the state\n */ export const useCarouselAutoplayButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n useToggleButtonStyles_unstable(state);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAM,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BL,8BAA8B,CAACmB,KAAK,CAAC;EACrC;EACAA,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,gCAAgC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC7G,IAAIF,KAAK,CAACf,IAAI,EAAE;IACZ;IACAe,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGvB,YAAY,CAACI,gCAAgC,CAACE,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EACpG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js CHANGED Viewed

@@ -27,8 +27,10 @@ export const carouselAutoplayButtonClassNames = {
     'use no memo';
     const styles = useStyles();
     useToggleButtonStyles_unstable(state);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);
     }
     return state;

package/lib/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonSlots, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselAutoplayButtonClassNames: SlotClassNames<CarouselAutoplayButtonSlots> = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer',\n },\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/\n Apply styling to the CarouselAutoplayButton slots based on the state\n */\nexport const useCarouselAutoplayButtonStyles_unstable = (\n state: CarouselAutoplayButtonState,\n): CarouselAutoplayButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n useToggleButtonStyles_unstable(state);\n\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","pointerEvents","marginTop","marginBottom","borderColor","colorTransparentStroke","color","colorNeutralForeground2","backgroundColor","colorNeutralBackgroundAlpha","cursor","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BM,MAAM;QACJG,eAAe;QACfC,WAAW;QACXC,cAAc;QACd,GAAGT,WAAWU,WAAW,CAACR,OAAOS,sBAAsB,CAAC;QACxDC,OAAOV,OAAOW,uBAAuB;QACrCC,iBAAiBZ,OAAOa,2BAA2B;QACnD,UAAU;YACRC,QAAQ;QACV;IACF;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASb;IAEfL,+BAA+BiB;IAE/BA,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,iCAAiCC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAE5G,IAAIF,MAAMb,IAAI,EAAE;~~QACda~~,MAAMb,IAAI,CAACe,SAAS,GAAGrB,aAAaI,iCAAiCE,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACjG;IAEA,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonSlots, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselAutoplayButtonClassNames: SlotClassNames<CarouselAutoplayButtonSlots> = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer',\n },\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/\n Apply styling to the CarouselAutoplayButton slots based on the state\n */\nexport const useCarouselAutoplayButtonStyles_unstable = (\n state: CarouselAutoplayButtonState,\n): CarouselAutoplayButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n useToggleButtonStyles_unstable(state);\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","pointerEvents","marginTop","marginBottom","borderColor","colorTransparentStroke","color","colorNeutralForeground2","backgroundColor","colorNeutralBackgroundAlpha","cursor","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BM,MAAM;QACJG,eAAe;QACfC,WAAW;QACXC,cAAc;QACd,GAAGT,WAAWU,WAAW,CAACR,OAAOS,sBAAsB,CAAC;QACxDC,OAAOV,OAAOW,uBAAuB;QACrCC,iBAAiBZ,OAAOa,2BAA2B;QACnD,UAAU;YACRC,QAAQ;QACV;IACF;AAGF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASb;IAEfL,+BAA+BiB;IAE/B,oDAAoD;IACpDA,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,iCAAiCC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAE5G,IAAIF,MAAMb,IAAI,EAAE;QACd,oDAAoD;QACpDa,MAAMb,IAAI,CAACe,SAAS,GAAGrB,aAAaI,iCAAiCE,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACjG;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/CarouselButton/useCarouselButton.js CHANGED Viewed

@@ -86,6 +86,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
             'aria-disabled': isTrailing,
             appearance: 'subtle',
             ...buttonProps,
+            // eslint-disable-next-line react-hooks/refs
             onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick))
         }, useMergedRefs(ref, buttonRef))
     };

package/lib/components/CarouselButton/useCarouselButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render CarouselButton.\n \n The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n \n @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next', ...buttonProps } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>(undefined);\n const circular = useCarouselContext(ctx => ctx.circular);\n const [canLoop, setCanLoop] = React.useState(circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular && canLoop) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n if (data.canLoop !== undefined) {\n // Only update canLoop if it has been defined by the carousel engine\n setCanLoop(data.canLoop);\n }\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...buttonProps,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","buttonProps","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","undefined","circular","ctx","canLoop","setCanLoop","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"mappings":"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~~YACd2C~~,SAASzD,iBAAiBD,eAAeiC,aAAarB,MAAM8C,OAAO;QACrE,GACAtD,cAAcS,KAAKO,WACpB;IACH;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselButton/useCarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport { type ARIAButtonElement } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\nimport {\n mergeCallbacks,\n useEventCallback,\n slot,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselButtonProps, CarouselButtonState } from './CarouselButton.types';\nimport type { CarouselUpdateData } from '../Carousel/Carousel.types';\nimport { carouselButtonClassNames } from './useCarouselButtonStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render CarouselButton.\n \n The returned state can be modified with hooks such as useCarouselButtonStyles_unstable,\n * before being passed to renderCarouselButton_unstable.\n \n @param props - props from this instance of CarouselButton\n * @param ref - reference to root HTMLDivElement of CarouselButton\n */\nexport const useCarouselButton_unstable = (\n props: CarouselButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselButtonState => {\n const { navType = 'next', ...buttonProps } = props;\n\n // Locally tracks the total number of slides, will only update if this changes.\n const [totalSlides, setTotalSlides] = React.useState(0);\n\n const { dir } = useFluent();\n const buttonRef = React.useRef<HTMLButtonElement>(undefined);\n const circular = useCarouselContext(ctx => ctx.circular);\n const [canLoop, setCanLoop] = React.useState(circular);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const selectPageByDirection = useCarouselContext(ctx => ctx.selectPageByDirection);\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n const resetAutoplay = useCarouselContext(ctx => ctx.resetAutoplay);\n\n const isTrailing = useCarouselContext(ctx => {\n if (circular && canLoop) {\n return false;\n }\n\n if (navType === 'prev') {\n return ctx.activeIndex === 0;\n }\n\n return ctx.activeIndex === totalSlides - 1;\n });\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const nextIndex = selectPageByDirection(event, navType);\n\n let _trailing = false;\n if (navType === 'prev') {\n _trailing = nextIndex === 0;\n } else {\n _trailing = nextIndex === totalSlides - 1;\n }\n\n if (!circular && _trailing && containerRef?.current) {\n // Focus non-disabled element\n const buttonRefs: NodeListOf<HTMLButtonElement> = containerRef.current.querySelectorAll(\n `.${carouselButtonClassNames.root}`,\n );\n buttonRefs.forEach(_buttonRef => {\n if (_buttonRef !== buttonRef.current) {\n _buttonRef.focus();\n }\n });\n }\n\n resetAutoplay();\n };\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues((data: CarouselUpdateData) => {\n if (data.canLoop !== undefined) {\n // Only update canLoop if it has been defined by the carousel engine\n setCanLoop(data.canLoop);\n }\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues]);\n\n const nextArrowIcon = dir === 'ltr' ? <ChevronRightRegular /> : <ChevronLeftRegular />;\n const prevArrowIcon = dir === 'ltr' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n\n return {\n navType,\n // We lean on react-button class to handle styling and icon enhancements\n ...useButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: navType === 'next' ? nextArrowIcon : prevArrowIcon,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n disabled: isTrailing,\n tabIndex: isTrailing ? -1 : 0,\n 'aria-disabled': isTrailing,\n appearance: 'subtle',\n ...buttonProps,\n // eslint-disable-next-line react-hooks/refs\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useButton_unstable","ChevronLeftRegular","ChevronRightRegular","mergeCallbacks","useEventCallback","slot","useIsomorphicLayoutEffect","useMergedRefs","React","useCarouselContext_unstable","useCarouselContext","carouselButtonClassNames","useFluent_unstable","useFluent","useCarouselButton_unstable","props","ref","navType","buttonProps","totalSlides","setTotalSlides","useState","dir","buttonRef","useRef","undefined","circular","ctx","canLoop","setCanLoop","containerRef","selectPageByDirection","subscribeForValues","resetAutoplay","isTrailing","activeIndex","handleClick","event","isDefaultPrevented","nextIndex","_trailing","current","buttonRefs","querySelectorAll","root","forEach","_buttonRef","focus","data","navItemsCount","nextArrowIcon","prevArrowIcon","icon","optional","defaultProps","children","renderByDefault","elementType","disabled","tabIndex","appearance","onClick"],"mappings":"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"}

package/lib/components/CarouselCard/useCarouselCard.js CHANGED Viewed

@@ -73,8 +73,11 @@ import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContex
             isMouseEvent.current = false;
         }
     };
+    // eslint-disable-next-line react-hooks/refs
     const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);
+    // eslint-disable-next-line react-hooks/refs
     const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);
+    // eslint-disable-next-line react-hooks/refs
     const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);
     const state = {
         autoSize,

package/lib/components/CarouselCard/useCarouselCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselCard/useCarouselCard.ts"],"sourcesContent":["'use client';\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/*\n Create the state required to render CarouselCard.\n \n The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n \n @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n // We want to prevent any browser scroll intervention for 'offscreen' focus\n containerRef?.current?.scrollTo(0, 0);\n selectPageByElement(e, e.currentTarget, false);\n }\n // Mouse focus event has been consumed\n isMouseEvent.current = false;\n },\n [selectPageByElement, containerRef],\n );\n\n const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n\n const handlePointerUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);\n const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);\n const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);\n\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onPointerUp,\n onPointerDown,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","containerRef","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocus","useCallback","e","defaultPrevented","currentTarget","scrollTo","handlePointerDown","handlePointerUp","onFocusCapture","onPointerUp","onPointerDown","state","components","always","role","undefined","elementType"],"mappings":"AAAA;AAEA,SAASA,iBAAiB,QAAQ,0BAA0B;AAC5D,SACEC,wBAAwB,EACxBC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,aAAa,EACbC,KAAK,QACA,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,SAASC,sBAAsB,QAAQ,iCAAiC;AACxE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGF;IACrB,MAAMG,aAAaV,MAAMW,MAAM,CAAiB;IAChD,MAAMC,eAAeZ,MAAMW,MAAM,CAAU;IAC3C,MAAME,sBAAsBX,mBAAmBY,CAAAA,MAAOA,IAAID,mBAAmB;IAC7E,MAAME,eAAeb,mBAAmBY,CAAAA,MAAOA,IAAIC,YAAY;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGX;IAEtB,MAAMY,YAAYxB,kBAAkB;QAClCyB,aAAa;IACf;IACA,MAAMC,iBAAiBH,YAAY;QAAE,GAAGC,SAAS;QAAEG,UAAU;IAAE,IAAI,CAAC;IAEpE,sDAAsD;IACtD,MAAMC,KAAKtB,MAAMK,uBAAuBkB,IAAI,EAAEf,MAAMc,EAAE;IAEtDrB,MAAMuB,SAAS,CAAC;QACd,MAAMC,UAAUd,WAAWe,OAAO;QAElC,IAAID,SAAS;YACX,MAAME,WAAW,CAACC;gBAChB,MAAMC,QAAQD;gBACd,4FAA4F;gBAC5F,IAAI,CAACX,WAAW;oBACd,MAAMa,SAAS,CAACD,MAAME,MAAM,CAACC,SAAS;oBACtCP,QAAQQ,UAAU,GAAGH,OAAOI,QAAQ;oBACpCT,QAAQU,KAAK,GAAGL;gBAClB;YACF;YAEAL,QAAQW,gBAAgB,CAAChC,wBAAwBuB;YAEjD,OAAO;gBACLF,QAAQY,mBAAmB,CAACjC,wBAAwBuB;YACtD;QACF;IACF,GAAG;QAACV;KAAU;IAEd,MAAMqB,cAAcrC,MAAMsC,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,EAAEC,gBAAgB,IAAI7C,cAAc4C,EAAEE,aAAa,KAAK,CAAC7B,aAAaa,OAAO,EAAE;gBAClF,2EAA2E;YAC3EV;YAAAA,yBAAAA,oCAAAA,wBAAAA,aAAcU,OAAO,cAArBV,4CAAAA,sBAAuB2B,QAAQ,CAAC,GAAG;YACnC7B,oBAAoB0B,GAAGA,EAAEE,aAAa,EAAE;QAC1C;QACA,sCAAsC;QACtC7B,aAAaa,OAAO,GAAG;IACzB,GACA;QAACZ;QAAqBE;KAAa;IAGrC,MAAM4B,oBAAoB,CAACJ;QACzB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;YACvB5B,aAAaa,OAAO,GAAG;QACzB;IACF;IAEA,MAAMmB,kBAAkB,CAACL;QACvB,IAAI,CAACA,EAAEC,gBAAgB,EAAE;YACvB5B,aAAaa,OAAO,GAAG;QACzB;IACF;IAEA,MAAMoB,iBAAiBjD,eAAeW,MAAMsC,cAAc,EAAER;IAC5D,MAAMS,cAAclD,eAAeW,MAAMuC,WAAW,EAAEF;IACtD,MAAMG,gBAAgBnD,eAAeW,MAAMwC,aAAa,EAAEJ;IAE1D,MAAMK,QAA2B;QAC/BvC;QACAwC,YAAY;YACV3B,MAAM;QACR;QACAA,MAAMzB,KAAKqD,MAAM,CACfxD,yBAAyB,OAAO;YAC9Bc,KAAKV,cAAcY,YAAYF;YAC/B2C,MAAM;YACN/B,UAAUJ,YAAY,IAAIoC;YAC1B,GAAG7C,KAAK;YACRc;YACAwB;YACAC;YACAC;YACA,GAAG5B,cAAc;QACnB,IACA;YAAEkC,aAAa;QAAM;IAEzB;IAEA,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselCard/useCarouselCard.ts"],"sourcesContent":["'use client';\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useMergedRefs,\n useId,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselVisibilityChangeEvent } from '../Carousel/Carousel.types';\nimport { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';\nimport type { CarouselCardProps, CarouselCardState } from './CarouselCard.types';\nimport { carouselCardClassNames } from './useCarouselCardStyles.styles';\nimport { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';\n\n/*\n Create the state required to render CarouselCard.\n \n The returned state can be modified with hooks such as useCarouselCardStyles_unstable,\n * before being passed to renderCarouselCard_unstable.\n \n @param props - props from this instance of CarouselCard\n * @param ref - reference to root HTMLDivElement of CarouselCard\n */\nexport const useCarouselCard_unstable = (\n props: CarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselCardState => {\n const { autoSize } = props;\n const elementRef = React.useRef<HTMLDivElement>(null);\n const isMouseEvent = React.useRef<boolean>(false);\n const selectPageByElement = useCarouselContext(ctx => ctx.selectPageByElement);\n const containerRef = useCarouselContext(ctx => ctx.containerRef);\n const { cardFocus } = useCarouselSliderContext();\n\n const focusAttr = useFocusableGroup({\n tabBehavior: 'limited',\n });\n const focusAttrProps = cardFocus ? { ...focusAttr, tabIndex: 0 } : {};\n\n // We attach a unique card id if user does not provide\n const id = useId(carouselCardClassNames.root, props.id);\n\n React.useEffect(() => {\n const element = elementRef.current;\n\n if (element) {\n const listener = (_e: Event) => {\n const event = _e as CarouselVisibilityChangeEvent;\n // When there is no tab index present, only current cards should be visible to accessibility\n if (!cardFocus) {\n const hidden = !event.detail.isVisible;\n element.ariaHidden = hidden.toString();\n element.inert = hidden;\n }\n };\n\n element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);\n\n return () => {\n element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);\n };\n }\n }, [cardFocus]);\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\n if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {\n // We want to prevent any browser scroll intervention for 'offscreen' focus\n containerRef?.current?.scrollTo(0, 0);\n selectPageByElement(e, e.currentTarget, false);\n }\n // Mouse focus event has been consumed\n isMouseEvent.current = false;\n },\n [selectPageByElement, containerRef],\n );\n\n const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = true;\n }\n };\n\n const handlePointerUp = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!e.defaultPrevented) {\n isMouseEvent.current = false;\n }\n };\n\n // eslint-disable-next-line react-hooks/refs\n const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);\n // eslint-disable-next-line react-hooks/refs\n const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);\n // eslint-disable-next-line react-hooks/refs\n const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);\n\n const state: CarouselCardState = {\n autoSize,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(elementRef, ref),\n role: 'tabpanel',\n tabIndex: cardFocus ? 0 : undefined,\n ...props,\n id,\n onFocusCapture,\n onPointerUp,\n onPointerDown,\n ...focusAttrProps,\n }),\n { elementType: 'div' },\n ),\n };\n\n return state;\n};\n"],"names":["useFocusableGroup","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useMergedRefs","useId","React","useCarouselContext_unstable","useCarouselContext","EMBLA_VISIBILITY_EVENT","carouselCardClassNames","useCarouselSliderContext","useCarouselCard_unstable","props","ref","autoSize","elementRef","useRef","isMouseEvent","selectPageByElement","ctx","containerRef","cardFocus","focusAttr","tabBehavior","focusAttrProps","tabIndex","id","root","useEffect","element","current","listener","_e","event","hidden","detail","isVisible","ariaHidden","toString","inert","addEventListener","removeEventListener","handleFocus","useCallback","e","defaultPrevented","currentTarget","scrollTo","handlePointerDown","handlePointerUp","onFocusCapture","onPointerUp","onPointerDown","state","components","always","role","undefined","elementType"],"mappings":"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"}

package/lib/components/CarouselCard/useCarouselCardStyles.styles.js CHANGED Viewed

@@ -59,6 +59,7 @@ export const useCarouselCardStyles_unstable = state => {
   } = state;
   const appearance = useCarouselContext(context => context.appearance);
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
   return state;
 };

package/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","elevated","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","B68tc82","Bmxbyg5","Bpg54ce","d","p","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselCardClassNames = {\n root: 'fui-CarouselCard'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%'\n },\n autoSize: {\n flex: '0 0 auto' / Adapt slide size to its content / ,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%'\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden'\n }\n});\n/\n Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n 'use no memo';\n const { autoSize } = state;\n const appearance = useCarouselContext((context)=>context.appearance);\n const styles = useStyles();\n state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,IAAIC,kBAAkB,QAAQ,oBAAoB;AACtF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAL,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;EAAAI,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEhB;EAAS,CAAC,GAAGgB,KAAK;EAC1B,MAAMC,UAAU,GAAG1B,kBAAkB,CAAE2B,OAAO,IAAGA,OAAO,CAACD,UAAU,CAAC;EACpE,MAAME,MAAM,GAAGzB,SAAS,CAAC,CAAC;~~EAC1BsB~~,KAAK,CAACvB,IAAI,CAAC2B,SAAS,GAAGhC,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAE0B,MAAM,CAAC1B,IAAI,EAAEwB,UAAU,KAAK,UAAU,IAAIE,MAAM,CAAChB,QAAQ,EAAEH,QAAQ,IAAImB,MAAM,CAACnB,QAAQ,EAAEgB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,CAAC;EAC9K,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","elevated","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","B68tc82","Bmxbyg5","Bpg54ce","d","p","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselCardClassNames = {\n root: 'fui-CarouselCard'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%'\n },\n autoSize: {\n flex: '0 0 auto' / Adapt slide size to its content / ,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%'\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden'\n }\n});\n/\n Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n 'use no memo';\n const { autoSize } = state;\n const appearance = useCarouselContext((context)=>context.appearance);\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,IAAIC,kBAAkB,QAAQ,oBAAoB;AACtF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAL,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;EAAAI,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEhB;EAAS,CAAC,GAAGgB,KAAK;EAC1B,MAAMC,UAAU,GAAG1B,kBAAkB,CAAE2B,OAAO,IAAGA,OAAO,CAACD,UAAU,CAAC;EACpE,MAAME,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B;EACAsB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,GAAGhC,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAE0B,MAAM,CAAC1B,IAAI,EAAEwB,UAAU,KAAK,UAAU,IAAIE,MAAM,CAAChB,QAAQ,EAAEH,QAAQ,IAAImB,MAAM,CAACnB,QAAQ,EAAEgB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,CAAC;EAC9K,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js CHANGED Viewed

@@ -31,6 +31,7 @@ export const carouselCardClassNames = {
     const { autoSize } = state;
     const appearance = useCarouselContext((context)=>context.appearance);
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
     return state;
 };

package/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n root: 'fui-CarouselCard',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%',\n },\n autoSize: {\n flex: '0 0 auto' / Adapt slide size to its content /,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%',\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden',\n },\n});\n\n/\n Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n 'use no memo';\n\n const { autoSize } = state;\n const appearance = useCarouselContext(context => context.appearance);\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n carouselCardClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n autoSize && styles.autoSize,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,MAAM;QACNC,UAAU;IACZ;IACAC,UAAU;QACRF,MAAM,WAAW,mCAAmC;QACpDG,UAAU;QACVC,OAAO;QACPH,UAAU;IACZ;IACAI,UAAU;QACRC,cAAcZ,OAAOa,kBAAkB;QACvCC,WAAWd,OAAOe,QAAQ;QAC1BC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEV,QAAQ,EAAE,GAAGU;IACrB,MAAMC,aAAajB,mBAAmBkB,CAAAA,UAAWA,QAAQD,UAAU;IAEnE,MAAME,SAAShB;~~IACfa~~,MAAMd,IAAI,CAACkB,SAAS,GAAGvB,aACrBI,uBAAuBC,IAAI,EAC3BiB,OAAOjB,IAAI,EACXe,eAAe,cAAcE,OAAOV,QAAQ,EAC5CH,YAAYa,OAAOb,QAAQ,EAC3BU,MAAMd,IAAI,CAACkB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n root: 'fui-CarouselCard',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%',\n },\n autoSize: {\n flex: '0 0 auto' / Adapt slide size to its content /,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%',\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden',\n },\n});\n\n/\n Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n 'use no memo';\n\n const { autoSize } = state;\n const appearance = useCarouselContext(context => context.appearance);\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n carouselCardClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n autoSize && styles.autoSize,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,MAAM;QACNC,UAAU;IACZ;IACAC,UAAU;QACRF,MAAM,WAAW,mCAAmC;QACpDG,UAAU;QACVC,OAAO;QACPH,UAAU;IACZ;IACAI,UAAU;QACRC,cAAcZ,OAAOa,kBAAkB;QACvCC,WAAWd,OAAOe,QAAQ;QAC1BC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEV,QAAQ,EAAE,GAAGU;IACrB,MAAMC,aAAajB,mBAAmBkB,CAAAA,UAAWA,QAAQD,UAAU;IAEnE,MAAME,SAAShB;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACkB,SAAS,GAAGvB,aACrBI,uBAAuBC,IAAI,EAC3BiB,OAAOjB,IAAI,EACXe,eAAe,cAAcE,OAAOV,QAAQ,EAC5CH,YAAYa,OAAOb,QAAQ,EAC3BU,MAAMd,IAAI,CAACkB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

package/lib/components/CarouselNav/useCarouselNavStyles.styles.js CHANGED Viewed

@@ -59,6 +59,7 @@ export const useCarouselNavStyles_unstable = state => {
   'use no memo';
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);
   return state;
 };

package/lib/components/CarouselNav/useCarouselNavStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/\n Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;~~EAC1BiC~~,KAAK,CAAClC,IAAI,CAACoC,SAAS,GAAGzC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/\n Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1B;EACAiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,GAAGzC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;EAClG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js CHANGED Viewed

@@ -29,6 +29,7 @@ export const carouselNavClassNames = {
  */ export const useCarouselNavStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib/components/CarouselNav/useCarouselNavStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/\n Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,GAAGT,gCAAgC;YACjCU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,OAAOa,kBAAkB;YACvC,GAAGf,WAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,OAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,OAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,OAAOmB,2BAA2B;IACrD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;~~IACfkB~~,MAAMnB,IAAI,CAACqB,SAAS,GAAG1B,aAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/\n Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,GAAGT,gCAAgC;YACjCU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,OAAOa,kBAAkB;YACvC,GAAGf,WAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,OAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,OAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,OAAOmB,2BAA2B;IACrD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACf,oDAAoD;IACpDkB,MAAMnB,IAAI,CAACqB,SAAS,GAAG1B,aAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js CHANGED Viewed

@@ -205,6 +205,7 @@ export const useCarouselNavButtonStyles_unstable = state => {
     selected,
     appearance
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   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);
   return state;
 };

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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","xdqbwx","Hwb57","umgawz","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"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"mappings":"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~~EACtCA~~,KAAK,CAAC/F,IAAI,CAACmG,SAAS,GAAGxG,YAAY,CAACI,2BAA2B,CAACC,IAAI,EAAEgG,MAAM,CAAChG,IAAI,EAAEiG,QAAQ,GAAGD,MAAM,CAACZ,YAAY,GAAGY,MAAM,CAAC/C,cAAc,EAAEiD,UAAU,KAAK,OAAO,IAAIF,MAAM,CAACX,KAAK,EAAE,CAACY,QAAQ,IAAIC,UAAU,KAAK,OAAO,IAAIF,MAAM,CAACR,eAAe,EAAEO,KAAK,CAAC/F,IAAI,CAACmG,SAAS,CAAC;EACvQ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"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","xdqbwx","Hwb57","umgawz","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"],"sources":["useCarouselNavButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAhF,MAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAwC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAArC,MAAA;IAAAvB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA0D,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAzC,OAAA;IAAAqC,OAAA;IAAAK,MAAA;IAAAJ,OAAA;IAAAK,OAAA;IAAAJ,OAAA;EAAA;EAAAK,eAAA;IAAAP,OAAA;IAAArC,OAAA;IAAAsC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA2GrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAG/F,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEgG,QAAQ;IAAEC;EAAW,CAAC,GAAGH,KAAK;EACtC;EACAA,KAAK,CAAC/F,IAAI,CAACmG,SAAS,GAAGxG,YAAY,CAACI,2BAA2B,CAACC,IAAI,EAAEgG,MAAM,CAAChG,IAAI,EAAEiG,QAAQ,GAAGD,MAAM,CAACZ,YAAY,GAAGY,MAAM,CAAC/C,cAAc,EAAEiD,UAAU,KAAK,OAAO,IAAIF,MAAM,CAACX,KAAK,EAAE,CAACY,QAAQ,IAAIC,UAAU,KAAK,OAAO,IAAIF,MAAM,CAACR,eAAe,EAAEO,KAAK,CAAC/F,IAAI,CAACmG,SAAS,CAAC;EACvQ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js CHANGED Viewed

@@ -121,6 +121,7 @@ export const carouselNavButtonClassNames = {
     'use no memo';
     const styles = useStyles();
     const { selected, appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     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);
     return state;
 };

package/lib/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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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~~IAEjCA~~,MAAMtC,IAAI,CAAC0C,SAAS,GAAG/C,aACrBI,4BAA4BC,IAAI,EAChCuC,OAAOvC,IAAI,EACXwC,WAAWD,OAAOV,YAAY,GAAGU,OAAOlB,cAAc,EACtDoB,eAAe,WAAWF,OAAOP,KAAK,EACtC,CAACQ,YAAYC,eAAe,WAAWF,OAAOH,eAAe,EAC7DE,MAAMtC,IAAI,CAAC0C,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselNavButton/useCarouselNavButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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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"}

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js CHANGED Viewed

@@ -97,14 +97,18 @@ export const useCarouselNavContainerStyles_unstable = state => {
   const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
   const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   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);
   if (state.next) {
+    // eslint-disable-next-line react-hooks/immutability
     state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
   }
   if (state.prev) {
+    // eslint-disable-next-line react-hooks/immutability
     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);
   }
   if (state.autoplay) {
+    // eslint-disable-next-line react-hooks/immutability
     state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
   }
   return state;

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"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"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,IAAI,EAAE,gCAAgC;EACtCC,IAAI,EAAE,gCAAgC;EACtCC,QAAQ,EAAE,oCAAoC;EAC9C;AACJ;AACA;EAAMC,WAAW,EAAE,uCAAuC;EACtDC,WAAW,EAAE,uCAAuC;EACpDC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGX,QAAA;EAAAI,IAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAX,IAAA;EAAAC,IAAA;EAAAC,QAAA;EAAAU,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,WAAA;IAAAF,OAAA;EAAA;EAAAG,QAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAD,MAAA;EAAA;EAAAE,eAAA;IAAAJ,MAAA;EAAA;EAAAK,mBAAA;IAAAL,MAAA;EAAA;EAAAM,QAAA;IAAAhB,MAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAnB,OAAA;IAAAO,OAAA;IAAAa,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,mBAAA;IAAAjB,MAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,mBAAA;IAAArB,MAAA;IAAAsB,MAAA;IAAAH,OAAA;IAAAC,OAAA;EAAA;EAAAG,gBAAA;IAAAvB,MAAA;IAAAC,OAAA;IAAAqB,MAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAmErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,aAAa;;EACb,MAAM;IAAEC;EAAO,CAAC,GAAGD,KAAK;EACxB,MAAME,SAAS,GAAGD,MAAM,KAAK,SAAS,IAAIA,MAAM,KAAK,cAAc,IAAIA,MAAM,KAAK,kBAAkB;EACpG,MAAME,MAAM,GAAGF,MAAM,KAAK,aAAa,IAAIA,MAAM,KAAK,cAAc;EACpE,MAAMG,MAAM,GAAGxC,SAAS,CAAC,CAAC;~~EAC1BoC~~,KAAK,CAAC3C,IAAI,CAACgD,SAAS,GAAGnD,YAAY,CAACE,8BAA8B,CAACC,IAAI,EAAE+C,MAAM,CAAC/C,IAAI,EAAE6C,SAAS,GAAGE,MAAM,CAAChC,OAAO,GAAGgC,MAAM,CAAClC,MAAM,EAAEgC,SAAS,IAAIC,MAAM,IAAIC,MAAM,CAAC5B,WAAW,EAAEyB,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACpB,QAAQ,EAAEgB,KAAK,CAAC3C,IAAI,CAACgD,SAAS,CAAC;EACpP,IAAIL,KAAK,CAAC1C,IAAI,EAAE;~~IACZ0C~~,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,GAAGnD,YAAY,CAACE,8BAA8B,CAACE,IAAI,EAAE8C,MAAM,CAAC9C,IAAI,EAAE6C,MAAM,IAAIC,MAAM,CAAC3B,QAAQ,EAAE0B,MAAM,IAAID,SAAS,IAAIE,MAAM,CAACvB,eAAe,EAAEoB,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACd,mBAAmB,EAAEU,KAAK,CAAC1C,IAAI,CAAC+C,SAAS,CAAC;EACtP;EACA,IAAIL,KAAK,CAACzC,IAAI,EAAE;~~IACZyC~~,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGnD,YAAY,CAACE,8BAA8B,CAACG,IAAI,EAAE6C,MAAM,CAAC7C,IAAI,EAAE4C,MAAM,IAAIC,MAAM,CAACzB,QAAQ,EAAE,CAACqB,KAAK,CAACxC,QAAQ,IAAI2C,MAAM,IAAID,SAAS,IAAIE,MAAM,CAACtB,eAAe,EAAEmB,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACV,mBAAmB,EAAEM,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EACzQ;EACA,IAAIL,KAAK,CAACxC,QAAQ,EAAE;~~IAChBwC~~,KAAK,CAACxC,QAAQ,CAAC6C,SAAS,GAAGnD,YAAY,CAACE,8BAA8B,CAACI,QAAQ,EAAE4C,MAAM,CAAC5C,QAAQ,EAAEyC,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACR,gBAAgB,EAAEO,MAAM,IAAID,SAAS,IAAIE,MAAM,CAACrB,mBAAmB,EAAEiB,KAAK,CAACxC,QAAQ,CAAC6C,SAAS,CAAC;EAC5O;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"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"],"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"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","ignoreList":[]}

package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js CHANGED Viewed

@@ -90,14 +90,18 @@ export const carouselNavContainerClassNames = {
     const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
     const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     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);
     if (state.next) {
+        // eslint-disable-next-line react-hooks/immutability
         state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
     }
     if (state.prev) {
+        // eslint-disable-next-line react-hooks/immutability
         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);
     }
     if (state.autoplay) {
+        // eslint-disable-next-line react-hooks/immutability
         state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
     }
     return state;