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,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopoverCarouselFooter", {
enumerable: true,
get: function() {
return TeachingPopoverCarouselFooter;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopoverCarouselFooter = require("./useTeachingPopoverCarouselFooter");
const _renderTeachingPopoverCarouselFooter = require("./renderTeachingPopoverCarouselFooter");
const _useTeachingPopoverCarouselFooterStylesstyles = require("./useTeachingPopoverCarouselFooterStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TeachingPopoverCarouselFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverCarouselFooter.useTeachingPopoverCarouselFooter_unstable)(props, ref);
(0, _useTeachingPopoverCarouselFooterStylesstyles.useTeachingPopoverCarouselFooterStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselFooterStyles_unstable')(state);
return (0, _renderTeachingPopoverCarouselFooter.renderTeachingPopoverCarouselFooter_unstable)(state);
});
TeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nimport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nimport { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';\nimport type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.\n */\nexport const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps> = React.forwardRef(\n (props, ref) => {\n const state = useTeachingPopoverCarouselFooter_unstable(props, ref);\n\n useTeachingPopoverCarouselFooterStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);\n\n return renderTeachingPopoverCarouselFooter_unstable(state);\n },\n);\n\nTeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';\n"],"names":["React","useTeachingPopoverCarouselFooter_unstable","renderTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooterStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kDAC2B,qCAAqC;qDAClC,wCAAwC;8DACrC,kDAAkD;qCAGtE,kCAAkC;AAQvE,MAAMK,gCAAAA,WAAAA,GAAyFL,OAAMM,UAAU,CACpH,CAACC,OAAOC;IACN,MAAMC,YAAQR,2EAAAA,EAA0CM,OAAOC;QAE/DL,6FAAAA,EAAgDM;QAEhDL,gDAAAA,EAA4B,mDAAmDK;IAE/E,WAAOP,iFAAAA,EAA6CO;AACtD,GACA;AAEFJ,8BAA8BK,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/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselFooterButtonProps } from '../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types';\n\nexport type TeachingPopoverCarouselFooterSlots = {\n /**\n * The element wrapping carousel pages and navigation.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The previous button slot.\n */\n previous?: Slot<TeachingPopoverCarouselFooterButtonProps>;\n\n /**\n * The next button slot.\n */\n next: NonNullable<Slot<TeachingPopoverCarouselFooterButtonProps>>;\n};\n\nexport type TeachingPopoverCarouselFooterLayout = 'offset' | 'centered';\n\n// For localization or customization, users may want to modify this for their own purposes\nexport type TeachingPopoverPageCountChildRenderFunction = (currentPage: number, totalPages: number) => React.ReactNode;\n\n/**\n * TeachingPopoverCarouselFooter Props\n */\nexport type TeachingPopoverCarouselFooterProps = ComponentProps<TeachingPopoverCarouselFooterSlots> & {\n /**\n * Controls whether buttons will be centered (balanced) or right aligned\n * Defaults to 'centered'.\n */\n layout?: TeachingPopoverCarouselFooterLayout;\n\n /**\n * The text to be displayed on the initial step of carousel\n */\n initialStepText: string;\n\n /**\n * The text to be displayed on the final step of carousel\n */\n finalStepText: string;\n};\n\n/**\n * TeachingPopoverCarouselFooter State and Context Hooks\n */\nexport type TeachingPopoverCarouselFooterState = ComponentState<Required<TeachingPopoverCarouselFooterSlots>> &\n Pick<TeachingPopoverCarouselFooterProps, 'layout'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,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, {
TeachingPopoverCarouselFooter: function() {
return _TeachingPopoverCarouselFooter.TeachingPopoverCarouselFooter;
},
renderTeachingPopoverCarouselFooter_unstable: function() {
return _renderTeachingPopoverCarouselFooter.renderTeachingPopoverCarouselFooter_unstable;
},
teachingPopoverCarouselFooterClassNames: function() {
return _useTeachingPopoverCarouselFooterStylesstyles.teachingPopoverCarouselFooterClassNames;
},
useTeachingPopoverCarouselFooterStyles_unstable: function() {
return _useTeachingPopoverCarouselFooterStylesstyles.useTeachingPopoverCarouselFooterStyles_unstable;
},
useTeachingPopoverCarouselFooter_unstable: function() {
return _useTeachingPopoverCarouselFooter.useTeachingPopoverCarouselFooter_unstable;
}
});
const _TeachingPopoverCarouselFooter = require("./TeachingPopoverCarouselFooter");
const _renderTeachingPopoverCarouselFooter = require("./renderTeachingPopoverCarouselFooter");
const _useTeachingPopoverCarouselFooter = require("./useTeachingPopoverCarouselFooter");
const _useTeachingPopoverCarouselFooterStylesstyles = require("./useTeachingPopoverCarouselFooterStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselFooter } from './TeachingPopoverCarouselFooter';\nexport type {\n TeachingPopoverCarouselFooterLayout,\n TeachingPopoverCarouselFooterProps,\n TeachingPopoverCarouselFooterSlots,\n TeachingPopoverCarouselFooterState,\n TeachingPopoverPageCountChildRenderFunction,\n} from './TeachingPopoverCarouselFooter.types';\nexport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nexport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nexport {\n teachingPopoverCarouselFooterClassNames,\n useTeachingPopoverCarouselFooterStyles_unstable,\n} from './useTeachingPopoverCarouselFooterStyles.styles';\n"],"names":["TeachingPopoverCarouselFooter","renderTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooter_unstable","teachingPopoverCarouselFooterClassNames","useTeachingPopoverCarouselFooterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4DAA6B;;;eAQ7BC,iFAA4C;;;eAGnDE,qFAAuC;;;eACvCC,6FAA+C;;;eAHxCF,2EAAyC;;;+CATJ,kCAAkC;qDAQnB,wCAAwC;kDAC3C,qCAAqC;8DAIxF,kDAAkD"}

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTeachingPopoverCarouselFooter_unstable", {
enumerable: true,
get: function() {
return renderTeachingPopoverCarouselFooter_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderTeachingPopoverCarouselFooter_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { layout } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
layout === 'centered' && state.previous && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.previous, {}),
state.root.children,
layout === 'offset' && state.previous && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.previous, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselFooterState } from './TeachingPopoverCarouselFooter.types';\nimport { TeachingPopoverCarouselFooterSlots } from './TeachingPopoverCarouselFooter.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselFooter\n */\nexport const renderTeachingPopoverCarouselFooter_unstable = (state: TeachingPopoverCarouselFooterState): JSXElement => {\n assertSlots<TeachingPopoverCarouselFooterSlots>(state);\n\n const { layout } = state;\n\n return (\n <state.root>\n {layout === 'centered' && state.previous && <state.previous />}\n {state.root.children}\n {layout === 'offset' && state.previous && <state.previous />}\n <state.next />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselFooter_unstable","state","layout","root","previous","children","next"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAGrB,4BAA4B;AAMjD,qDAAqD,CAACC;QAC3DF,2BAAAA,EAAgDE;IAEhD,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRD,WAAW,cAAcD,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;YAC1DH,MAAME,IAAI,CAACE,QAAQ;YACnBH,WAAW,YAAYD,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;8BACzD,eAAA,EAACH,MAAMK,IAAI,EAAA,CAAA;;;AAGjB,EAAE"}

