@fluentui/react-table 9.0.0-alpha.9 → 9.0.0-rc.2

package/lib/components/TableRow/useTableRowStyles.js

@@ -3,238 +3,213 @@ 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
 };
-
 const useTableLayoutStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f1u0rzck"
-  },
-  "medium": {
-    "Bqenvij": "f1ft4266"
-  },
-  "small": {
-    "Bqenvij": "fbsu25e"
-  },
-  "smaller": {
-    "Bqenvij": "frvgh55"
+  root: {
+    mc9l5x: "f1u0rzck"
   }
 }, {
-  "d": [".f1u0rzck{display:table-row;}", ".f1ft4266{height:44px;}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}"]
+  d: [".f1u0rzck{display:table-row;}"]
 });
-
 const useFlexLayoutStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59"
-  },
-  "medium": {
-    "sshi5w": "f5pgtk9"
-  },
-  "small": {
-    "sshi5w": "fcep9tg"
-  },
-  "smaller": {
-    "sshi5w": "f1pha7fy"
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".fcep9tg{min-height:34px;}", ".f1pha7fy{min-height:24px;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
 });
 /**
  * Styles for the root slot
  */
-
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "sj55zd": "f19n0e5",
-    "B7ck84d": "f1ewtqcl",
-    "Befpiv7": "fblfkud",
-    "Bn4voq9": "fz36nt7",
-    "g9k6zt": "f9znhxp",
-    "kdpuga": ["f1o2ludy", "f1kjnpwc"],
-    "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
-    "B6xbmo0": ["fxmnebo", "f1witrsb"],
-    "dm238s": ["f1witrsb", "fxmnebo"]
+  root: {
+    sj55zd: "f19n0e5",
+    B7ck84d: "f1ewtqcl",
+    Bconypa: "f1jazu75",
+    B6guboy: "f1xeqee6",
+    Bn4voq9: "fz36nt7",
+    g9k6zt: "f9znhxp",
+    Bfpq7zp: "fqrak0z",
+    kdpuga: ["f1o2ludy", "f1kjnpwc"],
+    Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
+    B6xbmo0: ["fxmnebo", "f1witrsb"],
+    dm238s: ["f1witrsb", "fxmnebo"]
+  },
+  noAppearanceFocusWithin: {
+    Bm5rygw: "f13cic75"
   },
-  "rootInteractive": {
-    "ecr2s2": "f1wfn5kd",
-    "lj723h": "f1g4hkjv",
-    "Bw1l9kw": "flaujjr",
-    "B43xm9u": "f15ngxrw",
-    "Bs8fhbl": "fd28r7f",
-    "i921ia": "fjbbrdp",
-    "Jwef8y": "f1t94bn6",
-    "Bi91k9c": "feu1g3u",
-    "Bi7d7a3": "f1boln4s",
-    "Bpt6rm4": "f1uorfem",
-    "Bt8cqyk": "frasl6z",
-    "ff6mpl": "fw60kww"
+  rootInteractive: {
+    ecr2s2: "f1wfn5kd",
+    lj723h: "f1g4hkjv",
+    B43xm9u: "f15ngxrw",
+    i921ia: "fjbbrdp",
+    Jwef8y: "f1t94bn6",
+    Bi91k9c: "feu1g3u",
+    Bpt6rm4: "f1uorfem",
+    ff6mpl: "fw60kww"
   },
-  "medium": {
-    "Bn0qgzm": "f1vxd6vx",
-    "oivjwe": "fg706s2",
-    "B9xav0g": "frpde29"
+  medium: {
+    Bn0qgzm: "f1vxd6vx",
+    oivjwe: "fg706s2",
+    B9xav0g: "frpde29"
   },
-  "small": {
-    "Bn0qgzm": "f1vxd6vx",
-    "oivjwe": "fg706s2",
-    "B9xav0g": "frpde29"
+  small: {
+    Bn0qgzm: "f1vxd6vx",
+    oivjwe: "fg706s2",
+    B9xav0g: "frpde29"
   },
-  "smaller": {
-    "Be2twd7": "fy9rknc"
+  "extra-small": {
+    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"
+  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"]
+  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": {}
+  none: {}
 }, {
-  "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)"
+  d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}", ".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".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);}", ".f13cic75[data-fui-focus-within]:focus-within{background-color:var(--colorSubtleBackgroundHover);}", ".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);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".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);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".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)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    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)"
+    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)"
+    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)"
+    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)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
-    "m": "(forced-colors: active)"
+    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)"
+    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)"
+    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)"
+    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)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
-    "m": "(forced-colors: active)"
+    m: "(forced-colors: active)"
   }]]
 });
 /**
  * Apply styling to the TableRow slots based on the state
  */
-
-
 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, !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);
+  state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.appearance === 'none' && !state.isHeaderRow && styles.noAppearanceFocusWithin, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTableRowStyles.js.map

