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

package/lib-commonjs/components/TableRow/useTableRowStyles.js

@@ -4,252 +4,219 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableRowStyles_unstable = exports.tableRowClassNames = exports.tableRowClassName = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const useTableCellActionsStyles_1 = /*#__PURE__*/require("../TableCellActions/useTableCellActionsStyles");
-
 const useTableSelectionCellStyles_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCellStyles");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
-const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
-
 exports.tableRowClassName = 'fui-TableRow';
 exports.tableRowClassNames = {
   root: exports.tableRowClassName
 };
-
 const useTableLayoutStyles = /*#__PURE__*/react_1.__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__*/react_1.__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__*/react_1.__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
  */
-
-
 const useTableRowStyles_unstable = state => {
-  const isHeaderRow = tableHeaderContext_1.useIsInTableHeader();
   const styles = useStyles();
   const layoutStyles = {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
-  state.root.className = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.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;
 };
-
 exports.useTableRowStyles_unstable = useTableRowStyles_unstable;
 //# sourceMappingURL=useTableRowStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","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;AACA;AAGA;AACA;AACA;AAEaA,yBAAiB,GAAG,cAAc;AAClCA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAED;CACP;AAED,MAAME,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;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,EAkH1B;AAEF;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACN,IAAI,CAACW,SAAS,GAAGT,oBAAY,CACjCH,0BAAkB,CAACC,IAAI,EACvBO,MAAM,CAACP,IAAI,EACX,CAACM,KAAK,CAACM,WAAW,IAAIL,MAAM,CAACM,eAAe,EAC5CN,MAAM,CAACD,KAAK,CAACQ,IAAI,CAAC,EAClBR,KAAK,CAACS,gBAAgB,GAAGP,YAAY,CAACE,IAAI,CAACV,IAAI,GAAGQ,YAAY,CAACC,KAAK,CAACT,IAAI,EACzEO,MAAM,CAACD,KAAK,CAACU,UAAU,CAAC,EACxBV,KAAK,CAACU,UAAU,KAAK,MAAM,IAAI,CAACV,KAAK,CAACM,WAAW,IAAIL,MAAM,CAACU,uBAAuB,EACnFX,KAAK,CAACN,IAAI,CAACW,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAlBYP,kCAA0B","names":["exports","root","useTableLayoutStyles","react_1","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-commonjs/components/TableSelectionCell/TableSelectionCell.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableSelectionCell = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useTableSelectionCell_1 = /*#__PURE__*/require("./useTableSelectionCell");
-
 const renderTableSelectionCell_1 = /*#__PURE__*/require("./renderTableSelectionCell");
-
 const useTableSelectionCellStyles_1 = /*#__PURE__*/require("./useTableSelectionCellStyles");
 /**
- * TableSelectionCell component - TODO: add more docs
+ * TableSelectionCell component
  */
-
-
 exports.TableSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableSelectionCell_1.useTableSelectionCell_unstable(props, ref);
   useTableSelectionCellStyles_1.useTableSelectionCellStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAmE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,GAAtC,CAAd;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,0BAAA,CAAA,iCAAA,CAAkC,KAAlC,CAAP;AACD,CAL+E,CAAnE;AAOb,OAAA,CAAA,kBAAA,CAAmB,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;AACA;AACA;AACA;AAIA;;;AAGaA,0BAAkB,gBAAiDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9G,MAAMC,KAAK,GAAGC,sDAA8B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAExDG,kEAAoC,CAACF,KAAK,CAAC;EAC3C,OAAOG,4DAAiC,CAACH,KAAK,CAAC;AACjD,CAAC,CAAC;AAEFL,0BAAkB,CAACS,WAAW,GAAG,oBAAoB","names":["exports","React","forwardRef","props","ref","state","useTableSelectionCell_1","useTableSelectionCellStyles_1","renderTableSelectionCell_1","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-commonjs/components/TableSelectionCell/TableSelectionCell.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/TableSelectionCell/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./TableSelectionCell"), exports);
-
 tslib_1.__exportStar(require("./TableSelectionCell.types"), exports);
-
 tslib_1.__exportStar(require("./renderTableSelectionCell"), exports);
-
 tslib_1.__exportStar(require("./useTableSelectionCell"), exports);
-
 tslib_1.__exportStar(require("./useTableSelectionCellStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/TableSelectionCell/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TableSelectionCell';\nexport * from './TableSelectionCell.types';\nexport * from './renderTableSelectionCell';\nexport * from './useTableSelectionCell';\nexport * from './useTableSelectionCellStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/index.ts"],"sourcesContent":["export * from './TableSelectionCell';\nexport * from './TableSelectionCell.types';\nexport * from './renderTableSelectionCell';\nexport * from './useTableSelectionCell';\nexport * from './useTableSelectionCellStyles';\n"]}

package/lib-commonjs/components/TableSelectionCell/renderTableSelectionCell.js

@@ -4,25 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderTableSelectionCell_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of TableSelectionCell
  */
-
-
 const renderTableSelectionCell_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, state.type === 'checkbox' && slots.checkboxIndicator && React.createElement(slots.checkboxIndicator, { ...slotProps.checkboxIndicator
-  }), state.type === 'radio' && slots.radioIndicator && React.createElement(slots.radioIndicator, { ...slotProps.radioIndicator
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, state.type === 'checkbox' && slots.checkboxIndicator && React.createElement(slots.checkboxIndicator, {
+    ...slotProps.checkboxIndicator
+  }), state.type === 'radio' && slots.radioIndicator && React.createElement(slots.radioIndicator, {
+    ...slotProps.radioIndicator
   }));
 };
-
 exports.renderTableSelectionCell_unstable = renderTableSelectionCell_unstable;
 //# sourceMappingURL=renderTableSelectionCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAmC;EAClF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,KAAe,UAAf,IAA6B,KAAK,CAAC,iBAAnC,IACC,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,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","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;AACA;AAGA;;;AAGO,MAAMA,iCAAiC,GAAIC,KAA8B,IAAI;EAClF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA0BH,KAAK,CAAC;EAErE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BL,KAAK,CAACM,IAAI,KAAK,UAAU,IAAIL,KAAK,CAACM,iBAAiB,IACnDH,oBAACH,KAAK,CAACM,iBAAiB;IAAA,GAAKL,SAAS,CAACK;EAAiB,EACzD,EACAP,KAAK,CAACM,IAAI,KAAK,OAAO,IAAIL,KAAK,CAACO,cAAc,IAAIJ,oBAACH,KAAK,CAACO,cAAc;IAAA,GAAKN,SAAS,CAACM;EAAc,EAAI,CAC9F;AAEjB,CAAC;AAXYC,yCAAiC","names":["renderTableSelectionCell_unstable","state","slots","slotProps","react_utilities_1","React","root","type","checkboxIndicator","radioIndicator","exports"],"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-commonjs/components/TableSelectionCell/useTableSelectionCell.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableSelectionCell_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_checkbox_1 = /*#__PURE__*/require("@fluentui/react-checkbox");
-
 const react_radio_1 = /*#__PURE__*/require("@fluentui/react-radio");
-
 const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
-
 const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 /**
  * Create the state required to render TableSelectionCell.
@@ -23,8 +18,6 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
  * @param props - props from this instance of TableSelectionCell
  * @param ref - reference to root HTMLElement of TableSelectionCell
  */
-
-
 const useTableSelectionCell_unstable = (props, ref) => {
   const tableCellState = useTableCell_1.useTableCell_unstable(props, ref);
   const {
@@ -36,8 +29,10 @@ const useTableSelectionCell_unstable = (props, ref) => {
     subtle = false,
     hidden = false
   } = props;
-  return { ...tableCellState,
-    components: { ...tableCellState.components,
+  return {
+    ...tableCellState,
+    components: {
+      ...tableCellState.components,
       checkboxIndicator: react_checkbox_1.Checkbox,
       radioIndicator: react_radio_1.Radio
     },
@@ -50,7 +45,10 @@ const useTableSelectionCell_unstable = (props, ref) => {
     radioIndicator: react_utilities_1.resolveShorthand(props.radioIndicator, {
       required: type === 'radio',
       defaultProps: {
-        checked: !!checked
+        checked: !!checked,
+        input: {
+          name: react_utilities_1.useId('table-selection-radio')
+        }
       }
     }),
     type,
@@ -60,6 +58,5 @@ const useTableSelectionCell_unstable = (props, ref) => {
     hidden
   };
 };
-
 exports.useTableSelectionCell_unstable = useTableSelectionCell_unstable;
 //# sourceMappingURL=useTableSelectionCell.js.map