@fluentui/react-table 9.0.0-alpha.1 → 9.0.0-alpha.10

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableRow/renderTableRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B,CAD8D,CAG9D;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  const { slots, slotProps } = getSlots<TableRowSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/renderTableRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B,CAD8D,CAG9D;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  const { slots, slotProps } = getSlots<TableRowSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

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

@@ -8,6 +8,8 @@ exports.useTableRow_unstable = void 0;
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render TableRow.
  *
@@ -20,21 +22,26 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 
 
 const useTableRow_unstable = (props, ref) => {
-  var _a;
+  var _a, _b;
 
-  const noNativeElements = tableContext_1.useTableContext(ctx => ctx.noNativeElements);
-  const size = tableContext_1.useTableContext(ctx => ctx.size);
+  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();
   return {
     components: {
       root: rootComponent
     },
     root: react_utilities_1.getNativeElementProps(rootComponent, {
-      ref,
+      ref: react_utilities_1.useMergedRefs(ref, focusVisibleRef),
       role: rootComponent === 'div' ? 'row' : undefined,
       ...props
     }),
-    size
+    size,
+    noNativeElements,
+    appearance: (_b = props.appearance) !== null && _b !== void 0 ? _b : 'none'
   };
 };
 

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,gBAAgB,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,gBAA3B,CAAzB;EACA,MAAM,IAAI,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,IAA3B,CAAb;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,CAhBM;;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 = useTableContext(ctx => ctx.noNativeElements);\n  const size = useTableContext(ctx => ctx.size);\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,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,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;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAnB,CADoC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL,IATK;IAUL,gBAVK;IAWL,UAAU,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;EAX3B,CAAP;AAaD,CAlBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusVisible } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, focusVisibleRef),\n      role: rootComponent === 'div' ? 'row' : undefined,\n      ...props,\n    }),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -9,39 +9,231 @@ 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"
+  }
+}, {
+  "d": [".f1u0rzck{display:table-row;}", ".f1ft4266{height:44px;}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}"]
+});
+
+const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59"
+  },
+  "medium": {
+    "sshi5w": "f5pgtk9"
+  },
+  "small": {
+    "sshi5w": "fcep9tg"
+  },
+  "smaller": {
+    "sshi5w": "f1pha7fy"
+  }
+}, {
+  "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;}"]
+});
 /**
  * Styles for the root slot
  */
 
+
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
-    "mc9l5x": "f22iagw",
     "sj55zd": "f19n0e5",