View File

@@ -0,0 +1,48 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverCarouselFooter_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverCarouselFooter_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _TeachingPopoverCarouselFooterButton = require("../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton");
const useTeachingPopoverCarouselFooter_unstable = (props, ref)=>{
const { layout = 'centered', initialStepText, finalStepText } = props;
const previous = _reactutilities.slot.optional(props.previous, {
defaultProps: {
navType: 'prev',
altText: initialStepText
},
renderByDefault: true,
elementType: _TeachingPopoverCarouselFooterButton.TeachingPopoverCarouselFooterButton
});
const next = _reactutilities.slot.always(props.next, {
defaultProps: {
navType: 'next',
altText: finalStepText
},
elementType: _TeachingPopoverCarouselFooterButton.TeachingPopoverCarouselFooterButton
});
return {
layout,
components: {
root: 'div',
next: _TeachingPopoverCarouselFooterButton.TeachingPopoverCarouselFooterButton,
previous: _TeachingPopoverCarouselFooterButton.TeachingPopoverCarouselFooterButton
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}), {
elementType: 'div'
}),
previous,
next
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n TeachingPopoverCarouselFooterProps,\n TeachingPopoverCarouselFooterState,\n} from './TeachingPopoverCarouselFooter.types';\nimport { TeachingPopoverCarouselFooterButton } from '../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton';\n\nexport const useTeachingPopoverCarouselFooter_unstable = (\n props: TeachingPopoverCarouselFooterProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselFooterState => {\n const { layout = 'centered', initialStepText, finalStepText } = props;\n\n const previous = slot.optional(props.previous, {\n defaultProps: {\n navType: 'prev',\n altText: initialStepText,\n },\n renderByDefault: true,\n elementType: TeachingPopoverCarouselFooterButton,\n });\n\n const next = slot.always(props.next, {\n defaultProps: {\n navType: 'next',\n altText: finalStepText,\n },\n elementType: TeachingPopoverCarouselFooterButton,\n });\n\n return {\n layout,\n components: {\n root: 'div',\n next: TeachingPopoverCarouselFooterButton,\n previous: TeachingPopoverCarouselFooterButton,\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n previous,\n next,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","TeachingPopoverCarouselFooterButton","useTeachingPopoverCarouselFooter_unstable","props","ref","layout","initialStepText","finalStepText","previous","optional","defaultProps","navType","altText","renderByDefault","elementType","next","always","components","root"],"mappings":";;;;+BASaI;;;;;;;gCATkC,4BAA4B;iEACpD,QAAQ;qDAMqB,6EAA6E;AAE1H,kDAAkD,CACvDC,OACAC;IAEA,MAAM,EAAEC,SAAS,UAAU,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGJ;IAEhE,MAAMK,WAAWT,oBAAAA,CAAKU,QAAQ,CAACN,MAAMK,QAAQ,EAAE;QAC7CE,cAAc;YACZC,SAAS;YACTC,SAASN;QACX;QACAO,iBAAiB;QACjBC,aAAab,wEAAAA;IACf;IAEA,MAAMc,OAAOhB,oBAAAA,CAAKiB,MAAM,CAACb,MAAMY,IAAI,EAAE;QACnCL,cAAc;YACZC,SAAS;YACTC,SAASL;QACX;QACAO,aAAab,wEAAAA;IACf;IAEA,OAAO;QACLI;QACAY,YAAY;YACVC,MAAM;YACNH,MAAMd,wEAAAA;YACNO,UAAUP,wEAAAA;QACZ;QACAiB,MAAMnB,oBAAAA,CAAKiB,MAAM,KACflB,wCAAAA,EAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBN;QACAO;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,74 @@
'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, {
teachingPopoverCarouselFooterClassNames: function() {
return teachingPopoverCarouselFooterClassNames;
},
useTeachingPopoverCarouselFooterStyles_unstable: function() {
return useTeachingPopoverCarouselFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselFooterClassNames = {
root: 'fui-TeachingPopoverCarouselFooter',
previous: 'fui-TeachingPopoverCarouselFooter__previous',
next: 'fui-TeachingPopoverCarouselFooter__next'
};
// Todo: Page change animation & styles
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq"
},
rootCentered: {
Brf1p80: "f1869bpl",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f19gb1f4"
},
rootRightAligned: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f19gb1f4",
Bp34fd5: "f1y65ohq"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".f1869bpl{justify-content:space-between;}",
[
".f19gb1f4{gap:8px;}",
{
p: -1
}
],
[
".f19gb1f4{gap:8px;}",
{
p: -1
}
],
".f1y65ohq :first-child{-webkit-margin-end:auto;margin-inline-end:auto;}"
]
});
const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { layout } = state;
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);
if (state.previous) {
state.previous.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);
}
state.next.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.next, state.next.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTeachingPopoverCarouselFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselFooterClassNames = {\n root: 'fui-TeachingPopoverCarouselFooter',\n previous: 'fui-TeachingPopoverCarouselFooter__previous',\n next: 'fui-TeachingPopoverCarouselFooter__next'\n};\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row'\n },\n rootCentered: {\n justifyContent: 'space-between',\n gap: '8px'\n },\n rootRightAligned: {\n gap: '8px',\n '& :first-child': {\n marginInlineEnd: 'auto'\n }\n }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { layout } = state;\n state.root.className = mergeClasses(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);\n if (state.previous) {\n state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);\n }\n state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","teachingPopoverCarouselFooterClassNames","root","previous","next","useStyles","mc9l5x","Beiy3e4","rootCentered","Brf1p80","i8kkvl","Belr9w4","rmohyg","rootRightAligned","Bp34fd5","d","p","useTeachingPopoverCarouselFooterStyles_unstable","state","styles","layout","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,uCAAuC;;;mDAsBiD;;;;uBAvB5D,gBAAgB;AAClD,gDAAgD;IACnDC,IAAI,EAAE,mCAAmC;IACzCC,QAAQ,EAAE,6CAA6C;IACvDC,IAAI,EAAE;AACV,CAAC;AACD,uCAAA;AACA,MAAMC,SAAS,GAAA,WAAA,GAAGN,mBAAA,EAAA;IAAAG,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAE,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;QAAA;KAAA;AAAA,CAejB,CAAC;AAC8C,MAAMC,mDAAmDC,KAAK,IAAG;IAC7G,aAAa;IACb,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEe,MAAAA,EAAQ,GAAGF,KAAK;IACxBA,KAAK,CAAChB,IAAI,CAACmB,SAAS,OAAGrB,mBAAY,EAACC,uCAAuC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEkB,MAAM,KAAK,UAAU,GAAGD,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACN,gBAAgB,EAAEK,KAAK,CAAChB,IAAI,CAACmB,SAAS,CAAC;IAC3L,IAAIH,KAAK,CAACf,QAAQ,EAAE;QAChBe,KAAK,CAACf,QAAQ,CAACkB,SAAS,OAAGrB,mBAAY,EAACC,uCAAuC,CAACE,QAAQ,EAAEe,KAAK,CAACf,QAAQ,CAACkB,SAAS,CAAC;IACvH;IACAH,KAAK,CAACd,IAAI,CAACiB,SAAS,OAAGrB,mBAAY,EAACC,uCAAuC,CAACG,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACiB,SAAS,CAAC;IACvG,OAAOH,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, {
teachingPopoverCarouselFooterClassNames: function() {
return teachingPopoverCarouselFooterClassNames;
},
useTeachingPopoverCarouselFooterStyles_unstable: function() {
return useTeachingPopoverCarouselFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselFooterClassNames = {
root: 'fui-TeachingPopoverCarouselFooter',
previous: 'fui-TeachingPopoverCarouselFooter__previous',
next: 'fui-TeachingPopoverCarouselFooter__next'
};
// Todo: Page change animation & styles
const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'row'
},
rootCentered: {
justifyContent: 'space-between',
gap: '8px'
},
rootRightAligned: {
gap: '8px',
'& :first-child': {
marginInlineEnd: 'auto'
}
}
});
const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { layout } = state;
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);
if (state.previous) {
state.previous.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);
}
state.next.className = (0, _react.mergeClasses)(teachingPopoverCarouselFooterClassNames.next, state.next.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type {\n TeachingPopoverCarouselFooterSlots,\n TeachingPopoverCarouselFooterState,\n} from './TeachingPopoverCarouselFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselFooterClassNames: SlotClassNames<TeachingPopoverCarouselFooterSlots> = {\n root: 'fui-TeachingPopoverCarouselFooter',\n previous: 'fui-TeachingPopoverCarouselFooter__previous',\n next: 'fui-TeachingPopoverCarouselFooter__next',\n};\n\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n },\n rootCentered: {\n justifyContent: 'space-between',\n gap: '8px',\n },\n rootRightAligned: {\n gap: '8px',\n '& :first-child': {\n marginInlineEnd: 'auto',\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselFooterStyles_unstable = (\n state: TeachingPopoverCarouselFooterState,\n): TeachingPopoverCarouselFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n const { layout } = state;\n\n state.root.className = mergeClasses(\n teachingPopoverCarouselFooterClassNames.root,\n styles.root,\n layout === 'centered' ? styles.rootCentered : styles.rootRightAligned,\n state.root.className,\n );\n\n if (state.previous) {\n state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);\n }\n\n state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselFooterClassNames","root","previous","next","useStyles","display","flexDirection","rootCentered","justifyContent","gap","rootRightAligned","marginInlineEnd","useTeachingPopoverCarouselFooterStyles_unstable","state","styles","layout","className"],"mappings":"AAAA;;;;;;;;;;;;IASaE,uCAAAA;;;mDAyBAY;eAAAA;;;uBAhC4B,iBAAiB;AAOnD,gDAAoG;IACzGX,MAAM;IACNC,UAAU;IACVC,MAAM;AACR,EAAE;AAEF,uCAAuC;AACvC,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BG,MAAM;QACJI,SAAS;QACTC,eAAe;IACjB;IACAC,cAAc;QACZC,gBAAgB;QAChBC,KAAK;IACP;IACAC,kBAAkB;QAChBD,KAAK;QACL,kBAAkB;YAChBE,iBAAiB;QACnB;IACF;AACF;AAGO,wDAAwD,CAC7DE;IAEA;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,MAAM,EAAE,GAAGF;IAEnBA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,wCAAwCC,IAAI,EAC5Ca,OAAOb,IAAI,EACXc,WAAW,aAAaD,OAAOP,YAAY,GAAGO,OAAOJ,gBAAgB,EACrEG,MAAMZ,IAAI,CAACe,SAAS;IAGtB,IAAIH,MAAMX,QAAQ,EAAE;QAClBW,MAAMX,QAAQ,CAACc,SAAS,OAAGjB,mBAAAA,EAAaC,wCAAwCE,QAAQ,EAAEW,MAAMX,QAAQ,CAACc,SAAS;IACpH;IAEAH,MAAMV,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EAAaC,wCAAwCG,IAAI,EAAEU,MAAMV,IAAI,CAACa,SAAS;IAEtG,OAAOH;AACT,EAAE"}