feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useTableHeaderCell_unstable } from './useTableHeaderCell';
+import { renderTableHeaderCell_unstable } from './renderTableHeaderCell';
+import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TableHeaderCell component
+ */ export const TableHeaderCell = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTableHeaderCell_unstable(props, ref);
+    useTableHeaderCellStyles_unstable(state);
+    useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state);
+    return renderTableHeaderCell_unstable(state);
+});
+TableHeaderCell.displayName = 'TableHeaderCell';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeaderCell component\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeaderCell_unstable(props, ref);\n\n  useTableHeaderCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state);\n\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","useCustomStyleHook_unstable","TableHeaderCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/TableHeaderCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * aside content for anything that should be after main content of the table header cell\n   */\n  aside: Slot<'span'>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * Whether the column is sortable\n   * @default false\n   */\n  sortable?: boolean;\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements'> &\n  Pick<TableHeaderCellProps, 'sortable'>;\n"],"names":[],"mappings":"AAkCA;;CAEC,GACD,WAEyC"}

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

@@ -0,0 +1,4 @@
+export { TableHeaderCell } from './TableHeaderCell';
+export { renderTableHeaderCell_unstable } from './renderTableHeaderCell';
+export { useTableHeaderCell_unstable } from './useTableHeaderCell';
+export { tableHeaderCellClassName, tableHeaderCellClassNames, useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/index.ts"],"sourcesContent":["export { TableHeaderCell } from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\nexport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nexport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nexport {\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n} from './useTableHeaderCellStyles.styles';\n"],"names":["TableHeaderCell","renderTableHeaderCell_unstable","useTableHeaderCell_unstable","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SACEC,wBAAwB,EACxBC,yBAAyB,EACzBC,iCAAiC,QAC5B,oCAAoC"}

node_modules/@fluentui/react-table/lib/components/TableHeaderCell/renderTableHeaderCell.js

@@ -0,0 +1,18 @@
+  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 TableHeaderCell
+ */ export const renderTableHeaderCell_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsxs(state.button, {
+                children: [
+                    state.root.children,
+                    state.sortIcon && /*#__PURE__*/ _jsx(state.sortIcon, {})
+                ]
+            }),
+            state.aside && /*#__PURE__*/ _jsx(state.aside, {})
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState): JSXElement => {\n  assertSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <state.root>\n      <state.button>\n        {state.root.children}\n        {state.sortIcon && <state.sortIcon />}\n      </state.button>\n      {state.aside && <state.aside />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTableHeaderCell_unstable","state","root","button","children","sortIcon","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,MAAM;;oBACVF,MAAMC,IAAI,CAACE,QAAQ;oBACnBH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;;;YAEnCJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;;;AAGlC,EAAE"}

node_modules/@fluentui/react-table/lib/components/TableHeaderCell/useTableHeaderCell.js

@@ -0,0 +1,70 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useFocusWithin } from '@fluentui/react-tabster';
+import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { useTableContext } from '../../contexts/tableContext';
+const sortIcons = {
+    ascending: /*#__PURE__*/ React.createElement(ArrowUpRegular, {
+        fontSize: 12
+    }),
+    descending: /*#__PURE__*/ React.createElement(ArrowDownRegular, {
+        fontSize: 12
+    })
+};
+/**
+ * Create the state required to render TableHeaderCell.
+ *
+ * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,
+ * before being passed to renderTableHeaderCell_unstable.
+ *
+ * @param props - props from this instance of TableHeaderCell
+ * @param ref - reference to root HTMLElement of TableHeaderCell
+ */ export const useTableHeaderCell_unstable = (props, ref)=>{
+    const { noNativeElements, sortable: contextSortable } = useTableContext();
+    const { sortable = contextSortable } = props;
+    var _props_as;
+    const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'th';
+    // The sort button is rendered as a div when not sortable, and as an ARIA button when sortable.
+    const buttonSlot = slot.always(props.button, {
+        elementType: 'div',
+        defaultProps: {
+            as: 'div'
+        }
+    });
+    const ariaButtonProps = useARIAButtonProps(buttonSlot.as, buttonSlot);
+    var _props_sortDirection;
+    return {
+        components: {
+            root: rootComponent,
+            button: 'div',
+            sortIcon: 'span',
+            aside: 'span'
+        },
+        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: useMergedRefs(ref, useFocusWithin()),
+            role: rootComponent === 'div' ? 'columnheader' : undefined,
+            'aria-sort': sortable ? (_props_sortDirection = props.sortDirection) !== null && _props_sortDirection !== void 0 ? _props_sortDirection : 'none' : undefined,
+            ...props
+        }), {
+            elementType: rootComponent
+        }),
+        aside: slot.optional(props.aside, {
+            elementType: 'span'
+        }),
+        sortIcon: slot.optional(props.sortIcon, {
+            renderByDefault: !!props.sortDirection,
+            defaultProps: {
+                children: props.sortDirection ? sortIcons[props.sortDirection] : undefined
+            },
+            elementType: 'span'
+        }),
+        button: sortable ? ariaButtonProps : buttonSlot,
+        sortable,
+        noNativeElements
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable: contextSortable } = useTableContext();\n  const { sortable = contextSortable } = props;\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n\n  // The sort button is rendered as a div when not sortable, and as an ARIA button when sortable.\n  const buttonSlot = slot.always<ARIAButtonSlotProps>(props.button, {\n    elementType: 'div',\n    defaultProps: {\n      as: 'div',\n    },\n  });\n  const ariaButtonProps = useARIAButtonProps(buttonSlot.as, buttonSlot);\n\n  return {\n    components: {\n      root: rootComponent,\n      button: 'div',\n      sortIcon: 'span',\n      aside: 'span',\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: useMergedRefs(ref, useFocusWithin()) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'columnheader' : undefined,\n        'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n        ...props,\n      } as const),\n      { elementType: rootComponent },\n    ),\n    aside: slot.optional(props.aside, { elementType: 'span' }),\n    sortIcon: slot.optional(props.sortIcon, {\n      renderByDefault: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n      elementType: 'span',\n    }),\n    button: sortable ? ariaButtonProps : buttonSlot,\n    sortable,\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonProps","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","contextSortable","rootComponent","as","buttonSlot","always","button","elementType","defaultProps","ariaButtonProps","components","root","sortIcon","aside","role","undefined","sortDirection","optional","renderByDefault","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,wBAAwB;AACzE,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAE/E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,YAAY;IAChBC,yBAAW,oBAACL;QAAeM,UAAU;;IACrCC,0BAAY,oBAACN;QAAiBK,UAAU;;AAC1C;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,UAAUC,eAAe,EAAE,GAAGV;IACxD,MAAM,EAAES,WAAWC,eAAe,EAAE,GAAGJ;QAEjBA;IAAtB,MAAMK,gBAAgBL,CAAAA,CAAAA,YAAAA,MAAMM,EAAE,cAARN,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,+FAA+F;IAC/F,MAAMK,aAAalB,KAAKmB,MAAM,CAAsBR,MAAMS,MAAM,EAAE;QAChEC,aAAa;QACbC,cAAc;YACZL,IAAI;QACN;IACF;IACA,MAAMM,kBAAkBnB,mBAAmBc,WAAWD,EAAE,EAAEC;QAgB5BP;IAd9B,OAAO;QACLa,YAAY;YACVC,MAAMT;YACNI,QAAQ;YACRM,UAAU;YACVC,OAAO;QACT;QACAF,MAAMzB,KAAKmB,MAAM,CACfrB,yBAAyBkB,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FJ,KAAKb,cAAca,KAAKX;YACxB2B,MAAMZ,kBAAkB,QAAQ,iBAAiBa;YACjD,aAAaf,WAAWH,CAAAA,uBAAAA,MAAMmB,aAAa,cAAnBnB,kCAAAA,uBAAuB,SAASkB;YACxD,GAAGlB,KAAK;QACV,IACA;YAAEU,aAAaL;QAAc;QAE/BW,OAAO3B,KAAK+B,QAAQ,CAACpB,MAAMgB,KAAK,EAAE;YAAEN,aAAa;QAAO;QACxDK,UAAU1B,KAAK+B,QAAQ,CAACpB,MAAMe,QAAQ,EAAE;YACtCM,iBAAiB,CAAC,CAACrB,MAAMmB,aAAa;YACtCR,cAAc;gBAAEW,UAAUtB,MAAMmB,aAAa,GAAGxB,SAAS,CAACK,MAAMmB,aAAa,CAAC,GAAGD;YAAU;YAC3FR,aAAa;QACf;QACAD,QAAQN,WAAWS,kBAAkBL;QACrCJ;QACAD;IACF;AACF,EAAE"}