package/lib/components/TableRow/useTableRowStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,0BAAT,QAA2C,+CAA3C;AACA,SAAS,4BAAT,QAA6C,mDAA7C;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAkBA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAmBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAwGA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,WAAW,GAAG,kBAAkB,EAAtC;EACA,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,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,WAAD,IAAgB,MAAM,CAAC,eAHU,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IALpC,EAMjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CANxB,EAOjC,MAAM,CAAC,KAAK,CAAC,UAAP,CAP2B,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;EAWA,OAAO,KAAP;AACD,CAnBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  smaller: {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  smaller: {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const isHeaderRow = useIsInTableHeader();\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    styles[state.appearance],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAG9C,SAASC,0BAA0B,QAAQ,+CAA+C;AAC1F,SAASC,4BAA4B,QAAQ,mDAAmD;AAChG,SAASC,+BAA+B,QAAQ,yBAAyB;AAEzE,OAAO,MAAMC,iBAAiB,GAAG,cAAc;AAC/C,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAEF;CACP;AAED,MAAMG,oBAAoB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAkHhB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACL,IAAI,CAACU,SAAS,GAAGlB,YAAY,CACjCO,kBAAkB,CAACC,IAAI,EACvBM,MAAM,CAACN,IAAI,EACX,CAACK,KAAK,CAACM,WAAW,IAAIL,MAAM,CAACM,eAAe,EAC5CN,MAAM,CAACD,KAAK,CAACQ,IAAI,CAAC,EAClBR,KAAK,CAACS,gBAAgB,GAAGP,YAAY,CAACE,IAAI,CAACT,IAAI,GAAGO,YAAY,CAACC,KAAK,CAACR,IAAI,EACzEM,MAAM,CAACD,KAAK,CAACU,UAAU,CAAC,EACxBV,KAAK,CAACU,UAAU,KAAK,MAAM,IAAI,CAACV,KAAK,CAACM,WAAW,IAAIL,MAAM,CAACU,uBAAuB,EACnFX,KAAK,CAACL,IAAI,CAACU,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","rootInteractive","size","noNativeElements","appearance","noAppearanceFocusWithin"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n        [`& .${tableCellActionsClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  // When focus is within the row the background colour\n  // should be the same as hover, except when there is a brand\n  // or neutral appearance applied on the row\n  noAppearanceFocusWithin: {\n    ...createCustomFocusIndicatorStyle(\n      {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  'extra-small': {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !state.isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    styles[state.appearance],\n    state.appearance === 'none' && !state.isHeaderRow && styles.noAppearanceFocusWithin,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib/components/TableSelectionCell/TableSelectionCell.js

@@ -3,9 +3,8 @@ import { useTableSelectionCell_unstable } from './useTableSelectionCell';
 import { renderTableSelectionCell_unstable } from './renderTableSelectionCell';
 import { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles';
 /**
- * TableSelectionCell component - TODO: add more docs
+ * TableSelectionCell component
  */
-
 export const TableSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableSelectionCell_unstable(props, ref);
   useTableSelectionCellStyles_unstable(state);

package/lib/components/TableSelectionCell/TableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAIA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,EAAQ,GAAR,CAA5C;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,iCAAiC,CAAC,KAAD,CAAxC;AACD,CAL+E,CAAzE;AAOP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableSelectionCell component - TODO: add more docs\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableSelectionCell_unstable(props, ref);\n\n  useTableSelectionCellStyles_unstable(state);\n  return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,oCAAoC,QAAQ,+BAA+B;AAIpF;;;AAGA,OAAO,MAAMC,kBAAkB,gBAAiDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9G,MAAMC,KAAK,GAAGP,8BAA8B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAExDJ,oCAAoC,CAACK,KAAK,CAAC;EAC3C,OAAON,iCAAiC,CAACM,KAAK,CAAC;AACjD,CAAC,CAAC;AAEFJ,kBAAkB,CAACK,WAAW,GAAG,oBAAoB","names":["React","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","useTableSelectionCellStyles_unstable","TableSelectionCell","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableSelectionCell_unstable(props, ref);\n\n  useTableSelectionCellStyles_unstable(state);\n  return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"]}

package/lib/components/TableSelectionCell/TableSelectionCell.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSelectionCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\nimport { TableCellSlots } from '../TableCell/TableCell.types';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableSelectionCellSlots = {\n  /**\n   * Selection indicator if selection type is checkbox\n   */\n  checkboxIndicator: Slot<typeof Checkbox>;\n  /**\n   * Selection indicator if selection type is radio\n   */\n  radioIndicator: Slot<typeof Radio>;\n} & Pick<TableCellSlots, 'root'>;\n\n/**\n * TableSelectionCell Props\n */\nexport type TableSelectionCellProps = ComponentProps<Partial<Omit<TableSelectionCellSlots, 'media'>>> & {\n  /**\n   * A table can have two kinds of selection modes\n   */\n  type?: 'checkbox' | 'radio';\n  checked?: CheckboxProps['checked'];\n  /**\n   * Only visible when checked or the parent row is hovered\n   */\n  subtle?: boolean;\n\n  /**\n   * Completely hides the selection cell visually but takes up the same space\n   */\n  hidden?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n  Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> &\n  Pick<TableContextValue, 'noNativeElements'>;\n"]}
+{"version":3,"file":"TableSelectionCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\nimport { TableCellSlots } from '../TableCell/TableCell.types';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableSelectionCellSlots = {\n  /**\n   * Selection indicator if selection type is checkbox\n   */\n  checkboxIndicator: Slot<typeof Checkbox>;\n  /**\n   * Selection indicator if selection type is radio\n   */\n  radioIndicator: Slot<typeof Radio>;\n} & Pick<TableCellSlots, 'root'>;\n\n/**\n * TableSelectionCell Props\n */\nexport type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {\n  /**\n   * A table can have two kinds of selection modes.\n   * @default checkbox\n   */\n  type?: 'checkbox' | 'radio';\n\n  /**\n   * @default false\n   */\n  checked?: CheckboxProps['checked'];\n\n  /**\n   * Only visible when checked or the parent row is hovered/focused\n   * @default false\n   */\n  subtle?: boolean;\n\n  /**\n   * Completely hides the selection cell visually but takes up the same space\n   * @default false\n   */\n  hidden?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n  Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> &\n  Pick<TableContextValue, 'noNativeElements'>;\n"]}

package/lib/components/TableSelectionCell/renderTableSelectionCell.js

@@ -3,15 +3,17 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableSelectionCell
  */
-
 export const renderTableSelectionCell_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, state.type === 'checkbox' && slots.checkboxIndicator && /*#__PURE__*/React.createElement(slots.checkboxIndicator, { ...slotProps.checkboxIndicator
-  }), state.type === 'radio' && slots.radioIndicator && /*#__PURE__*/React.createElement(slots.radioIndicator, { ...slotProps.radioIndicator
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, state.type === 'checkbox' && slots.checkboxIndicator && /*#__PURE__*/React.createElement(slots.checkboxIndicator, {
+    ...slotProps.checkboxIndicator
+  }), state.type === 'radio' && slots.radioIndicator && /*#__PURE__*/React.createElement(slots.radioIndicator, {
+    ...slotProps.radioIndicator
   }));
 };
 //# sourceMappingURL=renderTableSelectionCell.js.map

package/lib/components/TableSelectionCell/renderTableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAmC;EAClF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA0B,KAA1B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,KAAe,UAAf,IAA6B,KAAK,CAAC,iBAAnC,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,CAFJ,EAIG,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,KAAK,CAAC,cAAhC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAJrD,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  const { slots, slotProps } = getSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.type === 'checkbox' && slots.checkboxIndicator && (\n        <slots.checkboxIndicator {...slotProps.checkboxIndicator} />\n      )}\n      {state.type === 'radio' && slots.radioIndicator && <slots.radioIndicator {...slotProps.radioIndicator} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA8B,IAAI;EAClF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA0BE,KAAK,CAAC;EAErE,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BH,KAAK,CAACI,IAAI,KAAK,UAAU,IAAIH,KAAK,CAACI,iBAAiB,iBACnDR,oBAACI,KAAK,CAACI,iBAAiB;IAAA,GAAKH,SAAS,CAACG;EAAiB,EACzD,EACAL,KAAK,CAACI,IAAI,KAAK,OAAO,IAAIH,KAAK,CAACK,cAAc,iBAAIT,oBAACI,KAAK,CAACK,cAAc;IAAA,GAAKJ,SAAS,CAACI;EAAc,EAAI,CAC9F;AAEjB,CAAC","names":["React","getSlots","renderTableSelectionCell_unstable","state","slots","slotProps","root","type","checkboxIndicator","radioIndicator"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  const { slots, slotProps } = getSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.type === 'checkbox' && slots.checkboxIndicator && (\n        <slots.checkboxIndicator {...slotProps.checkboxIndicator} />\n      )}\n      {state.type === 'radio' && slots.radioIndicator && <slots.radioIndicator {...slotProps.radioIndicator} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/TableSelectionCell/useTableSelectionCell.js

@@ -1,4 +1,4 @@
-import { resolveShorthand } from '@fluentui/react-utilities';
+import { resolveShorthand, useId } from '@fluentui/react-utilities';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
 import { useTableCell_unstable } from '../TableCell/useTableCell';
@@ -12,7 +12,6 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param props - props from this instance of TableSelectionCell
  * @param ref - reference to root HTMLElement of TableSelectionCell
  */
-
 export const useTableSelectionCell_unstable = (props, ref) => {
   const tableCellState = useTableCell_unstable(props, ref);
   const {
@@ -24,8 +23,10 @@ export const useTableSelectionCell_unstable = (props, ref) => {
     subtle = false,
     hidden = false
   } = props;
-  return { ...tableCellState,
-    components: { ...tableCellState.components,
+  return {
+    ...tableCellState,
+    components: {
+      ...tableCellState.components,
       checkboxIndicator: Checkbox,
       radioIndicator: Radio
     },
@@ -38,7 +39,10 @@ export const useTableSelectionCell_unstable = (props, ref) => {
     radioIndicator: resolveShorthand(props.radioIndicator, {
       required: type === 'radio',
       defaultProps: {
-        checked: !!checked
+        checked: !!checked,
+        input: {
+          name: useId('table-selection-radio')
+        }
       }
     }),
     type,

package/lib/components/TableSelectionCell/useTableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,QAAT,QAAyB,0BAAzB;AACA,SAAS,KAAT,QAAsB,uBAAtB;AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,cAAc,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAA5C;EACA,MAAM;IAAE;EAAF,IAAuB,eAAe,EAA5C;EACA,MAAM;IAAE,IAAI,GAAG,UAAT;IAAqB,OAAO,GAAG,KAA/B;IAAsC,MAAM,GAAG,KAA/C;IAAsD,MAAM,GAAG;EAA/D,IAAyE,KAA/E;EAEA,OAAO,EACL,GAAG,cADE;IAEL,UAAU,EAAE,EACV,GAAG,cAAc,CAAC,UADR;MAEV,iBAAiB,EAAE,QAFT;MAGV,cAAc,EAAE;IAHN,CAFP;IAOL,iBAAiB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAP,EAA0B;MAC3D,QAAQ,EAAE,IAAI,KAAK,UADwC;MAE3D,YAAY,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;MAAjB;IAF6C,CAA1B,CAP9B;IAWL,cAAc,EAAE,gBAAgB,CAAC,KAAK,CAAC,cAAP,EAAuB;MACrD,QAAQ,EAAE,IAAI,KAAK,OADkC;MAErD,YAAY,EAAE;QAAE,OAAO,EAAE,CAAC,CAAC;MAAb;IAFuC,CAAvB,CAX3B;IAeL,IAfK;IAgBL,OAhBK;IAiBL,gBAjBK;IAkBL,MAlBK;IAmBL;EAnBK,CAAP;AAqBD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n      required: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n    }),\n    radioIndicator: resolveShorthand(props.radioIndicator, {\n      required: type === 'radio',\n      defaultProps: { checked: !!checked },\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AACnE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,KAAK,QAAQ,uBAAuB;AAE7C,SAASC,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,cAAc,GAAGL,qBAAqB,CAACG,KAAK,EAAEC,GAAG,CAAC;EACxD,MAAM;IAAEE;EAAgB,CAAE,GAAGL,eAAe,EAAE;EAC9C,MAAM;IAAEM,IAAI,GAAG,UAAU;IAAEC,OAAO,GAAG,KAAK;IAAEC,MAAM,GAAG,KAAK;IAAEC,MAAM,GAAG;EAAK,CAAE,GAAGP,KAAK;EAEpF,OAAO;IACL,GAAGE,cAAc;IACjBM,UAAU,EAAE;MACV,GAAGN,cAAc,CAACM,UAAU;MAC5BC,iBAAiB,EAAEd,QAAQ;MAC3Be,cAAc,EAAEd;KACjB;IACDa,iBAAiB,EAAEhB,gBAAgB,CAACO,KAAK,CAACS,iBAAiB,EAAE;MAC3DE,QAAQ,EAAEP,IAAI,KAAK,UAAU;MAC7BQ,YAAY,EAAE;QAAEP,OAAO,EAAEL,KAAK,CAACK;MAAO;KACvC,CAAC;IACFK,cAAc,EAAEjB,gBAAgB,CAACO,KAAK,CAACU,cAAc,EAAE;MACrDC,QAAQ,EAAEP,IAAI,KAAK,OAAO;MAC1BQ,YAAY,EAAE;QAAEP,OAAO,EAAE,CAAC,CAACA,OAAO;QAAEQ,KAAK,EAAE;UAAEC,IAAI,EAAEpB,KAAK,CAAC,uBAAuB;QAAC;MAAE;KACpF,CAAC;IACFU,IAAI;IACJC,OAAO;IACPF,gBAAgB;IAChBG,MAAM;IACNC;GACD;AACH,CAAC","names":["resolveShorthand","useId","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","components","checkboxIndicator","radioIndicator","required","defaultProps","input","name"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n      required: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n    }),\n    radioIndicator: resolveShorthand(props.radioIndicator, {\n      required: type === 'radio',\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"]}