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,20 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopover", {
enumerable: true,
get: function() {
return TeachingPopover;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopover = require("./useTeachingPopover");
const _renderTeachingPopover = require("./renderTeachingPopover");
const TeachingPopover = (props)=>{
const state = (0, _useTeachingPopover.useTeachingPopover_unstable)(props);
return (0, _renderTeachingPopover.renderTeachingPopover_unstable)(state);
};
TeachingPopover.displayName = 'TeachingPopover';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopover/TeachingPopover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopover_unstable } from './useTeachingPopover';\nimport { renderTeachingPopover_unstable } from './renderTeachingPopover';\nimport type { TeachingPopoverProps } from './TeachingPopover.types';\n\n/**\n * An extension class of Popover which defaults to withArrow and FocusTrap enabled.\n */\nexport const TeachingPopover: React.FC<TeachingPopoverProps> = props => {\n const state = useTeachingPopover_unstable(props);\n\n return renderTeachingPopover_unstable(state);\n};\n\nTeachingPopover.displayName = 'TeachingPopover';\n"],"names":["React","useTeachingPopover_unstable","renderTeachingPopover_unstable","TeachingPopover","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;uCACpB,0BAA0B;AAMlE,MAAMG,kBAAkDC,CAAAA;IAC7D,MAAMC,YAAQJ,+CAAAA,EAA4BG;IAE1C,WAAOF,qDAAAA,EAA+BG;AACxC,EAAE;AAEFF,gBAAgBG,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopover/TeachingPopover.types.ts"],"sourcesContent":["import type { PopoverState, PopoverProps } from '@fluentui/react-popover';\n\n/**\n * TeachingPopover Props\n */\nexport type TeachingPopoverProps = PopoverProps;\n\n/**\n * TeachingPopover State\n */\nexport type TeachingPopoverState = PopoverState;\n"],"names":[],"mappings":"AAOA;;CAEC,GACD,WAAgD"}

View File

@@ -0,0 +1,24 @@
"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, {
TeachingPopover: function() {
return _TeachingPopover.TeachingPopover;
},
renderTeachingPopover_unstable: function() {
return _renderTeachingPopover.renderTeachingPopover_unstable;
},
useTeachingPopover_unstable: function() {
return _useTeachingPopover.useTeachingPopover_unstable;
}
});
const _TeachingPopover = require("./TeachingPopover");
const _renderTeachingPopover = require("./renderTeachingPopover");
const _useTeachingPopover = require("./useTeachingPopover");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopover/index.ts"],"sourcesContent":["export { TeachingPopover } from './TeachingPopover';\nexport type { TeachingPopoverProps, TeachingPopoverState } from './TeachingPopover.types';\nexport { renderTeachingPopover_unstable } from './renderTeachingPopover';\nexport { useTeachingPopover_unstable } from './useTeachingPopover';\n"],"names":["TeachingPopover","renderTeachingPopover_unstable","useTeachingPopover_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAEfC,qDAA8B;;;eAC9BC,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB"}

View File

@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTeachingPopover_unstable", {
enumerable: true,
get: function() {
return renderTeachingPopover_unstable;
}
});
const _reactpopover = require("@fluentui/react-popover");
const renderTeachingPopover_unstable = _reactpopover.renderPopover_unstable;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopover/renderTeachingPopover.tsx"],"sourcesContent":["import { renderPopover_unstable } from '@fluentui/react-popover';\n\n/**\n * Render the final JSX of TeachingPopover\n */\nexport const renderTeachingPopover_unstable = renderPopover_unstable;\n"],"names":["renderPopover_unstable","renderTeachingPopover_unstable"],"mappings":";;;;;;;;;;8BAAuC,0BAA0B;AAK1D,MAAMC,iCAAiCD,oCAAAA,CAAuB"}

View File

