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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/CHANGELOG.json +124 -2
  2. package/CHANGELOG.md +34 -3
  3. package/dist/index.d.ts +19 -4
  4. package/lib/components/Table/useTableStyles.js +2 -2
  5. package/lib/components/Table/useTableStyles.js.map +1 -1
  6. package/lib/components/TableHeader/renderTableHeader.js +5 -2
  7. package/lib/components/TableHeader/renderTableHeader.js.map +1 -1
  8. package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +8 -2
  9. package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
  10. package/lib/components/TableRow/TableRow.types.js.map +1 -1
  11. package/lib/components/TableRow/useTableRow.js +7 -4
  12. package/lib/components/TableRow/useTableRow.js.map +1 -1
  13. package/lib/components/TableRow/useTableRowStyles.js +158 -6
  14. package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
  15. package/lib/components/TableSelectionCell/TableSelectionCell.types.js.map +1 -1
  16. package/lib/components/TableSelectionCell/useTableSelectionCell.js +13 -9
  17. package/lib/components/TableSelectionCell/useTableSelectionCell.js.map +1 -1
  18. package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js +12 -3
  19. package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
  20. package/lib/contexts/tableHeaderContext.js +6 -0
  21. package/lib/contexts/tableHeaderContext.js.map +1 -0
  22. package/lib-commonjs/components/Table/useTableStyles.js +2 -2
  23. package/lib-commonjs/components/Table/useTableStyles.js.map +1 -1
  24. package/lib-commonjs/components/TableHeader/renderTableHeader.js +6 -2
  25. package/lib-commonjs/components/TableHeader/renderTableHeader.js.map +1 -1
  26. package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +8 -2
  27. package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
  28. package/lib-commonjs/components/TableRow/useTableRow.js +7 -3
  29. package/lib-commonjs/components/TableRow/useTableRow.js.map +1 -1
  30. package/lib-commonjs/components/TableRow/useTableRowStyles.js +161 -6
  31. package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
  32. package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js +13 -10
  33. package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js.map +1 -1
  34. package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js +13 -3
  35. package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
  36. package/lib-commonjs/contexts/tableHeaderContext.js +17 -0
  37. package/lib-commonjs/contexts/tableHeaderContext.js.map +1 -0
  38. package/package.json +14 -13
  39. package/lib/navigationModes/cell.js +0 -250
  40. package/lib/navigationModes/cell.js.map +0 -1
  41. package/lib/navigationModes/composite.js +0 -208
  42. package/lib/navigationModes/composite.js.map +0 -1
  43. package/lib/navigationModes/index.js +0 -3
  44. package/lib/navigationModes/index.js.map +0 -1
  45. package/lib/navigationModes/useNavigationMode.js +0 -42
  46. package/lib/navigationModes/useNavigationMode.js.map +0 -1
  47. package/lib-commonjs/navigationModes/cell.js +0 -259
  48. package/lib-commonjs/navigationModes/cell.js.map +0 -1
  49. package/lib-commonjs/navigationModes/composite.js +0 -217
  50. package/lib-commonjs/navigationModes/composite.js.map +0 -1
  51. package/lib-commonjs/navigationModes/index.js +0 -16
  52. package/lib-commonjs/navigationModes/index.js.map +0 -1
  53. package/lib-commonjs/navigationModes/useNavigationMode.js +0 -55
  54. package/lib-commonjs/navigationModes/useNavigationMode.js.map +0 -1
package/lib-commonjs/components/TableRow/useTableRowStyles.js CHANGED
@@ -11,6 +11,12 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
11
 
12
12
  const useTableCellActionsStyles_1 = /*#__PURE__*/require("../TableCellActions/useTableCellActionsStyles");
13
13
 
14
+ const useTableSelectionCellStyles_1 = /*#__PURE__*/require("../TableSelectionCell/useTableSelectionCellStyles");
15
+
16
+ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
17
+
18
+ const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
19
+
14
20
  exports.tableRowClassName = 'fui-TableRow';
