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 @@
export { TeachingPopover, renderTeachingPopover_unstable, useTeachingPopover_unstable } from './components/TeachingPopover/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopover.ts"],"sourcesContent":["export type { TeachingPopoverProps, TeachingPopoverState } from './components/TeachingPopover/index';\nexport {\n TeachingPopover,\n renderTeachingPopover_unstable,\n useTeachingPopover_unstable,\n} from './components/TeachingPopover/index';\n"],"names":["TeachingPopover","renderTeachingPopover_unstable","useTeachingPopover_unstable"],"mappings":"AACA,SACEA,eAAe,EACfC,8BAA8B,EAC9BC,2BAA2B,QACtB,qCAAqC"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverBody, renderTeachingPopoverBody_unstable, teachingPopoverBodyClassNames, useMediaStyles, useTeachingPopoverBodyStyles_unstable, useTeachingPopoverBody_unstable } from './components/TeachingPopoverBody/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverBody.ts"],"sourcesContent":["export type {\n TeachingPopoverBodyProps,\n TeachingPopoverBodySlots,\n TeachingPopoverBodyState,\n} from './components/TeachingPopoverBody/index';\nexport {\n TeachingPopoverBody,\n renderTeachingPopoverBody_unstable,\n teachingPopoverBodyClassNames,\n useMediaStyles,\n useTeachingPopoverBodyStyles_unstable,\n useTeachingPopoverBody_unstable,\n} from './components/TeachingPopoverBody/index';\n"],"names":["TeachingPopoverBody","renderTeachingPopoverBody_unstable","teachingPopoverBodyClassNames","useMediaStyles","useTeachingPopoverBodyStyles_unstable","useTeachingPopoverBody_unstable"],"mappings":"AAKA,SACEA,mBAAmB,EACnBC,kCAAkC,EAClCC,6BAA6B,EAC7BC,cAAc,EACdC,qCAAqC,EACrCC,+BAA+B,QAC1B,yCAAyC"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarousel, renderTeachingPopoverCarousel_unstable, teachingPopoverCarouselClassNames, useTeachingPopoverCarouselContextValues_unstable, useTeachingPopoverCarouselStyles_unstable, useTeachingPopoverCarousel_unstable } from './components/TeachingPopoverCarousel/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarousel.ts"],"sourcesContent":["export type {\n TeachingPopoverCarouselContextValues,\n TeachingPopoverCarouselProps,\n TeachingPopoverCarouselSlots,\n TeachingPopoverCarouselState,\n} from './components/TeachingPopoverCarousel/index';\nexport {\n TeachingPopoverCarousel,\n renderTeachingPopoverCarousel_unstable,\n teachingPopoverCarouselClassNames,\n useTeachingPopoverCarouselContextValues_unstable,\n useTeachingPopoverCarouselStyles_unstable,\n useTeachingPopoverCarousel_unstable,\n} from './components/TeachingPopoverCarousel/index';\n"],"names":["TeachingPopoverCarousel","renderTeachingPopoverCarousel_unstable","teachingPopoverCarouselClassNames","useTeachingPopoverCarouselContextValues_unstable","useTeachingPopoverCarouselStyles_unstable","useTeachingPopoverCarousel_unstable"],"mappings":"AAMA,SACEA,uBAAuB,EACvBC,sCAAsC,EACtCC,iCAAiC,EACjCC,gDAAgD,EAChDC,yCAAyC,EACzCC,mCAAmC,QAC9B,6CAA6C"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarouselCard, renderTeachingPopoverCarouselCard_unstable, teachingPopoverCarouselCardClassNames, useTeachingPopoverCarouselCardStyles_unstable, useTeachingPopoverCarouselCard_unstable } from './components/TeachingPopoverCarouselCard/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarouselCard.ts"],"sourcesContent":["export type {\n TeachingPopoverCarouselCardProps,\n TeachingPopoverCarouselCardSlots,\n TeachingPopoverCarouselCardState,\n} from './components/TeachingPopoverCarouselCard/index';\nexport {\n TeachingPopoverCarouselCard,\n renderTeachingPopoverCarouselCard_unstable,\n teachingPopoverCarouselCardClassNames,\n useTeachingPopoverCarouselCardStyles_unstable,\n useTeachingPopoverCarouselCard_unstable,\n} from './components/TeachingPopoverCarouselCard/index';\n"],"names":["TeachingPopoverCarouselCard","renderTeachingPopoverCarouselCard_unstable","teachingPopoverCarouselCardClassNames","useTeachingPopoverCarouselCardStyles_unstable","useTeachingPopoverCarouselCard_unstable"],"mappings":"AAKA,SACEA,2BAA2B,EAC3BC,0CAA0C,EAC1CC,qCAAqC,EACrCC,6CAA6C,EAC7CC,uCAAuC,QAClC,iDAAiD"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarouselFooter, renderTeachingPopoverCarouselFooter_unstable, teachingPopoverCarouselFooterClassNames, useTeachingPopoverCarouselFooterStyles_unstable, useTeachingPopoverCarouselFooter_unstable } from './components/TeachingPopoverCarouselFooter/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarouselFooter.ts"],"sourcesContent":["export type {\n TeachingPopoverCarouselFooterLayout,\n TeachingPopoverCarouselFooterProps,\n TeachingPopoverCarouselFooterSlots,\n TeachingPopoverCarouselFooterState,\n TeachingPopoverPageCountChildRenderFunction,\n} from './components/TeachingPopoverCarouselFooter/index';\nexport {\n TeachingPopoverCarouselFooter,\n renderTeachingPopoverCarouselFooter_unstable,\n teachingPopoverCarouselFooterClassNames,\n useTeachingPopoverCarouselFooterStyles_unstable,\n useTeachingPopoverCarouselFooter_unstable,\n} from './components/TeachingPopoverCarouselFooter/index';\n"],"names":["TeachingPopoverCarouselFooter","renderTeachingPopoverCarouselFooter_unstable","teachingPopoverCarouselFooterClassNames","useTeachingPopoverCarouselFooterStyles_unstable","useTeachingPopoverCarouselFooter_unstable"],"mappings":"AAOA,SACEA,6BAA6B,EAC7BC,4CAA4C,EAC5CC,uCAAuC,EACvCC,+CAA+C,EAC/CC,yCAAyC,QACpC,mDAAmD"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarouselFooterButton, renderTeachingPopoverCarouselFooterButton_unstable, teachingPopoverCarouselFooterButtonClassNames, useTeachingPopoverCarouselFooterButtonStyles_unstable, useTeachingPopoverCarouselFooterButton_unstable } from './components/TeachingPopoverCarouselFooterButton/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarouselFooterButton.ts"],"sourcesContent":["export type {\n TeachingPopoverCarouselFooterButtonProps,\n TeachingPopoverCarouselFooterButtonSlots,\n TeachingPopoverCarouselFooterButtonState,\n} from './components/TeachingPopoverCarouselFooterButton/index';\nexport {\n TeachingPopoverCarouselFooterButton,\n renderTeachingPopoverCarouselFooterButton_unstable,\n teachingPopoverCarouselFooterButtonClassNames,\n useTeachingPopoverCarouselFooterButtonStyles_unstable,\n useTeachingPopoverCarouselFooterButton_unstable,\n} from './components/TeachingPopoverCarouselFooterButton/index';\n"],"names":["TeachingPopoverCarouselFooterButton","renderTeachingPopoverCarouselFooterButton_unstable","teachingPopoverCarouselFooterButtonClassNames","useTeachingPopoverCarouselFooterButtonStyles_unstable","useTeachingPopoverCarouselFooterButton_unstable"],"mappings":"AAKA,SACEA,mCAAmC,EACnCC,kDAAkD,EAClDC,6CAA6C,EAC7CC,qDAAqD,EACrDC,+CAA+C,QAC1C,yDAAyD"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarouselNav, renderTeachingPopoverCarouselNav_unstable, teachingPopoverCarouselNavClassNames, useTeachingPopoverCarouselNavStyles_unstable, useTeachingPopoverCarouselNav_unstable } from './components/TeachingPopoverCarouselNav/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarouselNav.ts"],"sourcesContent":["export type {\n NavButtonRenderFunction,\n TeachingPopoverCarouselNavProps,\n TeachingPopoverCarouselNavSlots,\n TeachingPopoverCarouselNavState,\n} from './components/TeachingPopoverCarouselNav/index';\nexport {\n TeachingPopoverCarouselNav,\n renderTeachingPopoverCarouselNav_unstable,\n teachingPopoverCarouselNavClassNames,\n useTeachingPopoverCarouselNavStyles_unstable,\n useTeachingPopoverCarouselNav_unstable,\n} from './components/TeachingPopoverCarouselNav/index';\n"],"names":["TeachingPopoverCarouselNav","renderTeachingPopoverCarouselNav_unstable","teachingPopoverCarouselNavClassNames","useTeachingPopoverCarouselNavStyles_unstable","useTeachingPopoverCarouselNav_unstable"],"mappings":"AAMA,SACEA,0BAA0B,EAC1BC,yCAAyC,EACzCC,oCAAoC,EACpCC,4CAA4C,EAC5CC,sCAAsC,QACjC,gDAAgD"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarouselNavButton, renderTeachingPopoverCarouselNavButton_unstable, teachingPopoverCarouselNavButtonClassNames, useTeachingPopoverCarouselNavButtonStyles_unstable, useTeachingPopoverCarouselNavButton_unstable } from './components/TeachingPopoverCarouselNavButton/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarouselNavButton.ts"],"sourcesContent":["export type {\n TeachingPopoverCarouselNavButtonProps,\n TeachingPopoverCarouselNavButtonSlots,\n TeachingPopoverCarouselNavButtonState,\n} from './components/TeachingPopoverCarouselNavButton/index';\nexport {\n TeachingPopoverCarouselNavButton,\n renderTeachingPopoverCarouselNavButton_unstable,\n teachingPopoverCarouselNavButtonClassNames,\n useTeachingPopoverCarouselNavButtonStyles_unstable,\n useTeachingPopoverCarouselNavButton_unstable,\n} from './components/TeachingPopoverCarouselNavButton/index';\n"],"names":["TeachingPopoverCarouselNavButton","renderTeachingPopoverCarouselNavButton_unstable","teachingPopoverCarouselNavButtonClassNames","useTeachingPopoverCarouselNavButtonStyles_unstable","useTeachingPopoverCarouselNavButton_unstable"],"mappings":"AAKA,SACEA,gCAAgC,EAChCC,+CAA+C,EAC/CC,0CAA0C,EAC1CC,kDAAkD,EAClDC,4CAA4C,QACvC,sDAAsD"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverCarouselPageCount, renderTeachingPopoverCarouselPageCount_unstable, teachingPopoverCarouselPageCountClassNames, useTeachingPopoverCarouselPageCountStyles_unstable, useTeachingPopoverCarouselPageCount_unstable } from './components/TeachingPopoverCarouselPageCount/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverCarouselPageCount.ts"],"sourcesContent":["export type {\n TeachingPopoverCarouselPageCountProps,\n TeachingPopoverCarouselPageCountRenderFunction,\n TeachingPopoverCarouselPageCountSlots,\n TeachingPopoverCarouselPageCountState,\n} from './components/TeachingPopoverCarouselPageCount/index';\nexport {\n TeachingPopoverCarouselPageCount,\n renderTeachingPopoverCarouselPageCount_unstable,\n teachingPopoverCarouselPageCountClassNames,\n useTeachingPopoverCarouselPageCountStyles_unstable,\n useTeachingPopoverCarouselPageCount_unstable,\n} from './components/TeachingPopoverCarouselPageCount/index';\n"],"names":["TeachingPopoverCarouselPageCount","renderTeachingPopoverCarouselPageCount_unstable","teachingPopoverCarouselPageCountClassNames","useTeachingPopoverCarouselPageCountStyles_unstable","useTeachingPopoverCarouselPageCount_unstable"],"mappings":"AAMA,SACEA,gCAAgC,EAChCC,+CAA+C,EAC/CC,0CAA0C,EAC1CC,kDAAkD,EAClDC,4CAA4C,QACvC,sDAAsD"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverFooter, renderTeachingPopoverFooter_unstable, teachingPopoverFooterClassNames, useTeachingPopoverFooterStyles_unstable, useTeachingPopoverFooter_unstable } from './components/TeachingPopoverFooter';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverFooter.ts"],"sourcesContent":["export type {\n TeachingPopoverFooterProps,\n TeachingPopoverFooterSlots,\n TeachingPopoverFooterState,\n} from './components/TeachingPopoverFooter';\nexport {\n TeachingPopoverFooter,\n renderTeachingPopoverFooter_unstable,\n teachingPopoverFooterClassNames,\n useTeachingPopoverFooterStyles_unstable,\n useTeachingPopoverFooter_unstable,\n} from './components/TeachingPopoverFooter';\n"],"names":["TeachingPopoverFooter","renderTeachingPopoverFooter_unstable","teachingPopoverFooterClassNames","useTeachingPopoverFooterStyles_unstable","useTeachingPopoverFooter_unstable"],"mappings":"AAKA,SACEA,qBAAqB,EACrBC,oCAAoC,EACpCC,+BAA+B,EAC/BC,uCAAuC,EACvCC,iCAAiC,QAC5B,qCAAqC"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverHeader, renderTeachingPopoverHeader_unstable, teachingPopoverHeaderClassNames, useTeachingPopoverHeaderStyles_unstable, useTeachingPopoverHeader_unstable } from './components/TeachingPopoverHeader/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverHeader.ts"],"sourcesContent":["export type {\n TeachingPopoverHeaderProps,\n TeachingPopoverHeaderSlots,\n TeachingPopoverHeaderState,\n} from './components/TeachingPopoverHeader/index';\nexport {\n TeachingPopoverHeader,\n renderTeachingPopoverHeader_unstable,\n teachingPopoverHeaderClassNames,\n useTeachingPopoverHeaderStyles_unstable,\n useTeachingPopoverHeader_unstable,\n} from './components/TeachingPopoverHeader/index';\n"],"names":["TeachingPopoverHeader","renderTeachingPopoverHeader_unstable","teachingPopoverHeaderClassNames","useTeachingPopoverHeaderStyles_unstable","useTeachingPopoverHeader_unstable"],"mappings":"AAKA,SACEA,qBAAqB,EACrBC,oCAAoC,EACpCC,+BAA+B,EAC/BC,uCAAuC,EACvCC,iCAAiC,QAC5B,2CAA2C"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverSurface, renderTeachingPopoverSurface_unstable, teachingPopoverSurfaceClassNames, useTeachingPopoverSurfaceStyles_unstable, useTeachingPopoverSurface_unstable } from './components/TeachingPopoverSurface/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverSurface.ts"],"sourcesContent":["export type {\n TeachingPopoverSurfaceProps,\n TeachingPopoverSurfaceSlots,\n TeachingPopoverSurfaceState,\n} from './components/TeachingPopoverSurface/index';\nexport {\n TeachingPopoverSurface,\n renderTeachingPopoverSurface_unstable,\n teachingPopoverSurfaceClassNames,\n useTeachingPopoverSurfaceStyles_unstable,\n useTeachingPopoverSurface_unstable,\n} from './components/TeachingPopoverSurface/index';\n"],"names":["TeachingPopoverSurface","renderTeachingPopoverSurface_unstable","teachingPopoverSurfaceClassNames","useTeachingPopoverSurfaceStyles_unstable","useTeachingPopoverSurface_unstable"],"mappings":"AAKA,SACEA,sBAAsB,EACtBC,qCAAqC,EACrCC,gCAAgC,EAChCC,wCAAwC,EACxCC,kCAAkC,QAC7B,4CAA4C"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverTitle, renderTeachingPopoverTitle_unstable, teachingPopoverTitleClassNames, useTeachingPopoverTitleStyles_unstable, useTeachingPopoverTitle_unstable } from './components/TeachingPopoverTitle/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverTitle.ts"],"sourcesContent":["export type {\n TeachingPopoverTitleProps,\n TeachingPopoverTitleSlots,\n TeachingPopoverTitleState,\n} from './components/TeachingPopoverTitle/index';\nexport {\n TeachingPopoverTitle,\n renderTeachingPopoverTitle_unstable,\n teachingPopoverTitleClassNames,\n useTeachingPopoverTitleStyles_unstable,\n useTeachingPopoverTitle_unstable,\n} from './components/TeachingPopoverTitle/index';\n"],"names":["TeachingPopoverTitle","renderTeachingPopoverTitle_unstable","teachingPopoverTitleClassNames","useTeachingPopoverTitleStyles_unstable","useTeachingPopoverTitle_unstable"],"mappings":"AAKA,SACEA,oBAAoB,EACpBC,mCAAmC,EACnCC,8BAA8B,EAC9BC,sCAAsC,EACtCC,gCAAgC,QAC3B,0CAA0C"}