@@ -0,0 +1,22 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopover_unstable", {
enumerable: true,
get: function() {
return useTeachingPopover_unstable;
}
});
const _reactpopover = require("@fluentui/react-popover");
const useTeachingPopover_unstable = (props)=>{
const popoverState = (0, _reactpopover.usePopover_unstable)(props);
var _props_withArrow, _props_trapFocus;
return {
...popoverState,
withArrow: (_props_withArrow = props.withArrow) !== null && _props_withArrow !== void 0 ? _props_withArrow : true,
// We trap focus because the default TeachingPopover view has buttons/carousel.
trapFocus: (_props_trapFocus = props.trapFocus) !== null && _props_trapFocus !== void 0 ? _props_trapFocus : true
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopover/useTeachingPopover.ts"],"sourcesContent":["'use client';\n\nimport { usePopover_unstable } from '@fluentui/react-popover';\nimport type { TeachingPopoverProps, TeachingPopoverState } from './TeachingPopover.types';\n\nexport const useTeachingPopover_unstable = (props: TeachingPopoverProps): TeachingPopoverState => {\n const popoverState = usePopover_unstable(props);\n\n return {\n ...popoverState,\n withArrow: props.withArrow ?? true,\n // We trap focus because the default TeachingPopover view has buttons/carousel.\n trapFocus: props.trapFocus ?? true,\n };\n};\n"],"names":["usePopover_unstable","useTeachingPopover_unstable","props","popoverState","withArrow","trapFocus"],"mappings":"AAAA;;;;;;;;;;;8BAEoC,0BAA0B;AAGvD,MAAMC,8BAA8B,CAACC;IAC1C,MAAMC,mBAAeH,iCAAAA,EAAoBE;QAI5BA,kBAEAA;IAJb,OAAO;QACL,GAAGC,YAAY;QACfC,WAAWF,CAAAA,mBAAAA,MAAME,SAAAA,AAAS,MAAA,QAAfF,qBAAAA,KAAAA,IAAAA,mBAAmB;QAC9B,+EAA+E;QAC/EG,WAAWH,CAAAA,mBAAAA,MAAMG,SAAAA,AAAS,MAAA,QAAfH,qBAAAA,KAAAA,IAAAA,mBAAmB;IAChC;AACF,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopoverBody", {
enumerable: true,
get: function() {
return TeachingPopoverBody;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopoverBody = require("./useTeachingPopoverBody");
const _renderTeachingPopoverBody = require("./renderTeachingPopoverBody");
const _useTeachingPopoverBodyStylesstyles = require("./useTeachingPopoverBodyStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TeachingPopoverBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverBody.useTeachingPopoverBody_unstable)(props, ref);
(0, _useTeachingPopoverBodyStylesstyles.useTeachingPopoverBodyStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverBodyStyles_unstable')(state);
return (0, _renderTeachingPopoverBody.renderTeachingPopoverBody_unstable)(state);
});
TeachingPopoverBody.displayName = 'TeachingPopoverBody';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverBody/TeachingPopoverBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';\nimport { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';\nimport { useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { TeachingPopoverBodyProps } from './TeachingPopoverBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`\n * hooks.\n *\n * TeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot\n */\nexport const TeachingPopoverBody: ForwardRefComponent<TeachingPopoverBodyProps> = React.forwardRef((props, ref) => {\n const state = useTeachingPopoverBody_unstable(props, ref);\n\n useTeachingPopoverBodyStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverBodyStyles_unstable')(state);\n\n return renderTeachingPopoverBody_unstable(state);\n});\n\nTeachingPopoverBody.displayName = 'TeachingPopoverBody';\n"],"names":["React","useTeachingPopoverBody_unstable","renderTeachingPopoverBody_unstable","useTeachingPopoverBodyStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wCACiB,2BAA2B;2CACxB,8BAA8B;oDAC3B,wCAAwC;qCAClD,kCAAkC;AAUvE,MAAMK,sBAAAA,WAAAA,GAAqEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,YAAQR,uDAAAA,EAAgCM,OAAOC;QAErDL,yEAAAA,EAAsCM;QAEtCL,gDAAAA,EAA4B,yCAAyCK;IAErE,WAAOP,6DAAAA,EAAmCO;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverBody/TeachingPopoverBody.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverBodySlots = {\n /**\n * The element wrapping the buttons.\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * Optional Media Content.\n */\n media?: Slot<'span'>;\n};\n\nexport type TeachingPopoverBodyProps = ComponentProps<TeachingPopoverBodySlots> & {\n mediaLength?: 'short' | 'medium' | 'tall';\n};\n\nexport type TeachingPopoverBodyState = ComponentState<TeachingPopoverBodySlots> &\n Required<Pick<TeachingPopoverBodyProps, 'mediaLength'>>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,34 @@
"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, {
TeachingPopoverBody: function() {
return _TeachingPopoverBody.TeachingPopoverBody;
},
renderTeachingPopoverBody_unstable: function() {
return _renderTeachingPopoverBody.renderTeachingPopoverBody_unstable;
},
teachingPopoverBodyClassNames: function() {
return _useTeachingPopoverBodyStylesstyles.teachingPopoverBodyClassNames;
},
useMediaStyles: function() {
return _useTeachingPopoverBodyStylesstyles.useMediaStyles;
},
useTeachingPopoverBodyStyles_unstable: function() {
return _useTeachingPopoverBodyStylesstyles.useTeachingPopoverBodyStyles_unstable;
},
useTeachingPopoverBody_unstable: function() {
return _useTeachingPopoverBody.useTeachingPopoverBody_unstable;
}
});
const _TeachingPopoverBody = require("./TeachingPopoverBody");
const _renderTeachingPopoverBody = require("./renderTeachingPopoverBody");
const _useTeachingPopoverBody = require("./useTeachingPopoverBody");
const _useTeachingPopoverBodyStylesstyles = require("./useTeachingPopoverBodyStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverBody/index.ts"],"sourcesContent":["export { TeachingPopoverBody } from './TeachingPopoverBody';\nexport type {\n TeachingPopoverBodyProps,\n TeachingPopoverBodySlots,\n TeachingPopoverBodyState,\n} from './TeachingPopoverBody.types';\nexport { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';\nexport { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';\nexport {\n teachingPopoverBodyClassNames,\n useMediaStyles,\n useTeachingPopoverBodyStyles_unstable,\n} from './useTeachingPopoverBodyStyles.styles';\n"],"names":["TeachingPopoverBody","renderTeachingPopoverBody_unstable","useTeachingPopoverBody_unstable","teachingPopoverBodyClassNames","useMediaStyles","useTeachingPopoverBodyStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wCAAmB;;;eAMnBC,6DAAkC;;;eAGzCE,iEAA6B;;;eAC7BC,kDAAc;;;eACdC,yEAAqC;;;eAJ9BH,uDAA+B;;;qCAPJ,wBAAwB;2CAMT,8BAA8B;wCACjC,2BAA2B;oDAKpE,wCAAwC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverBody/renderTeachingPopoverBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverBodyState } from './TeachingPopoverBody.types';\nimport { TeachingPopoverBodySlots } from './TeachingPopoverBody.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverBody\n */\nexport const renderTeachingPopoverBody_unstable = (state: TeachingPopoverBodyState): JSXElement => {\n assertSlots<TeachingPopoverBodySlots>(state);\n\n return (\n <state.root>\n {state.media && <state.media />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTeachingPopoverBody_unstable","state","root","media","children"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAGrB,4BAA4B;AAMjD,2CAA2C,CAACC;QACjDF,2BAAAA,EAAsCE;IAEtC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,KAAK,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,KAAK,EAAA,CAAA;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverBody_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverBody_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useTeachingPopoverBody_unstable = (props, ref)=>{
const { mediaLength } = props;
return {
components: {
root: 'div',
media: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}), {
elementType: 'div'
}),
media: _reactutilities.slot.optional(props.media, {
elementType: 'span'
}),
mediaLength: mediaLength !== null && mediaLength !== void 0 ? mediaLength : 'short'
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverBody/useTeachingPopoverBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverBodyProps, TeachingPopoverBodyState } from './TeachingPopoverBody.types';\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverBody properties\n * @param ref - reference to root HTMLElement of TeachingPopoverBody\n */\nexport const useTeachingPopoverBody_unstable = (\n props: TeachingPopoverBodyProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverBodyState => {\n const { mediaLength } = props;\n\n return {\n components: {\n root: 'div',\n media: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n media: slot.optional(props.media, { elementType: 'span' }),\n mediaLength: mediaLength ?? 'short',\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTeachingPopoverBody_unstable","props","ref","mediaLength","components","root","media","always","elementType","optional"],"mappings":";;;;+BAQaG;;;;;;;iEARU,QAAQ;gCACgB,4BAA4B;AAOpE,wCAAwC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGF;IAExB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNC,OAAO;QACT;QACAD,MAAMN,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBF,OAAOP,oBAAAA,CAAKU,QAAQ,CAACR,MAAMK,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDL,aAAaA,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe;IAC9B;AACF,EAAE"}

View File

@@ -0,0 +1,109 @@
'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, {
teachingPopoverBodyClassNames: function() {
return teachingPopoverBodyClassNames;
},
useMediaStyles: function() {
return useMediaStyles;
},
useTeachingPopoverBodyStyles_unstable: function() {
return useTeachingPopoverBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverBodyClassNames = {
root: 'fui-TeachingPopoverBody',
media: 'fui-TeachingPopoverBody__media'
};
const popoverBodyDimension = 288;
const useMediaStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bw0ie65: 0,
Br312pm: 0,
nk6f5a: 0,
Ijaq50: 0,
Bq1tomu: "fujjg13",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
a9b677: "f14z66ap",
jrapky: "f1jlhsmd",
ha4doy: "fmrv4ls",
Brf1p80: "f4d9j23",
mc9l5x: "f22iagw"
},
short: {
Bubjx69: "f1taewuw",
Bfd67p1: "f2f587x"
},
medium: {
Bubjx69: "f7da563",
Bfd67p1: "fmwcswg"
},
tall: {
Bubjx69: "f9ikmtg",
Bfd67p1: "f1gv48o"
}
}, {
d: [
[
".fujjg13{grid-area:media;}",
{
p: -1
}
],
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
".f14z66ap{width:auto;}",
".f1jlhsmd{margin-bottom:12px;}",
".fmrv4ls{vertical-align:middle;}",
".f4d9j23{justify-content:center;}",
".f22iagw{display:flex;}",
".f1taewuw{aspect-ratio:2.4615384615384617;}",
".f7da563{aspect-ratio:1.6363636363636365;}",
".f9ikmtg{aspect-ratio:1;}"
],
t: [
"@supports not (aspect-ratio){.f2f587x{height:117px;}}",
"@supports not (aspect-ratio){.fmwcswg{height:176px;}}",
"@supports not (aspect-ratio){.f1gv48o{height:288px;}}"
]
});
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Byoj8tv: "fpe6lb7"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".fpe6lb7{padding-bottom:12px;}"
]
});
const useTeachingPopoverBodyStyles_unstable = (state)=>{
'use no memo';
const { mediaLength } = state;
const styles = useStyles();
const mediaStyles = useMediaStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
if (state.media) {
state.media.className = (0, _react.mergeClasses)(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTeachingPopoverBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverBodyClassNames = {\n root: 'fui-TeachingPopoverBody',\n media: 'fui-TeachingPopoverBody__media'\n};\nconst popoverBodyDimension = 288;\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n overflow: 'hidden',\n width: 'auto',\n marginBottom: '12px',\n verticalAlign: 'middle',\n justifyContent: 'center',\n display: 'flex'\n },\n short: {\n aspectRatio: popoverBodyDimension / 117,\n '@supports not (aspect-ratio)': {\n height: '117px'\n }\n },\n medium: {\n aspectRatio: popoverBodyDimension / 176,\n '@supports not (aspect-ratio)': {\n height: '176px'\n }\n },\n tall: {\n aspectRatio: 1,\n '@supports not (aspect-ratio)': {\n height: `${popoverBodyDimension}px`\n }\n }\n});\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n paddingBottom: '12px'\n }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverBodyStyles_unstable = (state)=>{\n 'use no memo';\n const { mediaLength } = state;\n const styles = useStyles();\n const mediaStyles = useMediaStyles();\n state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","teachingPopoverBodyClassNames","root","media","popoverBodyDimension","useMediaStyles","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","B68tc82","Bmxbyg5","Bpg54ce","a9b677","jrapky","ha4doy","Brf1p80","mc9l5x","short","Bubjx69","Bfd67p1","medium","tall","d","p","t","useStyles","Beiy3e4","Byoj8tv","useTeachingPopoverBodyStyles_unstable","state","mediaLength","styles","mediaStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,6BAA6B;;;kBAKf;;;yCAoCgE;eAArC8B;;;uBA1Cb,gBAAgB;AAClD,sCAAsC;IACzC7B,IAAI,EAAE,yBAAyB;IAC/BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,GAAG,GAAG;AACzB,MAAMC,iBAAc,WAAA,OAAGN,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,IAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4B7B,CAAC;AACF,MAAMC,SAAS,GAAA,WAAA,OAAG7B,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAiB,MAAA,EAAA;QAAAU,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMjB,CAAC;AAC8C,+CAA+CO,KAAK,IAAG;IACnG,aAAa;IACb,MAAM,EAAEC,WAAAA,EAAa,GAAGD,KAAK;IAC7B,MAAME,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1B,MAAMO,WAAW,GAAG9B,cAAc,CAAC,CAAC;IACpC2B,KAAK,CAAC9B,IAAI,CAACkC,SAAS,OAAGpC,mBAAY,EAACC,6BAA6B,CAACC,IAAI,EAAEgC,MAAM,CAAChC,IAAI,EAAE8B,KAAK,CAAC9B,IAAI,CAACkC,SAAS,CAAC;IAC1G,IAAIJ,KAAK,CAAC7B,KAAK,EAAE;QACb6B,KAAK,CAAC7B,KAAK,CAACiC,SAAS,OAAGpC,mBAAY,EAACC,6BAA6B,CAACE,KAAK,EAAEgC,WAAW,CAAC7B,IAAI,EAAE6B,WAAW,CAACF,WAAW,CAAC,EAAED,KAAK,CAAC7B,KAAK,CAACiC,SAAS,CAAC;IAChJ;IACA,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,75 @@
'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, {
teachingPopoverBodyClassNames: function() {
return teachingPopoverBodyClassNames;
},
useMediaStyles: function() {
return useMediaStyles;
},
useTeachingPopoverBodyStyles_unstable: function() {
return useTeachingPopoverBodyStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverBodyClassNames = {
root: 'fui-TeachingPopoverBody',
media: 'fui-TeachingPopoverBody__media'
};
const popoverBodyDimension = 288;
const useMediaStyles = (0, _react.makeStyles)({
base: {
gridArea: 'media',
overflow: 'hidden',
width: 'auto',
marginBottom: '12px',
verticalAlign: 'middle',
justifyContent: 'center',
display: 'flex'
},
short: {
aspectRatio: popoverBodyDimension / 117,
'@supports not (aspect-ratio)': {
height: '117px'
}
},
medium: {
aspectRatio: popoverBodyDimension / 176,
'@supports not (aspect-ratio)': {
height: '176px'
}
},
tall: {
aspectRatio: 1,
'@supports not (aspect-ratio)': {
height: `${popoverBodyDimension}px`
}
}
});
const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'column',
paddingBottom: '12px'
}
});
const useTeachingPopoverBodyStyles_unstable = (state)=>{
'use no memo';
const { mediaLength } = state;
const styles = useStyles();
const mediaStyles = useMediaStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
if (state.media) {
state.media.className = (0, _react.mergeClasses)(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TeachingPopoverBodySlots, TeachingPopoverBodyState } from './TeachingPopoverBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverBodyClassNames: SlotClassNames<TeachingPopoverBodySlots> = {\n root: 'fui-TeachingPopoverBody',\n media: 'fui-TeachingPopoverBody__media',\n};\n\nconst popoverBodyDimension = 288;\n\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n overflow: 'hidden',\n width: 'auto',\n marginBottom: '12px',\n verticalAlign: 'middle',\n justifyContent: 'center',\n display: 'flex',\n },\n short: {\n aspectRatio: popoverBodyDimension / 117,\n '@supports not (aspect-ratio)': {\n height: '117px',\n },\n },\n medium: {\n aspectRatio: popoverBodyDimension / 176,\n '@supports not (aspect-ratio)': {\n height: '176px',\n },\n },\n tall: {\n aspectRatio: 1,\n '@supports not (aspect-ratio)': {\n height: `${popoverBodyDimension}px`,\n },\n },\n});\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n paddingBottom: '12px',\n },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverBodyStyles_unstable = (state: TeachingPopoverBodyState): TeachingPopoverBodyState => {\n 'use no memo';\n\n const { mediaLength } = state;\n const styles = useStyles();\n const mediaStyles = useMediaStyles();\n\n state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);\n\n if (state.media) {\n state.media.className = mergeClasses(\n teachingPopoverBodyClassNames.media,\n mediaStyles.base,\n mediaStyles[mediaLength],\n state.media.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverBodyClassNames","root","media","popoverBodyDimension","useMediaStyles","base","gridArea","overflow","width","marginBottom","verticalAlign","justifyContent","display","short","aspectRatio","height","medium","tall","useStyles","flexDirection","paddingBottom","useTeachingPopoverBodyStyles_unstable","state","mediaLength","styles","mediaStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,6BAAAA;;;kBAOAI;;;yCAuCAiB;eAAAA;;;uBAlD4B,iBAAiB;AAInD,sCAAgF;IACrFpB,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuB;AAEtB,MAAMC,iBAAiBN,qBAAAA,EAAW;IACvCO,MAAM;QACJC,UAAU;QACVC,UAAU;QACVC,OAAO;QACPC,cAAc;QACdC,eAAe;QACfC,gBAAgB;QAChBC,SAAS;IACX;IACAC,OAAO;QACLC,aAAaX,uBAAuB;QACpC,gCAAgC;YAC9BY,QAAQ;QACV;IACF;IACAC,QAAQ;QACNF,aAAaX,uBAAuB;QACpC,gCAAgC;YAC9BY,QAAQ;QACV;IACF;IACAE,MAAM;QACJH,aAAa;QACb,gCAAgC;YAC9BC,QAAQ,GAAGZ,qBAAqB,EAAE,CAAC;QACrC;IACF;AACF,GAAG;AAEH,MAAMe,gBAAYpB,iBAAAA,EAAW;IAC3BG,MAAM;QACJW,SAAS;QACTO,eAAe;QACfC,eAAe;IACjB;AACF;AAGO,8CAA8C,CAACE;IACpD;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAME,SAASN;IACf,MAAMO,cAAcrB;IAEpBkB,MAAMrB,IAAI,CAACyB,SAAS,OAAG3B,mBAAAA,EAAaC,8BAA8BC,IAAI,EAAEuB,OAAOvB,IAAI,EAAEqB,MAAMrB,IAAI,CAACyB,SAAS;IAEzG,IAAIJ,MAAMpB,KAAK,EAAE;QACfoB,MAAMpB,KAAK,CAACwB,SAAS,OAAG3B,mBAAAA,EACtBC,8BAA8BE,KAAK,EACnCuB,YAAYpB,IAAI,EAChBoB,WAAW,CAACF,YAAY,EACxBD,MAAMpB,KAAK,CAACwB,SAAS;IAEzB;IAEA,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,143 @@
'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 _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _constants = require("./constants");
const _useCarouselWalker = require("./useCarouselWalker");
const _createCarouselStore = require("./createCarouselStore");
function useCarousel_unstable(options) {
'use no memo';
const { announcement, onValueChange, onFinish } = options;
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
const { ref: carouselRef, walker: carouselWalker } = (0, _useCarouselWalker.useCarouselWalker_unstable)();
const [store] = _react.useState(()=>(0, _createCarouselStore.createCarouselStore)());
const [value, setValue] = (0, _reactutilities.useControllableState)({
defaultState: options.defaultValue,
state: options.value,
initialState: null
});
const rootRef = _react.useRef(null);
const { announce } = (0, _reactsharedcontexts.useAnnounce)();
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks
_react.useEffect(()=>{
if (value === null) {
// eslint-disable-next-line no-console
console.error('useCarousel: Carousel needs to have a `defaultValue` or `value` prop set. If you want to control the value, use the `value` prop.');
}
}, [
value
]);
}
_react.useEffect(()=>{
var _rootRef_current;
const allItems = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.querySelectorAll(`[${_constants.CAROUSEL_ITEM}]`);
for(let i = 0; i < allItems.length; i++){
store.addValue(allItems.item(i).getAttribute(_constants.CAROUSEL_ITEM));
}
return ()=>{
store.clear();
};
}, [
store
]);
_react.useEffect(()=>{
if (!win) {
return;
}
const config = {
attributes: true,
attributeFilter: [
_constants.CAROUSEL_ITEM
],
childList: true,
subtree: true
};
// Callback function to execute when mutations are observed
const callback = (mutationList)=>{
for (const mutation of mutationList){
for (const addedNode of Array.from(mutation.addedNodes)){
if ((0, _reactutilities.isHTMLElement)(addedNode) && addedNode.hasAttribute(_constants.CAROUSEL_ITEM)) {
const newValue = addedNode.getAttribute(_constants.CAROUSEL_ITEM);
const newNode = carouselWalker.find(newValue);
if (!(newNode === null || newNode === void 0 ? void 0 : newNode.value)) {
return;
}
const previousNode = carouselWalker.prevPage(newNode === null || newNode === void 0 ? void 0 : newNode.value);
var _previousNode_value;
store.insertValue(newValue, (_previousNode_value = previousNode === null || previousNode === void 0 ? void 0 : previousNode.value) !== null && _previousNode_value !== void 0 ? _previousNode_value : null);
}
}
for (const removedNode of Array.from(mutation.removedNodes)){
if ((0, _reactutilities.isHTMLElement)(removedNode) && (removedNode === null || removedNode === void 0 ? void 0 : removedNode.hasAttribute(_constants.CAROUSEL_ITEM))) {
const removedValue = removedNode.getAttribute(_constants.CAROUSEL_ITEM);
store.removeValue(removedValue);
}
}
}
};
// Create an observer instance linked to the callback function
const observer = new win.MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(rootRef.current, config);
// Later, you can stop observing
return ()=>{
observer.disconnect();
};
}, [
carouselWalker,
store,
win
]);
const updateSlide = (0, _reactutilities.useEventCallback)((event, newValue)=>{
setValue(newValue);
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event, {
event,
type: 'click',
value: newValue
});
const announceText = announcement === null || announcement === void 0 ? void 0 : announcement(newValue);
if (announceText) {
announce(announceText, {
polite: true
});
}
});
const selectPageByDirection = (0, _reactutilities.useEventCallback)((event, direction)=>{
const active = carouselWalker.active();
if (!(active === null || active === void 0 ? void 0 : active.value)) {
return;
}
const newPage = direction === 'prev' ? carouselWalker.prevPage(active.value) : carouselWalker.nextPage(active.value);
if (newPage) {
updateSlide(event, newPage === null || newPage === void 0 ? void 0 : newPage.value);
} else {
onFinish === null || onFinish === void 0 ? void 0 : onFinish(event, {
event,
type: 'click',
value: active === null || active === void 0 ? void 0 : active.value
});
}
});
return {
carouselRef: (0, _reactutilities.useMergedRefs)(rootRef, carouselRef),
carousel: {
store,
value,
selectPageByDirection,
selectPageByValue: updateSlide
}
};
}