-    "Jwef8y": "f1knas48"
+    "B7ck84d": "f1ewtqcl",
+    "Befpiv7": "fblfkud",
+    "Bn4voq9": "fz36nt7",
+    "g9k6zt": "f9znhxp",
+    "kdpuga": ["f1o2ludy", "f1kjnpwc"],
+    "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
+    "B6xbmo0": ["fxmnebo", "f1witrsb"],
+    "dm238s": ["f1witrsb", "fxmnebo"]
+  },
+  "rootInteractive": {
+    "ecr2s2": "f1wfn5kd",
+    "lj723h": "f1g4hkjv",
+    "Bw1l9kw": "flaujjr",
+    "B43xm9u": "f15ngxrw",
+    "Bs8fhbl": "fd28r7f",
+    "i921ia": "fjbbrdp",
+    "Jwef8y": "f1t94bn6",
+    "Bi91k9c": "feu1g3u",
+    "Bi7d7a3": "f1boln4s",
+    "Bpt6rm4": "f1uorfem",
+    "Bt8cqyk": "frasl6z",
+    "ff6mpl": "fw60kww"
   },
   "medium": {
-    "sshi5w": "f5pgtk9",
     "Bn0qgzm": "f1vxd6vx",
     "oivjwe": "fg706s2",
     "B9xav0g": "frpde29"
   },
   "small": {
-    "sshi5w": "fcep9tg",
     "Bn0qgzm": "f1vxd6vx",
     "oivjwe": "fg706s2",
     "B9xav0g": "frpde29"
   },
   "smaller": {
-    "sshi5w": "f1pha7fy",
     "Be2twd7": "fy9rknc"
-  }
+  },
+  "brand": {
+    "De3pzq": "f16xkysk",
+    "sj55zd": "f1cgsbmv",
+    "g2u3we": "frmsihh",
+    "h3c5rm": ["frttxa5", "f11o2r7f"],
+    "B9xav0g": "fem5et0",
+    "zhjwy3": ["f11o2r7f", "frttxa5"],
+    "Jwef8y": "f121v1wq",
+    "ecr2s2": "ftepret",
+    "gwxt9v": "fqlf3fd",
+    "v3aym": ["f9dpb3h", "fw2muls"],
+    "Bc736ss": "f1yat0gj",
+    "Bk6ri7n": ["fw2muls", "f9dpb3h"],
+    "Bk5ld8o": "f7nae3y",
+    "c4eypz": ["fkbere7", "fa97sf3"],
+    "felo30": "fmtyzcc",
+    "Eshu5l": ["fa97sf3", "fkbere7"],
+    "Bjwas2f": "fb6zhgp",
+    "Bn1d65q": ["fyowp6c", "fz08sq8"],
+    "Bxeuatn": "f9dii88",
+    "n51gp8": ["fz08sq8", "fyowp6c"],
+    "Beo2b4z": ["f1afxoft", "flqq2yx"],
+    "h6lo6r": ["flqq2yx", "f1afxoft"],
+    "Btyw6ap": ["f1b5xrmd", "f1831rx6"],
+    "w1pwid": ["f1831rx6", "f1b5xrmd"],
+    "Brwvgy3": "fd94n53",
+    "yadkgm": "f1e0wld5"
+  },
+  "neutral": {
+    "gwxt9v": "fqlf3fd",
+    "v3aym": ["f9dpb3h", "fw2muls"],
+    "Bc736ss": "f1yat0gj",
+    "Bk6ri7n": ["fw2muls", "f9dpb3h"],
+    "Bk5ld8o": "f7nae3y",
+    "c4eypz": ["fkbere7", "fa97sf3"],
+    "felo30": "fmtyzcc",
+    "Eshu5l": ["fa97sf3", "fkbere7"],
+    "Bjwas2f": "fb6zhgp",
+    "Bn1d65q": ["fyowp6c", "fz08sq8"],
+    "Bxeuatn": "f9dii88",
+    "n51gp8": ["fz08sq8", "fyowp6c"],
+    "Beo2b4z": ["f1afxoft", "flqq2yx"],
+    "h6lo6r": ["flqq2yx", "f1afxoft"],
+    "Btyw6ap": ["f1b5xrmd", "f1831rx6"],
+    "w1pwid": ["f1831rx6", "f1b5xrmd"],
+    "Brwvgy3": "fd94n53",
+    "yadkgm": "f1e0wld5",
+    "De3pzq": "fq5gl1p",
+    "sj55zd": "f1cgsbmv",
+    "Jwef8y": "f1uqaxdt",
+    "ecr2s2": "fa9o754",
+    "g2u3we": "frmsihh",
+    "h3c5rm": ["frttxa5", "f11o2r7f"],
+    "B9xav0g": "fem5et0",
+    "zhjwy3": ["f11o2r7f", "frttxa5"]
+  },
+  "none": {}
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f5pgtk9{min-height:44px;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fcep9tg{min-height:34px;}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
-  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"]
+  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fd28r7f:active .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".frasl6z:hover .fui-TableSelectionCell{background-color:var(--colorNeutralBackground1Hover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 /**
  * Apply styling to the TableRow slots based on the state
@@ -49,8 +241,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 
 const useTableRowStyles_unstable = state => {
+  const isHeaderRow = tableHeaderContext_1.useIsInTableHeader();
   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, !isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], styles[state.appearance], state.root.className);
   return state;
 };
 

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;;AAIa,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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AAyBA;;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';\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: 'flex',\n    color: tokens.colorNeutralForeground1,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n  },\n\n  medium: {\n    minHeight: '44px',\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    minHeight: '34px',\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    minHeight: '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,"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/"}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+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
+ */
+
+
+exports.TableSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableSelectionCell_1.useTableSelectionCell_unstable(props, ref);
+  useTableSelectionCellStyles_1.useTableSelectionCellStyles_unstable(state);
+  return renderTableSelectionCell_1.renderTableSelectionCell_unstable(state);
+});
+exports.TableSelectionCell.displayName = 'TableSelectionCell';
+//# sourceMappingURL=TableSelectionCell.js.map

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

@@ -0,0 +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/"}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=TableSelectionCell.types.js.map

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+
+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

