@fluentui/react-table 9.0.0-alpha.2 → 9.0.0-alpha.20

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableRow_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
+const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
 /**
  * Create the state required to render TableRow.
  *
@@ -17,28 +17,30 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
  * @param props - props from this instance of TableRow
  * @param ref - reference to root HTMLElement of TableRow
  */
-
-
 const useTableRow_unstable = (props, ref) => {
-  var _a;
-
+  var _a, _b;
   const {
     noNativeElements,
     size
   } = tableContext_1.useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr';
+  const focusVisibleRef = react_tabster_1.useFocusVisible();
+  const focusWithinRef = react_tabster_1.useFocusWithin();
+  const isHeaderRow = tableHeaderContext_1.useIsInTableHeader();
   return {
     components: {
       root: rootComponent
     },
     root: react_utilities_1.getNativeElementProps(rootComponent, {
-      ref,
+      ref: react_utilities_1.useMergedRefs(ref, focusVisibleRef, focusWithinRef),
       role: rootComponent === 'div' ? 'row' : undefined,
       ...props
     }),
-    size
+    size,
+    noNativeElements,
+    appearance: (_b = props.appearance) !== null && _b !== void 0 ? _b : 'none',
+    isHeaderRow
   };
 };
-
 exports.useTableRow_unstable = useTableRow_unstable;
 //# sourceMappingURL=useTableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableRow/useTableRow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,cAAA,CAAA,eAAA,EAAnC;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL;EATK,CAAP;AAWD,CAfM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'row' : undefined,\n      ...props,\n    }),\n    size,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;;EACvG,MAAM;IAAEC,gBAAgB;IAAEC;EAAI,CAAE,GAAGC,8BAAe,EAAE;EACpD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,MAAMK,eAAe,GAAGC,+BAAe,EAAE;EACzC,MAAMC,cAAc,GAAGD,8BAAc,EAAE;EACvC,MAAME,WAAW,GAAGC,uCAAkB,EAAE;EAExC,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAER;KACP;IACDQ,IAAI,EAAEC,uCAAqB,CAACT,aAAa,EAAE;MACzCJ,GAAG,EAAEa,+BAAa,CAACb,GAAG,EAAEM,eAAe,EAAEE,cAAc,CAAC;MACxDM,IAAI,EAAEV,aAAa,KAAK,KAAK,GAAG,KAAK,GAAGW,SAAS;MACjD,GAAGhB;KACJ,CAAC;IACFG,IAAI;IACJD,gBAAgB;IAChBe,UAAU,EAAE,WAAK,CAACA,UAAU,mCAAI,MAAM;IACtCP;GACD;AACH,CAAC;AArBYQ,4BAAoB","names":["useTableRow_unstable","props","ref","noNativeElements","size","tableContext_1","rootComponent","as","focusVisibleRef","react_tabster_1","focusWithinRef","isHeaderRow","tableHeaderContext_1","components","root","react_utilities_1","role","undefined","appearance","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),\n      role: rootComponent === 'div' ? 'row' : undefined,\n      ...props,\n    }),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"]}

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

@@ -4,58 +4,221 @@ 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");
 exports.tableRowClassName = 'fui-TableRow';
 exports.tableRowClassNames = {
   root: exports.tableRowClassName
 };