File diff suppressed because one or more lines are too long

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/TeachingPopoverCarousel/Carousel/Carousel.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\n\nexport type CarouselStore = {\n clear: () => void;\n addValue: (value: string) => void;\n insertValue: (value: string, prev: string | null) => void;\n removeValue: (value: string) => void;\n subscribe: (listener: () => void) => () => void;\n getSnapshot: () => string[];\n};\n\nexport type CarouselItem = {\n el: HTMLElement;\n value: string | null;\n};\n\nexport type UseCarouselOptions = {\n /**\n * Localizes the string used to announce carousel page changes to screen reader users\n * Defaults to: undefined\n */\n announcement?: (newValue: string) => string;\n\n /**\n * The initial page to display in uncontrolled mode.\n */\n defaultValue?: string;\n\n /**\n * The value of the currently active page.\n */\n value?: string;\n\n /**\n * Callback to notify a page change.\n */\n onValueChange?: EventHandler<CarouselValueChangeData>;\n\n /**\n * Callback to notify when the final button step of a carousel has been activated.\n */\n onFinish?: EventHandler<CarouselValueChangeData>;\n};\n\nexport type CarouselValueChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>> & {\n /**\n * The value to be set after event has occurred.\n */\n value?: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,37 @@
'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 _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactcontextselector = require("@fluentui/react-context-selector");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _createCarouselStore = require("./createCarouselStore");
const carouselContextDefaultValue = {
store: (0, _createCarouselStore.createCarouselStore)(),
value: null,
selectPageByDirection: ()=>{
/** noop */ },
selectPageByValue: ()=>{
/** noop */ }
};
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/TeachingPopoverCarousel/Carousel/CarouselContext.ts"],"sourcesContent":["'use client';\n\nimport { type Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport * as React from 'react';\n\nimport type { CarouselStore } from './Carousel.types';\nimport { createCarouselStore } from './createCarouselStore';\n\nexport type CarouselContextValue = {\n store: CarouselStore;\n value: string | null;\n selectPageByDirection: (\n event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,\n direction: 'next' | 'prev',\n ) => void;\n selectPageByValue: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, value: string) => void;\n};\n\nexport const carouselContextDefaultValue: CarouselContextValue = {\n store: createCarouselStore(),\n value: null,\n selectPageByDirection: () => {\n /** noop */\n },\n selectPageByValue: () => {\n /** noop */\n },\n};\n\nconst CarouselContext: Context<CarouselContextValue> = createContext<CarouselContextValue | undefined>(\n undefined,\n) as Context<CarouselContextValue>;\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","React","createCarouselStore","carouselContextDefaultValue","store","value","selectPageByDirection","selectPageByValue","CarouselContext","undefined","CarouselProvider","Provider","useCarouselContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;oBAiCaW;;;+BAfAP;;;+BAiBAS;;;;;sCAjCoE,mCAAmC;iEAC7F,QAAQ;qCAGK,wBAAwB;AAYrD,MAAMT,8BAAoD;IAC/DC,WAAOF,wCAAAA;IACPG,OAAO;IACPC,uBAAuB;IACrB,SAAS,GACX;IACAC,mBAAmB;IACjB,SAAS,GACX;AACF,EAAE;AAEF,MAAMC,sBAAiDT,mCAAAA,EACrDU;AAGK,MAAMC,mBAAmBF,gBAAgBG,QAAQ,CAAC;AAElD,MAAMC,8BAA8B,CAAIC,eAC7Cb,wCAAAA,EAAmBQ,iBAAiB,CAACM,MAAMX,2BAA2B,GAAKU,SAASC,MAAM"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselItemSlots = {\n /**\n * The element wrapping carousel pages and navigation.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type CarouselItemProps = ComponentProps<CarouselItemSlots> & {\n /**\n * The value used to identify a page,\n * it should be unique and is necessary for pagination\n */\n value: string;\n};\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type CarouselItemState = ComponentState<Required<CarouselItemSlots>> & {\n visible: boolean;\n} & Pick<CarouselItemProps, 'value'>;\n"],"names":[],"mappings":"AAiBA;;CAEC,GACD,WAEqC"}

