npm - @fluentui/react-table - Versions diffs - 9.0.0-alpha.6 → 9.0.0-alpha.7 - Mend

@fluentui/react-table 9.0.0-alpha.6 → 9.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,108 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Thu, 13 Oct 2022 12:55:52 GMT",
+      "date": "Thu, 20 Oct 2022 08:35:25 GMT",
+      "tag": "@fluentui/react-table_v9.0.0-alpha.7",
+      "version": "9.0.0-alpha.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "15b7b57ee484f8d500b3c7afb9aa46c17a9beaeb",
+            "comment": "fix: Row and header interactive styles are separate"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "bd212e73e6a6e3c92495b793c6e682c24f27b6db",
+            "comment": "feat(TableSelectionCell): Use Radio component, adds subtle and hidden"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
+            "comment": "chore: Bump peer deps to support React 18"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "06865dada128321804646582f564ee86d835d174",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "66bf477e336a9248e138e31ee6e58d9672da8f8f",
+            "comment": "feat: Add `appearance` prop to `TableRow`"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.2.3",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.2.3",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.0.9",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.0.9",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.2.0",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-theme to v9.1.1",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.1.2",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
+            "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "5280dfeda349453f42b51ae49c9d128bc322c609",
+            "comment": "docs: Remove row navigation"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-table",
+            "commit": "433209a6b5e8adb7619d3658c1606ec8adb02745",
+            "comment": "docs: Update keyboard navigation examples to use `useArrowNavigationGroup`"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Oct 2022 12:56:30 GMT",
       "tag": "@fluentui/react-table_v9.0.0-alpha.6",
       "version": "9.0.0-alpha.6",
       "comments": {
@@ -11,7 +112,7 @@
             "author": "beachball",
             "package": "@fluentui/react-table",
             "comment": "Bump @fluentui/react-avatar to v9.2.2",
-            "commit": "e563f3daaea9b7cc62f50bc15edd44edf5045107"
+            "commit": "77301c97c0539b9ebf891642eb0a077d1aeae9a6"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,17 +1,38 @@
 # Change Log - @fluentui/react-table
-This log was last generated on Thu, 13 Oct 2022 12:55:52 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Oct 2022 08:35:25 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.7)
+Thu, 20 Oct 2022 08:35:25 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.6..@fluentui/react-table_v9.0.0-alpha.7)
+### Changes
+- fix: Row and header interactive styles are separate ([PR #25201](https://github.com/microsoft/fluentui/pull/25201) by lingfangao@hotmail.com)
+- feat(TableSelectionCell): Use Radio component, adds subtle and hidden ([PR #25202](https://github.com/microsoft/fluentui/pull/25202) by lingfangao@hotmail.com)
+- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
+- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
+- feat: Add `appearance` prop to `TableRow` ([PR #25192](https://github.com/microsoft/fluentui/pull/25192) by lingfangao@hotmail.com)
+- Bump @fluentui/react-aria to v9.2.3 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-avatar to v9.2.3 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-checkbox to v9.0.9 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-radio to v9.0.9 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-tabster to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
 ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.6)
-Thu, 13 Oct 2022 12:55:52 GMT
+Thu, 13 Oct 2022 12:56:30 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.5..@fluentui/react-table_v9.0.0-alpha.6)
 ### Changes
-- Bump @fluentui/react-avatar to v9.2.2 ([PR #25112](https://github.com/microsoft/fluentui/pull/25112) by beachball)
+- Bump @fluentui/react-avatar to v9.2.2 ([PR #25119](https://github.com/microsoft/fluentui/pull/25119) by beachball)
 ## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.5)

package/dist/index.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import type { CheckboxProps } from '@fluentui/react-checkbox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { Radio } from '@fluentui/react-radio';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -329,7 +330,13 @@ export declare const tableRowClassNames: SlotClassNames<TableRowSlots>;
 /**
  * TableRow Props
  */
-export declare type TableRowProps = ComponentProps<TableRowSlots> & {};
+export declare type TableRowProps = ComponentProps<TableRowSlots> & {
+    /**
+     * A table row can have different variants
+     * @default none
+     */
+    appearance?: 'brand' | 'neutral' | 'none';
+};
 export declare type TableRowSlots = {
     root: Slot<'tr', 'div'>;
@@ -338,7 +345,7 @@ export declare type TableRowSlots = {
 /**
  * State used in rendering TableRow
  */
-export declare type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;
+export declare type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'> & Pick<Required<TableRowProps>, 'appearance'>;
 /**
  * TableSelectionCell component - TODO: add more docs
@@ -356,6 +363,14 @@ export declare type TableSelectionCellProps = ComponentProps<Partial<Omit<TableS
      */
     type?: 'checkbox' | 'radio';
     checked?: CheckboxProps['checked'];
+    /**
+     * Only visible when checked or the parent row is hovered
+     */
+    subtle?: boolean;
+    /**
+     * Completely hides the selection cell visually but takes up the same space
+     */
+    hidden?: boolean;
 };
 export declare type TableSelectionCellSlots = {
@@ -366,13 +381,13 @@ export declare type TableSelectionCellSlots = {
     /**
      * Selection indicator if selection type is radio
      */
-    radioIndicator: Slot<'span'>;
+    radioIndicator: Slot<typeof Radio>;
 } & Pick<TableCellSlots, 'root'>;
 /**
  * State used in rendering TableSelectionCell
  */
-export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'> & Pick<TableContextValue, 'noNativeElements'>;
+export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> & Pick<TableContextValue, 'noNativeElements'>;
 export declare interface TableSelectionState {
     /**

package/lib/components/Table/useTableStyles.js CHANGED Viewed

@@ -31,10 +31,10 @@ const useFlexLayoutStyles = /*#__PURE__*/__styles({
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "po53p8": "fgkb47j",
-    "De3pzq": "fxugw4r"
+    "De3pzq": "fhovq9v"
   }
 }, {
-  "d": [".fgkb47j{border-collapse:collapse;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}"]
+  "d": [".fgkb47j{border-collapse:collapse;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"]
 });
 /**
  * Apply styling to the Table slots based on the state

package/lib/components/Table/useTableStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AASA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAMA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHpC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAdM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table',\n verticalAlign: 'middle',\n width: '100%',\n tableLayout: 'fixed',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'block',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n borderCollapse: 'collapse',\n backgroundColor: tokens.~~colorNeutralBackground1~~,\n },\n});\n\n/\n Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableClassName,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-table/src/components/Table/useTableStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AASA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAMA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHpC,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAdM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table',\n verticalAlign: 'middle',\n width: '100%',\n tableLayout: 'fixed',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'block',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n borderCollapse: 'collapse',\n backgroundColor: tokens.colorSubtleBackground,\n },\n});\n\n/\n Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableClassName,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableHeader/renderTableHeader.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
+import { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';
 /**
  * Render the final JSX of TableHeader
  */
@@ -9,7 +10,9 @@ export const renderTableHeader_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  });
+  return /*#__PURE__*/React.createElement(TableHeaderContextProvider, {
+    value: ""
+  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }));
 };
 //# sourceMappingURL=renderTableHeader.js.map

package/lib/components/TableHeader/renderTableHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,~~oBAAO~~,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,~~CAAP~~;~~AACD~~,~~CAJM~~","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/*\n Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n const { slots, slotProps } = getSlots<TableHeaderSlots>(state);\n\n return <slots.root {...slotProps.root} ~~/>;\~~n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;IAAC,KAAK,EAAC;EAAP,CAA3B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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) => {\n const { slots, slotProps } = getSlots<TableHeaderSlots>(state);\n\n return (\n <TableHeaderContextProvider value=\"\">\n <slots.root {...slotProps.root} />\n </TableHeaderContextProvider>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js CHANGED Viewed

@@ -39,6 +39,10 @@ const useStyles = /*#__PURE__*/__styles({
     "Byoj8tv": "f1ov4xf1",
     "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
   },
+  "rootInteractive": {
+    "Jwef8y": "f1t94bn6",
+    "ecr2s2": "f1wfn5kd"
+  },
   "resetButton": {
     "B3rzk8w": "fq6nmtn",
     "B7ck84d": "f1e4lqlz",
@@ -81,7 +85,9 @@ const useStyles = /*#__PURE__*/__styles({
     "Bt984gj": "f122n59"
   }
 }, {
-  "d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".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;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"]
+  "d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".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;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"],
+  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
+  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
  * Apply styling to the TableHeaderCell slots based on the state
@@ -94,7 +100,7 @@ export const useTableHeaderCellStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
-  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+  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) {

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;;AAMP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;~~AAwCA~~;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,yBAAyB,CAAC,IADO,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,~~IAHpC~~,~~EAIjC~~,KAAK,CAAC,IAAN,CAAW,~~SAJsB~~,CAAnC;~~EAMA~~,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,~~CA7BM~~","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '0px',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n },\n\n resetButton: {\n resize: 'horizontal',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n button: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\n minHeight: '44px',\n ...shorthands.flex(1, 1, '0px'),\n },\n sortable: {\n cursor: 'pointer',\n },\n\n sortIcon: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/\n Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableHeaderCellClassNames.root,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n state.button.className = mergeClasses(\n tableHeaderCellClassNames.button,\n styles.resetButton,\n styles.button,\n state.sortable && styles.sortable,\n state.button.className,\n );\n\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(\n tableHeaderCellClassNames.sortIcon,\n styles.sortIcon,\n state.sortIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;;AAMP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiDA;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,yBAAyB,CAAC,IADO,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,eAHQ,EAIjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJpC,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '0px',\n },\n});\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n },\n\n rootInteractive: {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n resetButton: {\n resize: 'horizontal',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n button: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalS),\n minHeight: '44px',\n ...shorthands.flex(1, 1, '0px'),\n },\n sortable: {\n cursor: 'pointer',\n },\n\n sortIcon: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/\n Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableHeaderCellClassNames.root,\n styles.root,\n state.sortable && styles.rootInteractive,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n state.button.className = mergeClasses(\n tableHeaderCellClassNames.button,\n styles.resetButton,\n styles.button,\n state.sortable && styles.sortable,\n state.button.className,\n );\n\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(\n tableHeaderCellClassNames.sortIcon,\n styles.sortIcon,\n state.sortIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableRow/TableRow.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/TableRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n root: Slot<'tr', 'div'>;\n};\n\n/*\n TableRow Props\n /\nexport type TableRowProps = ComponentProps<TableRowSlots> & {};\n\n/\n State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' \| 'size'>;\n"]}
1	+ {"version":3,"file":"TableRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/TableRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n root: Slot<'tr', 'div'>;\n};\n\n/*\n TableRow Props\n /\nexport type TableRowProps = ComponentProps<TableRowSlots> & {\n /\n A table row can have different variants\n * @default none\n /\n appearance?: 'brand' \| 'neutral' \| 'none';\n};\n\n/\n State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> &\n Pick<TableContextValue, 'noNativeElements' \| 'size'> &\n Pick<Required<TableRowProps>, 'appearance'>;\n"]}

package/lib/components/TableRow/useTableRow.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import { useTableContext } from '../../contexts/tableContext';
+import { useFocusVisible } from '@fluentui/react-tabster';
 /**
  * Create the state required to render TableRow.
  *
@@ -11,24 +12,26 @@ import { useTableContext } from '../../contexts/tableContext';
  */
 export const useTableRow_unstable = (props, ref) => {
-  var _a;
+  var _a, _b;
   const {
     noNativeElements,
     size
   } = useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr';
+  const focusVisibleRef = useFocusVisible();
   return {
     components: {
       root: rootComponent
     },
     root: getNativeElementProps(rootComponent, {
-      ref,
+      ref: useMergedRefs(ref, focusVisibleRef),
       role: rootComponent === 'div' ? 'row' : undefined,
       ...props
     }),
     size,
-    noNativeElements
+    noNativeElements,
+    appearance: (_b = props.appearance) !== null && _b !== void 0 ? _b : 'none'
   };
 };
 //# sourceMappingURL=useTableRow.js.map

package/lib/components/TableRow/useTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,~~QAAsC~~,~~2BAAtC~~;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,eAAe,EAAlD;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,~~GADyC~~;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL,IATK;IAUL;~~EAVK~~,CAAP;~~AAYD~~,~~CAhBM~~","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/*\n Create the state required to render TableRow.\n \n The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n \n @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n const { noNativeElements, size } = useTableContext();\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref,\n role: rootComponent === 'div' ? 'row' : undefined,\n ...props,\n }),\n size,\n noNativeElements,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,eAAT,QAAgC,yBAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,eAAe,EAAlD;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,MAAM,eAAe,GAAG,eAAe,EAAvC;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,eAAN,CADuB;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL,IATK;IAUL,gBAVK;IAWL,UAAU,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;EAX3B,CAAP;AAaD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusVisible } from '@fluentui/react-tabster';\n\n/*\n Create the state required to render TableRow.\n \n The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n \n @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n const { noNativeElements, size } = useTableContext();\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n const focusVisibleRef = useFocusVisible();\n\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref: useMergedRefs(ref, focusVisibleRef),\n role: rootComponent === 'div' ? 'row' : undefined,\n ...props,\n }),\n size,\n noNativeElements,\n appearance: props.appearance ?? 'none',\n };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableRow/useTableRowStyles.js CHANGED Viewed

@@ -1,6 +1,9 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';
+import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 export const tableRowClassName = 'fui-TableRow';
 export const tableRowClassNames = {
   root: tableRowClassName
@@ -48,11 +51,28 @@ const useFlexLayoutStyles = /*#__PURE__*/__styles({
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "sj55zd": "f19n0e5",
-    "Jwef8y": "f1knas48",
+    "B7ck84d": "f1ewtqcl",
+    "Befpiv7": "fblfkud",
+    "Bn4voq9": "fz36nt7",
+    "g9k6zt": "f9znhxp",
+    "kdpuga": ["f1o2ludy", "f1kjnpwc"],
+    "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
+    "B6xbmo0": ["fxmnebo", "f1witrsb"],
+    "dm238s": ["f1witrsb", "fxmnebo"]
+  },
+  "rootInteractive": {
+    "ecr2s2": "f1wfn5kd",
+    "lj723h": "f1g4hkjv",
+    "Bw1l9kw": "flaujjr",
+    "B43xm9u": "f15ngxrw",
+    "Bs8fhbl": "fd28r7f",
+    "i921ia": "fjbbrdp",
+    "Jwef8y": "f1t94bn6",
     "Bi91k9c": "feu1g3u",
     "Bi7d7a3": "f1boln4s",
     "Bpt6rm4": "f1uorfem",
-    "B7ck84d": "f1ewtqcl"
+    "Bt8cqyk": "frasl6z",
+    "ff6mpl": "fw60kww"
   },
   "medium": {
     "Bn0qgzm": "f1vxd6vx",
@@ -66,10 +86,141 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "smaller": {
     "Be2twd7": "fy9rknc"
-  }
+  },
+  "brand": {
+    "De3pzq": "f16xkysk",
+    "sj55zd": "f1cgsbmv",
+    "g2u3we": "frmsihh",
+    "h3c5rm": ["frttxa5", "f11o2r7f"],
+    "B9xav0g": "fem5et0",
+    "zhjwy3": ["f11o2r7f", "frttxa5"],
+    "Jwef8y": "f121v1wq",
+    "ecr2s2": "ftepret",
+    "gwxt9v": "fqlf3fd",
+    "v3aym": ["f9dpb3h", "fw2muls"],
+    "Bc736ss": "f1yat0gj",
+    "Bk6ri7n": ["fw2muls", "f9dpb3h"],
+    "Bk5ld8o": "f7nae3y",
+    "c4eypz": ["fkbere7", "fa97sf3"],
+    "felo30": "fmtyzcc",
+    "Eshu5l": ["fa97sf3", "fkbere7"],
+    "Bjwas2f": "fb6zhgp",
+    "Bn1d65q": ["fyowp6c", "fz08sq8"],
+    "Bxeuatn": "f9dii88",
+    "n51gp8": ["fz08sq8", "fyowp6c"],
+    "Beo2b4z": ["f1afxoft", "flqq2yx"],
+    "h6lo6r": ["flqq2yx", "f1afxoft"],
+    "Btyw6ap": ["f1b5xrmd", "f1831rx6"],
+    "w1pwid": ["f1831rx6", "f1b5xrmd"],
+    "Brwvgy3": "fd94n53",
+    "yadkgm": "f1e0wld5"
+  },
+  "neutral": {
+    "gwxt9v": "fqlf3fd",
+    "v3aym": ["f9dpb3h", "fw2muls"],
+    "Bc736ss": "f1yat0gj",
+    "Bk6ri7n": ["fw2muls", "f9dpb3h"],
+    "Bk5ld8o": "f7nae3y",
+    "c4eypz": ["fkbere7", "fa97sf3"],
+    "felo30": "fmtyzcc",
+    "Eshu5l": ["fa97sf3", "fkbere7"],
+    "Bjwas2f": "fb6zhgp",
+    "Bn1d65q": ["fyowp6c", "fz08sq8"],
+    "Bxeuatn": "f9dii88",
+    "n51gp8": ["fz08sq8", "fyowp6c"],
+    "Beo2b4z": ["f1afxoft", "flqq2yx"],
+    "h6lo6r": ["flqq2yx", "f1afxoft"],
+    "Btyw6ap": ["f1b5xrmd", "f1831rx6"],
+    "w1pwid": ["f1831rx6", "f1b5xrmd"],
+    "Brwvgy3": "fd94n53",
+    "yadkgm": "f1e0wld5",
+    "De3pzq": "fq5gl1p",
+    "sj55zd": "f1cgsbmv",
+    "Jwef8y": "f1uqaxdt",
+    "ecr2s2": "fa9o754",
+    "g2u3we": "frmsihh",
+    "h3c5rm": ["frttxa5", "f11o2r7f"],
+    "B9xav0g": "fem5et0",
+    "zhjwy3": ["f11o2r7f", "frttxa5"]
+  },
+  "none": {}
 }, {
-  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
+  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fd28r7f:active .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".frasl6z:hover .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 /**
  * Apply styling to the TableRow slots based on the state
@@ -77,12 +228,13 @@ const useStyles = /*#__PURE__*/__styles({
 export const useTableRowStyles_unstable = state => {
+  const isHeaderRow = useIsInTableHeader();
   const styles = useStyles();
   const layoutStyles = {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
-  state.root.className = mergeClasses(tableRowClassNames.root, styles.root, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
+  state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], styles[state.appearance], state.root.className);
   return state;
 };
 //# sourceMappingURL=useTableRowStyles.js.map