View File

@@ -0,0 +1 @@
export { TeachingPopoverTrigger, renderTeachingPopoverTrigger_unstable, useTeachingPopoverTrigger_unstable } from './components/TeachingPopoverTrigger/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/TeachingPopoverTrigger.ts"],"sourcesContent":["export type {\n TeachingPopoverTriggerChildProps,\n TeachingPopoverTriggerProps,\n TeachingPopoverTriggerState,\n} from './components/TeachingPopoverTrigger/index';\nexport {\n TeachingPopoverTrigger,\n renderTeachingPopoverTrigger_unstable,\n useTeachingPopoverTrigger_unstable,\n} from './components/TeachingPopoverTrigger/index';\n"],"names":["TeachingPopoverTrigger","renderTeachingPopoverTrigger_unstable","useTeachingPopoverTrigger_unstable"],"mappings":"AAKA,SACEA,sBAAsB,EACtBC,qCAAqC,EACrCC,kCAAkC,QAC7B,4CAA4C"}

View File

@@ -0,0 +1,11 @@
'use client';
import * as React from 'react';
import { useTeachingPopover_unstable } from './useTeachingPopover';
import { renderTeachingPopover_unstable } from './renderTeachingPopover';
/**
* An extension class of Popover which defaults to withArrow and FocusTrap enabled.
*/ export const TeachingPopover = (props)=>{
const state = useTeachingPopover_unstable(props);
return 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AAGzE;;CAEC,GACD,OAAO,MAAMC,kBAAkDC,CAAAA;IAC7D,MAAMC,QAAQJ,4BAA4BG;IAE1C,OAAOF,+BAA+BG;AACxC,EAAE;AAEFF,gBAAgBG,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* TeachingPopover State
*/ export { };

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,3 @@
export { TeachingPopover } from './TeachingPopover';
export { renderTeachingPopover_unstable } from './renderTeachingPopover';
export { useTeachingPopover_unstable } from './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":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB"}

View File

@@ -0,0 +1,4 @@
import { renderPopover_unstable } from '@fluentui/react-popover';
/**
* Render the final JSX of TeachingPopover
*/ export const renderTeachingPopover_unstable = 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":"AAAA,SAASA,sBAAsB,QAAQ,0BAA0B;AAEjE;;CAEC,GACD,OAAO,MAAMC,iCAAiCD,uBAAuB"}

View File

@@ -0,0 +1,12 @@
'use client';
import { usePopover_unstable } from '@fluentui/react-popover';
export const useTeachingPopover_unstable = (props)=>{
const popoverState = 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;AAEA,SAASA,mBAAmB,QAAQ,0BAA0B;AAG9D,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAMC,eAAeH,oBAAoBE;QAI5BA,kBAEAA;IAJb,OAAO;QACL,GAAGC,YAAY;QACfC,WAAWF,CAAAA,mBAAAA,MAAME,SAAS,cAAfF,8BAAAA,mBAAmB;QAC9B,+EAA+E;QAC/EG,WAAWH,CAAAA,mBAAAA,MAAMG,SAAS,cAAfH,8BAAAA,mBAAmB;IAChC;AACF,EAAE"}

View File

@@ -0,0 +1,18 @@
'use client';
import * as React from 'react';
import { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';
import { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';
import { useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`
* hooks.
*
* TeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot
*/ export const TeachingPopoverBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useTeachingPopoverBody_unstable(props, ref);
useTeachingPopoverBodyStyles_unstable(state);
useCustomStyleHook_unstable('useTeachingPopoverBodyStyles_unstable')(state);
return 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,wCAAwC;AAC9F,SAASC,2BAA2B,QAAQ,kCAAkC;AAI9E;;;;;CAKC,GACD,OAAO,MAAMC,oCAAqEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQR,gCAAgCM,OAAOC;IAErDL,sCAAsCM;IAEtCL,4BAA4B,yCAAyCK;IAErE,OAAOP,mCAAmCO;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}

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":"AAiBA,WAC0D"}

View File

@@ -0,0 +1,4 @@
export { TeachingPopoverBody } from './TeachingPopoverBody';
export { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';
export { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';
export { teachingPopoverBodyClassNames, useMediaStyles, useTeachingPopoverBodyStyles_unstable } from './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":"AAAA,SAASA,mBAAmB,QAAQ,wBAAwB;AAM5D,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SACEC,6BAA6B,EAC7BC,cAAc,EACdC,qCAAqC,QAChC,wCAAwC"}

View File

@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of TeachingPopoverBody
*/ export const renderTeachingPopoverBody_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.media && /*#__PURE__*/ _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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjDF,YAAsCE;IAEtC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,25 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Returns the props and state required to render the component
* @param props - TeachingPopoverBody properties
* @param ref - reference to root HTMLElement of TeachingPopoverBody
*/ export const useTeachingPopoverBody_unstable = (props, ref)=>{
const { mediaLength } = props;
return {
components: {
root: 'div',
media: 'span'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
...props
}), {
elementType: 'div'
}),
media: 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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGF;IAExB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNC,OAAO;QACT;QACAD,MAAMN,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBF,OAAOP,KAAKU,QAAQ,CAACR,MAAMK,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDL,aAAaA,wBAAAA,yBAAAA,cAAe;IAC9B;AACF,EAAE"}

View File

@@ -0,0 +1,68 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
export const teachingPopoverBodyClassNames = {
root: 'fui-TeachingPopoverBody',
media: 'fui-TeachingPopoverBody__media'
};
const popoverBodyDimension = 288;
export const useMediaStyles = /*#__PURE__*/__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__*/__styles({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Byoj8tv: "fpe6lb7"
}
}, {
d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fpe6lb7{padding-bottom:12px;}"]
});
/** Applies style classnames to slots */
export const useTeachingPopoverBodyStyles_unstable = state => {
'use no memo';
const {
mediaLength
} = state;
const styles = useStyles();
const mediaStyles = useMediaStyles();
state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
if (state.media) {
state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE,yBAAyB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,GAAG,GAAG;AAChC,OAAO,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,IAAA;IAAAH,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAG,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CA4B7B,CAAC;AACF,MAAMC,SAAS,gBAAG7B,QAAA;EAAAG,IAAA;IAAAiB,MAAA;IAAAU,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAMjB,CAAC;AACF;AAAyC,OAAO,MAAMM,qCAAqC,GAAIC,KAAK,IAAG;EACnG,aAAa;;EACb,MAAM;IAAEC;EAAY,CAAC,GAAGD,KAAK;EAC7B,MAAME,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1B,MAAMO,WAAW,GAAG9B,cAAc,CAAC,CAAC;EACpC2B,KAAK,CAAC9B,IAAI,CAACkC,SAAS,GAAGpC,YAAY,CAACC,6BAA6B,CAACC,IAAI,EAAEgC,MAAM,CAAChC,IAAI,EAAE8B,KAAK,CAAC9B,IAAI,CAACkC,SAAS,CAAC;EAC1G,IAAIJ,KAAK,CAAC7B,KAAK,EAAE;IACb6B,KAAK,CAAC7B,KAAK,CAACiC,SAAS,GAAGpC,YAAY,CAACC,6BAA6B,CAACE,KAAK,EAAEgC,WAAW,CAAC7B,IAAI,EAAE6B,WAAW,CAACF,WAAW,CAAC,EAAED,KAAK,CAAC7B,KAAK,CAACiC,SAAS,CAAC;EAChJ;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,54 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
export const teachingPopoverBodyClassNames = {
root: 'fui-TeachingPopoverBody',
media: 'fui-TeachingPopoverBody__media'
};
const popoverBodyDimension = 288;
export const useMediaStyles = 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 = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
paddingBottom: '12px'
}
});
/** Applies style classnames to slots */ export const useTeachingPopoverBodyStyles_unstable = (state)=>{
'use no memo';
const { mediaLength } = state;
const styles = useStyles();
const mediaStyles = useMediaStyles();
state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
if (state.media) {
state.media.className = 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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,gCAA0E;IACrFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuB;AAE7B,OAAO,MAAMC,iBAAiBN,WAAW;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,YAAYpB,WAAW;IAC3BG,MAAM;QACJW,SAAS;QACTO,eAAe;QACfC,eAAe;IACjB;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAME,SAASN;IACf,MAAMO,cAAcrB;IAEpBkB,MAAMrB,IAAI,CAACyB,SAAS,GAAG3B,aAAaC,8BAA8BC,IAAI,EAAEuB,OAAOvB,IAAI,EAAEqB,MAAMrB,IAAI,CAACyB,SAAS;IAEzG,IAAIJ,MAAMpB,KAAK,EAAE;QACfoB,MAAMpB,KAAK,CAACwB,SAAS,GAAG3B,aACtBC,8BAA8BE,KAAK,EACnCuB,YAAYpB,IAAI,EAChBoB,WAAW,CAACF,YAAY,EACxBD,MAAMpB,KAAK,CAACwB,SAAS;IAEzB;IAEA,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,134 @@
'use client';
import * as React from 'react';
import { isHTMLElement, useMergedRefs, useControllableState, useEventCallback } from '@fluentui/react-utilities';
import { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { CAROUSEL_ITEM } from './constants';
import { useCarouselWalker_unstable } from './useCarouselWalker';
import { createCarouselStore } from './createCarouselStore';
// TODO: Migrate this into an external @fluentui/carousel component
// For now, we won't export this publicly, is only for internal TeachingPopover use until stabilized.
export function useCarousel_unstable(options) {
'use no memo';
const { announcement, onValueChange, onFinish } = options;
const { targetDocument } = useFluent();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
const { ref: carouselRef, walker: carouselWalker } = useCarouselWalker_unstable();
const [store] = React.useState(()=>createCarouselStore());
const [value, setValue] = useControllableState({
defaultState: options.defaultValue,
state: options.value,
initialState: null
});
const rootRef = React.useRef(null);
const { announce } = 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(`[${CAROUSEL_ITEM}]`);
for(let i = 0; i < allItems.length; i++){
store.addValue(allItems.item(i).getAttribute(CAROUSEL_ITEM));
}
return ()=>{
store.clear();
};
}, [
store
]);
React.useEffect(()=>{
if (!win) {
return;
}
const config = {
attributes: true,
attributeFilter: [
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 (isHTMLElement(addedNode) && addedNode.hasAttribute(CAROUSEL_ITEM)) {
const newValue = addedNode.getAttribute(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 (isHTMLElement(removedNode) && (removedNode === null || removedNode === void 0 ? void 0 : removedNode.hasAttribute(CAROUSEL_ITEM))) {
const removedValue = removedNode.getAttribute(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 = 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 = 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: 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 @@
import * as React from '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":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,15 @@
'use client';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import * as React from 'react';
import { createCarouselStore } from './createCarouselStore';
export const carouselContextDefaultValue = {
store: createCarouselStore(),
value: null,
selectPageByDirection: ()=>{
/** noop */ },
selectPageByValue: ()=>{
/** noop */ }
};
const CarouselContext = createContext(undefined);
export const CarouselProvider = CarouselContext.Provider;
export const useCarouselContext_unstable = (selector)=>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;AAEA,SAAwCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AACpH,YAAYC,WAAW,QAAQ;AAG/B,SAASC,mBAAmB,QAAQ,wBAAwB;AAY5D,OAAO,MAAMC,8BAAoD;IAC/DC,OAAOF;IACPG,OAAO;IACPC,uBAAuB;IACrB,SAAS,GACX;IACAC,mBAAmB;IACjB,SAAS,GACX;AACF,EAAE;AAEF,MAAMC,kBAAiDT,cACrDU;AAGF,OAAO,MAAMC,mBAAmBF,gBAAgBG,QAAQ,CAAC;AAEzD,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBQ,iBAAiB,CAACM,MAAMX,2BAA2B,GAAKU,SAASC,MAAM"}

View File

@@ -0,0 +1,3 @@
/**
* TeachingPopoverCarousel State and Context Hooks
*/ export { };

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,12 @@
'use client';
import * as React from 'react';
import { useCarouselItem_unstable } from './useCarouselItem';
import { renderCarouselItem_unstable } from './renderCarouselItem';
/**
* Define a CarouselItem, using the `useCarouselItem_unstable` and 'renderCarouselItem_unstable' hooks.
* It has no styling opinions.
*/ export const CarouselItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCarouselItem_unstable(props, ref);
return 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;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAEnE;;;CAGC,GACD,OAAO,MAAMC,6BAAuDH,MAAMI,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQN,yBAAyBI,OAAOC;IAE9C,OAAOJ,4BAA4BK;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of TeachingPopoverCarousel
*/ export const renderCarouselItem_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,29 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useCarouselContext_unstable } from '../CarouselContext';
import { CAROUSEL_ACTIVE_ITEM, CAROUSEL_ITEM } from '../constants';
export const useCarouselItem_unstable = (props, ref)=>{
const { value } = props;
const visible = useCarouselContext_unstable((c)=>c.value === value);
const state = {
value,
visible,
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
[CAROUSEL_ITEM]: value,
[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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,2BAA2B,QAAQ,qBAAqB;AACjE,SAASC,oBAAoB,EAAEC,aAAa,QAAQ,eAAe;AAEnE,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,MAAMG,UAAUP,4BAA4BQ,CAAAA,IAAKA,EAAEF,KAAK,KAAKA;IAC7D,MAAMG,QAA2B;QAC/BH;QACAC;QACAG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMZ,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BO;YACA,CAACH,cAAc,EAAEI;YACjB,CAACL,qBAAqB,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,2 @@
export const CAROUSEL_ITEM = 'data-carousel-item';
export 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":"AAAA,OAAO,MAAMA,gBAAgB,qBAAqB;AAClD,OAAO,MAAMC,uBAAuB,4BAA4B"}

View File

@@ -0,0 +1,60 @@
export 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":"AAEA,OAAO,MAAMA,sBAAsB;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,7 @@
'use client';
import { useSyncExternalStore } from 'use-sync-external-store/shim';
import { useCarouselContext_unstable } from './CarouselContext';
export function useCarouselValues_unstable(getSnapshot) {
const store = useCarouselContext_unstable((c)=>c.store);
return 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;AAEA,SAASA,oBAAoB,QAAQ,+BAA+B;AAEpE,SAASC,2BAA2B,QAAQ,oBAAoB;AAGhE,OAAO,SAASC,2BAA8BC,WAAoE;IAChH,MAAMC,QAAQH,4BAA4BI,CAAAA,IAAKA,EAAED,KAAK;IAEtD,OAAOJ,qBAAqBI,MAAME,SAAS,EAAE,IAAMH,YAAYC,MAAMD,WAAW;AAClF"}

View File

@@ -0,0 +1,99 @@
'use client';
import * as React from 'react';
import { isHTMLElement } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { CAROUSEL_ACTIVE_ITEM, CAROUSEL_ITEM } from './constants';
export const useCarouselWalker_unstable = ()=>{
const { targetDocument } = useFluent();
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 (!isHTMLElement(node)) {
return NodeFilter.FILTER_SKIP;
}
return node.hasAttribute(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(`[${CAROUSEL_ACTIVE_ITEM}="true"]`);
if (isHTMLElement(activeEl)) {
return {
el: activeEl,
value: activeEl.getAttribute(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 (!isHTMLElement(nextNode)) {
continue;
}
if (nextNode.getAttribute(CAROUSEL_ITEM) === value) {
return {
el: nextNode,
value: nextNode.getAttribute(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 (isHTMLElement(next)) {
return {
el: next,
value: next.getAttribute(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 (isHTMLElement(next)) {
return {
el: next,
value: next.getAttribute(CAROUSEL_ITEM)
};
}
return null;
}
}), [])
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,20 @@
'use client';
import * as React from 'react';
import { useTeachingPopoverCarousel_unstable } from './useTeachingPopoverCarousel';
import { renderTeachingPopoverCarousel_unstable } from './renderTeachingPopoverCarousel';
import { useTeachingPopoverCarouselStyles_unstable } from './useTeachingPopoverCarouselStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useTeachingPopoverCarouselContextValues_unstable } from './useTeachingPopoverCarouselContextValues';
/**
* Define a styled TeachingPopoverCarousel, using the `useTeachingPopoverCarousel_unstable` and `useTeachingPopoverCarouselStyles_unstable`
* hooks.
*
* TeachingPopoverCarousel injects context providers that are required for TeachingPopoverCarouselCard display and navigation functionality
*/ export const TeachingPopoverCarousel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useTeachingPopoverCarousel_unstable(props, ref);
useTeachingPopoverCarouselStyles_unstable(state);
useCustomStyleHook_unstable('useTeachingPopoverCarouselStyles_unstable')(state);
const contextValues = useTeachingPopoverCarouselContextValues_unstable(state);
return 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;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,yCAAyC,QAAQ,4CAA4C;AACtG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,gDAAgD,QAAQ,4CAA4C;AAE7G;;;;;CAKC,GACD,OAAO,MAAMC,wCAA6EN,MAAMO,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,QAAQT,oCAAoCO,OAAOC;IAEzDN,0CAA0CO;IAE1CN,4BAA4B,6CAA6CM;IAEzE,MAAMC,gBAAgBN,iDAAiDK;IAEvE,OAAOR,uCAAuCQ,OAAOC;AACvD,GACA;AAEFL,wBAAwBM,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* Context shared between TeachingPopoverCarousel and its children components
*/ export { };

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,5 @@
export { TeachingPopoverCarousel } from './TeachingPopoverCarousel';
export { renderTeachingPopoverCarousel_unstable } from './renderTeachingPopoverCarousel';
export { useTeachingPopoverCarousel_unstable } from './useTeachingPopoverCarousel';
export { teachingPopoverCarouselClassNames, useTeachingPopoverCarouselStyles_unstable } from './useTeachingPopoverCarouselStyles.styles';
export { useTeachingPopoverCarouselContextValues_unstable } from './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":"AAAA,SAASA,uBAAuB,QAAQ,4BAA4B;AAOpE,SAASC,sCAAsC,QAAQ,kCAAkC;AACzF,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SACEC,iCAAiC,EACjCC,yCAAyC,QACpC,4CAA4C;AACnD,SAASC,gDAAgD,QAAQ,4CAA4C"}

View File

@@ -0,0 +1,12 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { CarouselProvider } from './Carousel/CarouselContext';
/**
* Render the final JSX of TeachingPopoverCarousel
*/ export const renderTeachingPopoverCarousel_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(CarouselProvider, {
value: contextValues.carousel,
children: /*#__PURE__*/ _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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,gBAAgB,QAAQ,6BAA6B;AAE9D;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEAJ,YAA0CG;IAE1C,qBACE,KAACF;QAAiBI,OAAOD,cAAcE,QAAQ;kBAC7C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

View File

@@ -0,0 +1,34 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
import { usePopoverContext_unstable } from '@fluentui/react-popover';
import { useCarousel_unstable } from './Carousel/Carousel';
export const useTeachingPopoverCarousel_unstable = (props, ref)=>{
const toggleOpen = usePopoverContext_unstable((c)=>c.toggleOpen);
const handleFinish = 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 } = useCarousel_unstable({
announcement: props.announcement,
defaultValue: props.defaultValue,
value: props.value,
onValueChange: props.onValueChange,
onFinish: handleFinish
});
const appearance = usePopoverContext_unstable((context)=>context.appearance);
return {
appearance,
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref: 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAE5G,SAASC,0BAA0B,QAAQ,0BAA0B;AACrE,SAASC,oBAAoB,QAAQ,sBAAsB;AAE3D,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA,MAAMC,aAAaL,2BAA2BM,CAAAA,IAAKA,EAAED,UAAU;IAC/D,MAAME,eAAyDT,iBAAiB,CAACU,OAAOC;YACtFN;SAAAA,kBAAAA,MAAMO,QAAQ,cAAdP,sCAAAA,qBAAAA,OAAiBK,OAAOC;QACxBJ,WAAWG;IACb;IAEA,MAAM,EAAEG,QAAQ,EAAEC,WAAW,EAAE,GAAGX,qBAAqB;QACrDY,cAAcV,MAAMU,YAAY;QAChCC,cAAcX,MAAMW,YAAY;QAChCC,OAAOZ,MAAMY,KAAK;QAClBC,eAAeb,MAAMa,aAAa;QAClCN,UAAUH;IACZ;IAEA,MAAMU,aAAajB,2BAA2BkB,CAAAA,UAAWA,QAAQD,UAAU;IAC3E,OAAO;QACLA;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,KAAKwB,MAAM,CACfzB,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKQ;YACxB,GAAGT,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvB,GAAGX,QAAQ;IACb;AACF,EAAE"}

View File

@@ -0,0 +1,12 @@
export 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":"AAKA,OAAO,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,18 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
export const teachingPopoverCarouselClassNames = {
root: 'fui-TeachingPopoverCarousel'
};
// Todo: Page change animation & styles
const useStyles = /*#__PURE__*/__styles({
root: {}
}, {});
/** Applies style classnames to slots */
export const useTeachingPopoverCarouselStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(teachingPopoverCarouselClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","teachingPopoverCarouselClassNames","root","useStyles","useTeachingPopoverCarouselStyles_unstable","state","styles","className"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,IAAI,EAAE;AACV,CAAC;AACD;AACA,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;AAAA,KAEjB,CAAC;AACF;AAAyC,OAAO,MAAME,yCAAyC,GAAIC,KAAK,IAAG;EACvG,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,iCAAiC,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,15 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
export const teachingPopoverCarouselClassNames = {
root: 'fui-TeachingPopoverCarousel'
};
// Todo: Page change animation & styles
const useStyles = makeStyles({
root: {}
});
/** Applies style classnames to slots */ export const useTeachingPopoverCarouselStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = 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;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,oCAAkF;IAC7FC,MAAM;AACR,EAAE;AAEF,uCAAuC;AACvC,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM,CAAC;AACT;AAEA,sCAAsC,GACtC,OAAO,MAAME,4CAA4C,CACvDC;IAEA;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,GAAGP,aAAaC,kCAAkCC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAE7G,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,18 @@
'use client';
import * as React from 'react';
import { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';
import { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';
import { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`
* hooks.
*
* 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.
*/ export const TeachingPopoverCarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useTeachingPopoverCarouselCard_unstable(props, ref);
useTeachingPopoverCarouselCardStyles_unstable(state);
useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);
return 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SAASC,0CAA0C,QAAQ,sCAAsC;AAGjG,SAASC,6CAA6C,QAAQ,gDAAgD;AAC9G,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4CAAqFL,MAAMM,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,QAAQR,wCAAwCM,OAAOC;IAE7DL,8CAA8CM;IAE9CL,4BAA4B,iDAAiDK;IAE7E,OAAOP,2CAA2CO;AACpD,GACA;AAEFJ,4BAA4BK,WAAW,GAAG"}

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":"AAeA,WAC4D"}

View File

@@ -0,0 +1,4 @@
export { TeachingPopoverCarouselCard } from './TeachingPopoverCarouselCard';
export { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';
export { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';
export { teachingPopoverCarouselCardClassNames, useTeachingPopoverCarouselCardStyles_unstable } from './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":"AAAA,SAASA,2BAA2B,QAAQ,gCAAgC;AAM5E,SAASC,0CAA0C,QAAQ,sCAAsC;AACjG,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SACEC,qCAAqC,EACrCC,6CAA6C,QACxC,gDAAgD"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of TeachingPopoverCarouselCard
*/ export const renderTeachingPopoverCarouselCard_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6CAA6C,CAACC;IACzDF,YAA8CE;IAE9C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,25 @@
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import * as React from 'react';
import { CarouselItem } from '../TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem';
/**
* Returns the props and state required to render the component
* @param props - TeachingPopoverCarouselCard properties
* @param ref - reference to root HTMLElement of TeachingPopoverCarouselCard
*/ export const useTeachingPopoverCarouselCard_unstable = (props, ref)=>{
const { value } = props;
return {
value,
components: {
root: CarouselItem
},
root: slot.always({
...getIntrinsicElementProps('div', {
ref,
...props
}),
value
}, {
elementType: 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":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAM/B,SAASC,YAAY,QAAQ,+DAA+D;AAE5F;;;;CAIC,GACD,OAAO,MAAMC,0CAA0C,CACrDC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,OAAO;QACLE;QACAC,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMR,KAAKS,MAAM,CACf;YACE,GAAGV,yBAAyB,OAAO;gBACjCM;gBACA,GAAGD,KAAK;YACV,EAAE;YACFE;QACF,GACA;YAAEI,aAAaR;QAAa;IAEhC;AACF,EAAE"}

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