+const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    mc9l5x: "f1u0rzck"
+  }
+}, {
+  d: [".f1u0rzck{display:table-row;}"]
+});
+const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
+  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;}"]
+});
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f1u0rzck",
-    "sj55zd": "f19n0e5",
-    "Jwef8y": "f1knas48",
-    "Bpt6rm4": "f1uorfem"
-  },
-  "medium": {
-    "Bqenvij": "f1ft4266",
-    "Bn0qgzm": "f1vxd6vx",
-    "oivjwe": "fg706s2",
-    "B9xav0g": "frpde29"
-  },
-  "small": {
-    "Bqenvij": "fbsu25e",
-    "Bn0qgzm": "f1vxd6vx",
-    "oivjwe": "fg706s2",
-    "B9xav0g": "frpde29"
-  },
-  "smaller": {
-    "Bqenvij": "frvgh55",
-    "Be2twd7": "fy9rknc"
-  }
+  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: {
+    B5tto1x: "fgfzuaq",
+    Bm5rygw: "f13cic75"
+  },
+  rootInteractive: {
+    ecr2s2: "f1wfn5kd",
+    lj723h: "f1g4hkjv",
+    Bw1l9kw: "flaujjr",
+    B43xm9u: "f15ngxrw",
+    i921ia: "fjbbrdp",
+    Jwef8y: "f1t94bn6",
+    Bi91k9c: "feu1g3u",
+    Bi7d7a3: "f14h8iit",
+    Bpt6rm4: "f1uorfem",
+    ff6mpl: "fw60kww"
+  },
+  medium: {
+    Bn0qgzm: "f1vxd6vx",
+    oivjwe: "fg706s2",
+    B9xav0g: "frpde29"
+  },
+  small: {
+    Bn0qgzm: "f1vxd6vx",
+    oivjwe: "fg706s2",
+    B9xav0g: "frpde29"
+  },
+  "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"
+  },
+  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",
+    ecr2s2: "fa9o754",
+    g2u3we: "frmsihh",
+    h3c5rm: ["frttxa5", "f11o2r7f"],
+    B9xav0g: "fem5et0",
+    zhjwy3: ["f11o2r7f", "frttxa5"]
+  },
+  none: {}
 }, {
-  "d": [".f1u0rzck{display:table-row;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ft4266{height:44px;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
+  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);}", ".fgfzuaq[data-fui-focus-within]:focus-within .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".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);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".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);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"],
+  m: [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
+    m: "(forced-colors: active)"
+  }]]
 });
 /**
  * Apply styling to the TableRow slots based on the state
  */
-
-
 const useTableRowStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, styles[state.size], state.root.className);
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles()
+  };
+  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":["components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,2BAAA,gBAAA,OAAA,CAAA,+CAAA,CAAA;;AAEa,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,OAAA,CAAA;AADyD,CAApD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AA4BA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,MAAM,CAAC,IAA7C,EAAmD,MAAM,CAAC,KAAK,CAAC,IAAP,CAAzD,EAAuE,KAAK,CAAC,IAAN,CAAW,SAAlF,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'table-row',\n    color: tokens.colorNeutralForeground1,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    height: '44px',\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    height: '34px',\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    height: '24px',\n    fontSize: tokens.fontSizeBase200,\n  },\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  state.root.className = mergeClasses(tableRowClassNames.root, styles.root, styles[state.size], state.root.className);\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;IAAA;EAAA;EAAA;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;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,EAqH1B;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        [`& .${tableCellActionsClassNames.root}`]: {\n          backgroundColor: tokens.colorSubtleBackgroundHover,\n        },\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        backgroundColor: tokens.colorSubtleBackgroundPressed,\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        backgroundColor: tokens.colorSubtleBackgroundHover,\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\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 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":["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":["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":["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,16 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableSelectionCell_unstable = void 0;
-
-const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_checkbox_1 = /*#__PURE__*/require("@fluentui/react-checkbox");
-
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
+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,17 +18,23 @@ const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
  * @param props - props from this instance of TableSelectionCell
  * @param ref - reference to root HTMLElement of TableSelectionCell
  */
