feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';
+import { useTeachingPopoverSurfaceStyles_unstable } from './useTeachingPopoverSurfaceStyles.styles';
+import { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';
+/**
+ * TeachingPopoverSurface component renders react children in a positioned box
+ *
+ * TeachingPopoverSurface is a direct extension of PopoverSurface, with it's own styling context hooks available.
+ */ export const TeachingPopoverSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverSurface_unstable(props, ref);
+    useTeachingPopoverSurfaceStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverSurfaceStyles_unstable')(state);
+    return renderTeachingPopoverSurface_unstable(state);
+});
+TeachingPopoverSurface.displayName = 'TeachingPopoverSurface';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/TeachingPopoverSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { TeachingPopoverSurfaceProps } from './TeachingPopoverSurface.types';\nimport { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';\nimport { useTeachingPopoverSurfaceStyles_unstable } from './useTeachingPopoverSurfaceStyles.styles';\nimport { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';\n\n/**\n * TeachingPopoverSurface component renders react children in a positioned box\n *\n * TeachingPopoverSurface is a direct extension of PopoverSurface, with it's own styling context hooks available.\n */\nexport const TeachingPopoverSurface: ForwardRefComponent<TeachingPopoverSurfaceProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverSurface_unstable(props, ref);\n\n    useTeachingPopoverSurfaceStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverSurfaceStyles_unstable')(state);\n\n    return renderTeachingPopoverSurface_unstable(state);\n  },\n);\n\nTeachingPopoverSurface.displayName = 'TeachingPopoverSurface';\n"],"names":["React","useCustomStyleHook_unstable","useTeachingPopoverSurface_unstable","useTeachingPopoverSurfaceStyles_unstable","renderTeachingPopoverSurface_unstable","TeachingPopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,wCAAwC,QAAQ,2CAA2C;AACpG,SAASC,qCAAqC,QAAQ,iCAAiC;AAEvF;;;;CAIC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQP,mCAAmCK,OAAOC;IAExDL,yCAAyCM;IAEzCR,4BAA4B,4CAA4CQ;IAExE,OAAOL,sCAAsCK;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/TeachingPopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps } from '@fluentui/react-utilities';\nimport { PopoverSurfaceState } from '@fluentui/react-popover';\nimport { PopoverSurfaceSlots } from '@fluentui/react-popover';\n\n/**\n * TeachingPopoverSurface Props\n */\nexport type TeachingPopoverSurfaceProps = ComponentProps<TeachingPopoverSurfaceSlots>;\n\n/**\n * Names of the slots in TeachingPopoverSurface\n */\nexport type TeachingPopoverSurfaceSlots = PopoverSurfaceSlots;\n\n/**\n * TeachingPopoverSurface State\n */\nexport type TeachingPopoverSurfaceState = PopoverSurfaceState;\n"],"names":[],"mappings":"AAcA;;CAEC,GACD,WAA8D"}

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

@@ -0,0 +1,4 @@
+export { TeachingPopoverSurface } from './TeachingPopoverSurface';
+export { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';
+export { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';
+export { teachingPopoverSurfaceClassNames, useTeachingPopoverSurfaceStyles_unstable } from './useTeachingPopoverSurfaceStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/index.ts"],"sourcesContent":["export { TeachingPopoverSurface } from './TeachingPopoverSurface';\nexport type {\n  TeachingPopoverSurfaceProps,\n  TeachingPopoverSurfaceSlots,\n  TeachingPopoverSurfaceState,\n} from './TeachingPopoverSurface.types';\nexport { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';\nexport { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';\nexport {\n  teachingPopoverSurfaceClassNames,\n  useTeachingPopoverSurfaceStyles_unstable,\n} from './useTeachingPopoverSurfaceStyles.styles';\n"],"names":["TeachingPopoverSurface","renderTeachingPopoverSurface_unstable","useTeachingPopoverSurface_unstable","teachingPopoverSurfaceClassNames","useTeachingPopoverSurfaceStyles_unstable"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,2BAA2B;AAMlE,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SACEC,gCAAgC,EAChCC,wCAAwC,QACnC,2CAA2C"}

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

@@ -0,0 +1,9 @@
+import { assertSlots } from '@fluentui/react-utilities';
+import { renderPopoverSurface_unstable } from '@fluentui/react-popover';
+/**
+ * Render the final JSX of PopoverSurface
+ */ export const renderTeachingPopoverSurface_unstable = (state)=>{
+    assertSlots(state);
+    // For now we are just extending the base surface
+    return renderPopoverSurface_unstable(state);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/renderTeachingPopoverSurface.tsx"],"sourcesContent":["import type { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { renderPopoverSurface_unstable } from '@fluentui/react-popover';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderTeachingPopoverSurface_unstable = (state: TeachingPopoverSurfaceState): JSXElement => {\n  assertSlots<TeachingPopoverSurfaceSlots>(state);\n\n  // For now we are just extending the base surface\n  return renderPopoverSurface_unstable(state);\n};\n"],"names":["assertSlots","renderPopoverSurface_unstable","renderTeachingPopoverSurface_unstable","state"],"mappings":"AACA,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,6BAA6B,QAAQ,0BAA0B;AAExE;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDH,YAAyCG;IAEzC,iDAAiD;IACjD,OAAOF,8BAA8BE;AACvC,EAAE"}

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { usePopoverSurface_unstable } from '@fluentui/react-popover';
+/**
+ * Create the state required to render TeachingPopoverSurface.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverSurfaceStyles_unstable,
+ * before being passed to renderTeachingPopoverSurface_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverSurface
+ * @param ref - reference to root HTMLDivElement of TeachingPopoverSurface
+ */ export const useTeachingPopoverSurface_unstable = (props, ref)=>{
+    const state = usePopoverSurface_unstable(props, ref);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TeachingPopoverSurfaceProps, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { usePopoverSurface_unstable } from '@fluentui/react-popover';\n\n/**\n * Create the state required to render TeachingPopoverSurface.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverSurfaceStyles_unstable,\n * before being passed to renderTeachingPopoverSurface_unstable.\n *\n * @param props - props from this instance of TeachingPopoverSurface\n * @param ref - reference to root HTMLDivElement of TeachingPopoverSurface\n */\nexport const useTeachingPopoverSurface_unstable = (\n  props: TeachingPopoverSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverSurfaceState => {\n  const state = usePopoverSurface_unstable(props, ref);\n\n  return state;\n};\n"],"names":["React","usePopoverSurface_unstable","useTeachingPopoverSurface_unstable","props","ref","state"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,0BAA0B;AAErE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,MAAMC,QAAQJ,2BAA2BE,OAAOC;IAEhD,OAAOC;AACT,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverSurfaceClassNames = {
+  root: 'fui-TeachingPopoverSurface'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f23zza1",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    Bf4jedk: "f14hp5dx",
+    B7ck84d: "f1ewtqcl"
+  }
+}, {
+  d: [[".f23zza1{padding:var(--spacingVerticalL) var(--spacingVerticalL);}", {
+    p: -1
+  }], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], ".f14hp5dx{min-width:320px;}", ".f1ewtqcl{box-sizing:border-box;}"]
+});
+/**
+ * Apply styling to the TeachingPopoverSurface slots based on the state
+ */
+export const useTeachingPopoverSurfaceStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  // Make sure to merge teaching bubble surface prior to popover styles
+  state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
+  const updatedState = usePopoverSurfaceStyles_unstable(state);
+  return updatedState;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bf4jedk","B7ck84d","d","p","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"sources":["useTeachingPopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverSurfaceClassNames = {\n    root: 'fui-TeachingPopoverSurface'\n};\nconst useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,\n        borderRadius: tokens.borderRadiusXLarge,\n        minWidth: '320px',\n        boxSizing: 'border-box'\n    }\n});\n/**\n * Apply styling to the TeachingPopoverSurface slots based on the state\n */ export const useTeachingPopoverSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // Make sure to merge teaching bubble surface prior to popover styles\n    state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);\n    const updatedState = usePopoverSurfaceStyles_unstable(state);\n    return updatedState;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gCAAgC,QAAQ,yBAAyB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1B;EACAgB,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEiB,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EAC7G,MAAMC,YAAY,GAAGvB,gCAAgC,CAACoB,KAAK,CAAC;EAC5D,OAAOG,YAAY;AACvB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.raw.js

@@ -0,0 +1,25 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
+import { tokens } from '@fluentui/react-theme';
+export const teachingPopoverSurfaceClassNames = {
+    root: 'fui-TeachingPopoverSurface'
+};
+const useStyles = makeStyles({
+    root: {
+        padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,
+        borderRadius: tokens.borderRadiusXLarge,
+        minWidth: '320px',
+        boxSizing: 'border-box'
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverSurface slots based on the state
+ */ export const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    // Make sure to merge teaching bubble surface prior to popover styles
+    state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
+    const updatedState = usePopoverSurfaceStyles_unstable(state);
+    return updatedState;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverSurfaceClassNames: SlotClassNames<TeachingPopoverSurfaceSlots> = {\n  root: 'fui-TeachingPopoverSurface',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    minWidth: '320px',\n    boxSizing: 'border-box',\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverSurface slots based on the state\n */\nexport const useTeachingPopoverSurfaceStyles_unstable = (\n  state: TeachingPopoverSurfaceState,\n): TeachingPopoverSurfaceState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // Make sure to merge teaching bubble surface prior to popover styles\n  state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);\n\n  const updatedState = usePopoverSurfaceStyles_unstable(state);\n\n  return updatedState;\n};\n"],"names":["makeStyles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","padding","spacingVerticalL","borderRadius","borderRadiusXLarge","minWidth","boxSizing","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,gCAAgC,QAAQ,0BAA0B;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGJ,OAAOK,gBAAgB,CAAC,CAAC,EAAEL,OAAOK,gBAAgB,EAAE;QAChEC,cAAcN,OAAOO,kBAAkB;QACvCC,UAAU;QACVC,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAAST;IAEf,qEAAqE;IACrEQ,MAAMT,IAAI,CAACW,SAAS,GAAGf,aAAaG,iCAAiCC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE5G,MAAMC,eAAef,iCAAiCY;IAEtD,OAAOG;AACT,EAAE"}