View File

@@ -0,0 +1,20 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CarouselItem", {
enumerable: true,
get: function() {
return CarouselItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarouselItem = require("./useCarouselItem");
const _renderCarouselItem = require("./renderCarouselItem");
const CarouselItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselItem.useCarouselItem_unstable)(props, ref);
return (0, _renderCarouselItem.renderCarouselItem_unstable)(state);
});
CarouselItem.displayName = 'CarouselItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { CarouselItemProps } from './CarouselItem.types';\nimport { useCarouselItem_unstable } from './useCarouselItem';\nimport { renderCarouselItem_unstable } from './renderCarouselItem';\n\n/**\n * Define a CarouselItem, using the `useCarouselItem_unstable` and 'renderCarouselItem_unstable' hooks.\n * It has no styling opinions.\n */\nexport const CarouselItem: ForwardRefComponent<CarouselItemProps> = React.forwardRef((props, ref) => {\n const state = useCarouselItem_unstable(props, ref);\n\n return renderCarouselItem_unstable(state);\n});\n\nCarouselItem.displayName = 'CarouselItem';\n"],"names":["React","useCarouselItem_unstable","renderCarouselItem_unstable","CarouselItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAIU,oBAAoB;oCACjB,uBAAuB;AAM5D,MAAMG,eAAAA,WAAAA,GAAuDH,OAAMI,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQN,yCAAAA,EAAyBI,OAAOC;IAE9C,WAAOJ,+CAAAA,EAA4BK;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/CarouselItem/renderCarouselItem.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 { CarouselItemState, CarouselItemSlots } from './CarouselItem.types';\n\n/**\n * Render the final JSX of TeachingPopoverCarousel\n */\nexport const renderCarouselItem_unstable = (state: CarouselItemState): JSXElement => {\n assertSlots<CarouselItemSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselItem_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,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselItem_unstable", {
enumerable: true,
get: function() {
return useCarouselItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _CarouselContext = require("../CarouselContext");
const _constants = require("../constants");
const useCarouselItem_unstable = (props, ref)=>{
const { value } = props;
const visible = (0, _CarouselContext.useCarouselContext_unstable)((c)=>c.value === value);
const state = {
value,
visible,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
[_constants.CAROUSEL_ITEM]: value,
[_constants.CAROUSEL_ACTIVE_ITEM]: visible,
hidden: !visible,
...props
}), {
elementType: 'div'
})
};
if (!visible) {
state.root.children = null;
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/CarouselItem/useCarouselItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { CarouselItemProps, CarouselItemState } from './CarouselItem.types';\nimport { useCarouselContext_unstable } from '../CarouselContext';\nimport { CAROUSEL_ACTIVE_ITEM, CAROUSEL_ITEM } from '../constants';\n\nexport const useCarouselItem_unstable = (\n props: CarouselItemProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselItemState => {\n const { value } = props;\n\n const visible = useCarouselContext_unstable(c => c.value === value);\n const state: CarouselItemState = {\n value,\n visible,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n [CAROUSEL_ITEM]: value,\n [CAROUSEL_ACTIVE_ITEM]: visible,\n hidden: !visible,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n if (!visible) {\n state.root.children = null;\n }\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCarouselContext_unstable","CAROUSEL_ACTIVE_ITEM","CAROUSEL_ITEM","useCarouselItem_unstable","props","ref","value","visible","c","state","components","root","always","hidden","elementType","children"],"mappings":"AAAA;;;;;+BAQaM;;;;;;;iEANU,QAAQ;gCACgB,4BAA4B;iCAE/B,qBAAqB;2BACb,eAAe;AAE5D,iCAAiC,CACtCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,MAAMG,UAAUP,gDAAAA,EAA4BQ,CAAAA,IAAKA,EAAEF,KAAK,KAAKA;IAC7D,MAAMG,QAA2B;QAC/BH;QACAC;QACAG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMZ,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9BO;YACA,CAACH,wBAAAA,CAAc,EAAEI;YACjB,CAACL,+BAAAA,CAAqB,EAAEM;YACxBM,QAAQ,CAACN;YACT,GAAGH,KAAK;QACV,IACA;YAAEU,aAAa;QAAM;IAEzB;IAEA,IAAI,CAACP,SAAS;QACZE,MAAME,IAAI,CAACI,QAAQ,GAAG;IACxB;IAEA,OAAON;AACT,EAAE"}

View File

@@ -0,0 +1,20 @@
"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_ACTIVE_ITEM: function() {
return CAROUSEL_ACTIVE_ITEM;
},
CAROUSEL_ITEM: function() {
return CAROUSEL_ITEM;
}
});
const CAROUSEL_ITEM = 'data-carousel-item';
const CAROUSEL_ACTIVE_ITEM = 'data-carousel-active-item';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/constants.ts"],"sourcesContent":["export const CAROUSEL_ITEM = 'data-carousel-item';\nexport const CAROUSEL_ACTIVE_ITEM = 'data-carousel-active-item';\n"],"names":["CAROUSEL_ITEM","CAROUSEL_ACTIVE_ITEM"],"mappings":";;;;;;;;;;;wBACaC;;;iBADAD;;;;AAAN,MAAMA,gBAAgB,qBAAqB;AAC3C,MAAMC,uBAAuB,4BAA4B"}

View File

@@ -0,0 +1,70 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "createCarouselStore", {
enumerable: true,
get: function() {
return createCarouselStore;
}
});
const createCarouselStore = ()=>{
let values = [];
let listeners = [];
const carouselStore = {
clear () {
values = [];
emitChange();
},
addValue (value) {
values = [
...values,
value
];
emitChange();
},
insertValue (value, prev) {
if (!prev) {
values = [
value,
...values
];
} else {
const pos = values.indexOf(prev);
values.splice(pos + 1, 0, value);
// Required to be defined as a 'new' array for useSyncExternalStore
values = [
...values
];
}
emitChange();
},
removeValue (value) {
const pos = values.indexOf(value);
values.splice(pos, 1);
// Required to be defined as a 'new' array for useSyncExternalStore
values = [
...values
];
emitChange();
},
subscribe (listener) {
listeners = [
...listeners,
listener
];
return ()=>{
listeners = listeners.filter((l)=>l !== listener);
};
},
getSnapshot () {
return values;
}
};
function emitChange() {
for (const listener of listeners){
listener();
}
}
return carouselStore;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/createCarouselStore.ts"],"sourcesContent":["import { type CarouselStore } from './Carousel.types';\n\nexport const createCarouselStore = (): CarouselStore => {\n let values: string[] = [];\n let listeners: Array<() => void> = [];\n\n const carouselStore = {\n clear() {\n values = [];\n emitChange();\n },\n addValue(value: string) {\n values = [...values, value];\n\n emitChange();\n },\n insertValue(value: string, prev: string | null) {\n if (!prev) {\n values = [value, ...values];\n } else {\n const pos = values.indexOf(prev);\n values.splice(pos + 1, 0, value);\n // Required to be defined as a 'new' array for useSyncExternalStore\n values = [...values];\n }\n emitChange();\n },\n removeValue(value: string) {\n const pos = values.indexOf(value);\n values.splice(pos, 1);\n // Required to be defined as a 'new' array for useSyncExternalStore\n values = [...values];\n emitChange();\n },\n subscribe(listener: () => void) {\n listeners = [...listeners, listener];\n\n return () => {\n listeners = listeners.filter(l => l !== listener);\n };\n },\n getSnapshot() {\n return values;\n },\n };\n\n function emitChange() {\n for (const listener of listeners) {\n listener();\n }\n }\n\n return carouselStore;\n};\n"],"names":["createCarouselStore","values","listeners","carouselStore","clear","emitChange","addValue","value","insertValue","prev","pos","indexOf","splice","removeValue","subscribe","listener","filter","l","getSnapshot"],"mappings":";;;;+BAEaA;;;;;;AAAN,4BAA4B;IACjC,IAAIC,SAAmB,EAAE;IACzB,IAAIC,YAA+B,EAAE;IAErC,MAAMC,gBAAgB;QACpBC;YACEH,SAAS,EAAE;YACXI;QACF;QACAC,UAASC,KAAa;YACpBN,SAAS;mBAAIA;gBAAQM;aAAM;YAE3BF;QACF;QACAG,aAAYD,KAAa,EAAEE,IAAmB;YAC5C,IAAI,CAACA,MAAM;gBACTR,SAAS;oBAACM;uBAAUN;iBAAO;YAC7B,OAAO;gBACL,MAAMS,MAAMT,OAAOU,OAAO,CAACF;gBAC3BR,OAAOW,MAAM,CAACF,MAAM,GAAG,GAAGH;gBAC1B,mEAAmE;gBACnEN,SAAS;uBAAIA;iBAAO;YACtB;YACAI;QACF;QACAQ,aAAYN,KAAa;YACvB,MAAMG,MAAMT,OAAOU,OAAO,CAACJ;YAC3BN,OAAOW,MAAM,CAACF,KAAK;YACnB,mEAAmE;YACnET,SAAS;mBAAIA;aAAO;YACpBI;QACF;QACAS,WAAUC,QAAoB;YAC5Bb,YAAY;mBAAIA;gBAAWa;aAAS;YAEpC,OAAO;gBACLb,YAAYA,UAAUc,MAAM,CAACC,CAAAA,IAAKA,MAAMF;YAC1C;QACF;QACAG;YACE,OAAOjB;QACT;IACF;IAEA,SAASI;QACP,KAAK,MAAMU,YAAYb,UAAW;YAChCa;QACF;IACF;IAEA,OAAOZ;AACT,EAAE"}

View File

@@ -0,0 +1,17 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselValues_unstable", {
enumerable: true,
get: function() {
return useCarouselValues_unstable;
}
});
const _shim = require("use-sync-external-store/shim");
const _CarouselContext = require("./CarouselContext");
function useCarouselValues_unstable(getSnapshot) {
const store = (0, _CarouselContext.useCarouselContext_unstable)((c)=>c.store);
return (0, _shim.useSyncExternalStore)(store.subscribe, ()=>getSnapshot(store.getSnapshot()));
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/Carousel/useCarouselValues.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\n\nimport { useCarouselContext_unstable } from './CarouselContext';\nimport type { CarouselStore } from './Carousel.types';\n\nexport function useCarouselValues_unstable<T>(getSnapshot: (values: ReturnType<CarouselStore['getSnapshot']>) => T): T {\n const store = useCarouselContext_unstable(c => c.store);\n\n return useSyncExternalStore(store.subscribe, () => getSnapshot(store.getSnapshot()));\n}\n"],"names":["useSyncExternalStore","useCarouselContext_unstable","useCarouselValues_unstable","getSnapshot","store","c","subscribe"],"mappings":"AAAA;;;;;;;;;;;sBAEqC,+BAA+B;iCAExB,oBAAoB;AAGzD,SAASE,2BAA8BC,WAAoE;IAChH,MAAMC,YAAQH,4CAAAA,EAA4BI,CAAAA,IAAKA,EAAED,KAAK;IAEtD,WAAOJ,0BAAAA,EAAqBI,MAAME,SAAS,EAAE,IAAMH,YAAYC,MAAMD,WAAW;AAClF"}

View File

@@ -0,0 +1,110 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselWalker_unstable", {
enumerable: true,
get: function() {
return useCarouselWalker_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _constants = require("./constants");
const useCarouselWalker_unstable = ()=>{
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const treeWalkerRef = _react.useRef(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.createTreeWalker(targetDocument.body));
const htmlRef = _react.useRef(null);
const ref = _react.useCallback((el)=>{
if (!targetDocument) {
return;
}
if (!el) {
return;
}
htmlRef.current = el;
treeWalkerRef.current = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, {
acceptNode (node) {
if (!(0, _reactutilities.isHTMLElement)(node)) {
return NodeFilter.FILTER_SKIP;
}
return node.hasAttribute(_constants.CAROUSEL_ITEM) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
}, [
targetDocument
]);
return {
ref,
walker: _react.useMemo(()=>({
active () {
if (!htmlRef.current) {
return null;
}
const activeEl = htmlRef.current.querySelector(`[${_constants.CAROUSEL_ACTIVE_ITEM}="true"]`);
if ((0, _reactutilities.isHTMLElement)(activeEl)) {
return {
el: activeEl,
value: activeEl.getAttribute(_constants.CAROUSEL_ITEM)
};
}
return null;
},
find (value) {
var _treeWalkerRef_current;
if (!((_treeWalkerRef_current = treeWalkerRef.current) === null || _treeWalkerRef_current === void 0 ? void 0 : _treeWalkerRef_current.currentNode) || !htmlRef.current) {
return null;
}
treeWalkerRef.current.currentNode = htmlRef.current;
let nextNode = null;
while(nextNode = treeWalkerRef.current.nextNode()){
if (!(0, _reactutilities.isHTMLElement)(nextNode)) {
continue;
}
if (nextNode.getAttribute(_constants.CAROUSEL_ITEM) === value) {
return {
el: nextNode,
value: nextNode.getAttribute(_constants.CAROUSEL_ITEM)
};
}
}
return null;
},
nextPage (value) {
var _treeWalkerRef_current;
const res = this.find(value);
if (!res || !((_treeWalkerRef_current = treeWalkerRef.current) === null || _treeWalkerRef_current === void 0 ? void 0 : _treeWalkerRef_current.currentNode)) {
return null;
}
treeWalkerRef.current.currentNode = res.el;
const next = treeWalkerRef.current.nextNode();
if ((0, _reactutilities.isHTMLElement)(next)) {
return {
el: next,
value: next.getAttribute(_constants.CAROUSEL_ITEM)
};
}
return null;
},
prevPage (value) {
var _treeWalkerRef_current;
const res = this.find(value);
if (!res || !((_treeWalkerRef_current = treeWalkerRef.current) === null || _treeWalkerRef_current === void 0 ? void 0 : _treeWalkerRef_current.currentNode)) {
return null;
}
treeWalkerRef.current.currentNode = res.el;
const next = treeWalkerRef.current.previousNode();
if ((0, _reactutilities.isHTMLElement)(next)) {
return {
el: next,
value: next.getAttribute(_constants.CAROUSEL_ITEM)
};
}
return null;
}
}), [])
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopoverCarousel", {
enumerable: true,
get: function() {
return TeachingPopoverCarousel;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopoverCarousel = require("./useTeachingPopoverCarousel");
const _renderTeachingPopoverCarousel = require("./renderTeachingPopoverCarousel");
const _useTeachingPopoverCarouselStylesstyles = require("./useTeachingPopoverCarouselStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useTeachingPopoverCarouselContextValues = require("./useTeachingPopoverCarouselContextValues");
const TeachingPopoverCarousel = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverCarousel.useTeachingPopoverCarousel_unstable)(props, ref);
(0, _useTeachingPopoverCarouselStylesstyles.useTeachingPopoverCarouselStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselStyles_unstable')(state);
const contextValues = (0, _useTeachingPopoverCarouselContextValues.useTeachingPopoverCarouselContextValues_unstable)(state);
return (0, _renderTeachingPopoverCarousel.renderTeachingPopoverCarousel_unstable)(state, contextValues);
});
TeachingPopoverCarousel.displayName = 'TeachingPopoverCarousel';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useTeachingPopoverCarousel_unstable } from './useTeachingPopoverCarousel';\nimport { renderTeachingPopoverCarousel_unstable } from './renderTeachingPopoverCarousel';\nimport { useTeachingPopoverCarouselStyles_unstable } from './useTeachingPopoverCarouselStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { TeachingPopoverCarouselProps } from './TeachingPopoverCarousel.types';\nimport { useTeachingPopoverCarouselContextValues_unstable } from './useTeachingPopoverCarouselContextValues';\n\n/**\n * Define a styled TeachingPopoverCarousel, using the `useTeachingPopoverCarousel_unstable` and `useTeachingPopoverCarouselStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarousel injects context providers that are required for TeachingPopoverCarouselCard display and navigation functionality\n */\nexport const TeachingPopoverCarousel: ForwardRefComponent<TeachingPopoverCarouselProps> = React.forwardRef(\n (props, ref) => {\n const state = useTeachingPopoverCarousel_unstable(props, ref);\n\n useTeachingPopoverCarouselStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverCarouselStyles_unstable')(state);\n\n const contextValues = useTeachingPopoverCarouselContextValues_unstable(state);\n\n return renderTeachingPopoverCarousel_unstable(state, contextValues);\n },\n);\n\nTeachingPopoverCarousel.displayName = 'TeachingPopoverCarousel';\n"],"names":["React","useTeachingPopoverCarousel_unstable","renderTeachingPopoverCarousel_unstable","useTeachingPopoverCarouselStyles_unstable","useCustomStyleHook_unstable","useTeachingPopoverCarouselContextValues_unstable","TeachingPopoverCarousel","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4CAGqB,+BAA+B;+CAC5B,kCAAkC;wDAC/B,4CAA4C;qCAC1D,kCAAkC;yDAEb,4CAA4C;AAQtG,MAAMM,0BAAAA,WAAAA,GAA6EN,OAAMO,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,YAAQT,+DAAAA,EAAoCO,OAAOC;QAEzDN,iFAAAA,EAA0CO;QAE1CN,gDAAAA,EAA4B,6CAA6CM;IAEzE,MAAMC,oBAAgBN,yFAAAA,EAAiDK;IAEvE,WAAOR,qEAAAA,EAAuCQ,OAAOC;AACvD,GACA;AAEFL,wBAAwBM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* Context shared between TeachingPopoverCarousel and its children components
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { type PopoverContextValue } from '@fluentui/react-popover';\n\nimport { type CarouselContextValue } from './Carousel/CarouselContext';\nimport type { UseCarouselOptions } from './Carousel/Carousel.types';\n\nexport type TeachingPopoverCarouselSlots = {\n /**\n * The element wrapping carousel pages and navigation.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * TeachingPopoverCarousel Props\n */\nexport type TeachingPopoverCarouselProps = ComponentProps<TeachingPopoverCarouselSlots> & UseCarouselOptions;\n\n/**\n * TeachingPopoverCarousel State and Context Hooks\n */\nexport type TeachingPopoverCarouselState = ComponentState<Required<TeachingPopoverCarouselSlots>> &\n Partial<Pick<PopoverContextValue, 'appearance'>> &\n CarouselContextValue;\n\n/**\n * Context shared between TeachingPopoverCarousel and its children components\n */\nexport type TeachingPopoverCarouselContextValues = {\n carousel: CarouselContextValue;\n};\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WAEE"}

View File

@@ -0,0 +1,35 @@
"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, {
TeachingPopoverCarousel: function() {
return _TeachingPopoverCarousel.TeachingPopoverCarousel;
},
renderTeachingPopoverCarousel_unstable: function() {
return _renderTeachingPopoverCarousel.renderTeachingPopoverCarousel_unstable;
},
teachingPopoverCarouselClassNames: function() {
return _useTeachingPopoverCarouselStylesstyles.teachingPopoverCarouselClassNames;
},
useTeachingPopoverCarouselContextValues_unstable: function() {
return _useTeachingPopoverCarouselContextValues.useTeachingPopoverCarouselContextValues_unstable;
},
useTeachingPopoverCarouselStyles_unstable: function() {
return _useTeachingPopoverCarouselStylesstyles.useTeachingPopoverCarouselStyles_unstable;
},
useTeachingPopoverCarousel_unstable: function() {
return _useTeachingPopoverCarousel.useTeachingPopoverCarousel_unstable;
}
});
const _TeachingPopoverCarousel = require("./TeachingPopoverCarousel");
const _renderTeachingPopoverCarousel = require("./renderTeachingPopoverCarousel");
const _useTeachingPopoverCarousel = require("./useTeachingPopoverCarousel");
const _useTeachingPopoverCarouselStylesstyles = require("./useTeachingPopoverCarouselStyles.styles");
const _useTeachingPopoverCarouselContextValues = require("./useTeachingPopoverCarouselContextValues");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/index.ts"],"sourcesContent":["export { TeachingPopoverCarousel } from './TeachingPopoverCarousel';\nexport type {\n TeachingPopoverCarouselContextValues,\n TeachingPopoverCarouselProps,\n TeachingPopoverCarouselSlots,\n TeachingPopoverCarouselState,\n} from './TeachingPopoverCarousel.types';\nexport { renderTeachingPopoverCarousel_unstable } from './renderTeachingPopoverCarousel';\nexport { useTeachingPopoverCarousel_unstable } from './useTeachingPopoverCarousel';\nexport {\n teachingPopoverCarouselClassNames,\n useTeachingPopoverCarouselStyles_unstable,\n} from './useTeachingPopoverCarouselStyles.styles';\nexport { useTeachingPopoverCarouselContextValues_unstable } from './useTeachingPopoverCarouselContextValues';\n"],"names":["TeachingPopoverCarousel","renderTeachingPopoverCarousel_unstable","useTeachingPopoverCarousel_unstable","teachingPopoverCarouselClassNames","useTeachingPopoverCarouselStyles_unstable","useTeachingPopoverCarouselContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,gDAAuB;;;eAOvBC,qEAAsC;;;eAG7CE,yEAAiC;;;eAG1BE,yFAAgD;;;eAFvDD,iFAAyC;;;eAHlCF,+DAAmC;;;yCARJ,4BAA4B;+CAOb,kCAAkC;4CACrC,+BAA+B;wDAI5E,4CAA4C;yDACc,4CAA4C"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTeachingPopoverCarousel_unstable", {
enumerable: true,
get: function() {
return renderTeachingPopoverCarousel_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CarouselContext = require("./Carousel/CarouselContext");
const renderTeachingPopoverCarousel_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/TeachingPopoverCarousel/renderTeachingPopoverCarousel.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 {\n TeachingPopoverCarouselState,\n TeachingPopoverCarouselSlots,\n TeachingPopoverCarouselContextValues,\n} from './TeachingPopoverCarousel.types';\nimport { CarouselProvider } from './Carousel/CarouselContext';\n\n/**\n * Render the final JSX of TeachingPopoverCarousel\n */\nexport const renderTeachingPopoverCarousel_unstable = (\n state: TeachingPopoverCarouselState,\n contextValues: TeachingPopoverCarouselContextValues,\n): JSXElement => {\n assertSlots<TeachingPopoverCarouselSlots>(state);\n\n return (\n <CarouselProvider value={contextValues.carousel}>\n <state.root />\n </CarouselProvider>\n );\n};\n"],"names":["assertSlots","CarouselProvider","renderTeachingPopoverCarousel_unstable","state","contextValues","value","carousel","root"],"mappings":";;;;+BAeaE;;;;;;4BAdb,gDAAiD;gCAErB,4BAA4B;iCAOvB,6BAA6B;AAKvD,+CAA+C,CACpDC,OACAC;QAEAJ,2BAAAA,EAA0CG;IAE1C,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,45 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverCarousel_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverCarousel_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactpopover = require("@fluentui/react-popover");
const _Carousel = require("./Carousel/Carousel");
const useTeachingPopoverCarousel_unstable = (props, ref)=>{
const toggleOpen = (0, _reactpopover.usePopoverContext_unstable)((c)=>c.toggleOpen);
const handleFinish = (0, _reactutilities.useEventCallback)((event, data)=>{
var _props_onFinish;
(_props_onFinish = props.onFinish) === null || _props_onFinish === void 0 ? void 0 : _props_onFinish.call(props, event, data);
toggleOpen(event);
});
const { carousel, carouselRef } = (0, _Carousel.useCarousel_unstable)({
announcement: props.announcement,
defaultValue: props.defaultValue,
value: props.value,
onValueChange: props.onValueChange,
onFinish: handleFinish
});
const appearance = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.appearance);
return {
appearance,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: (0, _reactutilities.useMergedRefs)(ref, carouselRef),
...props
}), {
elementType: 'div'
}),
...carousel
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarousel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselProps, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\nimport { useCarousel_unstable } from './Carousel/Carousel';\n\nexport const useTeachingPopoverCarousel_unstable = (\n props: TeachingPopoverCarouselProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselState => {\n const toggleOpen = usePopoverContext_unstable(c => c.toggleOpen);\n const handleFinish: TeachingPopoverCarouselProps['onFinish'] = useEventCallback((event, data) => {\n props.onFinish?.(event, data);\n toggleOpen(event as React.MouseEvent<HTMLElement>);\n });\n\n const { carousel, carouselRef } = useCarousel_unstable({\n announcement: props.announcement,\n defaultValue: props.defaultValue,\n value: props.value,\n onValueChange: props.onValueChange,\n onFinish: handleFinish,\n });\n\n const appearance = usePopoverContext_unstable(context => context.appearance);\n return {\n appearance,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, carouselRef),\n ...props,\n }),\n { elementType: 'div' },\n ),\n ...carousel,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useMergedRefs","usePopoverContext_unstable","useCarousel_unstable","useTeachingPopoverCarousel_unstable","props","ref","toggleOpen","c","handleFinish","event","data","onFinish","carousel","carouselRef","announcement","defaultValue","value","onValueChange","appearance","context","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAQaO;;;;;;;iEANU,QAAQ;gCACiD,4BAA4B;8BAEjE,0BAA0B;0BAChC,sBAAsB;AAEpD,4CAA4C,CACjDC,OACAC;IAEA,MAAMC,iBAAaL,wCAAAA,EAA2BM,CAAAA,IAAKA,EAAED,UAAU;IAC/D,MAAME,eAAyDT,oCAAAA,EAAiB,CAACU,OAAOC;YACtFN;SAAAA,kBAAAA,MAAMO,QAAAA,AAAQ,MAAA,QAAdP,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAAA,IAAAA,CAAAA,OAAiBK,OAAOC;QACxBJ,WAAWG;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,OAAGX,8BAAAA,EAAqB;QACrDY,cAAcV,MAAMU,YAAY;QAChCC,cAAcX,MAAMW,YAAY;QAChCC,OAAOZ,MAAMY,KAAK;QAClBC,eAAeb,MAAMa,aAAa;QAClCN,UAAUH;IACZ;IAEA,MAAMU,iBAAajB,wCAAAA,EAA2BkB,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,oBAAAA,CAAKwB,MAAM,KACfzB,wCAAAA,EAAyB,OAAO;YAC9BQ,SAAKL,6BAAAA,EAAcK,KAAKQ;YACxB,GAAGT,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvB,GAAGX,QAAQ;IACb;AACF,EAAE"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverCarouselContextValues_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverCarouselContextValues_unstable;
}
});
function useTeachingPopoverCarouselContextValues_unstable(state) {
const { store, value, selectPageByValue, selectPageByDirection } = state;
const carousel = {
store,
value,
selectPageByDirection,
selectPageByValue
};
return {
carousel
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarouselContextValues.ts"],"sourcesContent":["import type {\n TeachingPopoverCarouselContextValues,\n TeachingPopoverCarouselState,\n} from './TeachingPopoverCarousel.types';\n\nexport function useTeachingPopoverCarouselContextValues_unstable(\n state: TeachingPopoverCarouselState,\n): TeachingPopoverCarouselContextValues {\n const { store, value, selectPageByValue, selectPageByDirection } = state;\n\n const carousel = {\n store,\n value,\n selectPageByDirection,\n selectPageByValue,\n };\n\n return { carousel };\n}\n"],"names":["useTeachingPopoverCarouselContextValues_unstable","state","store","value","selectPageByValue","selectPageByDirection","carousel"],"mappings":";;;;;;;;;;AAKO,SAASA,iDACdC,KAAmC;IAEnC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,qBAAqB,EAAE,GAAGJ;IAEnE,MAAMK,WAAW;QACfJ;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAS;AACpB"}

View File

@@ -0,0 +1,33 @@
'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, {
teachingPopoverCarouselClassNames: function() {
return teachingPopoverCarouselClassNames;
},
useTeachingPopoverCarouselStyles_unstable: function() {
return useTeachingPopoverCarouselStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselClassNames = {
root: 'fui-TeachingPopoverCarousel'
};
// Todo: Page change animation & styles
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {}
}, {});
const useTeachingPopoverCarouselStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTeachingPopoverCarouselStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselClassNames = {\n root: 'fui-TeachingPopoverCarousel'\n};\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n root: {}\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","teachingPopoverCarouselClassNames","root","useStyles","useTeachingPopoverCarouselStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;qCAEkC;;;6CAOiD;;;;uBARtD,gBAAgB;AAClD,MAAME,oCAAoC;IAC7CC,IAAI,EAAE;AACV,CAAC;AACD,uCAAA;AACA,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA,CAAA;AAAA,GAAA,CAAA,CAEjB,CAAC;AAC8C,MAAME,6CAA6CC,KAAK,IAAG;IACvG,aAAa;IACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;IAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,iCAAiC,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC9G,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,33 @@
'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, {
teachingPopoverCarouselClassNames: function() {
return teachingPopoverCarouselClassNames;
},
useTeachingPopoverCarouselStyles_unstable: function() {
return useTeachingPopoverCarouselStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselClassNames = {
root: 'fui-TeachingPopoverCarousel'
};
// Todo: Page change animation & styles
const useStyles = (0, _react.makeStyles)({
root: {}
});
const useTeachingPopoverCarouselStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarousel/useTeachingPopoverCarouselStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TeachingPopoverCarouselSlots, TeachingPopoverCarouselState } from './TeachingPopoverCarousel.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselClassNames: SlotClassNames<TeachingPopoverCarouselSlots> = {\n root: 'fui-TeachingPopoverCarousel',\n};\n\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n root: {},\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselStyles_unstable = (\n state: TeachingPopoverCarouselState,\n): TeachingPopoverCarouselState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselClassNames","root","useStyles","useTeachingPopoverCarouselStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;qCAMaE;;;6CAUAG;;;;uBAd4B,iBAAiB;AAInD,MAAMH,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF,uCAAuC;AACvC,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM,CAAC;AACT;AAGO,MAAME,4CAA4C,CACvDC;IAEA;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,OAAGP,mBAAAA,EAAaC,kCAAkCC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAE7G,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopoverCarouselCard", {
enumerable: true,
get: function() {
return TeachingPopoverCarouselCard;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopoverCarouselCard = require("./useTeachingPopoverCarouselCard");
const _renderTeachingPopoverCarouselCard = require("./renderTeachingPopoverCarouselCard");
const _useTeachingPopoverCarouselCardStylesstyles = require("./useTeachingPopoverCarouselCardStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TeachingPopoverCarouselCard = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverCarouselCard.useTeachingPopoverCarouselCard_unstable)(props, ref);
(0, _useTeachingPopoverCarouselCardStylesstyles.useTeachingPopoverCarouselCardStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselCardStyles_unstable')(state);
return (0, _renderTeachingPopoverCarouselCard.renderTeachingPopoverCarouselCard_unstable)(state);
});
TeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nimport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nimport type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.\n */\nexport const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps> = React.forwardRef(\n (props, ref) => {\n const state = useTeachingPopoverCarouselCard_unstable(props, ref);\n\n useTeachingPopoverCarouselCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);\n\n return renderTeachingPopoverCarouselCard_unstable(state);\n },\n);\n\nTeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';\n"],"names":["React","useTeachingPopoverCarouselCard_unstable","renderTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCardStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gDACyB,mCAAmC;mDAChC,sCAAsC;4DAGnC,gDAAgD;qCAClE,kCAAkC;AAQvE,MAAMK,8BAAAA,WAAAA,GAAqFL,OAAMM,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,YAAQR,uEAAAA,EAAwCM,OAAOC;QAE7DL,yFAAAA,EAA8CM;QAE9CL,gDAAAA,EAA4B,iDAAiDK;IAE7E,WAAOP,6EAAAA,EAA2CO;AACpD,GACA;AAEFJ,4BAA4BK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselItemProps } from '../TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types';\n\nexport type TeachingPopoverCarouselCardSlots = {\n /**\n * The element wrapping the buttons.\n */\n root: NonNullable<Slot<CarouselItemProps>>;\n};\n\nexport type TeachingPopoverCarouselCardProps = ComponentProps<TeachingPopoverCarouselCardSlots> & {\n /* Required: Passed into CarouselItem to identify pages. */\n value: string;\n};\n\nexport type TeachingPopoverCarouselCardState = ComponentState<TeachingPopoverCarouselCardSlots> &\n Required<Pick<TeachingPopoverCarouselCardProps, 'value'>>;\n"],"names":[],"mappings":""}

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, {
TeachingPopoverCarouselCard: function() {
return _TeachingPopoverCarouselCard.TeachingPopoverCarouselCard;
},
renderTeachingPopoverCarouselCard_unstable: function() {
return _renderTeachingPopoverCarouselCard.renderTeachingPopoverCarouselCard_unstable;
},
teachingPopoverCarouselCardClassNames: function() {
return _useTeachingPopoverCarouselCardStylesstyles.teachingPopoverCarouselCardClassNames;
},
useTeachingPopoverCarouselCardStyles_unstable: function() {
return _useTeachingPopoverCarouselCardStylesstyles.useTeachingPopoverCarouselCardStyles_unstable;
},
useTeachingPopoverCarouselCard_unstable: function() {
return _useTeachingPopoverCarouselCard.useTeachingPopoverCarouselCard_unstable;
}
});
const _TeachingPopoverCarouselCard = require("./TeachingPopoverCarouselCard");
const _renderTeachingPopoverCarouselCard = require("./renderTeachingPopoverCarouselCard");
const _useTeachingPopoverCarouselCard = require("./useTeachingPopoverCarouselCard");
const _useTeachingPopoverCarouselCardStylesstyles = require("./useTeachingPopoverCarouselCardStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselCard } from './TeachingPopoverCarouselCard';\nexport type {\n TeachingPopoverCarouselCardProps,\n TeachingPopoverCarouselCardSlots,\n TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nexport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nexport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nexport {\n teachingPopoverCarouselCardClassNames,\n useTeachingPopoverCarouselCardStyles_unstable,\n} from './useTeachingPopoverCarouselCardStyles.styles';\n"],"names":["TeachingPopoverCarouselCard","renderTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCard_unstable","teachingPopoverCarouselCardClassNames","useTeachingPopoverCarouselCardStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wDAA2B;;;eAM3BC,6EAA0C;;;eAGjDE,iFAAqC;;;eACrCC,yFAA6C;;;eAHtCF,uEAAuC;;;6CAPJ,gCAAgC;mDAMjB,sCAAsC;gDACzC,mCAAmC;4DAIpF,gDAAgD"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselCardState } from './TeachingPopoverCarouselCard.types';\nimport { TeachingPopoverCarouselCardSlots } from './TeachingPopoverCarouselCard.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselCard\n */\nexport const renderTeachingPopoverCarouselCard_unstable = (state: TeachingPopoverCarouselCardState): JSXElement => {\n assertSlots<TeachingPopoverCarouselCardSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselCard_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAGrB,4BAA4B;AAMjD,MAAMC,6CAA6C,CAACC;QACzDF,2BAAAA,EAA8CE;IAE9C,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverCarouselCard_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverCarouselCard_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 _Carouseltem = require("../TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem");
const useTeachingPopoverCarouselCard_unstable = (props, ref)=>{
const { value } = props;
return {
value,
components: {
root: _Carouseltem.CarouselItem
},
root: _reactutilities.slot.always({
...(0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}),
value
}, {
elementType: _Carouseltem.CarouselItem
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n TeachingPopoverCarouselCardProps,\n TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nimport { CarouselItem } from '../TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverCarouselCard properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselCard\n */\nexport const useTeachingPopoverCarouselCard_unstable = (\n props: TeachingPopoverCarouselCardProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselCardState => {\n const { value } = props;\n\n return {\n value,\n components: {\n root: CarouselItem,\n },\n root: slot.always(\n {\n ...getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n value,\n },\n { elementType: CarouselItem },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","CarouselItem","useTeachingPopoverCarouselCard_unstable","props","ref","value","components","root","always","elementType"],"mappings":";;;;+BAcaI;;;;;;;gCAdkC,4BAA4B;iEACpD,QAAQ;6BAMF,+DAA+D;AAOrF,gDAAgD,CACrDC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,OAAO;QACLE;QACAC,YAAY;YACVC,MAAMN,yBAAAA;QACR;QACAM,MAAMR,oBAAAA,CAAKS,MAAM,CACf;YACE,OAAGV,wCAAAA,EAAyB,OAAO;gBACjCM;gBACA,GAAGD,KAAK;YACV,EAAE;YACFE;QACF,GACA;YAAEI,aAAaR,yBAAAA;QAAa;IAEhC;AACF,EAAE"}

View File

@@ -0,0 +1,32 @@
'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, {
teachingPopoverCarouselCardClassNames: function() {
return teachingPopoverCarouselCardClassNames;
},
useTeachingPopoverCarouselCardStyles_unstable: function() {
return useTeachingPopoverCarouselCardStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselCardClassNames = {
root: 'fui-TeachingPopoverCarouselCard'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {}
}, {});
const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTeachingPopoverCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselCardClassNames = {\n root: 'fui-TeachingPopoverCarouselCard'\n};\nconst useStyles = makeStyles({\n root: {}\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","teachingPopoverCarouselCardClassNames","root","useStyles","useTeachingPopoverCarouselCardStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;yCAEsC;;;iDAMiD;;;;uBAP1D,gBAAgB;AAClD,MAAME,wCAAwC;IACjDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA,CAAA;AAAA,GAAA,CAAA,CAEjB,CAAC;AAC8C,MAAME,iDAAiDC,KAAK,IAAG;IAC3G,aAAa;IACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;IAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,qCAAqC,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAClH,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,32 @@
'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, {
teachingPopoverCarouselCardClassNames: function() {
return teachingPopoverCarouselCardClassNames;
},
useTeachingPopoverCarouselCardStyles_unstable: function() {
return useTeachingPopoverCarouselCardStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselCardClassNames = {
root: 'fui-TeachingPopoverCarouselCard'
};
const useStyles = (0, _react.makeStyles)({
root: {}
});
const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type {\n TeachingPopoverCarouselCardSlots,\n TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselCardClassNames: SlotClassNames<TeachingPopoverCarouselCardSlots> = {\n root: 'fui-TeachingPopoverCarouselCard',\n};\n\nconst useStyles = makeStyles({\n root: {},\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselCardStyles_unstable = (\n state: TeachingPopoverCarouselCardState,\n): TeachingPopoverCarouselCardState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselCardClassNames","root","useStyles","useTeachingPopoverCarouselCardStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;yCASaE;;;iDASAG;;;;uBAhB4B,iBAAiB;AAOnD,MAAMH,wCAA0F;IACrGC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM,CAAC;AACT;AAGO,MAAME,gDAAgD,CAC3DC;IAEA;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,OAAGP,mBAAAA,EAAaC,sCAAsCC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAEjH,OAAOF;AACT,EAAE"}

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

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopoverCarouselFooterButton", {
enumerable: true,
get: function() {
return TeachingPopoverCarouselFooterButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopoverCarouselFooterButton = require("./useTeachingPopoverCarouselFooterButton");
const _renderTeachingPopoverCarouselFooterButton = require("./renderTeachingPopoverCarouselFooterButton");
const _useTeachingPopoverCarouselFooterButtonStylesstyles = require("./useTeachingPopoverCarouselFooterButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TeachingPopoverCarouselFooterButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverCarouselFooterButton.useTeachingPopoverCarouselFooterButton_unstable)(props, ref);
(0, _useTeachingPopoverCarouselFooterButtonStylesstyles.useTeachingPopoverCarouselFooterButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);
return (0, _renderTeachingPopoverCarouselFooterButton.renderTeachingPopoverCarouselFooterButton_unstable)(state);
});
TeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nimport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nimport { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';\nimport type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselFooterButton component\n *\n * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality\n * to match the context provided by TeachingPopover & TeachingPopoverCarousel\n */\nexport const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps> =\n React.forwardRef((props, ref) => {\n const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);\n\n useTeachingPopoverCarouselFooterButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);\n\n return renderTeachingPopoverCarouselFooterButton_unstable(state);\n });\n\nTeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';\n"],"names":["React","useTeachingPopoverCarouselFooterButton_unstable","renderTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButtonStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselFooterButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wDAEiC,2CAA2C;2DACxC,8CAA8C;oEAC3C,wDAAwD;qCAElF,kCAAkC;AAQvE,MAAMK,sCAAAA,WAAAA,GACXL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,YAAQR,uFAAAA,EAAgDM,OAAOC;QAErEL,yGAAAA,EAAsDM;QAEtDL,gDAAAA,EAA4B,yDAAyDK;IAErF,WAAOP,6FAAAA,EAAmDO;AAC5D,GAAG;AAELJ,oCAAoCK,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/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\nimport { ButtonProps, ButtonState } from '@fluentui/react-button';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type TeachingPopoverCarouselFooterButtonSlots = {\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * TeachingPopoverCarouselFooterButton Props\n */\nexport type TeachingPopoverCarouselFooterButtonProps = ComponentProps<TeachingPopoverCarouselFooterButtonSlots> &\n ButtonProps & {\n /**\n * Defines whether the button should be next or previous type - used for both styling and functionality.\n */\n navType: 'next' | 'prev';\n\n /**\n * The ReactNode provided to the button when it is on it's first (navType 'prev') or last (navType 'next') step\n */\n altText: React.ReactNode;\n };\n\n/**\n * State used in rendering TeachingPopoverCarouselFooterButton\n */\nexport type TeachingPopoverCarouselFooterButtonState = ButtonState &\n ComponentState<TeachingPopoverCarouselFooterButtonSlots> &\n Pick<TeachingPopoverCarouselFooterButtonProps, 'navType' | 'altText'> & {\n /* Rename popover appearance to prevent conflict with button appearance */\n popoverAppearance: PopoverContextValue['appearance'];\n };\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, {
TeachingPopoverCarouselFooterButton: function() {
return _TeachingPopoverCarouselFooterButton.TeachingPopoverCarouselFooterButton;
},
renderTeachingPopoverCarouselFooterButton_unstable: function() {
return _renderTeachingPopoverCarouselFooterButton.renderTeachingPopoverCarouselFooterButton_unstable;
},
teachingPopoverCarouselFooterButtonClassNames: function() {
return _useTeachingPopoverCarouselFooterButtonStylesstyles.teachingPopoverCarouselFooterButtonClassNames;
},
useTeachingPopoverCarouselFooterButtonStyles_unstable: function() {
return _useTeachingPopoverCarouselFooterButtonStylesstyles.useTeachingPopoverCarouselFooterButtonStyles_unstable;
},
useTeachingPopoverCarouselFooterButton_unstable: function() {
return _useTeachingPopoverCarouselFooterButton.useTeachingPopoverCarouselFooterButton_unstable;
}
});
const _TeachingPopoverCarouselFooterButton = require("./TeachingPopoverCarouselFooterButton");
const _renderTeachingPopoverCarouselFooterButton = require("./renderTeachingPopoverCarouselFooterButton");
const _useTeachingPopoverCarouselFooterButton = require("./useTeachingPopoverCarouselFooterButton");
const _useTeachingPopoverCarouselFooterButtonStylesstyles = require("./useTeachingPopoverCarouselFooterButtonStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselFooterButton } from './TeachingPopoverCarouselFooterButton';\nexport type {\n TeachingPopoverCarouselFooterButtonProps,\n TeachingPopoverCarouselFooterButtonSlots,\n TeachingPopoverCarouselFooterButtonState,\n} from './TeachingPopoverCarouselFooterButton.types';\nexport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nexport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nexport {\n teachingPopoverCarouselFooterButtonClassNames,\n useTeachingPopoverCarouselFooterButtonStyles_unstable,\n} from './useTeachingPopoverCarouselFooterButtonStyles.styles';\n"],"names":["TeachingPopoverCarouselFooterButton","renderTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButton_unstable","teachingPopoverCarouselFooterButtonClassNames","useTeachingPopoverCarouselFooterButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wEAAmC;;;eAMnCC,6FAAkD;;;eAGzDE,iGAA6C;;;eAC7CC,yGAAqD;;;eAH9CF,uFAA+C;;;qDAPJ,wCAAwC;2DAMzB,8CAA8C;wDACjD,2CAA2C;oEAIpG,wDAAwD"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.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 {\n TeachingPopoverCarouselFooterButtonState,\n TeachingPopoverCarouselFooterButtonSlots,\n} from './TeachingPopoverCarouselFooterButton.types';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselFooterButton\n */\nexport const renderTeachingPopoverCarouselFooterButton_unstable = (\n state: TeachingPopoverCarouselFooterButtonState,\n): JSXElement => {\n assertSlots<TeachingPopoverCarouselFooterButtonSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselFooterButton_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAUjD,MAAMC,qDAAqD,CAChEC;QAEAF,2BAAAA,EAAsDE;IAEtD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,74 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverCarouselFooterButton_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverCarouselFooterButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactpopover = require("@fluentui/react-popover");
const _CarouselContext = require("../TeachingPopoverCarousel/Carousel/CarouselContext");
const _reactbutton = require("@fluentui/react-button");
const _useCarouselValues = require("../TeachingPopoverCarousel/Carousel/useCarouselValues");
const useTeachingPopoverCarouselFooterButton_unstable = (props, ref)=>{
const { navType, altText } = props;
const popoverAppearance = (0, _reactpopover.usePopoverContext_unstable)((context)=>context.appearance);
const selectPageByDirection = (0, _CarouselContext.useCarouselContext_unstable)((c)=>c.selectPageByDirection);
const values = (0, _useCarouselValues.useCarouselValues_unstable)((snapshot)=>snapshot);
const activeValue = (0, _CarouselContext.useCarouselContext_unstable)((c)=>c.value);
const handleClick = (event)=>{
if (event.isDefaultPrevented()) {
return;
}
selectPageByDirection(event, navType);
};
const handleButtonClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(handleClick, props.onClick));
const isTrailing = _react.useMemo(()=>{
if (!activeValue) {
return false;
}
if (navType === 'prev') {
return values.indexOf(activeValue) === 0;
}
return values.indexOf(activeValue) === values.length - 1;
}, [
navType,
activeValue,
values
]);
let buttonAppearanceType;
if (navType === 'next') {
buttonAppearanceType = popoverAppearance === 'brand' ? undefined : 'primary';
} else {
buttonAppearanceType = popoverAppearance === 'brand' ? 'outline' : undefined;
}
/* Handle altText on trailing step */ let buttonChild = props.children;
if (isTrailing) {
buttonChild = altText;
}
return {
...(0, _reactbutton.useButton_unstable)({
appearance: buttonAppearanceType,
...props
}, ref),
navType,
popoverAppearance,
altText,
// Override useButton root slot
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
appearance: buttonAppearanceType,
...props,
onClick: handleButtonClick,
children: buttonChild
}), {
elementType: 'button'
})
};
};

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