feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-table/lib/components/TableHeader/TableHeader.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useTableHeader_unstable } from './useTableHeader';
+import { renderTableHeader_unstable } from './renderTableHeader';
+import { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TableHeader component
+ */ export const TableHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTableHeader_unstable(props, ref);
+    useTableHeaderStyles_unstable(state);
+    useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state);
+    return renderTableHeader_unstable(state);
+});
+TableHeader.displayName = 'TableHeader';

node_modules/@fluentui/react-table/lib/components/TableHeader/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/TableHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeader component\n */\nexport const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeader_unstable(props, ref);\n\n  useTableHeaderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state);\n\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"],"names":["React","useTableHeader_unstable","renderTableHeader_unstable","useTableHeaderStyles_unstable","useCustomStyleHook_unstable","TableHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

node_modules/@fluentui/react-table/lib/components/TableHeader/TableHeader.types.js

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

node_modules/@fluentui/react-table/lib/components/TableHeader/TableHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/TableHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderSlots = {\n  root: Slot<'thead', 'div'>;\n};\n\n/**\n * TableHeader Props\n */\nexport type TableHeaderProps = ComponentProps<TableHeaderSlots> & {};\n\n/**\n * State used in rendering TableHeader\n */\nexport type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableContextValue, 'noNativeElements'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA8G"}

node_modules/@fluentui/react-table/lib/components/TableHeader/index.js

@@ -0,0 +1,4 @@
+export { TableHeader } from './TableHeader';
+export { renderTableHeader_unstable } from './renderTableHeader';
+export { useTableHeader_unstable } from './useTableHeader';
+export { tableHeaderClassName, tableHeaderClassNames, useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';

node_modules/@fluentui/react-table/lib/components/TableHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/index.ts"],"sourcesContent":["export { TableHeader } from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nexport { renderTableHeader_unstable } from './renderTableHeader';\nexport { useTableHeader_unstable } from './useTableHeader';\nexport {\n  tableHeaderClassName,\n  tableHeaderClassNames,\n  useTableHeaderStyles_unstable,\n} from './useTableHeaderStyles.styles';\n"],"names":["TableHeader","renderTableHeader_unstable","useTableHeader_unstable","tableHeaderClassName","tableHeaderClassNames","useTableHeaderStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,6BAA6B,QACxB,gCAAgC"}

node_modules/@fluentui/react-table/lib/components/TableHeader/renderTableHeader.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';
+/**
+ * Render the final JSX of TableHeader
+ */ export const renderTableHeader_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(TableHeaderContextProvider, {
+        value: "",
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-table/lib/components/TableHeader/renderTableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/renderTableHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState): JSXElement => {\n  assertSlots<TableHeaderSlots>(state);\n\n  return (\n    <TableHeaderContextProvider value=\"\">\n      <state.root />\n    </TableHeaderContextProvider>\n  );\n};\n"],"names":["assertSlots","TableHeaderContextProvider","renderTableHeader_unstable","state","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,0BAA0B,QAAQ,oCAAoC;AAG/E;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,qBACE,KAACF;QAA2BG,OAAM;kBAChC,cAAA,KAACD,MAAME,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-table/lib/components/TableHeader/useTableHeader.js

@@ -0,0 +1,33 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useTableContext } from '../../contexts/tableContext';
+/**
+ * Create the state required to render TableHeader.
+ *
+ * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,
+ * before being passed to renderTableHeader_unstable.
+ *
+ * @param props - props from this instance of TableHeader
+ * @param ref - reference to root HTMLElement of TableHeader
+ */ export const useTableHeader_unstable = (props, ref)=>{
+    const { noNativeElements } = useTableContext();
+    var _props_as;
+    const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'thead';
+    return {
+        components: {
+            root: rootComponent
+        },
+        root: slot.always(getIntrinsicElementProps(rootComponent, {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
+            role: rootComponent === 'div' ? 'rowgroup' : undefined,
+            ...props
+        }), {
+            elementType: rootComponent
+        }),
+        noNativeElements
+    };
+};

node_modules/@fluentui/react-table/lib/components/TableHeader/useTableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/useTableHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'rowgroup' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","useTableHeader_unstable","props","ref","noNativeElements","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,gBAAgB,EAAE,GAAGJ;QAEPE;IAAtB,MAAMG,gBAAgBH,CAAAA,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAC7D,OAAO;QACLG,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMT,KAAKU,MAAM,CACfX,yBAAyBO,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FF,KAAKA;YACLO,MAAML,kBAAkB,QAAQ,aAAaM;YAC7C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}

node_modules/@fluentui/react-table/lib/components/TableHeader/useTableHeaderStyles.styles.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { mergeClasses, __styles } from '@griffel/react';
+export const tableHeaderClassName = 'fui-TableHeader';
+export const tableHeaderClassNames = {
+  root: 'fui-TableHeader'
+};
+const useFlexLayoutStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "ftgm304"
+  }
+}, {
+  d: [".ftgm304{display:block;}"]
+});
+const useTableLayoutStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f1tp1avn"
+  }
+}, {
+  d: [".f1tp1avn{display:table-row-group;}"]
+});
+/**
+ * Apply styling to the TableHeader slots based on the state
+ */
+export const useTableHeaderStyles_unstable = state => {
+  'use no memo';
+
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles()
+  };
+  state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-table/lib/components/TableHeader/useTableHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","__styles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","mc9l5x","d","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames = {\n    root: 'fui-TableHeader'\n};\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row-group'\n    }\n});\n/**\n * Apply styling to the TableHeader slots based on the state\n */ export const useTableHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,oBAAoB,GAAG,iBAAiB;AACrD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,mBAAmB,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI3B,CAAC;AACF,MAAMC,oBAAoB,gBAAGP,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAME,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAEJ,oBAAoB,CAAC,CAAC;IAC7BK,IAAI,EAAER,mBAAmB,CAAC;EAC9B,CAAC;EACDK,KAAK,CAACN,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,EAAEQ,KAAK,CAACK,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACT,IAAI,GAAGO,YAAY,CAACC,KAAK,CAACR,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACU,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-table/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js

@@ -0,0 +1,27 @@
+'use client';
+import { mergeClasses, makeStyles } from '@griffel/react';
+export const tableHeaderClassName = 'fui-TableHeader';
+export const tableHeaderClassNames = {
+    root: 'fui-TableHeader'
+};
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'block'
+    }
+});
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-row-group'
+    }
+});
+/**
+ * Apply styling to the TableHeader slots based on the state
+ */ export const useTableHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-table/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/useTableHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n  root: 'fui-TableHeader',\n};\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  'use no memo';\n\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","display","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAuB,kBAAkB;AACtD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBJ,WAAW;IACrCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA,MAAMC,uBAAuBN,WAAW;IACtCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,eAAe;QACnBC,OAAOJ;QACPK,MAAMP;IACR;IACAI,MAAML,IAAI,CAACS,SAAS,GAAGb,aACrBE,sBACAO,MAAMK,gBAAgB,GAAGJ,aAAaE,IAAI,CAACR,IAAI,GAAGM,aAAaC,KAAK,CAACP,IAAI,EACzEK,MAAML,IAAI,CAACS,SAAS;IAGtB,OAAOJ;AACT,EAAE"}