npm - @fluentui/react-carousel - Versions diffs - 9.4.7 → 9.5.0 - Mend

@fluentui/react-carousel 9.4.7 → 9.5.0

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

Files changed (17) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-carousel
-This log was last generated on Fri, 07 Feb 2025 10:40:53 GMT and should not be manually modified.
+This log was last generated on Tue, 18 Feb 2025 11:25:58 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.5.0)
+Tue, 18 Feb 2025 11:25:58 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.7..@fluentui/react-carousel_v9.5.0)
+### Minor changes
+- feat: Add tooltip wrappers for icon buttons in nav container ([PR #33821](https://github.com/microsoft/fluentui/pull/33821) by mifraser@microsoft.com)
 ## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.4.7)
-Fri, 07 Feb 2025 10:40:53 GMT
+Fri, 07 Feb 2025 10:42:12 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.6..@fluentui/react-carousel_v9.4.7)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
+import { TooltipProps } from '@fluentui/react-tooltip';
 /**
  * Carousel is the context wrapper and container for all carousel content/controls,
@@ -234,8 +235,11 @@ export declare type CarouselNavContainerProps = ComponentProps<CarouselNavContai
 export declare type CarouselNavContainerSlots = {
     root: Slot<'div'>;
     next?: Slot<CarouselButtonProps>;
+    nextTooltip?: Slot<TooltipProps>;
     prev?: Slot<CarouselButtonProps>;
+    prevTooltip?: Slot<TooltipProps>;
     autoplay?: Slot<typeof CarouselAutoplayButton>;
+    autoplayTooltip?: Slot<TooltipProps>;
 };
 /**

package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n prev?: Slot<CarouselButtonProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/*\n CarouselNavContainer Props\n /\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /\n Default: 'inline'\n * Defines the nav container layout:\n \n 'inline' - Default controls inline with carousel view\n \n inline-wide - Similar to inline but places nav buttons on far left/right\n \n 'overlay' - Controls overlaid on bottom of carousel viewport,\n \n 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n \n 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n /\n layout?: 'inline' \| 'inline-wide' \| 'overlay' \| 'overlay-wide' \| 'overlay-expanded';\n};\n\n/\n State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"~~AAgCA~~;;CAEC,GACD,WAC4C"}
1	+ {"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/*\n CarouselNavContainer Props\n /\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /\n Default: 'inline'\n * Defines the nav container layout:\n \n 'inline' - Default controls inline with carousel view\n \n inline-wide - Similar to inline but places nav buttons on far left/right\n \n 'overlay' - Controls overlaid on bottom of carousel viewport,\n \n 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n \n 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n /\n layout?: 'inline' \| 'inline-wide' \| 'overlay' \| 'overlay-wide' \| 'overlay-expanded';\n};\n\n/\n State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC,GACD,WAC4C"}

package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js CHANGED Viewed

@@ -6,10 +6,19 @@ import { assertSlots } from '@fluentui/react-utilities';
     assertSlots(state);
     return /*#__PURE__*/ _jsxs(state.root, {
         children: [
-            state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
-            state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
+            !state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
+            state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplayTooltip, {
+                children: /*#__PURE__*/ _jsx(state.autoplay, {})
+            }),
+            !state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
+            state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prevTooltip, {
+                children: /*#__PURE__*/ _jsx(state.prev, {})
+            }),
             state.root.children,
-            state.next && /*#__PURE__*/ _jsx(state.next, {})
+            !state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.next, {}),
+            state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.nextTooltip, {
+                children: /*#__PURE__*/ _jsx(state.next, {})
+            })
         ]
     });
 };