-
-
 const useTableSelectionCell_unstable = (props, ref) => {
-  var _a, _b;
-
   const tableCellState = useTableCell_1.useTableCell_unstable(props, ref);
-  const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'checkbox';
-  return { ...tableCellState,
-    components: { ...tableCellState.components,
+  const {
+    noNativeElements
+  } = tableContext_1.useTableContext();
+  const {
+    type = 'checkbox',
+    checked = false,
+    subtle = false,
+    hidden = false
+  } = props;
+  return {
+    ...tableCellState,
+    components: {
+      ...tableCellState.components,
       checkboxIndicator: react_checkbox_1.Checkbox,
-      radioIndicator: 'span'
+      radioIndicator: react_radio_1.Radio
     },
     checkboxIndicator: react_utilities_1.resolveShorthand(props.checkboxIndicator, {
       required: type === 'checkbox',
@@ -44,13 +45,18 @@ const useTableSelectionCell_unstable = (props, ref) => {
     radioIndicator: react_utilities_1.resolveShorthand(props.radioIndicator, {
       required: type === 'radio',
       defaultProps: {
-        children: React.createElement(react_icons_1.CheckmarkFilled, null)
+        checked: !!checked,
+        input: {
+          name: react_utilities_1.useId('table-selection-radio')
+        }
       }
     }),
     type,
-    checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false
+    checked,
+    noNativeElements,
+    subtle,
+    hidden
   };
 };
-
 exports.useTableSelectionCell_unstable = useTableSelectionCell_unstable;
 //# sourceMappingURL=useTableSelectionCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;;;EAC3B,MAAM,cAAc,GAAG,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,GAA7B,CAAvB;EACA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,EAAV,GAAc,UAA3B;EAEA,OAAO,EACL,GAAG,cADE;IAEL,UAAU,EAAE,EACV,GAAG,cAAc,CAAC,UADR;MAEV,iBAAiB,EAAE,gBAAA,CAAA,QAFT;MAGV,cAAc,EAAE;IAHN,CAFP;IAOL,iBAAiB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,iBAAvB,EAA0C;MAC3D,QAAQ,EAAE,IAAI,KAAK,UADwC;MAE3D,YAAY,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;MAAjB;IAF6C,CAA1C,CAPd;IAWL,cAAc,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,cAAvB,EAAuC;MACrD,QAAQ,EAAE,IAAI,KAAK,OADkC;MAErD,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB;MAAZ;IAFuC,CAAvC,CAXX;IAeL,IAfK;IAgBL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EAhBrB,CAAP;AAkBD,CAzBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { CheckmarkFilled } from '@fluentui/react-icons';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\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 type = props.type ?? 'checkbox';\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: 'span',\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: { children: <CheckmarkFilled /> },\n    }),\n    type,\n    checked: props.checked ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,cAAc,GAAGC,oCAAqB,CAACH,KAAK,EAAEC,GAAG,CAAC;EACxD,MAAM;IAAEG;EAAgB,CAAE,GAAGC,8BAAe,EAAE;EAC9C,MAAM;IAAEC,IAAI,GAAG,UAAU;IAAEC,OAAO,GAAG,KAAK;IAAEC,MAAM,GAAG,KAAK;IAAEC,MAAM,GAAG;EAAK,CAAE,GAAGT,KAAK;EAEpF,OAAO;IACL,GAAGE,cAAc;IACjBQ,UAAU,EAAE;MACV,GAAGR,cAAc,CAACQ,UAAU;MAC5BC,iBAAiB,EAAEC,yBAAQ;MAC3BC,cAAc,EAAEC;KACjB;IACDH,iBAAiB,EAAEI,kCAAgB,CAACf,KAAK,CAACW,iBAAiB,EAAE;MAC3DK,QAAQ,EAAEV,IAAI,KAAK,UAAU;MAC7BW,YAAY,EAAE;QAAEV,OAAO,EAAEP,KAAK,CAACO;MAAO;KACvC,CAAC;IACFM,cAAc,EAAEE,kCAAgB,CAACf,KAAK,CAACa,cAAc,EAAE;MACrDG,QAAQ,EAAEV,IAAI,KAAK,OAAO;MAC1BW,YAAY,EAAE;QAAEV,OAAO,EAAE,CAAC,CAACA,OAAO;QAAEW,KAAK,EAAE;UAAEC,IAAI,EAAEJ,uBAAK,CAAC,uBAAuB;QAAC;MAAE;KACpF,CAAC;IACFT,IAAI;IACJC,OAAO;IACPH,gBAAgB;IAChBI,MAAM;IACNC;GACD;AACH,CAAC;AA7BYW,sCAA8B","names":["useTableSelectionCell_unstable","props","ref","tableCellState","useTableCell_1","noNativeElements","tableContext_1","type","checked","subtle","hidden","components","checkboxIndicator","react_checkbox_1","radioIndicator","react_radio_1","react_utilities_1","required","defaultProps","input","name","exports"],"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"]}