feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { useCarouselCard_unstable } from './useCarouselCard';
+import { renderCarouselCard_unstable } from './renderCarouselCard';
+import { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The defining wrapper of a carousel's indexed content, they will take up the full
+ * viewport of CarouselSlider or div wrapper,
+ * users may place multiple items within this Card if desired, with consideration of viewport width.
+ *
+ * Clickable actions within the content area are available via mouse and tab as expected,
+ * non-active card content will be set to inert until moved to active card.
+ */ export const CarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselCard_unstable(props, ref);
+    useCarouselCardStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);
+    return renderCarouselCard_unstable(state);
+});
+CarouselCard.displayName = 'CarouselCard';

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselCard_unstable } from './useCarouselCard';\nimport { renderCarouselCard_unstable } from './renderCarouselCard';\nimport { useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\nimport type { CarouselCardProps } from './CarouselCard.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The defining wrapper of a carousel's indexed content, they will take up the full\n * viewport of CarouselSlider or div wrapper,\n * users may place multiple items within this Card if desired, with consideration of viewport width.\n *\n * Clickable actions within the content area are available via mouse and tab as expected,\n * non-active card content will be set to inert until moved to active card.\n */\nexport const CarouselCard: ForwardRefComponent<CarouselCardProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselCard_unstable(props, ref);\n\n  useCarouselCardStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselCardStyles_unstable')(state);\n\n  return renderCarouselCard_unstable(state);\n});\n\nCarouselCard.displayName = 'CarouselCard';\n"],"names":["React","useCarouselCard_unstable","renderCarouselCard_unstable","useCarouselCardStyles_unstable","useCustomStyleHook_unstable","CarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselCard
+ */ export { };

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/CarouselCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/CarouselCard.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselCardSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselCard Props\n */\nexport type CarouselCardProps = ComponentProps<CarouselCardSlots> & {\n  /**\n   * Sets the card styling to be responsive based on content.\n   */\n  autoSize?: boolean;\n};\n\n/**\n * State used in rendering CarouselCard\n */\nexport type CarouselCardState = ComponentState<CarouselCardSlots> & Pick<CarouselCardProps, 'autoSize'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAAwG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/index.js

@@ -0,0 +1,4 @@
+export { CarouselCard } from './CarouselCard';
+export { renderCarouselCard_unstable } from './renderCarouselCard';
+export { useCarouselCard_unstable } from './useCarouselCard';
+export { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/index.ts"],"sourcesContent":["export { CarouselCard } from './CarouselCard';\nexport type { CarouselCardProps, CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\nexport { renderCarouselCard_unstable } from './renderCarouselCard';\nexport { useCarouselCard_unstable } from './useCarouselCard';\nexport { carouselCardClassNames, useCarouselCardStyles_unstable } from './useCarouselCardStyles.styles';\n"],"names":["CarouselCard","renderCarouselCard_unstable","useCarouselCard_unstable","carouselCardClassNames","useCarouselCardStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/renderCarouselCard.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 CarouselCard
+ */ export const renderCarouselCard_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/renderCarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/renderCarouselCard.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 { CarouselCardState, CarouselCardSlots } from './CarouselCard.types';\n\n/**\n * Render the final JSX of CarouselCard\n */\nexport const renderCarouselCard_unstable = (state: CarouselCardState): JSXElement => {\n  assertSlots<CarouselCardSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselCard_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"}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCard.js

@@ -0,0 +1,99 @@
+'use client';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, isHTMLElement, mergeCallbacks, slot, useMergedRefs, useId } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+import { EMBLA_VISIBILITY_EVENT } from '../useEmblaCarousel';
+import { carouselCardClassNames } from './useCarouselCardStyles.styles';
+import { useCarouselSliderContext } from '../CarouselSlider/CarouselSliderContext';
+/**
+ * Create the state required to render CarouselCard.
+ *
+ * The returned state can be modified with hooks such as useCarouselCardStyles_unstable,
+ * before being passed to renderCarouselCard_unstable.
+ *
+ * @param props - props from this instance of CarouselCard
+ * @param ref - reference to root HTMLDivElement of CarouselCard
+ */ export const useCarouselCard_unstable = (props, ref)=>{
+    const { autoSize } = props;
+    const elementRef = React.useRef(null);
+    const isMouseEvent = React.useRef(false);
+    const selectPageByElement = useCarouselContext((ctx)=>ctx.selectPageByElement);
+    const containerRef = useCarouselContext((ctx)=>ctx.containerRef);
+    const { cardFocus } = useCarouselSliderContext();
+    const focusAttr = useFocusableGroup({
+        tabBehavior: 'limited'
+    });
+    const focusAttrProps = cardFocus ? {
+        ...focusAttr,
+        tabIndex: 0
+    } : {};
+    // We attach a unique card id if user does not provide
+    const id = useId(carouselCardClassNames.root, props.id);
+    React.useEffect(()=>{
+        const element = elementRef.current;
+        if (element) {
+            const listener = (_e)=>{
+                const event = _e;
+                // When there is no tab index present, only current cards should be visible to accessibility
+                if (!cardFocus) {
+                    const hidden = !event.detail.isVisible;
+                    element.ariaHidden = hidden.toString();
+                    element.inert = hidden;
+                }
+            };
+            element.addEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            return ()=>{
+                element.removeEventListener(EMBLA_VISIBILITY_EVENT, listener);
+            };
+        }
+    }, [
+        cardFocus
+    ]);
+    const handleFocus = React.useCallback((e)=>{
+        if (!e.defaultPrevented && isHTMLElement(e.currentTarget) && !isMouseEvent.current) {
+            var // We want to prevent any browser scroll intervention for 'offscreen' focus
+            _containerRef_current;
+            containerRef === null || containerRef === void 0 ? void 0 : (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.scrollTo(0, 0);
+            selectPageByElement(e, e.currentTarget, false);
+        }
+        // Mouse focus event has been consumed
+        isMouseEvent.current = false;
+    }, [
+        selectPageByElement,
+        containerRef
+    ]);
+    const handlePointerDown = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = true;
+        }
+    };
+    const handlePointerUp = (e)=>{
+        if (!e.defaultPrevented) {
+            isMouseEvent.current = false;
+        }
+    };
+    const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocus);
+    const onPointerUp = mergeCallbacks(props.onPointerUp, handlePointerUp);
+    const onPointerDown = mergeCallbacks(props.onPointerDown, handlePointerDown);
+    const state = {
+        autoSize,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(elementRef, ref),
+            role: 'tabpanel',
+            tabIndex: cardFocus ? 0 : undefined,
+            ...props,
+            id,
+            onFocusCapture,
+            onPointerUp,
+            onPointerDown,
+            ...focusAttrProps
+        }), {
+            elementType: 'div'
+        })
+    };
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.js