15
21
  exports.tableRowClassNames = {
16
22
  root: exports.tableRowClassName
@@ -58,11 +64,28 @@ const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
58
64
  const useStyles = /*#__PURE__*/react_1.__styles({
59
65
  "root": {
60
66
  "sj55zd": "f19n0e5",
61
- "Jwef8y": "f1knas48",
67
+ "B7ck84d": "f1ewtqcl",
68
+ "Befpiv7": "fblfkud",
69
+ "Bn4voq9": "fz36nt7",
70
+ "g9k6zt": "f9znhxp",
71
+ "kdpuga": ["f1o2ludy", "f1kjnpwc"],
72
+ "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
73
+ "B6xbmo0": ["fxmnebo", "f1witrsb"],
74
+ "dm238s": ["f1witrsb", "fxmnebo"]
75
+ },
76
+ "rootInteractive": {
77
+ "ecr2s2": "f1wfn5kd",
78
+ "lj723h": "f1g4hkjv",
79
+ "Bw1l9kw": "flaujjr",
80
+ "B43xm9u": "f15ngxrw",
81
+ "Bs8fhbl": "fd28r7f",
82
+ "i921ia": "fjbbrdp",
83
+ "Jwef8y": "f1t94bn6",
62
84
  "Bi91k9c": "feu1g3u",
63
85
  "Bi7d7a3": "f1boln4s",
64
86
  "Bpt6rm4": "f1uorfem",
65
- "B7ck84d": "f1ewtqcl"
87
+ "Bt8cqyk": "frasl6z",
88
+ "ff6mpl": "fw60kww"
66
89
  },
67
90
  "medium": {
68
91
  "Bn0qgzm": "f1vxd6vx",
@@ -76,10 +99,141 @@ const useStyles = /*#__PURE__*/react_1.__styles({
76
99
  },
77
100
  "smaller": {
78
101
  "Be2twd7": "fy9rknc"
79
- }
102
+ },
103
+ "brand": {
104
+ "De3pzq": "f16xkysk",
105
+ "sj55zd": "f1cgsbmv",
106
+ "g2u3we": "frmsihh",
107
+ "h3c5rm": ["frttxa5", "f11o2r7f"],
108
+ "B9xav0g": "fem5et0",
109
+ "zhjwy3": ["f11o2r7f", "frttxa5"],
110
+ "Jwef8y": "f121v1wq",
111
+ "ecr2s2": "ftepret",
112
+ "gwxt9v": "fqlf3fd",
113
+ "v3aym": ["f9dpb3h", "fw2muls"],
114
+ "Bc736ss": "f1yat0gj",
115
+ "Bk6ri7n": ["fw2muls", "f9dpb3h"],
116
+ "Bk5ld8o": "f7nae3y",
117
+ "c4eypz": ["fkbere7", "fa97sf3"],
118
+ "felo30": "fmtyzcc",
119
+ "Eshu5l": ["fa97sf3", "fkbere7"],
120
+ "Bjwas2f": "fb6zhgp",
121
+ "Bn1d65q": ["fyowp6c", "fz08sq8"],
122
+ "Bxeuatn": "f9dii88",
123
+ "n51gp8": ["fz08sq8", "fyowp6c"],
124
+ "Beo2b4z": ["f1afxoft", "flqq2yx"],
125
+ "h6lo6r": ["flqq2yx", "f1afxoft"],
126
+ "Btyw6ap": ["f1b5xrmd", "f1831rx6"],
127
+ "w1pwid": ["f1831rx6", "f1b5xrmd"],
128
+ "Brwvgy3": "fd94n53",
129
+ "yadkgm": "f1e0wld5"
130
+ },
131
+ "neutral": {
132
+ "gwxt9v": "fqlf3fd",
133
+ "v3aym": ["f9dpb3h", "fw2muls"],
134
+ "Bc736ss": "f1yat0gj",
135
+ "Bk6ri7n": ["fw2muls", "f9dpb3h"],
136
+ "Bk5ld8o": "f7nae3y",
137
+ "c4eypz": ["fkbere7", "fa97sf3"],
138
+ "felo30": "fmtyzcc",
139
+ "Eshu5l": ["fa97sf3", "fkbere7"],
140
+ "Bjwas2f": "fb6zhgp",
141
+ "Bn1d65q": ["fyowp6c", "fz08sq8"],
142
+ "Bxeuatn": "f9dii88",
143
+ "n51gp8": ["fz08sq8", "fyowp6c"],
144
+ "Beo2b4z": ["f1afxoft", "flqq2yx"],
145
+ "h6lo6r": ["flqq2yx", "f1afxoft"],
146
+ "Btyw6ap": ["f1b5xrmd", "f1831rx6"],
147
+ "w1pwid": ["f1831rx6", "f1b5xrmd"],
148
+ "Brwvgy3": "fd94n53",
149
+ "yadkgm": "f1e0wld5",
150
+ "De3pzq": "fq5gl1p",
151
+ "sj55zd": "f1cgsbmv",
152
+ "Jwef8y": "f1uqaxdt",
153
+ "ecr2s2": "fa9o754",
154
+ "g2u3we": "frmsihh",
155
+ "h3c5rm": ["frttxa5", "f11o2r7f"],
156
+ "B9xav0g": "fem5et0",
157
+ "zhjwy3": ["f11o2r7f", "frttxa5"]
158
+ },
159
+ "none": {}
80
160
  }, {
81
- "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}"],
82
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1boln4s:hover .fui-TableCellActions{background-color:var(--colorNeutralBackground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}"]
161
+ "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);}"],
162
+ "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);}"],
163
+ "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);}"],
164
+ "m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
165
+ "m": "(forced-colors: active)"
166
+ }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
167
+ "m": "(forced-colors: active)"
168
+ }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
169
+ "m": "(forced-colors: active)"
170
+ }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
171
+ "m": "(forced-colors: active)"
172
+ }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
173
+ "m": "(forced-colors: active)"
174
+ }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
175
+ "m": "(forced-colors: active)"
176
+ }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
177
+ "m": "(forced-colors: active)"
178
+ }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
179
+ "m": "(forced-colors: active)"
180
+ }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
181
+ "m": "(forced-colors: active)"
182
+ }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
183
+ "m": "(forced-colors: active)"
184
+ }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
185
+ "m": "(forced-colors: active)"
186
+ }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
187
+ "m": "(forced-colors: active)"
188
+ }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
189
+ "m": "(forced-colors: active)"
190
+ }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
191
+ "m": "(forced-colors: active)"
192
+ }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
193
+ "m": "(forced-colors: active)"
194
+ }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
195
+ "m": "(forced-colors: active)"
196
+ }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
197
+ "m": "(forced-colors: active)"
198
+ }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
199
+ "m": "(forced-colors: active)"
200
+ }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
201
+ "m": "(forced-colors: active)"
202
+ }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
203
+ "m": "(forced-colors: active)"
204
+ }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
205
+ "m": "(forced-colors: active)"
206
+ }], ["@media (forced-colors: active){.fw2muls{border-left-width:2px;}.f9dpb3h{border-right-width:2px;}}", {
207
+ "m": "(forced-colors: active)"
208
+ }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
209
+ "m": "(forced-colors: active)"
210
+ }], ["@media (forced-colors: active){.fkbere7{border-right-style:solid;}.fa97sf3{border-left-style:solid;}}", {
211
+ "m": "(forced-colors: active)"
212
+ }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
213
+ "m": "(forced-colors: active)"
214
+ }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
215
+ "m": "(forced-colors: active)"
216
+ }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
217
+ "m": "(forced-colors: active)"
218
+ }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
219
+ "m": "(forced-colors: active)"
220
+ }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
221
+ "m": "(forced-colors: active)"
222
+ }], ["@media (forced-colors: active){.fz08sq8{border-left-color:transparent;}.fyowp6c{border-right-color:transparent;}}", {
223
+ "m": "(forced-colors: active)"
224
+ }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
225
+ "m": "(forced-colors: active)"
226
+ }], ["@media (forced-colors: active){.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}}", {
227
+ "m": "(forced-colors: active)"
228
+ }], ["@media (forced-colors: active){.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}}", {
229
+ "m": "(forced-colors: active)"
230
+ }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
231
+ "m": "(forced-colors: active)"
232
+ }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
233
+ "m": "(forced-colors: active)"
234
+ }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
235
+ "m": "(forced-colors: active)"
236
+ }]]
83
237
  });
