feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';
+import { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';
+import { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count
+ *
+ * The child render function will provide both current and total page numbers for customization.
+ */ export const TeachingPopoverCarouselPageCount = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);
+    useTeachingPopoverCarouselPageCountStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselPageCountStyles_unstable')(state);
+    return renderTeachingPopoverCarouselPageCount_unstable(state);
+});
+TeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nimport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nimport { useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';\nimport type { TeachingPopoverCarouselPageCountProps } from './TeachingPopoverCarouselPageCount.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n *\n * The child render function will provide both current and total page numbers for customization.\n */\nexport const TeachingPopoverCarouselPageCount: ForwardRefComponent<TeachingPopoverCarouselPageCountProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselPageCount_unstable(props, ref);\n\n    useTeachingPopoverCarouselPageCountStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselPageCountStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselPageCount_unstable(state);\n  });\n\nTeachingPopoverCarouselPageCount.displayName = 'TeachingPopoverCarouselPageCount';\n"],"names":["React","useTeachingPopoverCarouselPageCount_unstable","renderTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCountStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselPageCount","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,qDAAqD;AAExH,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,iDACXL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQR,6CAA6CM,OAAOC;IAElEL,mDAAmDM;IAEnDL,4BAA4B,sDAAsDK;IAElF,OAAOP,gDAAgDO;AACzD,GAAG;AAELJ,iCAAiCK,WAAW,GAAG"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselPageCountSlots = {\n  root: Slot<'div'>;\n};\n\nexport type TeachingPopoverCarouselPageCountRenderFunction = (\n  currentPage: number,\n  totalPages: number,\n) => React.ReactNode;\n\n/**\n * TeachingPopoverCarouselPageCount Props\n */\nexport type TeachingPopoverCarouselPageCountProps = Omit<\n  ComponentProps<Partial<TeachingPopoverCarouselPageCountSlots>>,\n  'children'\n> & {\n  children: TeachingPopoverCarouselPageCountRenderFunction;\n};\n\n/**\n * State used in rendering TeachingPopoverCarouselPageCount\n */\nexport type TeachingPopoverCarouselPageCountState = ComponentState<TeachingPopoverCarouselPageCountSlots> & {\n  currentIndex: number;\n\n  totalPages: number;\n\n  renderPageCount: TeachingPopoverCarouselPageCountRenderFunction;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/index.js