@@ -0,0 +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/"}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+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
+  }));
+};
+
+exports.renderTableSelectionCell_unstable = renderTableSelectionCell_unstable;
+//# sourceMappingURL=renderTableSelectionCell.js.map

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

@@ -0,0 +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/"}

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

@@ -0,0 +1,65 @@
+"use strict";
+
+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.
+ *
+ * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,
+ * before being passed to renderTableSelectionCell_unstable.
+ *
+ * @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 {
+    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: react_radio_1.Radio
+    },
+    checkboxIndicator: react_utilities_1.resolveShorthand(props.checkboxIndicator, {
+      required: type === 'checkbox',
+      defaultProps: {
+        checked: props.checked
+      }
+    }),
+    radioIndicator: react_utilities_1.resolveShorthand(props.radioIndicator, {
+      required: type === 'radio',
+      defaultProps: {
+        checked: !!checked
+      }
+    }),
+    type,
+    checked,
+    noNativeElements,
+    subtle,
+    hidden
+  };
+};
+
+exports.useTableSelectionCell_unstable = useTableSelectionCell_unstable;
+//# sourceMappingURL=useTableSelectionCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":";;;;;;;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;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,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;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EACA,MAAM;IAAE,IAAI,GAAG,UAAT;IAAqB,OAAO,GAAG,KAA/B;IAAsC,MAAM,GAAG,KAA/C;IAAsD,MAAM,GAAG;EAA/D,IAAyE,KAA/E;EAEA,OAAO,EACL,GAAG,cADE;IAEL,UAAU,EAAE,EACV,GAAG,cAAc,CAAC,UADR;MAEV,iBAAiB,EAAE,gBAAA,CAAA,QAFT;MAGV,cAAc,EAAE,aAAA,CAAA;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,OAAO,EAAE,CAAC,CAAC;MAAb;IAFuC,CAAvC,CAXX;IAeL,IAfK;IAgBL,OAhBK;IAiBL,gBAjBK;IAkBL,MAlBK;IAmBL;EAnBK,CAAP;AAqBD,CA7BM;;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 { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n      required: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n    }),\n    radioIndicator: resolveShorthand(props.radioIndicator, {\n      required: type === 'radio',\n      defaultProps: { checked: !!checked },\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableSelectionCellStyles_unstable = exports.tableSelectionCellClassNames = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+exports.tableSelectionCellClassNames = {
+  root: 'fui-TableSelectionCell',
+  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
+  radioIndicator: 'fui-TableSelectionCell__radioIndicator'
+};
+
+const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "mc9l5x": "f15pt5es",
+    "a9b677": "fksc0bp"
+  }
+}, {
+  "d": [".f15pt5es{display:table-cell;}", ".fksc0bp{width:44px;}"]
+});
+
+const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "Bh6795r": "fqerorx",
+    "Bnnss6s": "f1neuvcm",
+    "xawz": "fkjuxzh",
+    "Bf4jedk": "fvrlu0f",
+    "B2u0y6b": "f1c71y05",
+    "Brf1p80": "f4d9j23"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".fvrlu0f{min-width:44px;}", ".f1c71y05{max-width:44px;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}"]
+});
+/**
+ * Styles for the root slot
+ */
+
+
+const useStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "fsow6f": "f17mccla",
+    "Huce71": "fz5stix",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"]
+  },
+  "radioIndicator": {
+    "mc9l5x": "f22iagw",
+    "Bh6795r": "fqerorx",
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23",
+    "B5pe6w7": "f1cqkysu",
+    "p4uzdd": "f1sgf1mg"
+  },
+  "subtle": {
+    "abs64n": "fk73vx1",
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "B113ap8": "f1upwfw9"
+  },
+  "hidden": {
+    "Bcdw1i0": "fd7fpy0"
+  }
+}, {
+  "d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fk73vx1{opacity:0;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+/**
+ * Apply styling to the TableSelectionCell slots based on the state
+ */
+
+
+const useTableSelectionCellStyles_unstable = state => {
+  const styles = useStyles();
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles()
+  };
+  state.root.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);
+
+  if (state.checkboxIndicator) {
+    state.checkboxIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
+  }
+
+  if (state.radioIndicator) {
+    state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
+  }
+
+  return state;
+};
+
+exports.useTableSelectionCellStyles_unstable = useTableSelectionCellStyles_unstable;
+//# sourceMappingURL=useTableSelectionCellStyles.js.map