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,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"}