Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,25 @@
"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';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import * 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":["Carousel","React","forwardRef","props","ref","state","useCarousel_unstable","useCarouselStyles_unstable","useCustomStyleHook_unstable","contextValues","useCarouselContextValues_unstable","renderCarousel_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;6BAEc;gCACG;yCACG;0CAEO;qCACN;AAQrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAE1D,MAAMI,gBAAgBC,IAAAA,2DAAAA,EAAkCL;IAExD,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOI;AACxC;AAEAT,SAASY,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* @internal
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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 { 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 * 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"],"names":[],"rangeMappings":";;","mappings":"AAuGA;;CAEC"}
@@ -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");
@@ -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","carouselClassNames","renderCarousel_unstable","useCarouselStyles_unstable","useCarousel_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAaRC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BAZJ;gCAWe;6BACH;yCAC0B"}
@@ -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, {})
});
};
@@ -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 { 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) => {\n assertSlots<CarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["renderCarousel_unstable","state","contextValues","assertSlots","_jsx","CarouselProvider","value","carousel","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;iCAEK;AAM1B,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,iCAAAA,EAAAA;QAAiBC,OAAOJ,cAAcK,QAAQ;kBAC7C,WAAA,GAAAH,IAAAA,eAAA,EAACH,MAAMO,IAAI,EAAA,CAAA;;AAGjB"}
@@ -0,0 +1,124 @@
"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 } = 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,
circular,
containerRef: mergedContainerRef,
viewportRef,
selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
resetAutoplay
};
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,41 @@
"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, selectPageByElement, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, resetAutoplay, circular, containerRef, viewportRef } = state;
const carousel = _react.useMemo(()=>({
activeIndex,
selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
resetAutoplay,
circular,
containerRef,
viewportRef
}), [
activeIndex,
selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
resetAutoplay,
circular,
containerRef,
viewportRef
]);
return {
carousel
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Carousel/useCarouselContextValues.ts"],"sourcesContent":["import * 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 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 selectPageByElement,\n selectPageByDirection,\n selectPageByIndex,\n subscribeForValues,\n enableAutoplay,\n resetAutoplay,\n circular,\n containerRef,\n viewportRef,\n }),\n [\n activeIndex,\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":["useCarouselContextValues_unstable","state","activeIndex","selectPageByElement","selectPageByDirection","selectPageByIndex","subscribeForValues","enableAutoplay","resetAutoplay","circular","containerRef","viewportRef","carousel","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;AAKhB,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,WAAW,EACXC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACbC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACZ,GAAGV;IAEJ,MAAMW,WAAWC,OAAMC,OAAO,CAC5B,IAAO,CAAA;YACLZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACET;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB"}
@@ -0,0 +1,43 @@
"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"
}
}, {
d: [
".f1p9o1ba{overflow-x:hidden;}",
".f1115ve7{overflow-anchor:none;}",
".f10pi13n{position:relative;}"
]
});
const useCarouselStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselClassNames.root, styles.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\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});\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 state.root.className = mergeClasses(carouselClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["carouselClassNames","useCarouselStyles_unstable","root","useStyles","__styles","B68tc82","Eiaeu8","qhf8xq","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,kBAAkB;eAAlBA;;IAeIC,0BAA0B;eAA1BA;;;uBAhBwB;AAClC,MAAMD,qBAAqB;IAC9BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAUX,MAAMP,6BAA8BQ,CAAAA;IAC3C;IACA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACZ,mBAAmBE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAC9F,OAAOF;AACX"}