@@ -0,0 +1,4 @@
+export { TeachingPopoverCarouselPageCount } from './TeachingPopoverCarouselPageCount';
+export { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';
+export { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';
+export { teachingPopoverCarouselPageCountClassNames, useTeachingPopoverCarouselPageCountStyles_unstable } from './useTeachingPopoverCarouselPageCountStyles.styles';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselPageCount } from './TeachingPopoverCarouselPageCount';\nexport type {\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselPageCountRenderFunction,\n  TeachingPopoverCarouselPageCountSlots,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\nexport { renderTeachingPopoverCarouselPageCount_unstable } from './renderTeachingPopoverCarouselPageCount';\nexport { useTeachingPopoverCarouselPageCount_unstable } from './useTeachingPopoverCarouselPageCount';\nexport {\n  teachingPopoverCarouselPageCountClassNames,\n  useTeachingPopoverCarouselPageCountStyles_unstable,\n} from './useTeachingPopoverCarouselPageCountStyles.styles';\n"],"names":["TeachingPopoverCarouselPageCount","renderTeachingPopoverCarouselPageCount_unstable","useTeachingPopoverCarouselPageCount_unstable","teachingPopoverCarouselPageCountClassNames","useTeachingPopoverCarouselPageCountStyles_unstable"],"mappings":"AAAA,SAASA,gCAAgC,QAAQ,qCAAqC;AAOtF,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SACEC,0CAA0C,EAC1CC,kDAAkD,QAC7C,qDAAqD"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.js

@@ -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 TeachingPopoverCarouselPageCount
+ */ export const renderTeachingPopoverCarouselPageCount_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/renderTeachingPopoverCarouselPageCount.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  TeachingPopoverCarouselPageCountState,\n  TeachingPopoverCarouselPageCountSlots,\n} from './TeachingPopoverCarouselPageCount.types';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselPageCount\n */\nexport const renderTeachingPopoverCarouselPageCount_unstable = (\n  state: TeachingPopoverCarouselPageCountState,\n): JSXElement => {\n  assertSlots<TeachingPopoverCarouselPageCountSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselPageCount_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD;;CAEC,GACD,OAAO,MAAMC,kDAAkD,CAC7DC;IAEAF,YAAmDE;IAEnD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.js

@@ -0,0 +1,35 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
+import { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';
+/**
+ * Create the state required to render TeachingPopoverCarouselPageCount.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverCarouselPageCountStyles_unstable,
+ * before being passed to renderTeachingPopoverCarouselPageCount_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverCarouselPageCount
+ * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselPageCount
+ */ export const useTeachingPopoverCarouselPageCount_unstable = (props, ref)=>{
+    const values = useCarouselValues_unstable((snapshot)=>snapshot);
+    var _useCarouselContext_unstable;
+    const selectedValue = (_useCarouselContext_unstable = useCarouselContext_unstable((c)=>c.value)) !== null && _useCarouselContext_unstable !== void 0 ? _useCarouselContext_unstable : values[0];
+    const currentIndex = values.indexOf(selectedValue);
+    const totalPages = values.length;
+    return {
+        currentIndex,
+        totalPages,
+        renderPageCount: props.children,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props,
+            children: props.children(currentIndex + 1, totalPages)
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCount.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselPageCountProps,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\nimport { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';\n\n/**\n * Create the state required to render TeachingPopoverCarouselPageCount.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverCarouselPageCountStyles_unstable,\n * before being passed to renderTeachingPopoverCarouselPageCount_unstable.\n *\n * @param props - props from this instance of TeachingPopoverCarouselPageCount\n * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselPageCount\n */\nexport const useTeachingPopoverCarouselPageCount_unstable = (\n  props: TeachingPopoverCarouselPageCountProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselPageCountState => {\n  const values = useCarouselValues_unstable(snapshot => snapshot);\n\n  const selectedValue = useCarouselContext_unstable(c => c.value) ?? values[0];\n  const currentIndex = values.indexOf(selectedValue);\n  const totalPages = values.length;\n\n  return {\n    currentIndex,\n    totalPages,\n    renderPageCount: props.children,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n        children: props.children(currentIndex + 1, totalPages),\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCarouselValues_unstable","useCarouselContext_unstable","useTeachingPopoverCarouselPageCount_unstable","props","ref","values","snapshot","selectedValue","c","value","currentIndex","indexOf","totalPages","length","renderPageCount","children","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAK3E,SAASC,0BAA0B,QAAQ,wDAAwD;AACnG,SAASC,2BAA2B,QAAQ,sDAAsD;AAElG;;;;;;;;CAQC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC,OACAC;IAEA,MAAMC,SAASL,2BAA2BM,CAAAA,WAAYA;QAEhCL;IAAtB,MAAMM,gBAAgBN,CAAAA,+BAAAA,4BAA4BO,CAAAA,IAAKA,EAAEC,KAAK,eAAxCR,0CAAAA,+BAA6CI,MAAM,CAAC,EAAE;IAC5E,MAAMK,eAAeL,OAAOM,OAAO,CAACJ;IACpC,MAAMK,aAAaP,OAAOQ,MAAM;IAEhC,OAAO;QACLH;QACAE;QACAE,iBAAiBX,MAAMY,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACfpB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;YACRY,UAAUZ,MAAMY,QAAQ,CAACL,eAAe,GAAGE;QAC7C,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.js

@@ -0,0 +1,28 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselPageCountClassNames = {
+  root: 'fui-TeachingPopoverCarouselPageCount'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}"]
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state
+ */
+export const useTeachingPopoverCarouselPageCountStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","teachingPopoverCarouselPageCountClassNames","root","useStyles","mc9l5x","Bt984gj","Brf1p80","d","useTeachingPopoverCarouselPageCountStyles_unstable","state","styles","className"],"sources":["useTeachingPopoverCarouselPageCountStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselPageCountClassNames = {\n    root: 'fui-TeachingPopoverCarouselPageCount'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center'\n    }\n});\n/**\n * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state\n */ export const useTeachingPopoverCarouselPageCountStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0CAA0C,GAAG;EACtDC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kDAAkD,GAAIC,KAAK,IAAG;EAC3E,aAAa;;EACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGX,YAAY,CAACC,0CAA0C,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EACvH,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.raw.js

@@ -0,0 +1,22 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselPageCountClassNames = {
+    root: 'fui-TeachingPopoverCarouselPageCount'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state
+ */ export const useTeachingPopoverCarouselPageCountStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(teachingPopoverCarouselPageCountClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselPageCount/useTeachingPopoverCarouselPageCountStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselPageCountSlots,\n  TeachingPopoverCarouselPageCountState,\n} from './TeachingPopoverCarouselPageCount.types';\n\nexport const teachingPopoverCarouselPageCountClassNames: SlotClassNames<TeachingPopoverCarouselPageCountSlots> = {\n  root: 'fui-TeachingPopoverCarouselPageCount',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselPageCount slots based on the state\n */\nexport const useTeachingPopoverCarouselPageCountStyles_unstable = (\n  state: TeachingPopoverCarouselPageCountState,\n): TeachingPopoverCarouselPageCountState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselPageCountClassNames.root,\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselPageCountClassNames","root","useStyles","display","alignItems","justifyContent","useTeachingPopoverCarouselPageCountStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAO1D,OAAO,MAAMC,6CAAoG;IAC/GC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qDAAqD,CAChEC;IAEA;IAEA,MAAMC,SAASN;IACfK,MAAMN,IAAI,CAACQ,SAAS,GAAGV,aACrBC,2CAA2CC,IAAI,EAC/CO,OAAOP,IAAI,EACXM,MAAMN,IAAI,CAACQ,SAAS;IAGtB,OAAOF;AACT,EAAE"}