84
238
  /**
85
239
  * Apply styling to the TableRow slots based on the state
@@ -87,12 +241,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
87
241
 
88
242
 
89
243
  const useTableRowStyles_unstable = state => {
244
+ const isHeaderRow = tableHeaderContext_1.useIsInTableHeader();
90
245
  const styles = useStyles();
91
246
  const layoutStyles = {
92
247
  table: useTableLayoutStyles(),
93
248
  flex: useFlexLayoutStyles()
94
249
  };
95
- state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
250
+ 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);
96
251
  return state;
97
252
  };
98
253
 
package/lib-commonjs/components/TableRow/useTableRowStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-table/src/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,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAkBA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAmBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AA2BA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,kBAAA,CAAmB,IADE,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHe,EAIrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJhD,EAKrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CALpC,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;EASA,OAAO,KAAP;AACD,CAhBM;;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\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 ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n boxSizing: 'border-box',\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\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 styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n\n medium: {\n height: '44px',\n },\n\n small: {\n height: '34px',\n },\n\n smaller: {\n height: '24px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n medium: {\n minHeight: '44px',\n },\n\n small: {\n minHeight: '34px',\n },\n\n smaller: {\n minHeight: '24px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n opacity: 1,\n },\n },\n },\n\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n ':hover': {\n backgroundColor: tokens.colorBrandBackground2,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n },\n\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n },\n\n neutral: {\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n },\n\n none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n const isHeaderRow = useIsInTableHeader();\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableRowClassNames.root,\n styles.root,\n !isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js CHANGED
@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.useTableSelectionCell_unstable = void 0;
7
7
 
8
- const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
9
 
12
10
  const react_checkbox_1 = /*#__PURE__*/require("@fluentui/react-checkbox");
