@fluentui/react-table 9.0.0-alpha.13 → 9.0.0-alpha.15

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 (42) hide show
  1. package/CHANGELOG.json +153 -1
  2. package/CHANGELOG.md +39 -2
  3. package/dist/index.d.ts +5 -5
  4. package/lib/components/DataGrid/DataGrid.types.js.map +1 -1
  5. package/lib/components/DataGrid/useDataGrid.js +5 -3
  6. package/lib/components/DataGrid/useDataGrid.js.map +1 -1
  7. package/lib/components/DataGridCell/useDataGridCell.js +1 -1
  8. package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
  9. package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js +1 -0
  10. package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
  11. package/lib/components/DataGridRow/DataGridRow.types.js.map +1 -1
  12. package/lib/components/DataGridRow/useDataGridRow.js +8 -4
  13. package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
  14. package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js +4 -3
  15. package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
  16. package/lib/components/TableHeaderCell/useTableHeaderCell.js +5 -4
  17. package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
  18. package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +12 -3
  19. package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
  20. package/lib/components/TableRow/useTableRowStyles.js +0 -4
  21. package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
  22. package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js +10 -2
  23. package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
  24. package/lib-commonjs/components/DataGrid/useDataGrid.js +5 -3
  25. package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
  26. package/lib-commonjs/components/DataGridCell/useDataGridCell.js +1 -1
  27. package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map +1 -1
  28. package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js +1 -0
  29. package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
  30. package/lib-commonjs/components/DataGridRow/useDataGridRow.js +11 -7
  31. package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
  32. package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js +4 -3
  33. package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
  34. package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js +5 -3
  35. package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
  36. package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +13 -3
  37. package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
  38. package/lib-commonjs/components/TableRow/useTableRowStyles.js +0 -4
  39. package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
  40. package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js +11 -2
  41. package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
  42. package/package.json +10 -9
@@ -9,6 +9,8 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
10
10
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
11
 
12
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
+
12
14
  exports.tableSelectionCellClassNames = {
13
15
  root: 'fui-TableSelectionCell',
14
16
  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
@@ -49,7 +51,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
49
51
  "z8tnut": "f1g0x7ka",
50
52
  "z189sj": ["fhxju0i", "f1cnd47f"],
51
53
  "Byoj8tv": "f1qch9an",
52
- "uwmqm3": ["f1cnd47f", "fhxju0i"]
54
+ "uwmqm3": ["f1cnd47f", "fhxju0i"],
55
+ "Bn4voq9": "fz36nt7",
56
+ "g9k6zt": "f9znhxp",
57
+ "Bfpq7zp": "fqrak0z",
58
+ "kdpuga": ["f1o2ludy", "f1kjnpwc"],
59
+ "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
60
+ "B6xbmo0": ["fxmnebo", "f1witrsb"],
61
+ "dm238s": ["f1witrsb", "fxmnebo"]
53
62
  },
54
63
  "radioIndicator": {
55
64
  "mc9l5x": "f22iagw",
@@ -67,7 +76,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
67
76
  "Bcdw1i0": "fd7fpy0"
68
77
  }
69
78
  }, {
70
- "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;}", ".fk73vx1{opacity:0;}", ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
79
+ "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;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".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;}", ".fk73vx1{opacity:0;}", ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
71
80
  "f": [".ftqa4ok:focus{outline-style:none;}"],
72
81
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
73
82
  });
@@ -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;;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AA6BA;;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 },\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/"}
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;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,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;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAoCA;;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';\nimport { tokens } from '@fluentui/react-theme';\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 ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n radioIndicator: {\n display: 'flex',\n flexGrow: 1,\n alignItems: 'center',\n justifyContent: 'center',\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-table",
3
- "version": "9.0.0-alpha.13",
3
+ "version": "9.0.0-alpha.15",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -30,15 +30,16 @@
30
30
  "@fluentui/scripts": "^1.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "@fluentui/react-aria": "^9.3.2",
34
- "@fluentui/react-avatar": "^9.2.8",
35
- "@fluentui/react-checkbox": "^9.0.14",
36
- "@fluentui/react-context-selector": "^9.1.2",
33
+ "@fluentui/keyboard-keys": "^9.0.1",
34
+ "@fluentui/react-aria": "^9.3.3",
35
+ "@fluentui/react-avatar": "^9.2.10",
36
+ "@fluentui/react-checkbox": "^9.0.16",
37
+ "@fluentui/react-context-selector": "^9.1.3",
37
38
  "@fluentui/react-icons": "^2.0.175",
38
- "@fluentui/react-radio": "^9.0.13",
39
- "@fluentui/react-tabster": "^9.3.2",
40
- "@fluentui/react-theme": "^9.1.3",
41
- "@fluentui/react-utilities": "^9.2.2",
39
+ "@fluentui/react-radio": "^9.0.15",
40
+ "@fluentui/react-tabster": "^9.3.4",
41
+ "@fluentui/react-theme": "^9.1.5",
42
+ "@fluentui/react-utilities": "^9.3.0",
42
43
  "@griffel/react": "^1.4.2",
43
44
  "tslib": "^2.1.0"
44
45
  },