Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Carousel: function() {
return _index.Carousel;
},
carouselClassNames: function() {
return _index.carouselClassNames;
},
renderCarousel_unstable: function() {
return _index.renderCarousel_unstable;
},
useCarouselStyles_unstable: function() {
return _index.useCarouselStyles_unstable;
},
useCarousel_unstable: function() {
return _index.useCarousel_unstable;
}
});
const _index = require("./components/Carousel/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Carousel.ts"],"sourcesContent":["export type {\n CarouselAnnouncerFunction,\n CarouselMotion,\n CarouselProps,\n CarouselSlots,\n CarouselState,\n CarouselUpdateData,\n CarouselVisibilityChangeEvent,\n CarouselVisibilityEventDetail,\n} from './components/Carousel/index';\nexport {\n Carousel,\n carouselClassNames,\n renderCarousel_unstable,\n useCarouselStyles_unstable,\n useCarousel_unstable,\n} from './components/Carousel/index';\n"],"names":["Carousel","carouselClassNames","renderCarousel_unstable","useCarouselStyles_unstable","useCarousel_unstable"],"mappings":";;;;;;;;;;;;eAWEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselAutoplayButton: function() {
return _index.CarouselAutoplayButton;
},
carouselAutoplayButtonClassNames: function() {
return _index.carouselAutoplayButtonClassNames;
},
renderCarouselAutoplayButton_unstable: function() {
return _index.renderCarouselAutoplayButton_unstable;
},
useCarouselAutoplayButtonStyles_unstable: function() {
return _index.useCarouselAutoplayButtonStyles_unstable;
},
useCarouselAutoplayButton_unstable: function() {
return _index.useCarouselAutoplayButton_unstable;
}
});
const _index = require("./components/CarouselAutoplayButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselAutoplayButton.ts"],"sourcesContent":["export type {\n CarouselAutoplayAriaLabelFunction,\n CarouselAutoplayButtonProps,\n CarouselAutoplayButtonSlots,\n CarouselAutoplayButtonState,\n CarouselAutoplayChangeData,\n} from './components/CarouselAutoplayButton/index';\nexport {\n CarouselAutoplayButton,\n carouselAutoplayButtonClassNames,\n renderCarouselAutoplayButton_unstable,\n useCarouselAutoplayButtonStyles_unstable,\n useCarouselAutoplayButton_unstable,\n} from './components/CarouselAutoplayButton/index';\n"],"names":["CarouselAutoplayButton","carouselAutoplayButtonClassNames","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCarouselAutoplayButton_unstable"],"mappings":";;;;;;;;;;;;eAQEA,6BAAsB;;;eACtBC,uCAAgC;;;eAChCC,4CAAqC;;;eACrCC,+CAAwC;;;eACxCC,yCAAkC;;;uBAC7B,4CAA4C"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselButton: function() {
return _index.CarouselButton;
},
carouselButtonClassNames: function() {
return _index.carouselButtonClassNames;
},
renderCarouselButton_unstable: function() {
return _index.renderCarouselButton_unstable;
},
useCarouselButtonStyles_unstable: function() {
return _index.useCarouselButtonStyles_unstable;
},
useCarouselButton_unstable: function() {
return _index.useCarouselButton_unstable;
}
});
const _index = require("./components/CarouselButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselButton.ts"],"sourcesContent":["export type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './components/CarouselButton/index';\nexport {\n CarouselButton,\n carouselButtonClassNames,\n renderCarouselButton_unstable,\n useCarouselButtonStyles_unstable,\n useCarouselButton_unstable,\n} from './components/CarouselButton/index';\n"],"names":["CarouselButton","carouselButtonClassNames","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCarouselButton_unstable"],"mappings":";;;;;;;;;;;;eAEEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,uCAAgC;;;eAChCC,iCAA0B;;;uBACrB,oCAAoC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselCard: function() {
return _index.CarouselCard;
},
carouselCardClassNames: function() {
return _index.carouselCardClassNames;
},
renderCarouselCard_unstable: function() {
return _index.renderCarouselCard_unstable;
},
useCarouselCardStyles_unstable: function() {
return _index.useCarouselCardStyles_unstable;
},
useCarouselCard_unstable: function() {
return _index.useCarouselCard_unstable;
}
});
const _index = require("./components/CarouselCard/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselCard.ts"],"sourcesContent":["export type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './components/CarouselCard/index';\nexport {\n CarouselCard,\n carouselCardClassNames,\n renderCarouselCard_unstable,\n useCarouselCardStyles_unstable,\n useCarouselCard_unstable,\n} from './components/CarouselCard/index';\n"],"names":["CarouselCard","carouselCardClassNames","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCarouselCard_unstable"],"mappings":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,6BAAsB;;;eACtBC,kCAA2B;;;eAC3BC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselProvider: function() {
return _CarouselContext.CarouselProvider;
},
carouselContextDefaultValue: function() {
return _CarouselContext.carouselContextDefaultValue;
},
useCarouselContext_unstable: function() {
return _CarouselContext.useCarouselContext_unstable;
}
});
const _CarouselContext = require("./components/CarouselContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselContext.ts"],"sourcesContent":["export {\n CarouselProvider,\n carouselContextDefaultValue,\n useCarouselContext_unstable,\n} from './components/CarouselContext';\nexport type {\n CarouselAppearance,\n CarouselContextValue,\n CarouselContextValues,\n CarouselIndexChangeData,\n} from './components/CarouselContext.types';\n"],"names":["CarouselProvider","carouselContextDefaultValue","useCarouselContext_unstable"],"mappings":";;;;;;;;;;;;eACEA,iCAAgB;;;eAChBC,4CAA2B;;;eAC3BC,4CAA2B;;;iCACtB,+BAA+B"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNav: function() {
return _index.CarouselNav;
},
carouselNavClassNames: function() {
return _index.carouselNavClassNames;
},
renderCarouselNav_unstable: function() {
return _index.renderCarouselNav_unstable;
},
useCarouselNavStyles_unstable: function() {
return _index.useCarouselNavStyles_unstable;
},
useCarouselNav_unstable: function() {
return _index.useCarouselNav_unstable;
}
});
const _index = require("./components/CarouselNav/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselNav.ts"],"sourcesContent":["export type {\n CarouselNavContextValue,\n CarouselNavProps,\n CarouselNavSlots,\n CarouselNavState,\n NavButtonRenderFunction,\n} from './components/CarouselNav/index';\nexport {\n CarouselNav,\n carouselNavClassNames,\n renderCarouselNav_unstable,\n useCarouselNavStyles_unstable,\n useCarouselNav_unstable,\n} from './components/CarouselNav/index';\n"],"names":["CarouselNav","carouselNavClassNames","renderCarouselNav_unstable","useCarouselNavStyles_unstable","useCarouselNav_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNavButton: function() {
return _index.CarouselNavButton;
},
carouselNavButtonClassNames: function() {
return _index.carouselNavButtonClassNames;
},
renderCarouselNavButton_unstable: function() {
return _index.renderCarouselNavButton_unstable;
},
useCarouselNavButtonStyles_unstable: function() {
return _index.useCarouselNavButtonStyles_unstable;
},
useCarouselNavButton_unstable: function() {
return _index.useCarouselNavButton_unstable;
}
});
const _index = require("./components/CarouselNavButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselNavButton.ts"],"sourcesContent":["export type {\n CarouselNavButtonProps,\n CarouselNavButtonSlots,\n CarouselNavButtonState,\n} from './components/CarouselNavButton/index';\nexport {\n CarouselNavButton,\n carouselNavButtonClassNames,\n renderCarouselNavButton_unstable,\n useCarouselNavButtonStyles_unstable,\n useCarouselNavButton_unstable,\n} from './components/CarouselNavButton/index';\n"],"names":["CarouselNavButton","carouselNavButtonClassNames","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCarouselNavButton_unstable"],"mappings":";;;;;;;;;;;;eAMEA,wBAAiB;;;eACjBC,kCAA2B;;;eAC3BC,uCAAgC;;;eAChCC,0CAAmC;;;eACnCC,oCAA6B;;;uBACxB,uCAAuC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNavContainer: function() {
return _index.CarouselNavContainer;
},
carouselNavContainerClassNames: function() {
return _index.carouselNavContainerClassNames;
},
renderCarouselNavContainer_unstable: function() {
return _index.renderCarouselNavContainer_unstable;
},
useCarouselNavContainerStyles_unstable: function() {
return _index.useCarouselNavContainerStyles_unstable;
},
useCarouselNavContainer_unstable: function() {
return _index.useCarouselNavContainer_unstable;
}
});
const _index = require("./components/CarouselNavContainer/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselNavContainer.ts"],"sourcesContent":["export type {\n CarouselNavContainerProps,\n CarouselNavContainerSlots,\n CarouselNavContainerState,\n} from './components/CarouselNavContainer/index';\nexport {\n CarouselNavContainer,\n carouselNavContainerClassNames,\n renderCarouselNavContainer_unstable,\n useCarouselNavContainerStyles_unstable,\n useCarouselNavContainer_unstable,\n} from './components/CarouselNavContainer/index';\n"],"names":["CarouselNavContainer","carouselNavContainerClassNames","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCarouselNavContainer_unstable"],"mappings":";;;;;;;;;;;;eAMEA,2BAAoB;;;eACpBC,qCAA8B;;;eAC9BC,0CAAmC;;;eACnCC,6CAAsC;;;eACtCC,uCAAgC;;;uBAC3B,0CAA0C"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNavImageButton: function() {
return _index.CarouselNavImageButton;
},
carouselNavImageButtonClassNames: function() {
return _index.carouselNavImageButtonClassNames;
},
renderCarouselNavImageButton_unstable: function() {
return _index.renderCarouselNavImageButton_unstable;
},
useCarouselNavImageButtonStyles_unstable: function() {
return _index.useCarouselNavImageButtonStyles_unstable;
},
useCarouselNavImageButton_unstable: function() {
return _index.useCarouselNavImageButton_unstable;
}
});
const _index = require("./components/CarouselNavImageButton/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselNavImageButton.ts"],"sourcesContent":["export type {\n CarouselNavImageButtonProps,\n CarouselNavImageButtonSlots,\n CarouselNavImageButtonState,\n} from './components/CarouselNavImageButton/index';\nexport {\n CarouselNavImageButton,\n carouselNavImageButtonClassNames,\n renderCarouselNavImageButton_unstable,\n useCarouselNavImageButtonStyles_unstable,\n useCarouselNavImageButton_unstable,\n} from './components/CarouselNavImageButton/index';\n"],"names":["CarouselNavImageButton","carouselNavImageButtonClassNames","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCarouselNavImageButton_unstable"],"mappings":";;;;;;;;;;;;eAMEA,6BAAsB;;;eACtBC,uCAAgC;;;eAChCC,4CAAqC;;;eACrCC,+CAAwC;;;eACxCC,yCAAkC;;;uBAC7B,4CAA4C"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselSlider: function() {
return _index.CarouselSlider;
},
carouselSliderClassNames: function() {
return _index.carouselSliderClassNames;
},
renderCarouselSlider_unstable: function() {
return _index.renderCarouselSlider_unstable;
},
useCarouselSliderStyles_unstable: function() {
return _index.useCarouselSliderStyles_unstable;
},
useCarouselSlider_unstable: function() {
return _index.useCarouselSlider_unstable;
}
});
const _index = require("./components/CarouselSlider/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselSlider.ts"],"sourcesContent":["export type {\n CarouselSliderContextValue,\n CarouselSliderProps,\n CarouselSliderSlots,\n CarouselSliderState,\n} from './components/CarouselSlider/index';\nexport {\n CarouselSlider,\n carouselSliderClassNames,\n renderCarouselSlider_unstable,\n useCarouselSliderStyles_unstable,\n useCarouselSlider_unstable,\n} from './components/CarouselSlider/index';\n"],"names":["CarouselSlider","carouselSliderClassNames","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSlider_unstable"],"mappings":";;;;;;;;;;;;eAOEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,uCAAgC;;;eAChCC,iCAA0B;;;uBACrB,oCAAoC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselViewport: function() {
return _index.CarouselViewport;
},
carouselViewportClassNames: function() {
return _index.carouselViewportClassNames;
},
renderCarouselViewport_unstable: function() {
return _index.renderCarouselViewport_unstable;
},
useCarouselViewportStyles_unstable: function() {
return _index.useCarouselViewportStyles_unstable;
},
useCarouselViewport_unstable: function() {
return _index.useCarouselViewport_unstable;
}
});
const _index = require("./components/CarouselViewport/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CarouselViewport.ts"],"sourcesContent":["export type {\n CarouselViewportProps,\n CarouselViewportSlots,\n CarouselViewportState,\n} from './components/CarouselViewport/index';\nexport {\n CarouselViewport,\n carouselViewportClassNames,\n renderCarouselViewport_unstable,\n useCarouselViewportStyles_unstable,\n useCarouselViewport_unstable,\n} from './components/CarouselViewport/index';\n"],"names":["CarouselViewport","carouselViewportClassNames","renderCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCarouselViewport_unstable"],"mappings":";;;;;;;;;;;;eAMEA,uBAAgB;;;eAChBC,iCAA0B;;;eAC1BC,sCAA+B;;;eAC/BC,yCAAkC;;;eAClCC,mCAA4B;;;uBACvB,sCAAsC"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Carousel", {
enumerable: true,
get: function() {
return Carousel;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarousel = require("./useCarousel");
const _renderCarousel = require("./renderCarousel");
const _useCarouselStylesstyles = require("./useCarouselStyles.styles");
const _useCarouselContextValues = require("./useCarouselContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Carousel = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarousel.useCarousel_unstable)(props, ref);
(0, _useCarouselStylesstyles.useCarouselStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselStyles_unstable')(state);
const contextValues = (0, _useCarouselContextValues.useCarouselContextValues_unstable)(state);
return (0, _renderCarousel.renderCarousel_unstable)(state, contextValues);
});
Carousel.displayName = 'Carousel';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarousel_unstable } from './useCarousel';\nimport { renderCarousel_unstable } from './renderCarousel';\nimport { useCarouselStyles_unstable } from './useCarouselStyles.styles';\nimport type { CarouselProps } from './Carousel.types';\nimport { useCarouselContextValues_unstable } from './useCarouselContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Carousel is the context wrapper and container for all carousel content/controls,\n * it has no direct style or slot opinions.\n *\n * Carousel also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Carousel: ForwardRefComponent<CarouselProps> = React.forwardRef((props, ref) => {\n const state = useCarousel_unstable(props, ref);\n\n useCarouselStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselStyles_unstable')(state);\n\n const contextValues = useCarouselContextValues_unstable(state);\n\n return renderCarousel_unstable(state, contextValues);\n});\n\nCarousel.displayName = 'Carousel';\n"],"names":["React","useCarousel_unstable","renderCarousel_unstable","useCarouselStyles_unstable","useCarouselContextValues_unstable","useCustomStyleHook_unstable","Carousel","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAEM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAEtB,6BAA6B;qCACnC,kCAAkC;AAQvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;QAE1CN,mDAAAA,EAA2BO;QAC3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,MAAMC,oBAAgBP,2DAAAA,EAAkCM;IAExD,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* @internal
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/Carousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { CarouselAppearance, CarouselContextValue, CarouselIndexChangeData } from '../CarouselContext.types';\n\nexport type CarouselSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Children function replacement, passes through updated context index and carousel information for localization\n */\nexport type CarouselAnnouncerFunction = (index: number, totalSlides: number, slideGroupList: number[][]) => string;\n\n/**\n * List of integrated motion types\n */\nexport type CarouselMotion = 'slide' | { kind: 'slide'; duration?: number } | 'fade';\n\n/**\n * Carousel Props\n */\nexport type CarouselProps = ComponentProps<CarouselSlots> & {\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultActiveIndex?: number;\n\n /**\n * The alignment of the carousel.\n */\n align?: 'center' | 'start' | 'end';\n\n /**\n * The value of the currently active page.\n */\n activeIndex?: number;\n\n /**\n * Sets visual treatment for the Carousel container.\n *\n * `flat`\n * Retains the minimal styling used by default prior to introducing appearance-based styles.\n *\n * `elevated`\n * Applies rounded corners, background, and shadow tokens so the Carousel is presented as a surfaced container.\n *\n * @default 'flat'\n */\n appearance?: CarouselAppearance;\n\n /**\n * Callback to notify a page change.\n */\n onActiveIndexChange?: EventHandler<CarouselIndexChangeData>;\n\n /**\n * Circular enables the carousel to loop back around on navigation past trailing index.\n */\n circular?: boolean;\n\n /**\n * Controls the number of carousel cards per navigation element, will default to 'auto'\n * Recommended to set to '1' when using full page carousel cards.\n */\n groupSize?: number | 'auto';\n\n /**\n * Enables drag to scroll on carousel items.\n * Defaults to: False\n */\n draggable?: boolean;\n\n /**\n * Adds whitespace to start/end so that 'align' prop is always respected for current index\n * Defaults to: False\n */\n whitespace?: boolean;\n\n /**\n * Sets motion type as either 'slide' or 'fade'\n * Defaults: 'slide'\n *\n * Users can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\n * Drag interactions are not affected because duration is then determined by the drag force.\n *\n * Note: Duration is not in milliseconds because Carousel uses an\n * attraction physics simulation when scrolling instead of easings.\n * Only values between 20-60 are recommended, 25 is the default.\n */\n motion?: CarouselMotion;\n\n /**\n * Localizes the string used to announce carousel page changes\n * Defaults to: undefined\n */\n announcement?: CarouselAnnouncerFunction;\n\n /**\n * Choose a delay between autoplay transitions in milliseconds.\n * Only active if Autoplay is enabled via CarouselAutoplayButton\n *\n * Defaults: 4000\n */\n autoplayInterval?: number;\n};\n\n/**\n * State used in rendering Carousel\n */\nexport type CarouselState = ComponentState<CarouselSlots> & CarouselContextValue;\n\nexport interface CarouselVisibilityEventDetail {\n isVisible: boolean;\n}\n\nexport type CarouselVisibilityChangeEvent = CustomEvent<CarouselVisibilityEventDetail>;\n\n/**\n * @internal\n */\nexport interface CarouselUpdateData {\n /**\n * The current carousel index, a change in index will not trigger the callback (use context index instead).\n */\n activeIndex: number;\n /**\n * The total number of slides to be navigated, accounts for grouping.\n */\n navItemsCount: number;\n /**\n * A breakdown of the card indexes contained within each slide index.\n */\n groupIndexList: number[][];\n /**\n * An array of the card DOM elements after render\n */\n slideNodes: HTMLElement[];\n /**\n * Whether the carousel has enough cards present to enable looping without issues.\n */\n canLoop?: boolean;\n}\n"],"names":[],"mappings":"AAoHA;;CAEC,GACD,WAqBC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Carousel: function() {
return _Carousel.Carousel;
},
carouselClassNames: function() {
return _useCarouselStylesstyles.carouselClassNames;
},
renderCarousel_unstable: function() {
return _renderCarousel.renderCarousel_unstable;
},
useCarouselStyles_unstable: function() {
return _useCarouselStylesstyles.useCarouselStyles_unstable;
},
useCarousel_unstable: function() {
return _useCarousel.useCarousel_unstable;
}
});
const _Carousel = require("./Carousel");
const _renderCarousel = require("./renderCarousel");
const _useCarousel = require("./useCarousel");
const _useCarouselStylesstyles = require("./useCarouselStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/index.ts"],"sourcesContent":["export { Carousel } from './Carousel';\nexport type {\n CarouselAnnouncerFunction,\n CarouselMotion,\n CarouselProps,\n CarouselSlots,\n CarouselState,\n CarouselUpdateData,\n CarouselVisibilityChangeEvent,\n CarouselVisibilityEventDetail,\n} from './Carousel.types';\nexport { renderCarousel_unstable } from './renderCarousel';\nexport { useCarousel_unstable } from './useCarousel';\nexport { carouselClassNames, useCarouselStyles_unstable } from './useCarouselStyles.styles';\n"],"names":["Carousel","renderCarousel_unstable","useCarousel_unstable","carouselClassNames","useCarouselStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAaRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAZJ,aAAa;gCAWE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarousel_unstable", {
enumerable: true,
get: function() {
return renderCarousel_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CarouselContext = require("../CarouselContext");
const renderCarousel_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselContext.CarouselProvider, {
value: contextValues.carousel,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/renderCarousel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselState, CarouselSlots } from './Carousel.types';\nimport { CarouselProvider } from '../CarouselContext';\nimport type { CarouselContextValues } from '../CarouselContext.types';\n\n/**\n * Render the final JSX of Carousel\n */\nexport const renderCarousel_unstable = (state: CarouselState, contextValues: CarouselContextValues): JSXElement => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["assertSlots","CarouselProvider","renderCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;iCAGvB,qBAAqB;AAM/C,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,iCAAAA,EAAAA;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,126 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarousel_unstable", {
enumerable: true,
get: function() {
return useCarousel_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useEmblaCarousel = require("../useEmblaCarousel");
function useCarousel_unstable(props, ref) {
'use no memo';
const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto', draggable = false, whitespace = false, announcement, motion = 'slide', autoplayInterval = 4000, appearance = 'flat' } = props;
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const { activeIndex, carouselApi, containerRef, viewportRef, subscribeForValues, enableAutoplay, resetAutoplay } = (0, _useEmblaCarousel.useEmblaCarousel)({
align,
direction: dir,
loop: circular,
slidesToScroll: groupSize,
defaultActiveIndex: props.defaultActiveIndex,
activeIndex: props.activeIndex,
watchDrag: draggable,
containScroll: whitespace ? false : 'keepSnaps',
motion,
onDragIndexChange: onActiveIndexChange,
onAutoplayIndexChange: onActiveIndexChange,
autoplayInterval
});
const selectPageByElement = (0, _reactutilities.useEventCallback)((event, element, jump)=>{
const foundIndex = carouselApi.scrollToElement(element, jump);
onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(event, {
event,
type: 'focus',
index: foundIndex
});
return foundIndex;
});
const selectPageByIndex = (0, _reactutilities.useEventCallback)((event, index, jump)=>{
carouselApi.scrollToIndex(index, jump);
onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(event, {
event,
type: 'click',
index
});
});
const selectPageByDirection = (0, _reactutilities.useEventCallback)((event, direction)=>{
const nextPageIndex = carouselApi.scrollInDirection(direction);
onActiveIndexChange === null || onActiveIndexChange === void 0 ? void 0 : onActiveIndexChange(event, {
event,
type: 'click',
index: nextPageIndex
});
return nextPageIndex;
});
const mergedContainerRef = (0, _reactutilities.useMergedRefs)(ref, containerRef);
// Announce carousel updates
const announcementTextRef = _react.useRef('');
const totalNavLength = _react.useRef(0);
const navGroupRef = _react.useRef([]);
const { announce } = (0, _reactsharedcontexts.useAnnounce)();
const updateAnnouncement = (0, _reactutilities.useEventCallback)(()=>{
if (totalNavLength.current <= 0 || !announcement) {
// Ignore announcements until slides discovered
return;
}
const announcementText = announcement(activeIndex, totalNavLength.current, navGroupRef.current);
if (announcementText !== announcementTextRef.current) {
announcementTextRef.current = announcementText;
announce(announcementText, {
polite: true
});
}
});
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
// Subscribe to any non-index carousel state changes
return subscribeForValues((data)=>{
if (totalNavLength.current <= 0 && data.navItemsCount > 0 && announcement) {
const announcementText = announcement(data.activeIndex, data.navItemsCount, data.groupIndexList);
// Initialize our string to prevent updateAnnouncement from reading an initial load
announcementTextRef.current = announcementText;
}
totalNavLength.current = data.navItemsCount;
navGroupRef.current = data.groupIndexList;
updateAnnouncement();
});
}, [
subscribeForValues,
updateAnnouncement,
announcement
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
updateAnnouncement();
}, [
activeIndex,
updateAnnouncement
]);
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: mergedContainerRef,
role: 'region',
...props
}), {
elementType: 'div'
}),
activeIndex,
appearance,
circular,
containerRef: mergedContainerRef,
viewportRef,
selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
resetAutoplay
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,44 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselContextValues_unstable", {
enumerable: true,
get: function() {
return useCarouselContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useCarouselContextValues_unstable(state) {
const { activeIndex, appearance, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef, viewportRef } = state;
const carousel = _react.useMemo(()=>({
activeIndex,
appearance,
selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
resetAutoplay,
circular,
containerRef,
viewportRef
}), [
activeIndex,
appearance,
selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
resetAutoplay,
circular,
containerRef,
viewportRef
]);
return {
carousel
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { CarouselContextValues } from '../CarouselContext.types';\nimport type { CarouselState } from './Carousel.types';\n\nexport function useCarouselContextValues_unstable(state: CarouselState): CarouselContextValues {\n const {\n activeIndex,\n appearance,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n } = state;\n\n const carousel = React.useMemo(\n () => ({\n activeIndex,\n appearance,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n }),\n [\n activeIndex,\n appearance,\n selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n ],\n );\n\n return { carousel };\n}\n"],"names":["React","useCarouselContextValues_unstable","state","activeIndex","appearance","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","viewportRef","carousel","useMemo"],"mappings":"AAAA;;;;;+BAOgBC;;;;;;;iEALO,QAAQ;AAKxB,2CAA2CC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,UAAU,EACVC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACZ,GAAGX;IAEJ,MAAMY,WAAWd,OAAMe,OAAO,CAC5B,IAAO,CAAA;YACLZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QACEV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}

View File

@@ -0,0 +1,69 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselClassNames: function() {
return carouselClassNames;
},
useCarouselStyles_unstable: function() {
return useCarouselStyles_unstable;
}
});
const _react = require("@griffel/react");
const carouselClassNames = {
root: 'fui-Carousel'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
B68tc82: "f1p9o1ba",
Eiaeu8: "f1115ve7",
qhf8xq: "f10pi13n"
},
elevated: {
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "flfurxc",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f16dxoy8"
}
}, {
d: [
".f1p9o1ba{overflow-x:hidden;}",
".f1115ve7{overflow-anchor:none;}",
".f10pi13n{position:relative;}",
[
".flfurxc{margin:var(--spacingVerticalL);}",
{
p: -1
}
],
[
".f16dxoy8{padding:var(--spacingVerticalL);}",
{
p: -1
}
]
]
});
const useCarouselStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { appearance } = state;
state.root.className = (0, _react.mergeClasses)(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselClassNames = {\n root: 'fui-Carousel'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative'\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL\n }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCarouselStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance } = state;\n state.root.className = mergeClasses(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","carouselClassNames","root","useStyles","B68tc82","Eiaeu8","qhf8xq","elevated","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useCarouselStyles_unstable","state","styles","appearance","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,kBAAkB;;;8BAqBY;;;;uBAvBF,gBAAgB;AAElD,2BAA2B;IAC9BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAarB,CAAC;AAGS,MAAMC,8BAA8BC,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEoB,UAAAA,EAAY,GAAGF,KAAK;IAC5BA,KAAK,CAACnB,IAAI,CAACsB,SAAS,OAAGzB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,UAAU,KAAK,UAAU,IAAID,MAAM,CAACf,QAAQ,EAAEc,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;IAC7I,OAAOH,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,47 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselClassNames: function() {
return carouselClassNames;
},
useCarouselStyles_unstable: function() {
return useCarouselStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const carouselClassNames = {
root: 'fui-Carousel'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
// Only hide horizontal overflow to enable focus border to bleed bounds vertically
overflowX: 'hidden',
overflowAnchor: 'none',
position: 'relative'
},
elevated: {
// Reserve vertical space so the drop shadow has room to render
// without being clipped by surrounding layout or overflow rules.
margin: _reacttheme.tokens.spacingVerticalL,
padding: _reacttheme.tokens.spacingVerticalL
}
});
const useCarouselStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { appearance } = state;
state.root.className = (0, _react.mergeClasses)(carouselClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/useCarouselStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { CarouselSlots, CarouselState } from './Carousel.types';\n\nexport const carouselClassNames: SlotClassNames<CarouselSlots> = {\n root: 'fui-Carousel',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n // Only hide horizontal overflow to enable focus border to bleed bounds vertically\n overflowX: 'hidden',\n overflowAnchor: 'none',\n position: 'relative',\n },\n elevated: {\n // Reserve vertical space so the drop shadow has room to render\n // without being clipped by surrounding layout or overflow rules.\n margin: tokens.spacingVerticalL,\n padding: tokens.spacingVerticalL,\n },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCarouselStyles_unstable = (state: CarouselState): CarouselState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance } = state;\n\n state.root.className = mergeClasses(\n carouselClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","carouselClassNames","root","useStyles","overflowX","overflowAnchor","position","elevated","margin","spacingVerticalL","padding","useCarouselStyles_unstable","state","styles","appearance","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,kBAAAA;;;IAyBAU,0BAAAA;;;;uBA/B4B,iBAAiB;4BAEnC,wBAAwB;AAIxC,2BAA0D;IAC/DT,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJ,kFAAkF;QAClFE,WAAW;QACXC,gBAAgB;QAChBC,UAAU;IACZ;IACAC,UAAU;QACR,+DAA+D;QAC/D,iEAAiE;QACjEC,QAAQR,kBAAAA,CAAOS,gBAAgB;QAC/BC,SAASV,kBAAAA,CAAOS,gBAAgB;IAClC;AACF;AAKO,mCAAmC,CAACG;IACzC;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,UAAU,EAAE,GAAGF;IAEvBA,MAAMV,IAAI,CAACa,SAAS,OAAGhB,mBAAAA,EACrBE,mBAAmBC,IAAI,EACvBW,OAAOX,IAAI,EACXY,eAAe,cAAcD,OAAON,QAAQ,EAC5CK,MAAMV,IAAI,CAACa,SAAS;IAEtB,OAAOH;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CarouselAutoplayButton", {
enumerable: true,
get: function() {
return CarouselAutoplayButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton");
const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton");
const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CarouselAutoplayButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselAutoplayButton.useCarouselAutoplayButton_unstable)(props, ref);
(0, _useCarouselAutoplayButtonStylesstyles.useCarouselAutoplayButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselAutoplayButtonStyles_unstable')(state);
return (0, _renderCarouselAutoplayButton.renderCarouselAutoplayButton_unstable)(state);
});
CarouselAutoplayButton.displayName = 'CarouselAutoplayButton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nimport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nimport { useCarouselAutoplayButtonStyles_unstable } from './useCarouselAutoplayButtonStyles.styles';\nimport type { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\n * CarouselAutoplayButton which must be present for auto-play to be enabled.\n *\n * If CarouselAutoplayButton is present, auto-play will default to true on mount.\n */\nexport const CarouselAutoplayButton: ForwardRefComponent<CarouselAutoplayButtonProps> = React.forwardRef(\n (props, ref) => {\n const state = useCarouselAutoplayButton_unstable(props, ref);\n\n useCarouselAutoplayButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselAutoplayButtonStyles_unstable')(state);\n\n return renderCarouselAutoplayButton_unstable(state);\n },\n);\n\nCarouselAutoplayButton.displayName = 'CarouselAutoplayButton';\n"],"names":["React","useCarouselAutoplayButton_unstable","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButtonStyles_unstable","useCustomStyleHook_unstable","CarouselAutoplayButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2CAEoB,8BAA8B;8CAC3B,iCAAiC;uDAC9B,2CAA2C;qCAExD,kCAAkC;AAQvE,MAAMK,yBAAAA,WAAAA,GAA2EL,OAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,YAAQR,6DAAAA,EAAmCM,OAAOC;QAExDL,+EAAAA,EAAyCM;QACzCL,gDAAAA,EAA4B,4CAA4CK;IAExE,WAAOP,mEAAAA,EAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselAutoplayButtonSlots = ButtonSlots & {\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\nexport type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The updated autoplay value.\n */\n checked: boolean;\n};\n\nexport type CarouselAutoplayAriaLabelFunction = (autoplay: boolean) => string;\n\n/**\n * CarouselAutoplayButton Props\n */\nexport type CarouselAutoplayButtonProps = ToggleButtonProps &\n ComponentProps<CarouselAutoplayButtonSlots> & {\n /**\n * Callback that informs the user when internal autoplay value has changed\n */\n onCheckedChange?: EventHandler<CarouselAutoplayChangeData>;\n };\n\n/**\n * State used in rendering CarouselAutoplayButton\n */\nexport type CarouselAutoplayButtonState = ToggleButtonState & ComponentState<CarouselAutoplayButtonSlots>;\n"],"names":["React"],"mappings":";;;;;iEAGuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselAutoplayButton: function() {
return _CarouselAutoplayButton.CarouselAutoplayButton;
},
carouselAutoplayButtonClassNames: function() {
return _useCarouselAutoplayButtonStylesstyles.carouselAutoplayButtonClassNames;
},
renderCarouselAutoplayButton_unstable: function() {
return _renderCarouselAutoplayButton.renderCarouselAutoplayButton_unstable;
},
useCarouselAutoplayButtonStyles_unstable: function() {
return _useCarouselAutoplayButtonStylesstyles.useCarouselAutoplayButtonStyles_unstable;
},
useCarouselAutoplayButton_unstable: function() {
return _useCarouselAutoplayButton.useCarouselAutoplayButton_unstable;
}
});
const _CarouselAutoplayButton = require("./CarouselAutoplayButton");
const _renderCarouselAutoplayButton = require("./renderCarouselAutoplayButton");
const _useCarouselAutoplayButton = require("./useCarouselAutoplayButton");
const _useCarouselAutoplayButtonStylesstyles = require("./useCarouselAutoplayButtonStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselAutoplayButton/index.ts"],"sourcesContent":["export { CarouselAutoplayButton } from './CarouselAutoplayButton';\nexport type {\n CarouselAutoplayAriaLabelFunction,\n CarouselAutoplayButtonProps,\n CarouselAutoplayButtonSlots,\n CarouselAutoplayButtonState,\n CarouselAutoplayChangeData,\n} from './CarouselAutoplayButton.types';\nexport { renderCarouselAutoplayButton_unstable } from './renderCarouselAutoplayButton';\nexport { useCarouselAutoplayButton_unstable } from './useCarouselAutoplayButton';\nexport {\n carouselAutoplayButtonClassNames,\n useCarouselAutoplayButtonStyles_unstable,\n} from './useCarouselAutoplayButtonStyles.styles';\n"],"names":["CarouselAutoplayButton","renderCarouselAutoplayButton_unstable","useCarouselAutoplayButton_unstable","carouselAutoplayButtonClassNames","useCarouselAutoplayButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8CAAsB;;;eAW7BG,uEAAgC;;;eAHzBF,mEAAqC;;;eAI5CG,+EAAwC;;;eAHjCF,6DAAkC;;;wCATJ,2BAA2B;8CAQZ,iCAAiC;2CACpC,8BAA8B;uDAI1E,2CAA2C"}

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarouselAutoplayButton_unstable", {
enumerable: true,
get: function() {
return renderCarouselAutoplayButton_unstable;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _reactbutton = require("@fluentui/react-button");
const renderCarouselAutoplayButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
// We render the underlying react-button with injected carousel functionality
return (0, _reactbutton.renderToggleButton_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselAutoplayButton/renderCarouselAutoplayButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonState, CarouselAutoplayButtonSlots } from './CarouselAutoplayButton.types';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselAutoplayButton\n */\nexport const renderCarouselAutoplayButton_unstable = (state: CarouselAutoplayButtonState): JSXElement => {\n assertSlots<CarouselAutoplayButtonSlots>(state);\n\n // We render the underlying react-button with injected carousel functionality\n return renderToggleButton_unstable(state);\n};\n"],"names":["assertSlots","renderToggleButton_unstable","renderCarouselAutoplayButton_unstable","state"],"mappings":";;;;;;;;;;gCAA4B,4BAA4B;6BAGZ,yBAAyB;AAK9D,MAAME,wCAAwC,CAACC;QACpDH,2BAAAA,EAAyCG;IAEzC,6EAA6E;IAC7E,WAAOF,wCAAAA,EAA4BE;AACrC,EAAE"}

View File

@@ -0,0 +1,64 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselAutoplayButton_unstable", {
enumerable: true,
get: function() {
return useCarouselAutoplayButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactbutton = require("@fluentui/react-button");
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CarouselContext = require("../CarouselContext");
const useCarouselAutoplayButton_unstable = (props, ref)=>{
const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;
const [autoplay, setAutoplay] = (0, _reactutilities.useControllableState)({
state: checked,
defaultState: defaultChecked,
initialState: false
});
const enableAutoplay = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.enableAutoplay);
_react.useEffect(()=>{
// Initialize carousel autoplay based on button state
enableAutoplay(autoplay);
return ()=>{
// We uninitialize autoplay if the button gets unmounted.
enableAutoplay(false);
};
}, [
autoplay,
enableAutoplay
]);
const handleClick = (event)=>{
if (event.isDefaultPrevented()) {
return;
}
const newValue = !autoplay;
setAutoplay(newValue);
onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event, {
event,
type: 'click',
checked: newValue
});
};
return {
// We lean on react-button class to handle styling and icon enhancements
...(0, _reactbutton.useToggleButton_unstable)({
icon: _reactutilities.slot.optional(props.icon, {
defaultProps: {
children: autoplay ? /*#__PURE__*/ _react.createElement(_reacticons.PauseCircleRegular, null) : /*#__PURE__*/ _react.createElement(_reacticons.PlayCircleRegular, null)
},
renderByDefault: true,
elementType: 'span'
}),
...buttonProps,
checked: autoplay,
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(handleClick, props.onClick))
}, ref)
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ARIAButtonElement } from '@fluentui/react-aria';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { PlayCircleRegular, PauseCircleRegular } from '@fluentui/react-icons';\nimport { mergeCallbacks, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselAutoplayButtonProps, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselAutoplayButton.\n *\n * The returned state can be modified with hooks such as useCarouselAutoplayButtonStyles_unstable,\n * before being passed to renderCarouselAutoplayButton_unstable.\n *\n * @param props - props from this instance of CarouselAutoplayButton\n * @param ref - reference to root HTMLDivElement of CarouselAutoplayButton\n */\nexport const useCarouselAutoplayButton_unstable = (\n props: CarouselAutoplayButtonProps,\n ref: React.Ref<ARIAButtonElement>,\n): CarouselAutoplayButtonState => {\n const { onCheckedChange, checked, defaultChecked, ...buttonProps } = props;\n\n const [autoplay, setAutoplay] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n React.useEffect(() => {\n // Initialize carousel autoplay based on button state\n enableAutoplay(autoplay);\n\n return () => {\n // We uninitialize autoplay if the button gets unmounted.\n enableAutoplay(false);\n };\n }, [autoplay, enableAutoplay]);\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n const newValue = !autoplay;\n\n setAutoplay(newValue);\n onCheckedChange?.(event, { event, type: 'click', checked: newValue });\n };\n\n return {\n // We lean on react-button class to handle styling and icon enhancements\n ...useToggleButton_unstable(\n {\n icon: slot.optional(props.icon, {\n defaultProps: {\n children: autoplay ? <PauseCircleRegular /> : <PlayCircleRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n ...buttonProps,\n checked: autoplay,\n onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),\n },\n ref as React.Ref<HTMLButtonElement>,\n ),\n };\n};\n"],"names":["useToggleButton_unstable","PlayCircleRegular","PauseCircleRegular","mergeCallbacks","slot","useControllableState","useEventCallback","React","useCarouselContext_unstable","useCarouselContext","useCarouselAutoplayButton_unstable","props","ref","onCheckedChange","checked","defaultChecked","buttonProps","autoplay","setAutoplay","state","defaultState","initialState","enableAutoplay","ctx","useEffect","handleClick","event","isDefaultPrevented","newValue","type","icon","optional","defaultProps","children","renderByDefault","elementType","onClick"],"mappings":"AAAA;;;;;+BAoBaU;;;;;;;6BAjB4B,yBAAyB;4BACZ,wBAAwB;gCACD,4BAA4B;iEAClF,QAAQ;iCAGmC,qBAAqB;AAWhF,2CAA2C,CAChDC,OACAC;IAEA,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAE,GAAGC,aAAa,GAAGL;IAErE,MAAM,CAACM,UAAUC,YAAY,OAAGb,oCAAAA,EAAqB;QACnDc,OAAOL;QACPM,cAAcL;QACdM,cAAc;IAChB;IACA,MAAMC,qBAAiBb,4CAAAA,EAAmBc,CAAAA,MAAOA,IAAID,cAAc;IAEnEf,OAAMiB,SAAS,CAAC;QACd,qDAAqD;QACrDF,eAAeL;QAEf,OAAO;YACL,yDAAyD;YACzDK,eAAe;QACjB;IACF,GAAG;QAACL;QAAUK;KAAe;IAE7B,MAAMG,cAAc,CAACC;QACnB,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QAEA,MAAMC,WAAW,CAACX;QAElBC,YAAYU;QACZf,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBa,OAAO;YAAEA;YAAOG,MAAM;YAASf,SAASc;QAAS;IACrE;IAEA,OAAO;QACL,wEAAwE;QACxE,OAAG5B,qCAAAA,EACD;YACE8B,MAAM1B,oBAAAA,CAAK2B,QAAQ,CAACpB,MAAMmB,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUhB,WAAAA,WAAAA,GAAW,OAAA,aAAA,CAACf,8BAAAA,EAAAA,QAAAA,WAAAA,GAAwB,OAAA,aAAA,CAACD,6BAAAA,EAAAA;gBACjD;gBACAiC,iBAAiB;gBACjBC,aAAa;YACf;YACA,GAAGnB,WAAW;YACdF,SAASG;YACTmB,aAAS9B,gCAAAA,MAAiBH,8BAAAA,EAAesB,aAAad,MAAMyB,OAAO;QACrE,GACAxB,IACD;IACH;AACF,EAAE"}

View File

@@ -0,0 +1,72 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselAutoplayButtonClassNames: function() {
return carouselAutoplayButtonClassNames;
},
useCarouselAutoplayButtonStyles_unstable: function() {
return useCarouselAutoplayButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const carouselAutoplayButtonClassNames = {
root: 'fui-CarouselAutoplayButton',
icon: 'fui-CarouselAutoplayButton__icon'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bkecrkj: "fc5wo7j",
B6of3ja: "fgr6219",
jrapky: "f10jk5vf",
g2u3we: "fghlq4f",
h3c5rm: [
"f1gn591s",
"fjscplz"
],
B9xav0g: "fb073pr",
zhjwy3: [
"fjscplz",
"f1gn591s"
],
sj55zd: "fkfq4zb",
De3pzq: "fkfdr9r",
eoavqd: "f8491dx"
}
}, {
d: [
".fc5wo7j{pointer-events:all;}",
".fgr6219{margin-top:auto;}",
".f10jk5vf{margin-bottom:auto;}",
".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
".fjscplz{border-left-color:var(--colorTransparentStroke);}",
".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
".fkfq4zb{color:var(--colorNeutralForeground2);}",
".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}"
],
h: [
".f8491dx:hover{cursor:pointer;}"
]
});
const useCarouselAutoplayButtonStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
state.root.className = (0, _react.mergeClasses)(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(carouselAutoplayButtonClassNames.icon, state.icon.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselAutoplayButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselAutoplayButtonClassNames = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer'\n }\n }\n});\n/**\n * Apply styling to the CarouselAutoplayButton slots based on the state\n */ export const useCarouselAutoplayButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n useToggleButtonStyles_unstable(state);\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","Bkecrkj","B6of3ja","jrapky","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","De3pzq","eoavqd","d","h","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,gCAAgC;;;IAqB5BgB,wCAAwC;;;;uBAxBJ,gBAAgB;6BACtB,wBAAwB;AAEhE,yCAAyC;IAC5Cf,IAAI,EAAE,4BAA4B;IAClCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGR,mBAAA,EAAA;IAAAM,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,kDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;QAC1BL,2CAA8B,EAACmB,KAAK,CAAC;IACrCA,KAAK,CAAChB,IAAI,CAACkB,SAAS,OAAGvB,mBAAY,EAACI,gCAAgC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;IAC7G,IAAIF,KAAK,CAACf,IAAI,EAAE;QACZe,KAAK,CAACf,IAAI,CAACiB,SAAS,OAAGvB,mBAAY,EAACI,gCAAgC,CAACE,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;IACpG;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,51 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselAutoplayButtonClassNames: function() {
return carouselAutoplayButtonClassNames;
},
useCarouselAutoplayButtonStyles_unstable: function() {
return useCarouselAutoplayButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const _reacttheme = require("@fluentui/react-theme");
const carouselAutoplayButtonClassNames = {
root: 'fui-CarouselAutoplayButton',
icon: 'fui-CarouselAutoplayButton__icon'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
pointerEvents: 'all',
marginTop: 'auto',
marginBottom: 'auto',
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke),
color: _reacttheme.tokens.colorNeutralForeground2,
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundAlpha,
':hover': {
cursor: 'pointer'
}
}
});
const useCarouselAutoplayButtonStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
state.root.className = (0, _react.mergeClasses)(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(carouselAutoplayButtonClassNames.icon, state.icon.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselAutoplayButton/useCarouselAutoplayButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselAutoplayButtonSlots, CarouselAutoplayButtonState } from './CarouselAutoplayButton.types';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselAutoplayButtonClassNames: SlotClassNames<CarouselAutoplayButtonSlots> = {\n root: 'fui-CarouselAutoplayButton',\n icon: 'fui-CarouselAutoplayButton__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n pointerEvents: 'all',\n marginTop: 'auto',\n marginBottom: 'auto',\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n ':hover': {\n cursor: 'pointer',\n },\n },\n\n // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the CarouselAutoplayButton slots based on the state\n */\nexport const useCarouselAutoplayButtonStyles_unstable = (\n state: CarouselAutoplayButtonState,\n): CarouselAutoplayButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n useToggleButtonStyles_unstable(state);\n\n state.root.className = mergeClasses(carouselAutoplayButtonClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(carouselAutoplayButtonClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","useToggleButtonStyles_unstable","tokens","carouselAutoplayButtonClassNames","root","icon","useStyles","pointerEvents","marginTop","marginBottom","borderColor","colorTransparentStroke","color","colorNeutralForeground2","backgroundColor","colorNeutralBackgroundAlpha","cursor","useCarouselAutoplayButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,gCAAAA;;;IA2BAc,wCAAAA;;;;uBAjCwC,iBAAiB;6BAGvB,yBAAyB;4BACjD,wBAAwB;AAExC,yCAAsF;IAC3Fb,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYR,iBAAAA,EAAW;IAC3BM,MAAM;QACJG,eAAe;QACfC,WAAW;QACXC,cAAc;QACd,GAAGT,iBAAAA,CAAWU,WAAW,CAACR,kBAAAA,CAAOS,sBAAsB,CAAC;QACxDC,OAAOV,kBAAAA,CAAOW,uBAAuB;QACrCC,iBAAiBZ,kBAAAA,CAAOa,2BAA2B;QACnD,UAAU;YACRC,QAAQ;QACV;IACF;AAGF;AAKO,iDAAiD,CACtDE;IAEA;IAEA,MAAMC,SAASb;QAEfL,2CAAAA,EAA+BiB;IAE/BA,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EAAaI,iCAAiCC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAE5G,IAAIF,MAAMb,IAAI,EAAE;QACda,MAAMb,IAAI,CAACe,SAAS,OAAGrB,mBAAAA,EAAaI,iCAAiCE,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACjG;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CarouselButton", {
enumerable: true,
get: function() {
return CarouselButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarouselButton = require("./useCarouselButton");
const _renderCarouselButton = require("./renderCarouselButton");
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CarouselButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselButton.useCarouselButton_unstable)(props, ref);
(0, _useCarouselButtonStylesstyles.useCarouselButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselButtonStyles_unstable')(state);
return (0, _renderCarouselButton.renderCarouselButton_unstable)(state);
});
CarouselButton.displayName = 'CarouselButton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselButton_unstable } from './useCarouselButton';\nimport { renderCarouselButton_unstable } from './renderCarouselButton';\nimport { useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\nimport type { CarouselButtonProps } from './CarouselButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A default navigation button that will set value to the next/previous page,\n * driven by it's type 'next' or 'previous'.\n */\nexport const CarouselButton: ForwardRefComponent<CarouselButtonProps> = React.forwardRef((props, ref) => {\n const state = useCarouselButton_unstable(props, ref);\n\n useCarouselButtonStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselButtonStyles_unstable')(state);\n\n return renderCarouselButton_unstable(state);\n});\n\nCarouselButton.displayName = 'CarouselButton';\n"],"names":["React","useCarouselButton_unstable","renderCarouselButton_unstable","useCarouselButtonStyles_unstable","useCustomStyleHook_unstable","CarouselButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCAEY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAExC,kCAAkC;AAMvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering CarouselButton
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselButton/CarouselButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\nexport type CarouselButtonSlots = ButtonSlots & {\n root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselButton Props\n */\nexport type CarouselButtonProps = Partial<ButtonProps> &\n ComponentProps<CarouselButtonSlots> & {\n /**\n * Dictates whether button will be of type go next or go previous\n * Default: 'next'\n */\n navType?: 'prev' | 'next';\n };\n\n/**\n * State used in rendering CarouselButton\n */\nexport type CarouselButtonState = ButtonState &\n ComponentState<CarouselButtonSlots> &\n Required<Pick<CarouselButtonProps, 'navType'>>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WAEiD"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselButton: function() {
return _CarouselButton.CarouselButton;
},
carouselButtonClassNames: function() {
return _useCarouselButtonStylesstyles.carouselButtonClassNames;
},
renderCarouselButton_unstable: function() {
return _renderCarouselButton.renderCarouselButton_unstable;
},
useCarouselButtonStyles_unstable: function() {
return _useCarouselButtonStylesstyles.useCarouselButtonStyles_unstable;
},
useCarouselButton_unstable: function() {
return _useCarouselButton.useCarouselButton_unstable;
}
});
const _CarouselButton = require("./CarouselButton");
const _renderCarouselButton = require("./renderCarouselButton");
const _useCarouselButton = require("./useCarouselButton");
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselButton/index.ts"],"sourcesContent":["export { CarouselButton } from './CarouselButton';\nexport type { CarouselButtonProps, CarouselButtonSlots, CarouselButtonState } from './CarouselButton.types';\nexport { renderCarouselButton_unstable } from './renderCarouselButton';\nexport { useCarouselButton_unstable } from './useCarouselButton';\nexport { carouselButtonClassNames, useCarouselButtonStyles_unstable } from './useCarouselButtonStyles.styles';\n"],"names":["CarouselButton","renderCarouselButton_unstable","useCarouselButton_unstable","carouselButtonClassNames","useCarouselButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarouselButton_unstable", {
enumerable: true,
get: function() {
return renderCarouselButton_unstable;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _reactbutton = require("@fluentui/react-button");
const renderCarouselButton_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
// We render the underlying react-button with injected carousel functionality
return (0, _reactbutton.renderButton_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselButton/renderCarouselButton.tsx"],"sourcesContent":["import { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselButtonState, CarouselButtonSlots } from './CarouselButton.types';\nimport { renderButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of CarouselButton\n */\nexport const renderCarouselButton_unstable = (state: CarouselButtonState): JSXElement => {\n assertSlots<CarouselButtonSlots>(state);\n\n // We render the underlying react-button with injected carousel functionality\n return renderButton_unstable(state);\n};\n"],"names":["assertSlots","renderButton_unstable","renderCarouselButton_unstable","state"],"mappings":";;;;;;;;;;gCAA4B,4BAA4B;6BAGlB,yBAAyB;AAKxD,MAAME,gCAAgC,CAACC;QAC5CH,2BAAAA,EAAiCG;IAEjC,6EAA6E;IAC7E,WAAOF,kCAAAA,EAAsBE;AAC/B,EAAE"}

View File

@@ -0,0 +1,95 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselButton_unstable", {
enumerable: true,
get: function() {
return useCarouselButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactbutton = require("@fluentui/react-button");
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CarouselContext = require("../CarouselContext");
const _useCarouselButtonStylesstyles = require("./useCarouselButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const useCarouselButton_unstable = (props, ref)=>{
const { navType = 'next', ...buttonProps } = props;
// Locally tracks the total number of slides, will only update if this changes.
const [totalSlides, setTotalSlides] = _react.useState(0);
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
const buttonRef = _react.useRef(undefined);
const circular = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.circular);
const [canLoop, setCanLoop] = _react.useState(circular);
const containerRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.containerRef);
const selectPageByDirection = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByDirection);
const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
const resetAutoplay = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.resetAutoplay);
const isTrailing = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>{
if (circular && canLoop) {
return false;
}
if (navType === 'prev') {
return ctx.activeIndex === 0;
}
return ctx.activeIndex === totalSlides - 1;
});
const handleClick = (event)=>{
if (event.isDefaultPrevented()) {
return;
}
const nextIndex = selectPageByDirection(event, navType);
let _trailing = false;
if (navType === 'prev') {
_trailing = nextIndex === 0;
} else {
_trailing = nextIndex === totalSlides - 1;
}
if (!circular && _trailing && (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current)) {
// Focus non-disabled element
const buttonRefs = containerRef.current.querySelectorAll(`.${_useCarouselButtonStylesstyles.carouselButtonClassNames.root}`);
buttonRefs.forEach((_buttonRef)=>{
if (_buttonRef !== buttonRef.current) {
_buttonRef.focus();
}
});
}
resetAutoplay();
};
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
return subscribeForValues((data)=>{
if (data.canLoop !== undefined) {
// Only update canLoop if it has been defined by the carousel engine
setCanLoop(data.canLoop);
}
setTotalSlides(data.navItemsCount);
});
}, [
subscribeForValues
]);
const nextArrowIcon = dir === 'ltr' ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeftRegular, null);
const prevArrowIcon = dir === 'ltr' ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeftRegular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, null);
return {
navType,
// We lean on react-button class to handle styling and icon enhancements
...(0, _reactbutton.useButton_unstable)({
icon: _reactutilities.slot.optional(props.icon, {
defaultProps: {
children: navType === 'next' ? nextArrowIcon : prevArrowIcon
},
renderByDefault: true,
elementType: 'span'
}),
disabled: isTrailing,
tabIndex: isTrailing ? -1 : 0,
'aria-disabled': isTrailing,
appearance: 'subtle',
...buttonProps,
onClick: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(handleClick, props.onClick))
}, (0, _reactutilities.useMergedRefs)(ref, buttonRef))
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,61 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselButtonClassNames: function() {
return carouselButtonClassNames;
},
useCarouselButtonStyles_unstable: function() {
return useCarouselButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const carouselButtonClassNames = {
root: 'fui-CarouselButton',
icon: 'fui-CarouselButton__icon'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
B6of3ja: "fgr6219",
jrapky: "f10jk5vf",
sj55zd: "fkfq4zb",
De3pzq: "fkfdr9r",
Bkecrkj: "fc5wo7j",
eoavqd: "f8491dx"
}
}, {
d: [
".fgr6219{margin-top:auto;}",
".f10jk5vf{margin-bottom:auto;}",
".fkfq4zb{color:var(--colorNeutralForeground2);}",
".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}",
".fc5wo7j{pointer-events:all;}"
],
h: [
".f8491dx:hover{cursor:pointer;}"
]
});
const useCarouselButtonStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state = {
...state,
...(0, _reactbutton.useButtonStyles_unstable)(state)
};
state.root.className = (0, _react.mergeClasses)(carouselButtonClassNames.root, styles.root, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(carouselButtonClassNames.icon, state.icon.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselButtonClassNames = {\n root: 'fui-CarouselButton',\n icon: 'fui-CarouselButton__icon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n marginTop: 'auto',\n marginBottom: 'auto',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n pointerEvents: 'all',\n ':hover': {\n cursor: 'pointer'\n }\n }\n});\n/**\n * Apply styling to the CarouselButton slots based on the state\n */ export const useCarouselButtonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state = {\n ...state,\n ...useButtonStyles_unstable(state)\n };\n state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","tokens","carouselButtonClassNames","root","icon","useStyles","B6of3ja","jrapky","sj55zd","De3pzq","Bkecrkj","eoavqd","d","h","useCarouselButtonStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,wBAAwB;;;oCAoBY;;;;uBAvBR,gBAAgB;6BAChB,wBAAwB;AAE1D,iCAAiC;IACpCC,IAAI,EAAE,oBAAoB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGP,mBAAA,EAAA;IAAAK,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAWrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;IAC1BU,KAAK,GAAG;QACJ,GAAGA,KAAK;QACR,OAAGf,qCAAwB,EAACe,KAAK,CAAA;IACrC,CAAC;IACDA,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGlB,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACrG,IAAIF,KAAK,CAACX,IAAI,EAAE;QACZW,KAAK,CAACX,IAAI,CAACa,SAAS,OAAGlB,mBAAY,EAACG,wBAAwB,CAACE,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;IAC5F;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,53 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselButtonClassNames: function() {
return carouselButtonClassNames;
},
useCarouselButtonStyles_unstable: function() {
return useCarouselButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactbutton = require("@fluentui/react-button");
const _reacttheme = require("@fluentui/react-theme");
const carouselButtonClassNames = {
root: 'fui-CarouselButton',
icon: 'fui-CarouselButton__icon'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
marginTop: 'auto',
marginBottom: 'auto',
color: _reacttheme.tokens.colorNeutralForeground2,
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundAlpha,
pointerEvents: 'all',
':hover': {
cursor: 'pointer'
}
}
});
const useCarouselButtonStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state = {
...state,
...(0, _reactbutton.useButtonStyles_unstable)(state)
};
state.root.className = (0, _react.mergeClasses)(carouselButtonClassNames.root, styles.root, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(carouselButtonClassNames.icon, state.icon.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselButton/useCarouselButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselButtonSlots, CarouselButtonState } from './CarouselButton.types';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselButtonClassNames: SlotClassNames<CarouselButtonSlots> = {\n root: 'fui-CarouselButton',\n icon: 'fui-CarouselButton__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n marginTop: 'auto',\n marginBottom: 'auto',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n pointerEvents: 'all',\n ':hover': {\n cursor: 'pointer',\n },\n },\n});\n\n/**\n * Apply styling to the CarouselButton slots based on the state\n */\nexport const useCarouselButtonStyles_unstable = (state: CarouselButtonState): CarouselButtonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state = {\n ...state,\n ...useButtonStyles_unstable(state),\n };\n\n state.root.className = mergeClasses(carouselButtonClassNames.root, styles.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(carouselButtonClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","tokens","carouselButtonClassNames","root","icon","useStyles","marginTop","marginBottom","color","colorNeutralForeground2","backgroundColor","colorNeutralBackgroundAlpha","pointerEvents","cursor","useCarouselButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,wBAAAA;;;oCAwBAY;eAAAA;;;uBA9B4B,iBAAiB;6BAGjB,yBAAyB;4BAC3C,wBAAwB;AAExC,iCAAsE;IAC3EX,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BK,MAAM;QACJG,WAAW;QACXC,cAAc;QACdC,OAAOP,kBAAAA,CAAOQ,uBAAuB;QACrCC,iBAAiBT,kBAAAA,CAAOU,2BAA2B;QACnDC,eAAe;QACf,UAAU;YACRC,QAAQ;QACV;IACF;AACF;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,SAASX;IAEfU,QAAQ;QACN,GAAGA,KAAK;QACR,OAAGf,qCAAAA,EAAyBe,MAAM;IACpC;IAEAA,MAAMZ,IAAI,CAACc,SAAS,OAAGlB,mBAAAA,EAAaG,yBAAyBC,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IAEpG,IAAIF,MAAMX,IAAI,EAAE;QACdW,MAAMX,IAAI,CAACa,SAAS,OAAGlB,mBAAAA,EAAaG,yBAAyBE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACzF;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CarouselCard", {
enumerable: true,
get: function() {
return CarouselCard;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarouselCard = require("./useCarouselCard");
const _renderCarouselCard = require("./renderCarouselCard");
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CarouselCard = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselCard.useCarouselCard_unstable)(props, ref);
(0, _useCarouselCardStylesstyles.useCarouselCardStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselCardStyles_unstable')(state);
return (0, _renderCarouselCard.renderCarouselCard_unstable)(state);
});
CarouselCard.displayName = 'CarouselCard';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n const state = useCarouselCard_unstable(props, ref);\n\n useCarouselCardStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;qCAEpC,kCAAkC;AAUvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOP,+CAAAA,EAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering CarouselCard
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselCardSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * CarouselCard Props\n */\nexport type CarouselCardProps = ComponentProps<CarouselCardSlots> & {\n /**\n * Sets the card styling to be responsive based on content.\n */\n autoSize?: boolean;\n};\n\n/**\n * State used in rendering CarouselCard\n */\nexport type CarouselCardState = ComponentState<CarouselCardSlots> & Pick<CarouselCardProps, 'autoSize'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAAwG"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselCard: function() {
return _CarouselCard.CarouselCard;
},
carouselCardClassNames: function() {
return _useCarouselCardStylesstyles.carouselCardClassNames;
},
renderCarouselCard_unstable: function() {
return _renderCarouselCard.renderCarouselCard_unstable;
},
useCarouselCardStyles_unstable: function() {
return _useCarouselCardStylesstyles.useCarouselCardStyles_unstable;
},
useCarouselCard_unstable: function() {
return _useCarouselCard.useCarouselCard_unstable;
}
});
const _CarouselCard = require("./CarouselCard");
const _renderCarouselCard = require("./renderCarouselCard");
const _useCarouselCard = require("./useCarouselCard");
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselCard/index.ts"],"sourcesContent":["export { CarouselCard } from './CarouselCard';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\nexport { renderCarouselCard_unstable } from './renderCarouselCard';\nexport { useCarouselCard_unstable } from './useCarouselCard';\nexport { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\n"],"names":["CarouselCard","renderCarouselCard_unstable","useCarouselCard_unstable","carouselCardClassNames","useCarouselCardStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZG,mDAAsB;;;eAFtBF,+CAA2B;;;eAEHG,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarouselCard_unstable", {
enumerable: true,
get: function() {
return renderCarouselCard_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCarouselCard_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselCard/renderCarouselCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CarouselCardState, CarouselCardSlots } from './CarouselCard.types';\n\n/**\n * Render the final JSX of CarouselCard\n */\nexport const renderCarouselCard_unstable = (state: CarouselCardState): JSXElement => {\n assertSlots<CarouselCardSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselCard_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,101 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselCard_unstable", {
enumerable: true,
get: function() {
return useCarouselCard_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CarouselContext = require("../CarouselContext");
const _useEmblaCarousel = require("../useEmblaCarousel");
const _useCarouselCardStylesstyles = require("./useCarouselCardStyles.styles");
const _CarouselSliderContext = require("../CarouselSlider/CarouselSliderContext");
const useCarouselCard_unstable = (props, ref)=>{
const { autoSize } = props;
const elementRef = _react.useRef(null);
const isMouseEvent = _react.useRef(false);
const selectPageByElement = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByElement);
const containerRef = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.containerRef);
const { cardFocus } = (0, _CarouselSliderContext.useCarouselSliderContext)();
const focusAttr = (0, _reacttabster.useFocusableGroup)({
tabBehavior: 'limited'
});
const focusAttrProps = cardFocus ? {
...focusAttr,
tabIndex: 0
} : {};
// We attach a unique card id if user does not provide
const id = (0, _reactutilities.useId)(_useCarouselCardStylesstyles.carouselCardClassNames.root, props.id);
_react.useEffect(()=>{
const element = elementRef.current;
if (element) {
const listener = (_e)=>{
const event = _e;
// When there is no tab index present, only current cards should be visible to accessibility
if (!cardFocus) {
const hidden = !event.detail.isVisible;
element.ariaHidden = hidden.toString();
element.inert = hidden;
}
};
element.addEventListener(_useEmblaCarousel.EMBLA_VISIBILITY_EVENT, listener);
return ()=>{
element.removeEventListener(_useEmblaCarousel.EMBLA_VISIBILITY_EVENT, listener);
};
}
}, [
cardFocus
]);
const handleFocus = _react.useCallback((e)=>{
if (!e.defaultPrevented && (0, _reactutilities.isHTMLElement)(e.currentTarget) && !isMouseEvent.current) {
var _containerRef_current;
containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
selectPageByElement(e, e.currentTarget, false);
}
// Mouse focus event has been consumed
isMouseEvent.current = false;
}, [
selectPageByElement,
containerRef
]);
const handlePointerDown = (e)=>{
if (!e.defaultPrevented) {
isMouseEvent.current = true;
}
};
const handlePointerUp = (e)=>{
if (!e.defaultPrevented) {
isMouseEvent.current = false;
}
};
const onFocusCapture = (0, _reactutilities.mergeCallbacks)(props.onFocusCapture, handleFocus);
const onPointerUp = (0, _reactutilities.mergeCallbacks)(props.onPointerUp, handlePointerUp);
const onPointerDown = (0, _reactutilities.mergeCallbacks)(props.onPointerDown, handlePointerDown);
const state = {
autoSize,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: (0, _reactutilities.useMergedRefs)(elementRef, ref),
role: 'tabpanel',
tabIndex: cardFocus ? 0 : undefined,
...props,
id,
onFocusCapture,
onPointerUp,
onPointerDown,
...focusAttrProps
}), {
elementType: 'div'
})
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,94 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselCardClassNames: function() {
return carouselCardClassNames;
},
useCarouselCardStyles_unstable: function() {
return useCarouselCardStyles_unstable;
}
});
const _react = require("@griffel/react");
const _CarouselContext = require("../CarouselContext");
const carouselCardClassNames = {
root: 'fui-CarouselCard'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
xawz: 0,
Bh6795r: 0,
Bnnss6s: 0,
fkmc3a: "fg68ejw",
B2u0y6b: "f6dzj5z"
},
autoSize: {
xawz: 0,
Bh6795r: 0,
Bnnss6s: 0,
fkmc3a: "fd9q35j",
Bf4jedk: "fy77jfu",
a9b677: "f14z66ap",
B2u0y6b: "f6dzj5z"
},
elevated: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1kijzfu",
E5pizo: "f1hg901r",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp"
}
}, {
d: [
[
".fg68ejw{flex:0 0 100%;}",
{
p: -1
}
],
".f6dzj5z{max-width:100%;}",
[
".fd9q35j{flex:0 0 auto;}",
{
p: -1
}
],
".fy77jfu{min-width:0;}",
".f14z66ap{width:auto;}",
[
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
{
p: -1
}
],
".f1hg901r{box-shadow:var(--shadow16);}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
]
]
});
const useCarouselCardStyles_unstable = (state)=>{
'use no memo';
const { autoSize } = state;
const appearance = (0, _CarouselContext.useCarouselContext_unstable)((context)=>context.appearance);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselCardClassNames = {\n root: 'fui-CarouselCard'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%'\n },\n autoSize: {\n flex: '0 0 auto' /* Adapt slide size to its content */ ,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%'\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n 'use no memo';\n const { autoSize } = state;\n const appearance = useCarouselContext((context)=>context.appearance);\n const styles = useStyles();\n state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","elevated","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","B68tc82","Bmxbyg5","Bpg54ce","d","p","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,sBAAsB;;;kCAwBY;eAA9BuB;;;uBA3BwB,gBAAgB;iCAES,oBAAoB;AAC/E,+BAA+B;IAClCtB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAL,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEhB,QAAAA,EAAU,GAAGgB,KAAK;IAC1B,MAAMC,UAAU,OAAG1B,4CAAkB,GAAE2B,OAAO,GAAGA,OAAO,CAACD,UAAU,CAAC;IACpE,MAAME,MAAM,GAAGzB,SAAS,CAAC,CAAC;IAC1BsB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,OAAGhC,mBAAY,EAACI,sBAAsB,CAACC,IAAI,EAAE0B,MAAM,CAAC1B,IAAI,EAAEwB,UAAU,KAAK,UAAU,IAAIE,MAAM,CAAChB,QAAQ,EAAEH,QAAQ,IAAImB,MAAM,CAACnB,QAAQ,EAAEgB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,CAAC;IAC9K,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselCardClassNames: function() {
return carouselCardClassNames;
},
useCarouselCardStyles_unstable: function() {
return useCarouselCardStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _CarouselContext = require("../CarouselContext");
const carouselCardClassNames = {
root: 'fui-CarouselCard'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
flex: '0 0 100%',
maxWidth: '100%'
},
autoSize: {
flex: '0 0 auto' /* Adapt slide size to its content */ ,
minWidth: 0,
width: 'auto',
maxWidth: '100%'
},
elevated: {
borderRadius: _reacttheme.tokens.borderRadiusXLarge,
boxShadow: _reacttheme.tokens.shadow16,
overflow: 'hidden'
}
});
const useCarouselCardStyles_unstable = (state)=>{
'use no memo';
const { autoSize } = state;
const appearance = (0, _CarouselContext.useCarouselContext_unstable)((context)=>context.appearance);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n root: 'fui-CarouselCard',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n flex: '0 0 100%',\n maxWidth: '100%',\n },\n autoSize: {\n flex: '0 0 auto' /* Adapt slide size to its content */,\n minWidth: 0,\n width: 'auto',\n maxWidth: '100%',\n },\n elevated: {\n borderRadius: tokens.borderRadiusXLarge,\n boxShadow: tokens.shadow16,\n overflow: 'hidden',\n },\n});\n\n/**\n * Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n 'use no memo';\n\n const { autoSize } = state;\n const appearance = useCarouselContext(context => context.appearance);\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n carouselCardClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n autoSize && styles.autoSize,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,sBAAAA;;;IA4BAc,8BAAAA;;;;uBAlC4B,iBAAiB;4BAEnC,wBAAwB;iCACmB,qBAAqB;AAGhF,+BAAkE;IACvEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,MAAM;QACNC,UAAU;IACZ;IACAC,UAAU;QACRF,MAAM,WAAW,mCAAmC;QACpDG,UAAU;QACVC,OAAO;QACPH,UAAU;IACZ;IACAI,UAAU;QACRC,cAAcZ,kBAAAA,CAAOa,kBAAkB;QACvCC,WAAWd,kBAAAA,CAAOe,QAAQ;QAC1BC,UAAU;IACZ;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAM,EAAEV,QAAQ,EAAE,GAAGU;IACrB,MAAMC,iBAAajB,4CAAAA,EAAmBkB,CAAAA,UAAWA,QAAQD,UAAU;IAEnE,MAAME,SAAShB;IACfa,MAAMd,IAAI,CAACkB,SAAS,OAAGvB,mBAAAA,EACrBI,uBAAuBC,IAAI,EAC3BiB,OAAOjB,IAAI,EACXe,eAAe,cAAcE,OAAOV,QAAQ,EAC5CH,YAAYa,OAAOb,QAAQ,EAC3BU,MAAMd,IAAI,CAACkB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,47 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselProvider: function() {
return CarouselProvider;
},
carouselContextDefaultValue: function() {
return carouselContextDefaultValue;
},
useCarouselContext_unstable: function() {
return useCarouselContext_unstable;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const carouselContextDefaultValue = {
activeIndex: 0,
appearance: 'flat',
selectPageByElement: ()=>{
return 0;
},
selectPageByDirection: ()=>{
return 0;
},
selectPageByIndex: ()=>{
/** noop */ },
subscribeForValues: ()=>()=>{
/** noop */ },
enableAutoplay: ()=>{
/** noop */ },
resetAutoplay: ()=>{
/** noop */ },
circular: false,
containerRef: undefined,
viewportRef: undefined
};
const CarouselContext = (0, _reactcontextselector.createContext)(undefined);
const CarouselProvider = CarouselContext.Provider;
const useCarouselContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(CarouselContext, (ctx = carouselContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselContext.ts"],"sourcesContent":["'use client';\n\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { CarouselContextValue } from './CarouselContext.types';\n\nexport const carouselContextDefaultValue: CarouselContextValue = {\n activeIndex: 0,\n appearance: 'flat',\n selectPageByElement: () => {\n return 0;\n },\n selectPageByDirection: () => {\n return 0;\n },\n selectPageByIndex: () => {\n /** noop */\n },\n subscribeForValues: () => () => {\n /** noop */\n },\n enableAutoplay: () => {\n /** noop */\n },\n resetAutoplay: () => {\n /** noop */\n },\n circular: false,\n containerRef: undefined,\n viewportRef: undefined,\n};\n\nconst CarouselContext = createContext<CarouselContextValue | undefined>(undefined);\n\nexport const CarouselProvider = CarouselContext.Provider;\n\nexport const useCarouselContext_unstable = <T>(selector: ContextSelector<CarouselContextValue, T>): T =>\n useContextSelector(CarouselContext, (ctx = carouselContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","carouselContextDefaultValue","activeIndex","appearance","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","undefined","viewportRef","CarouselContext","CarouselProvider","Provider","useCarouselContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;oBAiCagB;;;+BA5BAd;;;+BA8BAgB;;;;sCAjCsD,mCAAmC;AAG/F,MAAMhB,8BAAoD;IAC/DC,aAAa;IACbC,YAAY;IACZC,qBAAqB;QACnB,OAAO;IACT;IACAC,uBAAuB;QACrB,OAAO;IACT;IACAC,mBAAmB;IACjB,SAAS,GACX;IACAC,oBAAoB,IAAM;QACxB,SAAS,GACX;IACAC,gBAAgB;IACd,SAAS,GACX;IACAC,eAAe;IACb,SAAS,GACX;IACAC,UAAU;IACVC,cAAcC;IACdC,aAAaD;AACf,EAAE;AAEF,MAAME,sBAAkBf,mCAAAA,EAAgDa;AAEjE,MAAMG,mBAAmBD,gBAAgBE,QAAQ,CAAC;AAElD,MAAMC,8BAA8B,CAAIC,eAC7ClB,wCAAAA,EAAmBc,iBAAiB,CAACK,MAAMlB,2BAA2B,GAAKiB,SAASC,MAAM"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselContext.types.ts"],"sourcesContent":["import type { EventData } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselUpdateData } from '../Carousel';\n\nexport type CarouselAppearance = 'flat' | 'elevated';\n\nexport type CarouselIndexChangeData = (\n | EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>>\n | EventData<'focus', React.FocusEvent>\n | EventData<'drag', PointerEvent | MouseEvent>\n | EventData<'autoplay', Event>\n) & {\n /**\n * The index to be set after event has occurred.\n */\n index: number;\n};\n\nexport type CarouselContextValue = {\n activeIndex: number;\n appearance?: CarouselAppearance;\n circular: boolean;\n selectPageByElement: (event: React.FocusEvent, element: HTMLElement, jump?: boolean) => number;\n selectPageByDirection: (\n event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n direction: 'next' | 'prev',\n ) => number;\n selectPageByIndex: (\n event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n value: number,\n jump?: boolean,\n ) => void;\n subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;\n enableAutoplay: (autoplay: boolean, temporary?: boolean) => void;\n resetAutoplay: () => void;\n // Container with controls passed to carousel engine\n containerRef?: React.RefObject<HTMLDivElement | null>;\n // Viewport without controls used for interactive functionality (draggable, pause autoplay etc.)\n viewportRef?: React.RefObject<HTMLDivElement | null>;\n};\n\n/**\n * Context shared between Carousel and its children components\n */\nexport type CarouselContextValues = {\n carousel: CarouselContextValue;\n};\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CarouselNav", {
enumerable: true,
get: function() {
return CarouselNav;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CarouselNavContext = require("./CarouselNavContext");
const _renderCarouselNav = require("./renderCarouselNav");
const _useCarouselNav = require("./useCarouselNav");
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CarouselNav = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselNav.useCarouselNav_unstable)(props, ref);
const contextValues = (0, _CarouselNavContext.useCarouselNavContextValues_unstable)(state);
(0, _useCarouselNavStylesstyles.useCarouselNavStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavStyles_unstable')(state);
return (0, _renderCarouselNav.renderCarouselNav_unstable)(state, contextValues);
});
CarouselNav.displayName = 'CarouselNav';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './CarouselNavContext';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;oCAGsB,uBAAuB;mCACjC,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAClC,kCAAkC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;IAC7C,MAAME,oBAAgBV,wDAAAA,EAAqCS;QAE3DN,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default, this is a div.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n /**\n * Enables an alternate brand style when set to 'brand'\n */\n appearance?: 'brand';\n\n /**\n * The function that will render nav items based on total slides and their index.\n */\n renderNavButton: NavButtonRenderFunction;\n\n /**\n * The total number of slides available.\n * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n */\n totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}

View File

@@ -0,0 +1,47 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNavContextProvider: function() {
return CarouselNavContextProvider;
},
carouselNavContextDefaultValue: function() {
return carouselNavContextDefaultValue;
},
useCarouselNavContext: function() {
return useCarouselNavContext;
},
useCarouselNavContextValues_unstable: function() {
return useCarouselNavContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const carouselNavContext = /*#__PURE__*/ _react.createContext(undefined);
const carouselNavContextDefaultValue = {
appearance: undefined
};
const useCarouselNavContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
};
const CarouselNavContextProvider = carouselNavContext.Provider;
function useCarouselNavContextValues_unstable(state) {
const { appearance } = state;
const carouselNav = _react.useMemo(()=>({
appearance
}), [
appearance
]);
return {
carouselNav
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue, CarouselNavState } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n appearance: undefined,\n};\n\nexport const useCarouselNavContext = (): CarouselNavContextValue =>\n React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n carouselNav: CarouselNavContextValue;\n};\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n const { appearance } = state;\n const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n return { carouselNav };\n}\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider","useCarouselNavContextValues_unstable","state","carouselNav","useMemo"],"mappings":"AAAA;;;;;;;;;;;;IAcaQ,0BAAAA;;;kCAPAJ;;;yBAIAE;;;wCAYGI;;;;;iEArBO,QAAQ;AAG/B,MAAMT,mCAAqBD,OAAME,aAAa,CAAsCC;AAE7E,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEK,MAAMG,wBAAwB;QACnCN;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACN,mBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAwCI;EAA+B;AAElE,mCAAmCH,mBAAmBQ,QAAQ,CAAC;AAS/D,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEN,UAAU,EAAE,GAAGM;IACvB,MAAMC,cAAcZ,OAAMa,OAAO,CAAC,IAAO,CAAA;YAAER;SAAW,CAAA,EAAI;QAACA;KAAW;IAEtE,OAAO;QAAEO;IAAY;AACvB"}

View File

@@ -0,0 +1,31 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNavIndexContextProvider: function() {
return CarouselNavIndexContextProvider;
},
carouselNavIndexContextDefaultValue: function() {
return carouselNavIndexContextDefaultValue;
},
useCarouselNavIndexContext: function() {
return useCarouselNavIndexContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const carouselNavIndexContext = /*#__PURE__*/ _react.createContext(undefined);
const carouselNavIndexContextDefaultValue = 0;
const useCarouselNavIndexContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(carouselNavIndexContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavIndexContextDefaultValue;
};
const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNavIndexContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst carouselNavIndexContext = React.createContext<number | undefined>(undefined);\n\nexport const carouselNavIndexContextDefaultValue: number = 0;\n\nexport const useCarouselNavIndexContext = (): number =>\n React.useContext(carouselNavIndexContext) ?? carouselNavIndexContextDefaultValue;\n\nexport const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;\n"],"names":["React","carouselNavIndexContext","createContext","undefined","carouselNavIndexContextDefaultValue","useCarouselNavIndexContext","useContext","CarouselNavIndexContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;mCAWaO;;;uCALAH;;;8BAEAC;;;;;iEANU,QAAQ;AAE/B,MAAMJ,wCAA0BD,OAAME,aAAa,CAAqBC;AAEjE,MAAMC,sCAA8C,EAAE;AAEtD,MAAMC,6BAA6B;QACxCL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,wBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA6CI;EAAoC;AAE5E,MAAMG,kCAAkCN,wBAAwBO,QAAQ,CAAC"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CarouselNav: function() {
return _CarouselNav.CarouselNav;
},
carouselNavClassNames: function() {
return _useCarouselNavStylesstyles.carouselNavClassNames;
},
renderCarouselNav_unstable: function() {
return _renderCarouselNav.renderCarouselNav_unstable;
},
useCarouselNavStyles_unstable: function() {
return _useCarouselNavStylesstyles.useCarouselNavStyles_unstable;
},
useCarouselNav_unstable: function() {
return _useCarouselNav.useCarouselNav_unstable;
}
});
const _CarouselNav = require("./CarouselNav");
const _renderCarouselNav = require("./renderCarouselNav");
const _useCarouselNav = require("./useCarouselNav");
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/index.ts"],"sourcesContent":["export { CarouselNav } from './CarouselNav';\nexport type {\n CarouselNavContextValue,\n CarouselNavProps,\n CarouselNavSlots,\n CarouselNavState,\n NavButtonRenderFunction,\n} from './CarouselNav.types';\nexport { renderCarouselNav_unstable } from './renderCarouselNav';\nexport { useCarouselNav_unstable } from './useCarouselNav';\nexport { carouselNavClassNames, useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\n"],"names":["CarouselNav","renderCarouselNav_unstable","useCarouselNav_unstable","carouselNavClassNames","useCarouselNavStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BATJ,gBAAgB;mCAQD,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarouselNav_unstable", {
enumerable: true,
get: function() {
return renderCarouselNav_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CarouselNavContext = require("./CarouselNavContext");
const _CarouselNavIndexContext = require("./CarouselNavIndexContext");
const renderCarouselNav_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
const { totalSlides, renderNavButton } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselNavContext.CarouselNavContextProvider, {
value: contextValues.carouselNav,
children: new Array(totalSlides).fill(null).map((_, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselNavIndexContext.CarouselNavIndexContextProvider, {
value: index,
children: renderNavButton(index)
}, index))
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/renderCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavState, CarouselNavSlots } from './CarouselNav.types';\nimport { CarouselNavContextProvider, type CarouselNavContextValues } from './CarouselNavContext';\nimport { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';\n\n/**\n * Render the final JSX of CarouselNav\n */\nexport const renderCarouselNav_unstable = (\n state: CarouselNavState,\n contextValues: CarouselNavContextValues,\n): JSXElement => {\n assertSlots<CarouselNavSlots>(state);\n\n const { totalSlides, renderNavButton } = state;\n\n return (\n <state.root>\n <CarouselNavContextProvider value={contextValues.carouselNav}>\n {new Array(totalSlides).fill(null).map((_, index) => (\n <CarouselNavIndexContextProvider key={index} value={index}>\n {renderNavButton(index)}\n </CarouselNavIndexContextProvider>\n ))}\n </CarouselNavContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CarouselNavContextProvider","CarouselNavIndexContextProvider","renderCarouselNav_unstable","state","contextValues","totalSlides","renderNavButton","root","value","carouselNav","Array","fill","map","_","index"],"mappings":";;;;+BAaaG;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;oCAIkB,uBAAuB;yCACjD,4BAA4B;AAKrE,mCAAmC,CACxCC,OACAC;QAEAL,2BAAAA,EAA8BI;IAE9B,MAAM,EAAEE,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEzC,OAAA,WAAA,OACE,eAAA,EAACA,MAAMI,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,8CAAAA,EAAAA;YAA2BQ,OAAOJ,cAAcK,WAAW;sBACzD,IAAIC,MAAML,aAAaM,IAAI,CAAC,MAAMC,GAAG,CAAC,CAACC,GAAGC,QAAAA,WAAAA,OACzC,eAAA,EAACb,wDAAAA,EAAAA;oBAA4CO,OAAOM;8BACjDR,gBAAgBQ;mBADmBA;;;AAOhD,EAAE"}

View File

@@ -0,0 +1,57 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselNav_unstable", {
enumerable: true,
get: function() {
return useCarouselNav_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CarouselContext = require("../CarouselContext");
const useCarouselNav_unstable = (props, ref)=>{
const { appearance } = props;
const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
circular: false,
axis: 'horizontal',
memorizeCurrent: false,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_hasDefault: true
});
// Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
const [totalSlides, setTotalSlides] = (0, _reactutilities.useControllableState)({
state: props.totalSlides,
initialState: 0
});
const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
return subscribeForValues((data)=>{
setTotalSlides(data.navItemsCount);
});
}, [
subscribeForValues,
setTotalSlides
]);
return {
totalSlides,
appearance,
renderNavButton: props.children,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'tablist',
...props,
...focusableGroupAttr,
children: null
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaQ;;;;;;;8BAjB2B,0BAA0B;gCACQ,4BAA4B;iEAC/E,QAAQ;iCAEmC,qBAAqB;AAahF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,yBAAqBZ,qCAAAA,EAAwB;QACjDa,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,OAAGX,oCAAAA,EAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,yBAAqBf,4CAAAA,EAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;IAE3ElB,6CAAAA,EAA0B;QACxB,OAAOkB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,oBAAAA,CAAK2B,MAAM,KACf5B,wCAAAA,EAAyB,OAAO;YAC9BS;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,107 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
carouselNavClassNames: function() {
return carouselNavClassNames;
},
useCarouselNavStyles_unstable: function() {
return useCarouselNavStyles_unstable;
}
});
const _react = require("@griffel/react");
const carouselNavClassNames = {
root: 'fui-CarouselNav'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
Bt984gj: "f122n59",
Brf1p80: "f4d9j23",
Bkecrkj: "fc5wo7j",
Bfpq7zp: 0,
g9k6zt: 0,
Bn4voq9: 0,
giviqs: "f89hs3r",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w",
B8q5s1w: "f8hki3x",
Bci5o5g: [
"f1d2448m",
"ffh67wi"
],
n8qw10: "f1bjia2o",
Bdrgwmp: [
"ffh67wi",
"f1d2448m"
],
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1kijzfu",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "fkb7v5e",
De3pzq: "fkfdr9r"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".f122n59{align-items:center;}",
".f4d9j23{justify-content:center;}",
".fc5wo7j{pointer-events:all;}",
[
".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
[
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
{
p: -1
}
],
[
".fkb7v5e{margin:auto var(--spacingHorizontalS);}",
{
p: -1
}
],
".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}"
]
});
const useCarouselNavStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAwBjBkC,6BAA6B;;;;uBA3BO,gBAAgB;AAG9D,8BAA8B;IACjCjC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,OAAGzC,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

Some files were not shown because too many files have changed in this diff Show More