@fluentui/react-carousel 9.4.6 → 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.
- package/CHANGELOG.md +20 -2
- package/dist/index.d.ts +4 -0
- package/lib/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
- package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js +12 -3
- package/lib/components/CarouselNavContainer/renderCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js +26 -4
- package/lib/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +7 -1
- package/lib/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/CarouselNavContainer.types.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js +12 -3
- package/lib-commonjs/components/CarouselNavContainer/renderCarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js +26 -4
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainer.js.map +1 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js +6 -1
- package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-carousel
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 18 Feb 2025 11:25:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.5.0)
|
|
8
|
+
|
|
9
|
+
Tue, 18 Feb 2025 11:25:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.7..@fluentui/react-carousel_v9.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: Add tooltip wrappers for icon buttons in nav container ([PR #33821](https://github.com/microsoft/fluentui/pull/33821) by mifraser@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.4.7)
|
|
17
|
+
|
|
18
|
+
Fri, 07 Feb 2025 10:42:12 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.6..@fluentui/react-carousel_v9.4.7)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Bump @fluentui/react-button to v9.3.102 ([PR #33797](https://github.com/microsoft/fluentui/pull/33797) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel_v9.4.6)
|
|
8
26
|
|
|
9
|
-
Tue, 28 Jan 2025 21:
|
|
27
|
+
Tue, 28 Jan 2025 21:26:34 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel_v9.4.5..@fluentui/react-carousel_v9.4.6)
|
|
11
29
|
|
|
12
30
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ import type { Slot } from '@fluentui/react-utilities';
|
|
|
19
19
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
20
20
|
import { ToggleButtonProps } from '@fluentui/react-button';
|
|
21
21
|
import { ToggleButtonState } from '@fluentui/react-button';
|
|
22
|
+
import { TooltipProps } from '@fluentui/react-tooltip';
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* Carousel is the context wrapper and container for all carousel content/controls,
|
|
@@ -234,8 +235,11 @@ export declare type CarouselNavContainerProps = ComponentProps<CarouselNavContai
|
|
|
234
235
|
export declare type CarouselNavContainerSlots = {
|
|
235
236
|
root: Slot<'div'>;
|
|
236
237
|
next?: Slot<CarouselButtonProps>;
|
|
238
|
+
nextTooltip?: Slot<TooltipProps>;
|
|
237
239
|
prev?: Slot<CarouselButtonProps>;
|
|
240
|
+
prevTooltip?: Slot<TooltipProps>;
|
|
238
241
|
autoplay?: Slot<typeof CarouselAutoplayButton>;
|
|
242
|
+
autoplayTooltip?: Slot<TooltipProps>;
|
|
239
243
|
};
|
|
240
244
|
|
|
241
245
|
/**
|
|
@@ -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":"
|
|
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"}
|
|
@@ -6,10 +6,19 @@ import { assertSlots } from '@fluentui/react-utilities';
|
|
|
6
6
|
assertSlots(state);
|
|
7
7
|
return /*#__PURE__*/ _jsxs(state.root, {
|
|
8
8
|
children: [
|
|
9
|
-
state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
|
|
10
|
-
state.
|
|
9
|
+
!state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
|
|
10
|
+
state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplayTooltip, {
|
|
11
|
+
children: /*#__PURE__*/ _jsx(state.autoplay, {})
|
|
12
|
+
}),
|
|
13
|
+
!state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
|
|
14
|
+
state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prevTooltip, {
|
|
15
|
+
children: /*#__PURE__*/ _jsx(state.prev, {})
|
|
16
|
+
}),
|
|
11
17
|
state.root.children,
|
|
12
|
-
state.next && /*#__PURE__*/ _jsx(state.next, {})
|
|
18
|
+
!state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.next, {}),
|
|
19
|
+
state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.nextTooltip, {
|
|
20
|
+
children: /*#__PURE__*/ _jsx(state.next, {})
|
|
21
|
+
})
|
|
13
22
|
]
|
|
14
23
|
});
|
|
15
24
|
};
|
|
@@ -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":"
|
|
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"}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
|
|
4
4
|
import { CarouselButton } from '../CarouselButton/CarouselButton';
|
|
5
|
+
import { Tooltip } from '@fluentui/react-tooltip';
|
|
5
6
|
/**
|
|
6
7
|
* Create the state required to render CarouselNavContainer.
|
|
7
8
|
*
|
|
@@ -27,8 +28,23 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
|
|
|
27
28
|
renderByDefault: true
|
|
28
29
|
});
|
|
29
30
|
const autoplay = slot.optional(props.autoplay, {
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
elementType: CarouselAutoplayButton,
|
|
32
|
+
renderByDefault: !!props.autoplay || !!props.autoplayTooltip
|
|
33
|
+
});
|
|
34
|
+
const nextTooltip = slot.optional(props.nextTooltip, {
|
|
35
|
+
defaultProps: {},
|
|
36
|
+
elementType: Tooltip,
|
|
37
|
+
renderByDefault: false
|
|
38
|
+
});
|
|
39
|
+
const prevTooltip = slot.optional(props.prevTooltip, {
|
|
40
|
+
defaultProps: {},
|
|
41
|
+
elementType: Tooltip,
|
|
42
|
+
renderByDefault: false
|
|
43
|
+
});
|
|
44
|
+
const autoplayTooltip = slot.optional(props.autoplayTooltip, {
|
|
45
|
+
defaultProps: {},
|
|
46
|
+
elementType: Tooltip,
|
|
47
|
+
renderByDefault: false
|
|
32
48
|
});
|
|
33
49
|
return {
|
|
34
50
|
layout,
|
|
@@ -36,7 +52,10 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
|
|
|
36
52
|
root: 'div',
|
|
37
53
|
next: CarouselButton,
|
|
38
54
|
prev: CarouselButton,
|
|
39
|
-
autoplay: CarouselAutoplayButton
|
|
55
|
+
autoplay: CarouselAutoplayButton,
|
|
56
|
+
nextTooltip: Tooltip,
|
|
57
|
+
prevTooltip: Tooltip,
|
|
58
|
+
autoplayTooltip: Tooltip
|
|
40
59
|
},
|
|
41
60
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
42
61
|
ref,
|
|
@@ -46,6 +65,9 @@ import { CarouselButton } from '../CarouselButton/CarouselButton';
|
|
|
46
65
|
}),
|
|
47
66
|
next,
|
|
48
67
|
prev,
|
|
49
|
-
autoplay
|
|
68
|
+
autoplay,
|
|
69
|
+
nextTooltip,
|
|
70
|
+
prevTooltip,
|
|
71
|
+
autoplayTooltip
|
|
50
72
|
};
|
|
51
73
|
};
|
|
@@ -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:
|
|
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"}
|
|
@@ -4,7 +4,13 @@ export const carouselNavContainerClassNames = {
|
|
|
4
4
|
root: 'fui-CarouselNavContainer',
|
|
5
5
|
next: 'fui-CarouselNavContainer__next',
|
|
6
6
|
prev: 'fui-CarouselNavContainer__prev',
|
|
7
|
-
autoplay: 'fui-CarouselNavContainer__autoplay'
|
|
7
|
+
autoplay: 'fui-CarouselNavContainer__autoplay',
|
|
8
|
+
/* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
|
|
9
|
+
* Use 'content' slot to style Tooltip content instead
|
|
10
|
+
*/
|
|
11
|
+
nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
|
|
12
|
+
prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
|
|
13
|
+
autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
|
|
8
14
|
};
|
|
9
15
|
/**
|
|
10
16
|
* Styles for the root slot
|
|
@@ -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;
|
|
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":[]}
|
|
@@ -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":"
|
|
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"}
|
|
@@ -14,10 +14,19 @@ const renderCarouselNavContainer_unstable = (state)=>{
|
|
|
14
14
|
(0, _reactutilities.assertSlots)(state);
|
|
15
15
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
|
16
16
|
children: [
|
|
17
|
-
state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
|
|
18
|
-
state.
|
|
17
|
+
!state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
|
|
18
|
+
state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplayTooltip, {
|
|
19
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {})
|
|
20
|
+
}),
|
|
21
|
+
!state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {}),
|
|
22
|
+
state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prevTooltip, {
|
|
23
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {})
|
|
24
|
+
}),
|
|
19
25
|
state.root.children,
|
|
20
|
-
state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
|
|
26
|
+
!state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {}),
|
|
27
|
+
state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.nextTooltip, {
|
|
28
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
|
|
29
|
+
})
|
|
21
30
|
]
|
|
22
31
|
});
|
|
23
32
|
};
|
|
@@ -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":"
|
|
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"}
|
|
@@ -13,6 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
14
|
const _CarouselAutoplayButton = require("../CarouselAutoplayButton/CarouselAutoplayButton");
|
|
15
15
|
const _CarouselButton = require("../CarouselButton/CarouselButton");
|
|
16
|
+
const _reacttooltip = require("@fluentui/react-tooltip");
|
|
16
17
|
const useCarouselNavContainer_unstable = (props, ref)=>{
|
|
17
18
|
const { layout } = props;
|
|
18
19
|
const next = _reactutilities.slot.optional(props.next, {
|
|
@@ -30,8 +31,23 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
|
|
|
30
31
|
renderByDefault: true
|
|
31
32
|
});
|
|
32
33
|
const autoplay = _reactutilities.slot.optional(props.autoplay, {
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
elementType: _CarouselAutoplayButton.CarouselAutoplayButton,
|
|
35
|
+
renderByDefault: !!props.autoplay || !!props.autoplayTooltip
|
|
36
|
+
});
|
|
37
|
+
const nextTooltip = _reactutilities.slot.optional(props.nextTooltip, {
|
|
38
|
+
defaultProps: {},
|
|
39
|
+
elementType: _reacttooltip.Tooltip,
|
|
40
|
+
renderByDefault: false
|
|
41
|
+
});
|
|
42
|
+
const prevTooltip = _reactutilities.slot.optional(props.prevTooltip, {
|
|
43
|
+
defaultProps: {},
|
|
44
|
+
elementType: _reacttooltip.Tooltip,
|
|
45
|
+
renderByDefault: false
|
|
46
|
+
});
|
|
47
|
+
const autoplayTooltip = _reactutilities.slot.optional(props.autoplayTooltip, {
|
|
48
|
+
defaultProps: {},
|
|
49
|
+
elementType: _reacttooltip.Tooltip,
|
|
50
|
+
renderByDefault: false
|
|
35
51
|
});
|
|
36
52
|
return {
|
|
37
53
|
layout,
|
|
@@ -39,7 +55,10 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
|
|
|
39
55
|
root: 'div',
|
|
40
56
|
next: _CarouselButton.CarouselButton,
|
|
41
57
|
prev: _CarouselButton.CarouselButton,
|
|
42
|
-
autoplay: _CarouselAutoplayButton.CarouselAutoplayButton
|
|
58
|
+
autoplay: _CarouselAutoplayButton.CarouselAutoplayButton,
|
|
59
|
+
nextTooltip: _reacttooltip.Tooltip,
|
|
60
|
+
prevTooltip: _reacttooltip.Tooltip,
|
|
61
|
+
autoplayTooltip: _reacttooltip.Tooltip
|
|
43
62
|
},
|
|
44
63
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
45
64
|
ref,
|
|
@@ -49,6 +68,9 @@ const useCarouselNavContainer_unstable = (props, ref)=>{
|
|
|
49
68
|
}),
|
|
50
69
|
next,
|
|
51
70
|
prev,
|
|
52
|
-
autoplay
|
|
71
|
+
autoplay,
|
|
72
|
+
nextTooltip,
|
|
73
|
+
prevTooltip,
|
|
74
|
+
autoplayTooltip
|
|
53
75
|
};
|
|
54
76
|
};
|
|
@@ -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:
|
|
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
|
@@ -21,7 +21,12 @@ const carouselNavContainerClassNames = {
|
|
|
21
21
|
root: 'fui-CarouselNavContainer',
|
|
22
22
|
next: 'fui-CarouselNavContainer__next',
|
|
23
23
|
prev: 'fui-CarouselNavContainer__prev',
|
|
24
|
-
autoplay: 'fui-CarouselNavContainer__autoplay'
|
|
24
|
+
autoplay: 'fui-CarouselNavContainer__autoplay',
|
|
25
|
+
/* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
|
|
26
|
+
* Use 'content' slot to style Tooltip content instead
|
|
27
|
+
*/ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
|
|
28
|
+
prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
|
|
29
|
+
autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
|
|
25
30
|
};
|
|
26
31
|
/**
|
|
27
32
|
* Styles for the root slot
|
package/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCarouselNavContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavContainerClassNames = {\n root: 'fui-CarouselNavContainer',\n next: 'fui-CarouselNavContainer__next',\n prev: 'fui-CarouselNavContainer__prev',\n autoplay: 'fui-CarouselNavContainer__autoplay'\n};\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":"
|
|
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-carousel",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "A composable carousel component that enables pagination with minimal rerenders",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,9 +26,10 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@fluentui/react-aria": "^9.13.14",
|
|
29
|
-
"@fluentui/react-button": "^9.3.
|
|
29
|
+
"@fluentui/react-button": "^9.3.102",
|
|
30
30
|
"@fluentui/react-context-selector": "^9.1.72",
|
|
31
31
|
"@fluentui/react-icons": "^2.0.245",
|
|
32
|
+
"@fluentui/react-tooltip": "^9.5.5",
|
|
32
33
|
"@fluentui/react-jsx-runtime": "^9.0.50",
|
|
33
34
|
"@fluentui/react-shared-contexts": "^9.21.2",
|
|
34
35
|
"@fluentui/react-tabster": "^9.23.3",
|