package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/\n Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n assertSlots<CarouselNavContainerSlots>(state);\n\n return (\n <state.root>\n {state.autoplay && <state.autoplay />}\n {state.prev && <state.prev />}\n {state.root.children}\n {state.next && <state.next />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplay","prev","children","next"],"rangeMappings":"~~;;;;;;;;;;;;;;~~","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;~~YACRD~~,MAAME,QAAQ,kBAAI,~~KAACF~~,MAAME,QAAQ;~~YACjCF~~,MAAMG,IAAI,kBAAI,~~KAACH~~,~~MAAMG~~,IAAI;~~YACzBH~~,MAAMC,IAAI,~~CAACG~~,QAAQ;~~YACnBJ~~,~~MAAMK~~,IAAI,kBAAI,~~KAACL~~,~~MAAMK~~,IAAI~~;;;AAGhC~~,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/\n Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n assertSlots<CarouselNavContainerSlots>(state);\n\n return (\n <state.root>\n {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n {state.autoplayTooltip && state.autoplay && (\n <state.autoplayTooltip>\n <state.autoplay />\n </state.autoplayTooltip>\n )}\n {!state.prevTooltip && state.prev && <state.prev />}\n {state.prevTooltip && state.prev && (\n <state.prevTooltip>\n <state.prev />\n </state.prevTooltip>\n )}\n {state.root.children}\n {!state.nextTooltip && state.next && <state.next />}\n {state.nextTooltip && state.next && (\n <state.nextTooltip>\n <state.next />\n </state.nextTooltip>\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplayTooltip","autoplay","prevTooltip","prev","children","nextTooltip","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;YACR,CAACD,MAAME,eAAe,IAAIF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YAC3DH,MAAME,eAAe,IAAIF,MAAMG,QAAQ,kBACtC,KAACH,MAAME,eAAe;0BACpB,cAAA,KAACF,MAAMG,QAAQ;;YAGlB,CAACH,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;YAC/CL,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,kBAC9B,KAACL,MAAMI,WAAW;0BAChB,cAAA,KAACJ,MAAMK,IAAI;;YAGdL,MAAMC,IAAI,CAACK,QAAQ;YACnB,CAACN,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,kBAAI,KAACR,MAAMQ,IAAI;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,kBAC9B,KAACR,MAAMO,WAAW;0BAChB,cAAA,KAACP,MAAMQ,IAAI;;;;AAKrB,EAAE"}

package/lib/components/CarouselNavContainer/useCarouselNavContainer.js CHANGED Viewed

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
 import { CarouselButton } from '../CarouselButton/CarouselButton';
+import { Tooltip } from '@fluentui/react-tooltip';
 /**
  * Create the state required to render CarouselNavContainer.
  *
@@ -27,8 +28,23 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
         renderByDefault: true
     });
     const autoplay = slot.optional(props.autoplay, {
-        renderByDefault: false,
-        elementType: CarouselAutoplayButton
+        elementType: CarouselAutoplayButton,
+        renderByDefault: !!props.autoplay || !!props.autoplayTooltip
+    });
+    const nextTooltip = slot.optional(props.nextTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    const prevTooltip = slot.optional(props.prevTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    const autoplayTooltip = slot.optional(props.autoplayTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
     });
     return {
         layout,
@@ -36,7 +52,10 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
             root: 'div',
             next: CarouselButton,
             prev: CarouselButton,
-            autoplay: CarouselAutoplayButton
+            autoplay: CarouselAutoplayButton,
+            nextTooltip: Tooltip,
+            prevTooltip: Tooltip,
+            autoplayTooltip: Tooltip
         },
         root: slot.always(getIntrinsicElementProps('div', {
             ref,
@@ -46,6 +65,9 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
         }),
         next,
         prev,
-        autoplay
+        autoplay,
+        nextTooltip,
+        prevTooltip,
+        autoplayTooltip
     };
 };

package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/*\n Create the state required to render CarouselNavContainer.\n \n The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n \n @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n renderByDefault: false,\n elementType: ~~CarouselAutoplayButton~~,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","components","root","always"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,mDAAmD;AAC1F,SAASC,cAAc,QAAQ,mCAAmC;~~AAElE~~;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,~~OAA0CP~~,~~KAAKQ~~,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,~~aAAaT~~;~~QACbU~~,iBAAiB;IACnB;IAEA,MAAMC,~~OAA0Cb~~,~~KAAKQ~~,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,~~aAAaT~~;~~QACbU~~,iBAAiB;IACnB;IAEA,MAAME,~~WAAkDd~~,~~KAAKQ~~,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;~~QACpFF~~,iBAAiB;~~QACjBD~~,~~aAAaV~~;~~IACf~~;IAEA,OAAO;~~QACLK~~;~~QACAS~~,YAAY;YACVC,MAAM;~~YACNT~~,~~MAAML~~;~~YACNW~~,~~MAAMX~~;~~YACNY~~,~~UAAUb~~;~~QACZ~~;~~QACAe~~,~~MAAMhB~~,~~KAAKiB~~,MAAM,~~CACflB~~,yBAAyB,OAAO;~~YAC9BM~~;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/*\n Create the state required to render CarouselNavContainer.\n \n The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n \n @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay \|\| !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,mDAAmD;AAC1F,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,KAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,KAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,KAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,KAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,KAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,KAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN;YACNY,MAAMZ;YACNa,UAAUd;YACVgB,aAAad;YACbe,aAAaf;YACba,iBAAiBb;QACnB;QACAiB,MAAMpB,KAAKqB,MAAM,CACftB,yBAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}

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

@@ -4,7 +4,13 @@ export const carouselNavContainerClassNames = {
   root: 'fui-CarouselNavContainer',
   next: 'fui-CarouselNavContainer__next',
   prev: 'fui-CarouselNavContainer__prev',
-  autoplay: 'fui-CarouselNavContainer__autoplay'
+  autoplay: 'fui-CarouselNavContainer__autoplay',
+  /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
+  * Use 'content' slot to style Tooltip content instead
+  */
+  nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
+  prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
+  autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
 };
 /**
  * Styles for the root slot

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","carouselNavContainerClassNames","root","next","prev","autoplay","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":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay'\n};\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,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;~~AACd~~,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,~~gBAAGR~~,QAAA;EAAAI,IAAA;~~IAAAK~~,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;~~EAAAR~~,IAAA;EAAAC,IAAA;EAAAC,QAAA;~~EAAAO~~,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,~~CAACxC~~,IAAI,~~CAAC6C~~,SAAS,~~GAAGhD~~,YAAY,CAACE,8BAA8B,CAACC,IAAI,~~EAAE4C~~,MAAM,~~CAAC5C~~,IAAI,~~EAAE0C~~,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,~~CAACxC~~,IAAI,~~CAAC6C~~,SAAS,CAAC;EACpP,IAAIL,KAAK,~~CAACvC~~,IAAI,EAAE;~~IACZuC~~,KAAK,~~CAACvC~~,IAAI,~~CAAC4C~~,SAAS,~~GAAGhD~~,YAAY,CAACE,8BAA8B,CAACE,IAAI,~~EAAE2C~~,MAAM,~~CAAC3C~~,IAAI,~~EAAE0C~~,MAAM,IAAIC,MAAM,CAAC3B,QAAQ,EAAE0B,MAAM,IAAID,SAAS,IAAIE,MAAM,CAACvB,eAAe,EAAEoB,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACd,mBAAmB,EAAEU,KAAK,~~CAACvC~~,IAAI,~~CAAC4C~~,SAAS,CAAC;EACtP;EACA,IAAIL,KAAK,~~CAACtC~~,IAAI,EAAE;~~IACZsC~~,KAAK,~~CAACtC~~,IAAI,~~CAAC2C~~,SAAS,~~GAAGhD~~,YAAY,CAACE,8BAA8B,CAACG,IAAI,~~EAAE0C~~,MAAM,~~CAAC1C~~,IAAI,~~EAAEyC~~,MAAM,IAAIC,MAAM,CAACzB,QAAQ,EAAE,CAACqB,KAAK,~~CAACrC~~,QAAQ,~~IAAIwC~~,MAAM,IAAID,SAAS,IAAIE,MAAM,CAACtB,eAAe,EAAEmB,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACV,mBAAmB,EAAEM,KAAK,~~CAACtC~~,IAAI,~~CAAC2C~~,SAAS,CAAC;EACzQ;EACA,IAAIL,KAAK,~~CAACrC~~,QAAQ,EAAE;~~IAChBqC~~,KAAK,~~CAACrC~~,QAAQ,~~CAAC0C~~,SAAS,~~GAAGhD~~,YAAY,CAACE,8BAA8B,CAACI,QAAQ,~~EAAEyC~~,MAAM,~~CAACzC~~,QAAQ,~~EAAEsC~~,MAAM,KAAK,kBAAkB,IAAIG,MAAM,CAACR,gBAAgB,EAAEO,MAAM,IAAID,SAAS,IAAIE,MAAM,CAACrB,mBAAmB,EAAEiB,KAAK,~~CAACrC~~,QAAQ,~~CAAC0C~~,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":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n / nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/\n Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' \|\| layout === 'overlay-wide' \|\| layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' \|\| layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n prev?: Slot<CarouselButtonProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n};\n\n/*\n CarouselNavContainer Props\n /\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /\n Default: 'inline'\n * Defines the nav container layout:\n \n 'inline' - Default controls inline with carousel view\n \n inline-wide - Similar to inline but places nav buttons on far left/right\n \n 'overlay' - Controls overlaid on bottom of carousel viewport,\n \n 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n \n 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n /\n layout?: 'inline' \| 'inline-wide' \| 'overlay' \| 'overlay-wide' \| 'overlay-expanded';\n};\n\n/\n State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"~~AAgCA~~;;CAEC"}
1	+ {"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n root: Slot<'div'>;\n next?: Slot<CarouselButtonProps>;\n nextTooltip?: Slot<TooltipProps>;\n prev?: Slot<CarouselButtonProps>;\n prevTooltip?: Slot<TooltipProps>;\n autoplay?: Slot<typeof CarouselAutoplayButton>;\n autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/*\n CarouselNavContainer Props\n /\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n /\n Default: 'inline'\n * Defines the nav container layout:\n \n 'inline' - Default controls inline with carousel view\n \n inline-wide - Similar to inline but places nav buttons on far left/right\n \n 'overlay' - Controls overlaid on bottom of carousel viewport,\n \n 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n \n 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n /\n layout?: 'inline' \| 'inline-wide' \| 'overlay' \| 'overlay-wide' \| 'overlay-expanded';\n};\n\n/\n State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoCA;;CAEC"}

package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js CHANGED Viewed

@@ -14,10 +14,19 @@ const renderCarouselNavContainer_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
         children: [
-            state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
-            state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {}),
+            !state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
+            state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplayTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {})
+            }),
+            !state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {}),
+            state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prevTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {})
+            }),
             state.root.children,
-            state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
+            !state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {}),
+            state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.nextTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
+            })
         ]
     });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/\n Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n assertSlots<CarouselNavContainerSlots>(state);\n\n return (\n <state.root>\n {state.autoplay && <state.autoplay />}\n {state.prev && <state.prev />}\n {state.root.children}\n {state.next && <state.next />}\n </state.root>\n );\n};\n"],"names":["renderCarouselNavContainer_unstable","state","assertSlots","_jsxs","root","autoplay","_jsx","prev","children","next"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,sCAAsC,CAACC;IAClDC,IAAAA,2BAAAA,EAAuCD;IAEvC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;~~YACRH~~,MAAMI,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,~~EAACL~~,~~MAAMI~~,QAAQ,EAAA,CAAA;~~YACjCJ~~,~~MAAMM~~,IAAI,IAAA,WAAA,~~GAAID~~,IAAAA,eAAA,~~EAACL~~,~~MAAMM~~,IAAI,EAAA,CAAA;~~YACzBN~~,MAAMG,IAAI,~~CAACI~~,QAAQ;~~YACnBP~~,~~MAAMQ~~,IAAI,IAAA,WAAA,~~GAAIH~~,IAAAA,eAAA,~~EAACL~~,~~MAAMQ~~,IAAI,EAAA,CAAA~~;;;AAGhC~~"}
1	+ {"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/\n Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState) => {\n assertSlots<CarouselNavContainerSlots>(state);\n\n return (\n <state.root>\n {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n {state.autoplayTooltip && state.autoplay && (\n <state.autoplayTooltip>\n <state.autoplay />\n </state.autoplayTooltip>\n )}\n {!state.prevTooltip && state.prev && <state.prev />}\n {state.prevTooltip && state.prev && (\n <state.prevTooltip>\n <state.prev />\n </state.prevTooltip>\n )}\n {state.root.children}\n {!state.nextTooltip && state.next && <state.next />}\n {state.nextTooltip && state.next && (\n <state.nextTooltip>\n <state.next />\n </state.nextTooltip>\n )}\n </state.root>\n );\n};\n"],"names":["renderCarouselNavContainer_unstable","state","assertSlots","_jsxs","root","autoplayTooltip","autoplay","_jsx","prevTooltip","prev","children","nextTooltip","next"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,sCAAsC,CAACC;IAClDC,IAAAA,2BAAAA,EAAuCD;IAEvC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACR,CAACH,MAAMI,eAAe,IAAIJ,MAAMK,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,QAAQ,EAAA,CAAA;YAC3DL,MAAMI,eAAe,IAAIJ,MAAMK,QAAQ,IAAA,WAAA,GACtCC,IAAAA,eAAA,EAACN,MAAMI,eAAe,EAAA;0BACpB,WAAA,GAAAE,IAAAA,eAAA,EAACN,MAAMK,QAAQ,EAAA,CAAA;;YAGlB,CAACL,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACN,MAAMQ,IAAI,EAAA,CAAA;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,GAC9BF,IAAAA,eAAA,EAACN,MAAMO,WAAW,EAAA;0BAChB,WAAA,GAAAD,IAAAA,eAAA,EAACN,MAAMQ,IAAI,EAAA,CAAA;;YAGdR,MAAMG,IAAI,CAACM,QAAQ;YACnB,CAACT,MAAMU,WAAW,IAAIV,MAAMW,IAAI,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACN,MAAMW,IAAI,EAAA,CAAA;YAC/CX,MAAMU,WAAW,IAAIV,MAAMW,IAAI,IAAA,WAAA,GAC9BL,IAAAA,eAAA,EAACN,MAAMU,WAAW,EAAA;0BAChB,WAAA,GAAAJ,IAAAA,eAAA,EAACN,MAAMW,IAAI,EAAA,CAAA;;;;AAKrB"}

package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js CHANGED Viewed

@@ -13,6 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _CarouselAutoplayButton = require("../CarouselAutoplayButton/CarouselAutoplayButton");
 const _CarouselButton = require("../CarouselButton/CarouselButton");
+const _reacttooltip = require("@fluentui/react-tooltip");
 const useCarouselNavContainer_unstable = (props, ref)=>{
     const { layout } = props;
     const next = _reactutilities.slot.optional(props.next, {
@@ -30,8 +31,23 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
         renderByDefault: true
     });
     const autoplay = _reactutilities.slot.optional(props.autoplay, {
-        renderByDefault: false,
-        elementType: _CarouselAutoplayButton.CarouselAutoplayButton
+        elementType: _CarouselAutoplayButton.CarouselAutoplayButton,
+        renderByDefault: !!props.autoplay || !!props.autoplayTooltip
+    });
+    const nextTooltip = _reactutilities.slot.optional(props.nextTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    const prevTooltip = _reactutilities.slot.optional(props.prevTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    const autoplayTooltip = _reactutilities.slot.optional(props.autoplayTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
     });
     return {
         layout,
@@ -39,7 +55,10 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
             root: 'div',
             next: _CarouselButton.CarouselButton,
             prev: _CarouselButton.CarouselButton,
-            autoplay: _CarouselAutoplayButton.CarouselAutoplayButton
+            autoplay: _CarouselAutoplayButton.CarouselAutoplayButton,
+            nextTooltip: _reacttooltip.Tooltip,
+            prevTooltip: _reacttooltip.Tooltip,
+            autoplayTooltip: _reacttooltip.Tooltip
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ref,
@@ -49,6 +68,9 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
         }),
         next,
         prev,
-        autoplay
+        autoplay,
+        nextTooltip,
+        prevTooltip,
+        autoplayTooltip
     };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\n\n/*\n Create the state required to render CarouselNavContainer.\n \n The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n \n @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n renderByDefault: false,\n elementType: ~~CarouselAutoplayButton~~,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","slot","optional","defaultProps","navType","elementType","CarouselButton","renderByDefault","prev","autoplay","CarouselAutoplayButton","components","root","always","getIntrinsicElementProps"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAeaA~~;;;eAAAA;;;;~~iEAfU~~;gCACwB;wCAER;gCACR;~~AAWxB~~,MAAMA,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CC,oBAAAA,CAAKC,QAAQ,CAACL,MAAMG,IAAI,EAAE;QACxEG,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAMC,OAA0CP,oBAAAA,CAAKC,QAAQ,CAACL,MAAMW,IAAI,EAAE;QACxEL,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAME,WAAkDR,oBAAAA,CAAKC,QAAQ,CAACL,MAAMY,QAAQ,EAAE;~~QACpFF~~,iBAAiB;~~QACjBF~~,~~aAAaK~~,~~8CAAAA~~;~~IACf~~;IAEA,OAAO;~~QACLX~~;~~QACAY~~,YAAY;YACVC,MAAM;~~YACNZ~~,MAAMM,8BAAAA;YACNE,MAAMF,8BAAAA;YACNG,UAAUC,8CAAAA;~~QACZ~~;~~QACAE~~,~~MAAMX~~,oBAAAA,~~CAAKY~~,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;~~YAC9BhB~~;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL;QACAQ;QACAC;IACF;AACF"}
1	+ {"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/*\n Create the state required to render CarouselNavContainer.\n \n The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n \n @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n props: CarouselNavContainerProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n const { layout } = props;\n const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n defaultProps: {\n navType: 'next',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n defaultProps: {\n navType: 'prev',\n },\n elementType: CarouselButton,\n renderByDefault: true,\n });\n\n const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n elementType: CarouselAutoplayButton,\n renderByDefault: !!props.autoplay \|\| !!props.autoplayTooltip,\n });\n\n const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n defaultProps: {},\n elementType: Tooltip,\n renderByDefault: false,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: CarouselButton,\n prev: CarouselButton,\n autoplay: CarouselAutoplayButton,\n nextTooltip: Tooltip,\n prevTooltip: Tooltip,\n autoplayTooltip: Tooltip,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n next,\n prev,\n autoplay,\n nextTooltip,\n prevTooltip,\n autoplayTooltip,\n };\n};\n"],"names":["useCarouselNavContainer_unstable","props","ref","layout","next","slot","optional","defaultProps","navType","elementType","CarouselButton","renderByDefault","prev","autoplay","CarouselAutoplayButton","autoplayTooltip","nextTooltip","Tooltip","prevTooltip","components","root","always","getIntrinsicElementProps"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCACwB;wCAER;gCACR;8BACP;AAWjB,MAAMA,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CC,oBAAAA,CAAKC,QAAQ,CAACL,MAAMG,IAAI,EAAE;QACxEG,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAMC,OAA0CP,oBAAAA,CAAKC,QAAQ,CAACL,MAAMW,IAAI,EAAE;QACxEL,cAAc;YACZC,SAAS;QACX;QACAC,aAAaC,8BAAAA;QACbC,iBAAiB;IACnB;IAEA,MAAME,WAAkDR,oBAAAA,CAAKC,QAAQ,CAACL,MAAMY,QAAQ,EAAE;QACpFJ,aAAaK,8CAAAA;QACbH,iBAAiB,CAAC,CAACV,MAAMY,QAAQ,IAAI,CAAC,CAACZ,MAAMc,eAAe;IAC9D;IAEA,MAAMC,cAAwDX,oBAAAA,CAAKC,QAAQ,CAACL,MAAMe,WAAW,EAAE;QAC7FT,cAAc,CAAC;QACfE,aAAaQ,qBAAAA;QACbN,iBAAiB;IACnB;IAEA,MAAMO,cAAwDb,oBAAAA,CAAKC,QAAQ,CAACL,MAAMiB,WAAW,EAAE;QAC7FX,cAAc,CAAC;QACfE,aAAaQ,qBAAAA;QACbN,iBAAiB;IACnB;IAEA,MAAMI,kBAAgEV,oBAAAA,CAAKC,QAAQ,CAACL,MAAMc,eAAe,EAAE;QACzGR,cAAc,CAAC;QACfE,aAAaQ,qBAAAA;QACbN,iBAAiB;IACnB;IAEA,OAAO;QACLR;QACAgB,YAAY;YACVC,MAAM;YACNhB,MAAMM,8BAAAA;YACNE,MAAMF,8BAAAA;YACNG,UAAUC,8CAAAA;YACVE,aAAaC,qBAAAA;YACbC,aAAaD,qBAAAA;YACbF,iBAAiBE,qBAAAA;QACnB;QACAG,MAAMf,oBAAAA,CAAKgB,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BpB;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL;QACAQ;QACAC;QACAG;QACAE;QACAH;IACF;AACF"}

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

@@ -21,7 +21,12 @@ const carouselNavContainerClassNames = {
     root: 'fui-CarouselNavContainer',
     next: 'fui-CarouselNavContainer__next',
     prev: 'fui-CarouselNavContainer__prev',
-    autoplay: 'fui-CarouselNavContainer__autoplay'
+    autoplay: 'fui-CarouselNavContainer__autoplay',
+    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
+  * Use 'content' slot to style Tooltip content instead
+  */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
+    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
+    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
 };
 /**
  * Styles for the root slot

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/\n Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' \|\| layout === 'overlay-wide' \|\| layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' \|\| layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable","root","next","prev","autoplay","useStyles","__styles","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","state","layout","isOverlay","isWide","styles","className","mergeClasses"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;~~IA8EIC~~,sCAAsC;eAAtCA;;;~~uBAhFwB~~;AAElC,MAAMD,iCAAiC;IAC1CE,MAAM;IACNC,MAAM;IACNC,MAAM;IACNC,UAAU;~~AACd~~;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;~~IAAAL~~,MAAA;~~QAAAM~~,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;~~IAAAT~~,MAAA,CAAA;IAAAC,MAAA,CAAA;IAAAC,UAAA,CAAA;~~IAAAQ~~,QAAA;QAAAC,SAAA;IAAA;IAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,aAAA;QAAAF,SAAA;IAAA;IAAAG,UAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,iBAAA;QAAAJ,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAK,qBAAA;QAAAL,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,UAAA;QAAAhB,QAAA;QAAAiB,SAAA;QAAAC,SAAA;QAAAnB,SAAA;QAAAO,SAAA;QAAAa,QAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,qBAAA;QAAAjB,QAAA;QAAAkB,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,qBAAA;QAAArB,QAAA;QAAAsB,QAAA;YAAA;YAAA;SAAA;QAAAH,SAAA;QAAAC,SAAA;IAAA;IAAAG,kBAAA;QAAAvB,QAAA;QAAAC,SAAA;QAAAqB,QAAA;YAAA;YAAA;SAAA;QAAAE,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAsEX,~~MAAMxC~~,~~yCAA0CyC~~,CAAAA;IACvD;IACA,MAAM,EAAEC,MAAAA,EAAQ,GAAGD;IACnB,MAAME,YAAYD,WAAW,aAAaA,WAAW,kBAAkBA,WAAW;IAClF,MAAME,SAASF,WAAW,iBAAiBA,WAAW;IACtD,MAAMG,SAASxC;IACfoC,~~MAAMxC~~,IAAI,~~CAAC6C~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChD~~,+BAA+BE,IAAI,~~EAAE4C~~,~~OAAO5C~~,IAAI,~~EAAE0C~~,YAAYE,OAAO/B,OAAO,GAAG+B,OAAOjC,MAAM,EAAE+B,aAAaC,UAAUC,OAAO3B,WAAW,EAAEwB,WAAW,sBAAsBG,OAAOnB,QAAQ,EAAEe,~~MAAMxC~~,IAAI,~~CAAC6C~~,SAAS;IACnP,IAAIL,~~MAAMvC~~,IAAI,EAAE;~~QACZuC~~,~~MAAMvC~~,IAAI,~~CAAC4C~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChD~~,+BAA+BG,IAAI,~~EAAE2C~~,~~OAAO3C~~,IAAI,~~EAAE0C~~,UAAUC,OAAO1B,QAAQ,EAAEyB,UAAUD,aAAaE,OAAOtB,eAAe,EAAEmB,WAAW,sBAAsBG,OAAOb,mBAAmB,EAAES,~~MAAMvC~~,IAAI,~~CAAC4C~~,SAAS;IACrP;IACA,IAAIL,~~MAAMtC~~,IAAI,EAAE;~~QACZsC~~,~~MAAMtC~~,IAAI,~~CAAC2C~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChD~~,+BAA+BI,IAAI,~~EAAE0C~~,~~OAAO1C~~,IAAI,~~EAAEyC~~,UAAUC,OAAOxB,QAAQ,EAAE,CAACoB,~~MAAMrC~~,QAAQ,~~IAAIwC~~,UAAUD,aAAaE,OAAOrB,eAAe,EAAEkB,WAAW,sBAAsBG,OAAOT,mBAAmB,EAAEK,~~MAAMtC~~,IAAI,~~CAAC2C~~,SAAS;IACxQ;IACA,IAAIL,~~MAAMrC~~,QAAQ,EAAE;~~QAChBqC~~,~~MAAMrC~~,QAAQ,~~CAAC0C~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChD~~,+BAA+BK,QAAQ,~~EAAEyC~~,~~OAAOzC~~,QAAQ,~~EAAEsC~~,WAAW,sBAAsBG,OAAOP,gBAAgB,EAAEM,UAAUD,aAAaE,OAAOpB,mBAAmB,EAAEgB,~~MAAMrC~~,QAAQ,~~CAAC0C~~,SAAS;IAC3O;IACA,OAAOL;AACX"}
1	+ {"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay',\n /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)\n * Use 'content' slot to style Tooltip content instead\n / nextTooltip: 'fui-CarouselNavContainer__nextTooltip',\n prevTooltip: 'fui-CarouselNavContainer__prevTooltip',\n autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'\n};\n/\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center',\n width: '100%',\n pointerEvents: 'none'\n },\n next: {},\n prev: {},\n autoplay: {},\n inline: {\n marginTop: tokens.spacingVerticalM\n },\n overlay: {\n position: 'absolute',\n bottom: tokens.spacingVerticalM,\n boxSizing: 'border-box'\n },\n overlayWide: {\n bottom: tokens.spacingVerticalM\n },\n nextWide: {\n marginLeft: 'auto'\n },\n prevWide: {\n marginRight: 'auto'\n },\n nextOverlayWide: {\n marginRight: tokens.spacingHorizontalM\n },\n prevOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n autoplayOverlayWide: {\n marginLeft: tokens.spacingHorizontalM\n },\n expanded: {\n width: '100%',\n height: '100%',\n alignItems: 'flex-end',\n justifyContent: 'center',\n bottom: 0,\n '> div': {\n position: 'relative',\n bottom: tokens.spacingVerticalL,\n marginBottom: 0\n }\n },\n nextOverlayExpanded: {\n position: 'absolute',\n right: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n prevOverlayExpanded: {\n position: 'absolute',\n left: tokens.spacingHorizontalM,\n top: '50%',\n transform: 'translateY(-50%)'\n },\n autoplayExpanded: {\n position: 'absolute',\n bottom: `-${tokens.spacingHorizontalXS}`,\n left: tokens.spacingHorizontalM,\n marginBottom: tokens.spacingVerticalM\n }\n});\n/\n Apply styling to the CarouselNavContainer slots based on the state\n */ export const useCarouselNavContainerStyles_unstable = (state)=>{\n 'use no memo';\n const { layout } = state;\n const isOverlay = layout === 'overlay' \|\| layout === 'overlay-wide' \|\| layout === 'overlay-expanded';\n const isWide = layout === 'inline-wide' \|\| layout === 'overlay-wide';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);\n if (state.next) {\n state.next.className = mergeClasses(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);\n }\n if (state.prev) {\n state.prev.className = mergeClasses(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);\n }\n if (state.autoplay) {\n state.autoplay.className = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);\n }\n return state;\n};\n"],"names":["carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable","root","next","prev","autoplay","nextTooltip","prevTooltip","autoplayTooltip","useStyles","__styles","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","state","layout","isOverlay","isWide","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-carousel",
-  "version": "9.4.7",
+  "version": "9.5.0",
   "description": "A composable carousel component that enables pagination with minimal rerenders",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,6 +29,7 @@
     "@fluentui/react-button": "^9.3.102",
     "@fluentui/react-context-selector": "^9.1.72",
     "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-tooltip": "^9.5.5",
     "@fluentui/react-jsx-runtime": "^9.0.50",
     "@fluentui/react-shared-contexts": "^9.21.2",
     "@fluentui/react-tabster": "^9.23.3",