@@ -0,0 +1,64 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+export const carouselCardClassNames = {
+  root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fg68ejw",
+    B2u0y6b: "f6dzj5z"
+  },
+  autoSize: {
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "fd9q35j",
+    Bf4jedk: "fy77jfu",
+    a9b677: "f14z66ap",
+    B2u0y6b: "f6dzj5z"
+  },
+  elevated: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu",
+    E5pizo: "f1hg901r",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp"
+  }
+}, {
+  d: [[".fg68ejw{flex:0 0 100%;}", {
+    p: -1
+  }], ".f6dzj5z{max-width:100%;}", [".fd9q35j{flex:0 0 auto;}", {
+    p: -1
+  }], ".fy77jfu{min-width:0;}", ".f14z66ap{width:auto;}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], ".f1hg901r{box-shadow:var(--shadow16);}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the CarouselCard slots based on the state
+ */
+export const useCarouselCardStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    autoSize
+  } = state;
+  const appearance = useCarouselContext(context => context.appearance);
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","B2u0y6b","autoSize","Bf4jedk","a9b677","elevated","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","B68tc82","Bmxbyg5","Bpg54ce","d","p","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"sources":["useCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselCardClassNames = {\n    root: 'fui-CarouselCard'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flex: '0 0 100%',\n        maxWidth: '100%'\n    },\n    autoSize: {\n        flex: '0 0 auto' /* Adapt slide size to its content */ ,\n        minWidth: 0,\n        width: 'auto',\n        maxWidth: '100%'\n    },\n    elevated: {\n        borderRadius: tokens.borderRadiusXLarge,\n        boxShadow: tokens.shadow16,\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the CarouselCard slots based on the state\n */ export const useCarouselCardStyles_unstable = (state)=>{\n    'use no memo';\n    const { autoSize } = state;\n    const appearance = useCarouselContext((context)=>context.appearance);\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,IAAIC,kBAAkB,QAAQ,oBAAoB;AACtF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAL,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;EAAAI,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEhB;EAAS,CAAC,GAAGgB,KAAK;EAC1B,MAAMC,UAAU,GAAG1B,kBAAkB,CAAE2B,OAAO,IAAGA,OAAO,CAACD,UAAU,CAAC;EACpE,MAAME,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1BsB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,GAAGhC,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAE0B,MAAM,CAAC1B,IAAI,EAAEwB,UAAU,KAAK,UAAU,IAAIE,MAAM,CAAChB,QAAQ,EAAEH,QAAQ,IAAImB,MAAM,CAACnB,QAAQ,EAAEgB,KAAK,CAACvB,IAAI,CAAC2B,SAAS,CAAC;EAC9K,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js

@@ -0,0 +1,36 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+export const carouselCardClassNames = {
+    root: 'fui-CarouselCard'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        flex: '0 0 100%',
+        maxWidth: '100%'
+    },
+    autoSize: {
+        flex: '0 0 auto' /* Adapt slide size to its content */ ,
+        minWidth: 0,
+        width: 'auto',
+        maxWidth: '100%'
+    },
+    elevated: {
+        borderRadius: tokens.borderRadiusXLarge,
+        boxShadow: tokens.shadow16,
+        overflow: 'hidden'
+    }
+});
+/**
+ * Apply styling to the CarouselCard slots based on the state
+ */ export const useCarouselCardStyles_unstable = (state)=>{
+    'use no memo';
+    const { autoSize } = state;
+    const appearance = useCarouselContext((context)=>context.appearance);
+    const styles = useStyles();
+    state.root.className = mergeClasses(carouselCardClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, autoSize && styles.autoSize, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselCard/useCarouselCardStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselCard/useCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselCardSlots, CarouselCardState } from './CarouselCard.types';\n\nexport const carouselCardClassNames: SlotClassNames<CarouselCardSlots> = {\n  root: 'fui-CarouselCard',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flex: '0 0 100%',\n    maxWidth: '100%',\n  },\n  autoSize: {\n    flex: '0 0 auto' /* Adapt slide size to its content */,\n    minWidth: 0,\n    width: 'auto',\n    maxWidth: '100%',\n  },\n  elevated: {\n    borderRadius: tokens.borderRadiusXLarge,\n    boxShadow: tokens.shadow16,\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the CarouselCard slots based on the state\n */\nexport const useCarouselCardStyles_unstable = (state: CarouselCardState): CarouselCardState => {\n  'use no memo';\n\n  const { autoSize } = state;\n  const appearance = useCarouselContext(context => context.appearance);\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    carouselCardClassNames.root,\n    styles.root,\n    appearance === 'elevated' && styles.elevated,\n    autoSize && styles.autoSize,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselCardClassNames","root","useStyles","flex","maxWidth","autoSize","minWidth","width","elevated","borderRadius","borderRadiusXLarge","boxShadow","shadow16","overflow","useCarouselCardStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAGvF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,MAAM;QACNC,UAAU;IACZ;IACAC,UAAU;QACRF,MAAM,WAAW,mCAAmC;QACpDG,UAAU;QACVC,OAAO;QACPH,UAAU;IACZ;IACAI,UAAU;QACRC,cAAcZ,OAAOa,kBAAkB;QACvCC,WAAWd,OAAOe,QAAQ;QAC1BC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEV,QAAQ,EAAE,GAAGU;IACrB,MAAMC,aAAajB,mBAAmBkB,CAAAA,UAAWA,QAAQD,UAAU;IAEnE,MAAME,SAAShB;IACfa,MAAMd,IAAI,CAACkB,SAAS,GAAGvB,aACrBI,uBAAuBC,IAAI,EAC3BiB,OAAOjB,IAAI,EACXe,eAAe,cAAcE,OAAOV,QAAQ,EAC5CH,YAAYa,OAAOb,QAAQ,EAC3BU,MAAMd,IAAI,CAACkB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}