13
11
 
14
- const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
12
+ const react_radio_1 = /*#__PURE__*/require("@fluentui/react-radio");
15
13
 
16
14
  const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
17
15
 
@@ -28,17 +26,20 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
28
26
 
29
27
 
30
28
  const useTableSelectionCell_unstable = (props, ref) => {
31
- var _a, _b;
32
-
33
29
  const tableCellState = useTableCell_1.useTableCell_unstable(props, ref);
34
30
  const {
35
31
  noNativeElements
36
32
  } = tableContext_1.useTableContext();
37
- const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'checkbox';
33
+ const {
34
+ type = 'checkbox',
35
+ checked = false,
36
+ subtle = false,
37
+ hidden = false
38
+ } = props;
38
39
  return { ...tableCellState,
39
40
  components: { ...tableCellState.components,
40
41
  checkboxIndicator: react_checkbox_1.Checkbox,
41
- radioIndicator: 'span'
42
+ radioIndicator: react_radio_1.Radio
42
43
  },
43
44
  checkboxIndicator: react_utilities_1.resolveShorthand(props.checkboxIndicator, {
44
45
  required: type === 'checkbox',
@@ -49,12 +50,14 @@ const useTableSelectionCell_unstable = (props, ref) => {
49
50
  radioIndicator: react_utilities_1.resolveShorthand(props.radioIndicator, {
50
51
  required: type === 'radio',
51
52
  defaultProps: {
52
- children: React.createElement(react_icons_1.CheckmarkFilled, null)
53
+ checked: !!checked
53
54
  }
54
55
  }),
55
56
  type,
56
- checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false,
57
- noNativeElements
57
+ checked,
58
+ noNativeElements,
59
+ subtle,
60
+ hidden
58
61
  };
59
62
  };
60
63
 
package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-table/src/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;;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,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,KAhBrB;IAiBL;EAjBK,CAAP;AAmBD,CA3BM;;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';\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 = 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 noNativeElements,\n };\n};\n"],"sourceRoot":"../src/"}
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 CHANGED
@@ -7,6 +7,8 @@ exports.useTableSelectionCellStyles_unstable = exports.tableSelectionCellClassNa
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
10
+ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
+
10
12
  exports.tableSelectionCellClassNames = {
11
13
  root: 'fui-TableSelectionCell',
12
14
  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
@@ -57,11 +59,19 @@ const useStyles = /*#__PURE__*/react_1.__styles({
57
59
  "B5pe6w7": "f1cqkysu",
58
60
  "p4uzdd": "f1sgf1mg"
59
61
  },
62
+ "subtle": {
63
+ "abs64n": "fk73vx1",
64
+ "Brovlpu": "ftqa4ok",
65
+ "B486eqv": "f2hkw1w",
66
+ "B113ap8": "f1upwfw9"
67
+ },
60
68
  "hidden": {
61
69
  "Bcdw1i0": "fd7fpy0"
62
70
  }
63
71
  }, {
64
- "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;}", ".fd7fpy0{visibility:hidden;}"]
72
+ "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;}"],
73
+ "f": [".ftqa4ok:focus{outline-style:none;}"],
74
+ "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
65
75
  });
66
76
  /**
67
77
  * Apply styling to the TableSelectionCell slots based on the state
@@ -74,14 +84,14 @@ const useTableSelectionCellStyles_unstable = state => {
74
84
  table: useTableLayoutStyles(),
75
85
  flex: useFlexLayoutStyles()
76
86
  };
77
- state.root.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
87
+ 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);
78
88
 
79
89
  if (state.checkboxIndicator) {
80
90
  state.checkboxIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
81
91
  }
82
92
 
83
93
  if (state.radioIndicator) {
84
- state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.checked === false && styles.hidden, state.radioIndicator.className);
94
+ state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
85
95
  }
86
96
 
87
97
  return state;
package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAAxE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,4BAAA,CAA6B,IADR,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAMA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,OAAA,CAAA,YAAA,CAClC,OAAA,CAAA,4BAAA,CAA6B,iBADK,EAElC,KAAK,CAAC,iBAAN,CAAwB,SAFU,CAApC;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,MAAM,CAAC,cAFwB,EAG/B,KAAK,CAAC,OAAN,KAAkB,KAAlB,IAA2B,MAAM,CAAC,MAHH,EAI/B,KAAK,CAAC,cAAN,CAAqB,SAJU,CAAjC;EAMD;;EAED,OAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: '44px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '44px',\n maxWidth: '44px',\n justifyContent: 'center',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n ...shorthands.padding(0),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\n '& svg': {\n width: '16px',\n height: '16px',\n },\n },\n\n hidden: {\n visibility: 'hidden',\n },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableSelectionCellClassNames.root,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(\n tableSelectionCellClassNames.checkboxIndicator,\n state.checkboxIndicator.className,\n );\n }\n\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(\n tableSelectionCellClassNames.radioIndicator,\n styles.radioIndicator,\n state.checked === false && styles.hidden,\n state.radioIndicator.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAAxE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiCA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,4BAAA,CAA6B,IADR,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,OAAN,KAAkB,KAAlC,IAA2C,MAAM,CAAC,MAJ7B,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EAQA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,OAAA,CAAA,YAAA,CAClC,OAAA,CAAA,4BAAA,CAA6B,iBADK,EAElC,KAAK,CAAC,iBAAN,CAAwB,SAFU,CAApC;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,MAAM,CAAC,cAFwB,EAG/B,KAAK,CAAC,cAAN,CAAqB,SAHU,CAAjC;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n root: 'fui-TableSelectionCell',\n checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n width: '44px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '44px',\n maxWidth: '44px',\n justifyContent: 'center',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n textAlign: 'center',\n whiteSpace: 'nowrap',\n ...shorthands.padding(0),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\n '& svg': {\n width: '16px',\n height: '16px',\n },\n },\n\n subtle: {\n opacity: 0,\n ...createCustomFocusIndicatorStyle(\n {\n opacity: 1,\n },\n { selector: 'focus-within' },\n ),\n },\n\n hidden: {\n visibility: 'hidden',\n },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableSelectionCellClassNames.root,\n styles.root,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.subtle && state.checked === false && styles.subtle,\n state.hidden && styles.hidden,\n state.root.className,\n );\n if (state.checkboxIndicator) {\n state.checkboxIndicator.className = mergeClasses(\n tableSelectionCellClassNames.checkboxIndicator,\n state.checkboxIndicator.className,\n );\n }\n\n if (state.radioIndicator) {\n state.radioIndicator.className = mergeClasses(\n tableSelectionCellClassNames.radioIndicator,\n styles.radioIndicator,\n state.radioIndicator.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/contexts/tableHeaderContext.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useIsInTableHeader = exports.TableHeaderContextProvider = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const tableHeaderContext = /*#__PURE__*/React.createContext(undefined);
11
+ const tableHeaderContextDefaultValue = '';
12
+ exports.TableHeaderContextProvider = tableHeaderContext.Provider;
13
+
14
+ const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;
15
+
16
+ exports.useIsInTableHeader = useIsInTableHeader;
17
+ //# sourceMappingURL=tableHeaderContext.js.map
package/lib-commonjs/contexts/tableHeaderContext.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-table/src/contexts/tableHeaderContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAAwC,SAAxC,CAA3B;AAEA,MAAM,8BAA8B,GAAG,EAAvC;AAEa,OAAA,CAAA,0BAAA,GAA6B,kBAAkB,CAAC,QAAhD;;AACN,MAAM,kBAAkB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,MAAyC,8BAA1E;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\n\nconst tableHeaderContext = React.createContext<string | undefined>(undefined);\n\nconst tableHeaderContextDefaultValue = '';\n\nexport const TableHeaderContextProvider = tableHeaderContext.Provider;\nexport const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-table",
3
- "version": "9.0.0-alpha.6",
3
+ "version": "9.0.0-alpha.8",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -26,25 +26,26 @@
26
26
  "devDependencies": {
27
27
  "@fluentui/eslint-plugin": "*",
28
28
  "@fluentui/react-conformance": "*",
29
- "@fluentui/react-conformance-griffel": "9.0.0-beta.15",
29
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.16",
30
30
  "@fluentui/scripts": "^1.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "@fluentui/react-aria": "^9.2.2",
34
- "@fluentui/react-avatar": "^9.2.2",
35
- "@fluentui/react-checkbox": "^9.0.8",
33
+ "@fluentui/react-aria": "^9.2.3",
34
+ "@fluentui/react-avatar": "^9.2.4",
35
+ "@fluentui/react-checkbox": "^9.0.10",
36
36
  "@fluentui/react-icons": "^2.0.175",
37
- "@fluentui/react-tabster": "^9.1.3",
38
- "@fluentui/react-theme": "^9.1.0",
39
- "@fluentui/react-utilities": "^9.1.1",
40
- "@griffel/react": "^1.4.0",
37
+ "@fluentui/react-radio": "^9.0.9",
38
+ "@fluentui/react-tabster": "^9.2.0",
39
+ "@fluentui/react-theme": "^9.1.1",
40
+ "@fluentui/react-utilities": "^9.1.2",
41
+ "@griffel/react": "^1.4.1",
41
42
  "tslib": "^2.1.0"
42
43
  },
43
44
  "peerDependencies": {
44
- "@types/react": ">=16.8.0 <18.0.0",
45
- "@types/react-dom": ">=16.8.0 <18.0.0",
46
- "react": ">=16.8.0 <18.0.0",
47
- "react-dom": ">=16.8.0 <18.0.0"
45
+ "@types/react": ">=16.8.0 <19.0.0",
46
+ "@types/react-dom": ">=16.8.0 <19.0.0",
47
+ "react": ">=16.8.0 <19.0.0",
48
+ "react-dom": ">=16.8.0 <19.0.0"
48
49
  },
49
50
  "beachball": {
50
51
  "disallowedChangeTypes": [