node_modules/@fluentui/react-table/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js

@@ -0,0 +1,164 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableHeaderCellClassName = 'fui-TableHeaderCell';
+export const tableHeaderCellClassNames = {
+  root: 'fui-TableHeaderCell',
+  button: 'fui-TableHeaderCell__button',
+  sortIcon: 'fui-TableHeaderCell__sortIcon',
+  aside: 'fui-TableHeaderCell__aside'
+};
+const useTableLayoutStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f15pt5es",
+    ha4doy: "fmrv4ls"
+  }
+}, {
+  d: [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}"]
+});
+const useFlexLayoutStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    xawz: 0,
+    Bh6795r: 0,
+    Bnnss6s: 0,
+    fkmc3a: "f1izfyrr",
+    Bf4jedk: "f10tiqix"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", [".f1izfyrr{flex:1 1 0px;}", {
+    p: -1
+  }], ".f10tiqix{min-width:0px;}"]
+});
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bhrd7zp: "figsok6",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f3gpkru",
+    robkg1: 0,
+    Bmvh20x: 0,
+    B3nxjsc: 0,
+    Bmkhcsx: "f14ym4q2",
+    B8osjzx: 0,
+    pehzd3: 0,
+    Blsv9te: 0,
+    u7xebq: 0,
+    Bsvwmf7: "f1euou18",
+    qhf8xq: "f10pi13n"
+  },
+  rootInteractive: {
+    Bi91k9c: "feu1g3u",
+    Jwef8y: "f1t94bn6",
+    lj723h: "f1g4hkjv",
+    ecr2s2: "f1wfn5kd"
+  },
+  resetButton: {
+    B3rzk8w: "fq6nmtn",
+    B7ck84d: "f1e4lqlz",
+    De3pzq: "f1u2r49w",
+    sj55zd: "f1ym3bx4",
+    Bahqtrf: "f1mo0ibp",
+    Be2twd7: "fjoy568",
+    Bg96gwp: "fytdu2e",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1gl81tg",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
+    fsow6f: "fgusgyc"
+  },
+  button: {
+    qhf8xq: "f10pi13n",
+    a9b677: "fly5x3f",
+    mc9l5x: "f22iagw",
+    Bh6795r: 0,
+    Bqenvij: "f1l02sjl",
+    Bt984gj: "f122n59",
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "fkln5zr",
+    sshi5w: "f1nxs5xn",
+    xawz: 0,
+    Bnnss6s: 0,
+    fkmc3a: "f1izfyrr",
+    oeaueh: "f1s6fcnf"
+  },
+  sortable: {
+    Bceei9c: "f1k6fduh"
+  },
+  sortIcon: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    z8tnut: "fclwglc"
+  },
+  resizeHandle: {}
+}, {
+  d: [".figsok6{font-weight:var(--fontWeightRegular);}", [".f3gpkru{padding:0px var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".f14ym4q2[data-fui-focus-within]:focus-within{outline:2px solid var(--colorStrokeFocus2);}", {
+    p: -1
+  }], [".f1euou18[data-fui-focus-within]:focus-within{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f10pi13n{position:relative;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", [".f1gl81tg{overflow:visible;}", {
+    p: -1
+  }], [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], [".f3bhgqh{border:none;}", {
+    p: -2
+  }], ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{align-items:center;}", [".fkln5zr{gap:var(--spacingHorizontalXS);}", {
+    p: -1
+  }], ".f1nxs5xn{min-height:32px;}", [".f1izfyrr{flex:1 1 0px;}", {
+    p: -1
+  }], ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
+  a: [".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
+});
+/**
+ * Apply styling to the TableHeaderCell slots based on the state
+ */
+export const useTableHeaderCellStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles()
+  };
+  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+  state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
+  if (state.sortIcon) {
+    state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
+  }
+  if (state.aside) {
+    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-table/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js

@@ -0,0 +1,102 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableHeaderCellClassName = 'fui-TableHeaderCell';
+export const tableHeaderCellClassNames = {
+    root: 'fui-TableHeaderCell',
+    button: 'fui-TableHeaderCell__button',
+    sortIcon: 'fui-TableHeaderCell__sortIcon',
+    aside: 'fui-TableHeaderCell__aside'
+};
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-cell',
+        verticalAlign: 'middle'
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flex: '1 1 0px',
+        minWidth: '0px'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        fontWeight: tokens.fontWeightRegular,
+        padding: `0px ${tokens.spacingHorizontalS}`,
+        ...createCustomFocusIndicatorStyle({
+            outline: `2px solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium
+        }, {
+            selector: 'focus-within'
+        }),
+        position: 'relative'
+    },
+    rootInteractive: {
+        ':hover': {
+            color: tokens.colorNeutralForeground1Hover,
+            backgroundColor: tokens.colorSubtleBackgroundHover
+        },
+        ':active': {
+            color: tokens.colorNeutralForeground1Pressed,
+            backgroundColor: tokens.colorSubtleBackgroundPressed
+        }
+    },
+    resetButton: {
+        resize: 'horizontal',
+        boxSizing: 'content-box',
+        backgroundColor: 'inherit',
+        color: 'inherit',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'normal',
+        overflow: 'visible',
+        padding: '0',
+        border: 'none',
+        textAlign: 'unset'
+    },
+    button: {
+        position: 'relative',
+        width: '100%',
+        display: 'flex',
+        flexGrow: 1,
+        height: '100%',
+        alignItems: 'center',
+        gap: tokens.spacingHorizontalXS,
+        minHeight: '32px',
+        flex: '1 1 0px',
+        outlineStyle: 'none'
+    },
+    sortable: {
+        cursor: 'pointer'
+    },
+    sortIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingTop: tokens.spacingVerticalXXS
+    },
+    resizeHandle: {}
+});
+/**
+ * Apply styling to the TableHeaderCell slots based on the state
+ */ export const useTableHeaderCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
+    if (state.sortIcon) {
+        state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
+    }
+    if (state.aside) {
+        state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+    }
+    return state;
+};