@fluentui/react-table 9.6.1 → 9.7.0

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Thu, 20 Jul 2023 18:24:25 GMT",
+      "date": "Tue, 25 Jul 2023 13:26:24 GMT",
+      "tag": "@fluentui/react-table_v9.7.0",
+      "version": "9.7.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "39cf021c60171b8e56a64637ef046478c686d625",
+            "comment": "Table/DataGrid: Improve keyboard column resizing experience"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.5.14",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.26",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.26",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.11.0",
+            "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
+          }
+        ],
+        "patch": [
+          {
+            "author": "lingfan.gao@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "038d8f703f43ea290412001c94179ee5d1dac4d2",
+            "comment": "28456"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "1082207b08959996cd736725735cadc01d0849b0",
+            "comment": "chore: Update react-icons version to pick up fowardref change."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 20 Jul 2023 18:27:34 GMT",
       "tag": "@fluentui/react-table_v9.6.1",
       "version": "9.6.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Thu, 20 Jul 2023 18:24:25 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Jul 2023 13:26:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.0)
+
+Tue, 25 Jul 2023 13:26:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.1..@fluentui/react-table_v9.7.0)
+
+### Minor changes
+
+- Table/DataGrid: Improve keyboard column resizing experience ([PR #28493](https://github.com/microsoft/fluentui/pull/28493) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-avatar to v9.5.14 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-radio to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+- Bump @fluentui/react-tabster to v9.11.0 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
+
+### Patches
+
+- 28456 ([PR #28577](https://github.com/microsoft/fluentui/pull/28577) by lingfan.gao@microsoft.com)
+- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
+
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.6.1)
 
-Thu, 20 Jul 2023 18:24:25 GMT 
+Thu, 20 Jul 2023 18:27:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.0..@fluentui/react-table_v9.6.1)
 
 ### Patches

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js

@@ -1,7 +1,6 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { KeyboardResizingCurrentColumnDataAttribute } from '../../hooks/useTableColumnSizing';
 export const tableHeaderCellClassName = 'fui-TableHeaderCell';
 export const tableHeaderCellClassNames = {
   root: 'fui-TableHeaderCell',
@@ -45,14 +44,7 @@ const useStyles = /*#__PURE__*/__styles({
     B8osjzx: ["f187m4uq", "fs9qmxf"],
     u7xebq: ["f145mzao", "f1uha7eq"],
     Blsv9te: ["f1uha7eq", "f145mzao"],
-    qhf8xq: "f10pi13n",
-    Ba2hzls: ["f1bwmy6q", "f156ixcz"],
-    Bhwr9k8: ["f156ixcz", "f1bwmy6q"],
-    Bb54w5r: ["fsy9rq9", "fl6c5zn"],
-    bgd754: ["fl6c5zn", "fsy9rq9"],
-    Boazqr3: "f1tpyba1",
-    Blqj7q0: "f1pnds93",
-    xlw1ys: "fa5446a"
+    qhf8xq: "f10pi13n"
   },
   rootInteractive: {
     Jwef8y: "f1t94bn6",
@@ -103,7 +95,7 @@ const useStyles = /*#__PURE__*/__styles({
   },
   resizeHandle: {}
 }, {
-  d: [".figsok6{font-weight:var(--fontWeightRegular);}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1bwmy6q[data-keyboard-resizing]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f156ixcz[data-keyboard-resizing]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fsy9rq9[data-keyboard-resizing]{border-top-right-radius:var(--borderRadiusMedium);}", ".fl6c5zn[data-keyboard-resizing]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1tpyba1[data-keyboard-resizing]{outline-width:var(--strokeWidthThick);}", ".f1pnds93[data-keyboard-resizing]{outline-style:solid;}", ".fa5446a[data-keyboard-resizing]{outline-color:var(--colorStrokeFocus2);}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".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;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".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;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  d: [".figsok6{font-weight:var(--fontWeightRegular);}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".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;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".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;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
   h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","KeyboardResizingCurrentColumnDataAttribute","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","mc9l5x","ha4doy","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","useStyles","Bhrd7zp","z8tnut","z189sj","Byoj8tv","uwmqm3","B3nxjsc","Bmvh20x","robkg1","pehzd3","B8osjzx","u7xebq","Blsv9te","qhf8xq","Ba2hzls","Bhwr9k8","Bb54w5r","bgd754","Boazqr3","Blqj7q0","xlw1ys","rootInteractive","Jwef8y","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { KeyboardResizingCurrentColumnDataAttribute } from '../../hooks/useTableColumnSizing';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n    root: 'fui-TableHeaderCell',\n    button: 'fui-TableHeaderCell__button',\n    sortIcon: 'fui-TableHeaderCell__sortIcon',\n    aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        verticalAlign: 'middle'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        ...shorthands.flex(1, 1, '0px'),\n        minWidth: '0px'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        fontWeight: tokens.fontWeightRegular,\n        ...shorthands.padding('0px', tokens.spacingHorizontalS),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        }, {\n            selector: 'focus-within'\n        }),\n        position: 'relative',\n        [`[${KeyboardResizingCurrentColumnDataAttribute}]`]: {\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n        }\n    },\n    rootInteractive: {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    resetButton: {\n        resize: 'horizontal',\n        boxSizing: 'content-box',\n        backgroundColor: 'inherit',\n        color: 'inherit',\n        fontFamily: 'inherit',\n        fontSize: 'inherit',\n        lineHeight: 'normal',\n        ...shorthands.overflow('visible'),\n        ...shorthands.padding(0),\n        ...shorthands.borderStyle('none'),\n        WebkitAppearance: 'button',\n        textAlign: 'unset'\n    },\n    button: {\n        position: 'relative',\n        width: '100%',\n        display: 'flex',\n        flexGrow: 1,\n        height: '100%',\n        alignItems: 'center',\n        ...shorthands.gap(tokens.spacingHorizontalXS),\n        minHeight: '32px',\n        ...shorthands.flex(1, 1, '0px'),\n        outlineStyle: 'none'\n    },\n    sortable: {\n        cursor: 'pointer'\n    },\n    sortIcon: {\n        display: 'flex',\n        alignItems: 'center',\n        paddingTop: tokens.spacingVerticalXXS\n    },\n    resizeHandle: {}\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */ export const useTableHeaderCellStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n    if (state.sortIcon) {\n        state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","mc9l5x","ha4doy","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","useStyles","Bhrd7zp","z8tnut","z189sj","Byoj8tv","uwmqm3","B3nxjsc","Bmvh20x","robkg1","pehzd3","B8osjzx","u7xebq","Blsv9te","qhf8xq","rootInteractive","Jwef8y","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n    root: 'fui-TableHeaderCell',\n    button: 'fui-TableHeaderCell__button',\n    sortIcon: 'fui-TableHeaderCell__sortIcon',\n    aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        verticalAlign: 'middle'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        ...shorthands.flex(1, 1, '0px'),\n        minWidth: '0px'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        fontWeight: tokens.fontWeightRegular,\n        ...shorthands.padding('0px', tokens.spacingHorizontalS),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        }, {\n            selector: 'focus-within'\n        }),\n        position: 'relative'\n    },\n    rootInteractive: {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed\n        }\n    },\n    resetButton: {\n        resize: 'horizontal',\n        boxSizing: 'content-box',\n        backgroundColor: 'inherit',\n        color: 'inherit',\n        fontFamily: 'inherit',\n        fontSize: 'inherit',\n        lineHeight: 'normal',\n        ...shorthands.overflow('visible'),\n        ...shorthands.padding(0),\n        ...shorthands.borderStyle('none'),\n        WebkitAppearance: 'button',\n        textAlign: 'unset'\n    },\n    button: {\n        position: 'relative',\n        width: '100%',\n        display: 'flex',\n        flexGrow: 1,\n        height: '100%',\n        alignItems: 'center',\n        ...shorthands.gap(tokens.spacingHorizontalXS),\n        minHeight: '32px',\n        ...shorthands.flex(1, 1, '0px'),\n        outlineStyle: 'none'\n    },\n    sortable: {\n        cursor: 'pointer'\n    },\n    sortIcon: {\n        display: 'flex',\n        alignItems: 'center',\n        paddingTop: tokens.spacingVerticalXXS\n    },\n    resizeHandle: {}\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */ export const useTableHeaderCellStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n    if (state.sortIcon) {\n        state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js

@@ -22,6 +22,8 @@ const useStyles = /*#__PURE__*/__styles({
     Bmy1vo4: "f13u1uyl",
     B3o57yi: "fezquic",
     Bj3rh1h: "f19g0ac",
+    B3cna0y: "f1tkae59",
+    Brovlpu: "ftqa4ok",
     B7zu5sd: "f15pjodv",
     Bs6t6z0: "ftgrb5f",
     Fdvyjd: "f2df6js",
@@ -34,6 +36,7 @@ const useStyles = /*#__PURE__*/__styles({
   }
 }, {
   d: [".f1euv43f{position:absolute;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fjw5fx7{width:16px;}", ".f1hu3pq6{margin-top:0;}", ".fn2i5td{margin-right:-8px;}", ".f1eybr6b{margin-left:-8px;}", ".f19f4twv{margin-bottom:0;}", ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".ftgrb5f:after{content:\" \";}", ".f2df6js:after{display:block;}", ".fshsryb:after{width:1px;}", ".f11ef69:after{position:absolute;}", ".f12lb1dx:after{left:50%;}", ".f13tbxeo:after{right:50%;}", ".fu4ulse:after{top:0;}", ".fw2wsqs:after{bottom:0;}", ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}"],
+  f: [".f1tkae59:focus{opacity:1;}", ".ftqa4ok:focus{outline-style:none;}"],
   h: [".f15pjodv:hover{opacity:1;}"]
 });
 /**

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","B6of3ja","t21cq0","jrapky","Frg6f3","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B7zu5sd","Bs6t6z0","Fdvyjd","Biobvvw","Hdbjpj","jc51t6","u6d25","Bj55yzk","Bkbwdz4","d","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n    root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        bottom: 0,\n        width: '16px',\n        ...shorthands.margin(0, '-8px'),\n        cursor: 'col-resize',\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionDuration: '.2s',\n        zIndex: 1,\n        ':hover': {\n            opacity: 1\n        },\n        ':after': {\n            content: '\" \"',\n            display: 'block',\n            width: '1px',\n            position: 'absolute',\n            left: '50%',\n            top: 0,\n            bottom: 0,\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAG5B,SAAS,CAAC,CAAC;EAC1B2B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,GAAGlC,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAE6B,MAAM,CAAC7B,IAAI,EAAE4B,KAAK,CAAC5B,IAAI,CAAC8B,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","B6of3ja","t21cq0","jrapky","Frg6f3","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bs6t6z0","Fdvyjd","Biobvvw","Hdbjpj","jc51t6","u6d25","Bj55yzk","Bkbwdz4","d","f","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n    root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        bottom: 0,\n        width: '16px',\n        ...shorthands.margin(0, '-8px'),\n        cursor: 'col-resize',\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionDuration: '.2s',\n        zIndex: 1,\n        // If mouse users focus on the resize handle through a context menu, we want the handle\n        // to be visible because the mouse might not be hovering over the handle\n        ':focus': {\n            opacity: 1,\n            outlineStyle: 'none'\n        },\n        ':hover': {\n            opacity: 1\n        },\n        ':after': {\n            content: '\" \"',\n            display: 'block',\n            width: '1px',\n            position: 'absolute',\n            left: '50%',\n            top: 0,\n            bottom: 0,\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiCrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;EAC1B8B,KAAK,CAAC/B,IAAI,CAACiC,SAAS,GAAGrC,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEgC,MAAM,CAAChC,IAAI,EAAE+B,KAAK,CAAC/B,IAAI,CAACiC,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/hooks/useKeyboardResizing.js

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';
 import { useEventCallback } from '@fluentui/react-utilities';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';
 const STEP = 20;
 const PRECISION_MODIFIER = Shift;
 const PRECISION_FACTOR = 1 / 4;
 export function useKeyboardResizing(columnResizeState) {
     const [columnId, setColumnId] = React.useState();
     const onChangeRef = React.useRef();
-    const addListenerTimeout = React.useRef();
+    const { findPrevFocusable  } = useFocusFinders();
     const columnResizeStateRef = React.useRef(columnResizeState);
     React.useEffect(()=>{
         columnResizeStateRef.current = columnResizeState;
     }, [
         columnResizeState
     ]);
-    const { targetDocument  } = useFluent();
+    const [resizeHandleRefs] = React.useState(()=>new Map());
     const keyboardHandler = useEventCallback((event)=>{
         if (!columnId) {
             return;
@@ -29,14 +29,14 @@ export function useKeyboardResizing(columnResizeState) {
         switch(event.key){
             case ArrowLeft:
                 stopEvent();
-                columnResizeStateRef.current.setColumnWidth(event, {
+                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {
                     columnId,
                     width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
                 });
                 return;
             case ArrowRight:
                 stopEvent();
-                columnResizeStateRef.current.setColumnWidth(event, {
+                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {
                     columnId,
                     width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
                 });
@@ -44,64 +44,87 @@ export function useKeyboardResizing(columnResizeState) {
             case Space:
             case Enter:
             case Escape:
+                var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).
+                _resizeHandleRefs_get, _resizeHandleRefs_get_current;
                 stopEvent();
-                disableInteractiveMode();
+                (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();
                 break;
         }
     });
-    // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
-    React.useEffect(()=>{
-        return ()=>{
-            var _targetDocument_defaultView, _targetDocument_defaultView1;
-            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(addListenerTimeout.current);
-            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('keydown', keyboardHandler);
-        };
-    }, [
-        keyboardHandler,
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
-    ]);
     const enableInteractiveMode = React.useCallback((colId)=>{
-        var _onChangeRef_current, _targetDocument_defaultView;
+        var _onChangeRef_current, _resizeHandleRefs_get;
         setColumnId(colId);
         (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
-        // Create the listener in the next tick, because the event that triggered this is still propagating
-        // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.
-        // No idea why this is happening, but this is a working workaround.
-        // Tracked here: https://github.com/microsoft/fluentui/issues/27177
-        addListenerTimeout.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setTimeout(()=>{
-            var _targetDocument_defaultView;
-            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('keydown', keyboardHandler);
-        }, 0);
+        const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
+        if (handle) {
+            handle.setAttribute('tabindex', '-1');
+            handle.tabIndex = -1;
+            handle.focus();
+        }
     }, [
-        keyboardHandler,
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+        resizeHandleRefs
     ]);
     const disableInteractiveMode = React.useCallback(()=>{
-        var _targetDocument_defaultView;
-        if (columnId) {
-            var _onChangeRef_current;
-            (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        var // Notify the onChange listener that we are disabling interactive mode.
+        _onChangeRef_current, _resizeHandleRefs_get;
+        if (!columnId) {
+            return;
+        }
+        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        // Find the previous focusable element (table header button) and focus it.
+        const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
+        if (el) {
+            var _findPrevFocusable;
+            (_findPrevFocusable = findPrevFocusable(el)) === null || _findPrevFocusable === void 0 ? void 0 : _findPrevFocusable.focus(); // Focus the previous focusable element (header button).
+            el.removeAttribute('tabindex');
         }
         setColumnId(undefined);
-        targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('keydown', keyboardHandler);
     }, [
         columnId,
-        keyboardHandler,
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+        findPrevFocusable,
+        resizeHandleRefs
     ]);
     const toggleInteractiveMode = (colId, onChange)=>{
         onChangeRef.current = onChange;
         if (!columnId) {
             enableInteractiveMode(colId);
         } else if (colId && columnId !== colId) {
+            enableInteractiveMode(colId);
             setColumnId(colId);
-            onChange === null || onChange === void 0 ? void 0 : onChange(columnId, true);
         } else {
             disableInteractiveMode();
         }
     };
+    const getKeyboardResizingRef = React.useCallback((colId)=>{
+        const ref = resizeHandleRefs.get(colId) || React.createRef();
+        resizeHandleRefs.set(colId, ref);
+        return ref;
+    }, [
+        resizeHandleRefs
+    ]);
+    // This makes sure the left and right arrow keys are ignored in tabster,
+    // so that they can be used for resizing.
+    const tabsterAttrs = useTabsterAttributes({
+        focusable: {
+            ignoreKeydown: {
+                ArrowLeft: true,
+                ArrowRight: true
+            }
+        }
+    });
     return {
         toggleInteractiveMode,
-        columnId
+        columnId,
+        getKeyboardResizingProps: (colId, currentWidth)=>({
+                onKeyDown: keyboardHandler,
+                onBlur: disableInteractiveMode,
+                ref: getKeyboardResizingRef(colId),
+                role: 'separator',
+                'aria-label': 'Resize column',
+                'aria-valuetext': `${currentWidth} pixels`,
+                'aria-hidden': colId === columnId ? false : true,
+                tabIndex: colId === columnId ? 0 : undefined,
+                ...tabsterAttrs
+            })
     };
 }

package/lib/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const addListenerTimeout = React.useRef<number>();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const { targetDocument } = useFluent();\n\n  const keyboardHandler = useEventCallback((event: KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        disableInteractiveMode();\n        break;\n    }\n  });\n\n  // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener\n  React.useEffect(\n    () => () => {\n      targetDocument?.defaultView?.clearTimeout(addListenerTimeout.current);\n      targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n      // Create the listener in the next tick, because the event that triggered this is still propagating\n      // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.\n      // No idea why this is happening, but this is a working workaround.\n      // Tracked here: https://github.com/microsoft/fluentui/issues/27177\n      addListenerTimeout.current = targetDocument?.defaultView?.setTimeout(() => {\n        targetDocument?.defaultView?.addEventListener('keydown', keyboardHandler);\n      }, 0);\n    },\n    [keyboardHandler, targetDocument?.defaultView],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (columnId) {\n      onChangeRef.current?.(columnId, false);\n    }\n    setColumnId(undefined);\n    targetDocument?.defaultView?.removeEventListener('keydown', keyboardHandler);\n  }, [columnId, keyboardHandler, targetDocument?.defaultView]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      setColumnId(colId);\n      onChange?.(columnId, true);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFluent_unstable","useFluent","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","addListenerTimeout","columnResizeStateRef","useEffect","current","targetDocument","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","disableInteractiveMode","defaultView","clearTimeout","removeEventListener","enableInteractiveMode","useCallback","colId","setTimeout","addEventListener","undefined","toggleInteractiveMode","onChange"],"mappings":"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"}
+{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n      onKeyDown: keyboardHandler,\n      onBlur: disableInteractiveMode,\n      ref: getKeyboardResizingRef(colId),\n      role: 'separator',\n      'aria-label': 'Resize column',\n      'aria-valuetext': `${currentWidth} pixels`,\n      'aria-hidden': colId === columnId ? false : true,\n      tabIndex: colId === columnId ? 0 : undefined,\n      ...tabsterAttrs,\n    }),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}

package/lib/hooks/useTableColumnSizing.js

@@ -4,7 +4,6 @@ import { useMeasureElement } from './useMeasureElement';
 import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
 import { useTableColumnResizeState } from './useTableColumnResizeState';
 import { useKeyboardResizing } from './useKeyboardResizing';
-export const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';
 export const defaultColumnSizingState = {
     getColumnWidths: ()=>[],
     getOnMouseDown: ()=>()=>null,
@@ -43,7 +42,7 @@ function useTableColumnSizingState(tableState, params) {
     // Creates the mouse handler and attaches the state to it
     const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
     // Creates the keyboard handler for resizing columns
-    const { toggleInteractiveMode , columnId: keyboardResizingColumnId  } = useKeyboardResizing(columnResizeState);
+    const { toggleInteractiveMode , getKeyboardResizingProps  } = useKeyboardResizing(columnResizeState);
     const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{
             e.preventDefault();
             e.nativeEvent.stopPropagation();
@@ -66,14 +65,12 @@ function useTableColumnSizingState(tableState, params) {
                 const col = columnResizeState.getColumnById(columnId);
                 const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {
                     onMouseDown: mouseHandler.getOnMouseDown(columnId),
-                    onTouchStart: mouseHandler.getOnMouseDown(columnId)
+                    onTouchStart: mouseHandler.getOnMouseDown(columnId),
+                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
                 });
                 return col ? {
                     style: getColumnStyles(col),
-                    aside,
-                    ...keyboardResizingColumnId === columnId ? {
-                        [KeyboardResizingCurrentColumnDataAttribute]: ''
-                    } : {}
+                    aside
                 } : {};
             },
             getTableCellProps: (columnId)=>{

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n  // Creates the keyboard handler for resizing columns\n  const { toggleInteractiveMode, columnId: keyboardResizingColumnId } = useKeyboardResizing(columnResizeState);\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\n  );\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n          />\n        );\n        return col\n          ? {\n              style: getColumnStyles(col),\n              aside,\n              ...(keyboardResizingColumnId === columnId ? { [KeyboardResizingCurrentColumnDataAttribute]: '' } : {}),\n            }\n          : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","KeyboardResizingCurrentColumnDataAttribute","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","keyboardResizingColumnId","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown","onTouchStart"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,uBAAuB;AASzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,6CAA6C,yBAAyB;AAEnF,OAAO,MAAMC,2BAAmD;IAC9DC,iBAAiB,IAAM,EAAE;IACzBC,gBAAgB,IAAM,IAAM,IAAI;IAChCC,gBAAgB,IAAM,IAAI;IAC1BC,yBAAyB,IAAO,CAAA;YAAEC,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IAC1DC,mBAAmB,IAAO,CAAA;YAAEF,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IACpDE,oBAAoB,IAAM,IAAM,IAAI;AACtC,EAAE;AAEF,OAAO,SAASC,8BAAqCC,MAAmC,EAAE;IACxF,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,0BAA0BD,YAAYD;AAC1F,CAAC;AAED,SAASG,gBAAgBC,MAAwB,EAAuB;IACtE,MAAMC,QAAQD,OAAOC,KAAK;IAE1B,OAAO;QACL,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACZ;AACF;AAEA,SAASH,0BACPD,UAAqC,EACrCD,MAAmC,EACR;IAC3B,MAAM,EAAEQ,QAAO,EAAE,GAAGP;IAEpB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAEI,kBAAiB,EAAE,GAAGxB;IACrC,kEAAkE;IAClE,MAAMyB,oBAAoBvB,0BAA0BqB,SAASH,QAASL,CAAAA,CAAAA,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQW,oBAAoB,AAAD,KAAK,CAAA,GAAIX;IAC1G,yDAAyD;IACzD,MAAMY,eAAe1B,iCAAiCwB;IACtD,oDAAoD;IACpD,MAAM,EAAEG,sBAAqB,EAAEjB,UAAUkB,yBAAwB,EAAE,GAAG1B,oBAAoBsB;IAE1F,MAAMZ,qBAAqBf,MAAMgC,WAAW,CAC1C,CAACnB,UAAyBoB,WACxB,CAACC,IAA2C;YAC1CA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BP,sBAAsBjB,UAAUoB;QAClC,GACF;QAACH;KAAsB;IAGzB,OAAO;QACL,GAAGZ,UAAU;QACboB,UAAUZ;QACV,gEAAgE;QAChEa,uBAAuB;YACrB9B,gBAAgBoB,aAAapB,cAAc;YAC3CC,gBAAgB,CAACG,UAAyB2B,IACxCb,kBAAkBjB,cAAc,CAAC+B,WAAW;oBAAE5B;oBAAUS,OAAOkB;gBAAE;YACnEhC,iBAAiBmB,kBAAkBe,UAAU;YAC7C/B,yBAAyB,CAACE,WAA4B;gBACpD,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAE5C,MAAMgC,sBACJ,oBAAC5C;oBACC6C,aAAajB,aAAapB,cAAc,CAACI;oBACzCkC,cAAclB,aAAapB,cAAc,CAACI;;gBAG9C,OAAO8B,MACH;oBACE/B,OAAOQ,gBAAgBuB;oBACvBE;oBACA,GAAId,6BAA6BlB,WAAW;wBAAE,CAACP,2CAA2C,EAAE;oBAAG,IAAI,CAAC,CAAC;gBACvG,IACA,CAAC,CAAC;YACR;YACAQ,mBAAmB,CAACD,WAA4B;gBAC9C,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAC5C,OAAO8B,MAAM;oBAAE/B,OAAOQ,gBAAgBuB;gBAAK,IAAI,CAAC,CAAC;YACnD;YACA5B;QACF;IACF;AACF"}
+{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n  // Creates the keyboard handler for resizing columns\n  const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\n  );\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n\n        const aside = (\n          <TableResizeHandle\n            onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n            onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n            {...getKeyboardResizingProps(columnId, col?.width || 0)}\n          />\n        );\n        return col\n          ? {\n              style: getColumnStyles(col),\n              aside,\n            }\n          : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown","onTouchStart"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,uBAAuB;AAUzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,2BAAmD;IAC9DC,iBAAiB,IAAM,EAAE;IACzBC,gBAAgB,IAAM,IAAM,IAAI;IAChCC,gBAAgB,IAAM,IAAI;IAC1BC,yBAAyB,IAAO,CAAA;YAAEC,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IAC1DC,mBAAmB,IAAO,CAAA;YAAEF,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IACpDE,oBAAoB,IAAM,IAAM,IAAI;AACtC,EAAE;AAEF,OAAO,SAASC,8BAAqCC,MAAmC,EAAE;IACxF,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,0BAA0BD,YAAYD;AAC1F,CAAC;AAED,SAASG,gBAAgBC,MAAwB,EAAuB;IACtE,MAAMC,QAAQD,OAAOC,KAAK;IAE1B,OAAO;QACL,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACZ;AACF;AAEA,SAASH,0BACPD,UAAqC,EACrCD,MAAmC,EACR;IAC3B,MAAM,EAAEQ,QAAO,EAAE,GAAGP;IAEpB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAEI,kBAAiB,EAAE,GAAGvB;IACrC,kEAAkE;IAClE,MAAMwB,oBAAoBtB,0BAA0BoB,SAASH,QAASL,CAAAA,CAAAA,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQW,oBAAoB,AAAD,KAAK,CAAA,GAAIX;IAC1G,yDAAyD;IACzD,MAAMY,eAAezB,iCAAiCuB;IACtD,oDAAoD;IACpD,MAAM,EAAEG,sBAAqB,EAAEC,yBAAwB,EAAE,GAAGzB,oBAAoBqB;IAEhF,MAAMZ,qBAAqBd,MAAM+B,WAAW,CAC1C,CAACnB,UAAyBoB,WACxB,CAACC,IAA2C;YAC1CA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BP,sBAAsBjB,UAAUoB;QAClC,GACF;QAACH;KAAsB;IAGzB,OAAO;QACL,GAAGZ,UAAU;QACboB,UAAUZ;QACV,gEAAgE;QAChEa,uBAAuB;YACrB9B,gBAAgBoB,aAAapB,cAAc;YAC3CC,gBAAgB,CAACG,UAAyB2B,IACxCb,kBAAkBjB,cAAc,CAAC+B,WAAW;oBAAE5B;oBAAUS,OAAOkB;gBAAE;YACnEhC,iBAAiBmB,kBAAkBe,UAAU;YAC7C/B,yBAAyB,CAACE,WAA4B;gBACpD,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAE5C,MAAMgC,sBACJ,oBAAC3C;oBACC4C,aAAajB,aAAapB,cAAc,CAACI;oBACzCkC,cAAclB,aAAapB,cAAc,CAACI;oBACzC,GAAGkB,yBAAyBlB,UAAU8B,CAAAA,gBAAAA,iBAAAA,KAAAA,IAAAA,IAAKrB,KAAK,AAAD,KAAK,EAAE;;gBAG3D,OAAOqB,MACH;oBACE/B,OAAOQ,gBAAgBuB;oBACvBE;gBACF,IACA,CAAC,CAAC;YACR;YACA/B,mBAAmB,CAACD,WAA4B;gBAC9C,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAC5C,OAAO8B,MAAM;oBAAE/B,OAAOQ,gBAAgBuB;gBAAK,IAAI,CAAC,CAAC;YACnD;YACA5B;QACF;IACF;AACF"}

package/lib/hooks/useTableSelection.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useEventCallback, useSelection } from '@fluentui/react-utilities';
 const noop = ()=>undefined;
 export const defaultTableSelectionState = {
@@ -26,6 +27,54 @@ export function useTableSelectionState(tableState, options) {
         selectedItems,
         onSelectionChange
     });
+    // Selection state can contain obselete items (i.e. rows that are removed)
+    const selectableRowIds = React.useMemo(()=>{
+        const rowIds = new Set();
+        for(let i = 0; i < items.length; i++){
+            var _getRowId;
+            rowIds.add((_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(items[i])) !== null && _getRowId !== void 0 ? _getRowId : i);
+        }
+        return rowIds;
+    }, [
+        items,
+        getRowId
+    ]);
+    const allRowsSelected = React.useMemo(()=>{
+        if (selectionMode === 'single') {
+            const selectedRow = Array.from(selected)[0];
+            return selectableRowIds.has(selectedRow);
+        }
+        // multiselect case
+        if (selected.size < selectableRowIds.size) {
+            return false;
+        }
+        let res = true;
+        selectableRowIds.forEach((selectableRowId)=>{
+            if (!selected.has(selectableRowId)) {
+                res = false;
+            }
+        });
+        return res;
+    }, [
+        selectableRowIds,
+        selected,
+        selectionMode
+    ]);
+    const someRowsSelected = React.useMemo(()=>{
+        if (selected.size <= 0) {
+            return false;
+        }
+        let res = false;
+        selectableRowIds.forEach((selectableRowId)=>{
+            if (selected.has(selectableRowId)) {
+                res = true;
+            }
+        });
+        return res;
+    }, [
+        selectableRowIds,
+        selected
+    ]);
     const toggleAllRows = useEventCallback((e)=>{
         var _getRowId;
         selectionMethods.toggleAllItems(e, items.map((item, i)=>{
@@ -41,8 +90,8 @@ export function useTableSelectionState(tableState, options) {
         ...tableState,
         selection: {
             selectionMode,
-            someRowsSelected: selected.size > 0,
-            allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,
+            someRowsSelected,
+            allRowsSelected,
             selectedRows: selected,
             toggleRow,
             toggleAllRows,

package/lib/hooks/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelection.ts"],"sourcesContent":["import { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: SelectionHookParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange,\n  });\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionMethods.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.toggleItem(e, rowId),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.deselectItem(e, rowId),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.selectItem(e, rowId),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n  const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected: selected.size > 0,\n      allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"names":["useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","e","toggleAllItems","map","item","i","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection","size","length"],"mappings":"AAAA,SAA8BA,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AAGhG,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,6BAAkD;IAC7DC,iBAAiB,KAAK;IACtBC,WAAWJ;IACXK,aAAaL;IACbM,eAAe,IAAM,KAAK;IAC1BC,WAAWP;IACXQ,cAAc,IAAIC;IAClBC,kBAAkB,KAAK;IACvBC,eAAeX;IACfY,WAAWZ;IACXa,eAAe;AACjB,EAAE;AAEF,OAAO,SAASC,kBAAyBC,OAA4B,EAAE;IACrE,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,uBAAuBD,YAAYD;AACvF,CAAC;AAED,OAAO,SAASE,uBACdD,UAAqC,EACrCD,OAA4B,EACD;IAC3B,MAAM,EAAEG,MAAK,EAAEC,SAAQ,EAAE,GAAGH;IAC5B,MAAM,EAAEH,eAAeA,cAAa,EAAEO,qBAAoB,EAAEC,cAAa,EAAEC,kBAAiB,EAAE,GAAGP;IAEjG,MAAM,CAACQ,UAAUC,iBAAiB,GAAGzB,aAAa;QAChDc;QACAO;QACAC;QACAC;IACF;IAEA,MAAMX,gBAAsDb,iBAAiB2B,CAAAA,IAAK;YAGvDN;QAFzBK,iBAAiBE,cAAc,CAC7BD,GACAP,MAAMS,GAAG,CAAC,CAACC,MAAMC;YAAMV,OAAAA,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWS,mBAAXT,uBAAAA,YAAoBU,CAAC;;IAEhD;IAEA,MAAMjB,YAA8Cd,iBAAiB,CAAC2B,GAAGK,QACvEN,iBAAiBO,UAAU,CAACN,GAAGK;IAGjC,MAAMzB,cAAkDP,iBAAiB,CAAC2B,GAAGK,QAC3EN,iBAAiBQ,YAAY,CAACP,GAAGK;IAGnC,MAAMvB,YAA8CT,iBAAiB,CAAC2B,GAAGK,QACvEN,iBAAiBS,UAAU,CAACR,GAAGK;IAGjC,MAAMxB,gBAAsD,CAACwB,QAAsBN,iBAAiBU,UAAU,CAACJ;IAE/G,MAAM1B,YAA8CN,iBAAiB2B,CAAAA,IAAKD,iBAAiBW,UAAU,CAACV;IAEtG,OAAO;QACL,GAAGT,UAAU;QACboB,WAAW;YACTvB;YACAH,kBAAkBa,SAASc,IAAI,GAAG;YAClClC,iBAAiBU,kBAAkB,WAAWU,SAASc,IAAI,GAAG,IAAId,SAASc,IAAI,KAAKnB,MAAMoB,MAAM;YAChG9B,cAAce;YACdX;YACAD;YACAP;YACAC;YACAE;YACAD;QACF;IACF;AACF,CAAC"}
+{"version":3,"sources":["useTableSelection.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(options: SelectionHookParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange,\n  });\n\n  // Selection state can contain obselete items (i.e. rows that are removed)\n  const selectableRowIds = React.useMemo(() => {\n    const rowIds = new Set<TableRowId>();\n    for (let i = 0; i < items.length; i++) {\n      rowIds.add(getRowId?.(items[i]) ?? i);\n    }\n\n    return rowIds;\n  }, [items, getRowId]);\n\n  const allRowsSelected = React.useMemo(() => {\n    if (selectionMode === 'single') {\n      const selectedRow = Array.from(selected)[0];\n      return selectableRowIds.has(selectedRow);\n    }\n\n    // multiselect case\n    if (selected.size < selectableRowIds.size) {\n      return false;\n    }\n\n    let res = true;\n    selectableRowIds.forEach(selectableRowId => {\n      if (!selected.has(selectableRowId)) {\n        res = false;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected, selectionMode]);\n\n  const someRowsSelected = React.useMemo(() => {\n    if (selected.size <= 0) {\n      return false;\n    }\n\n    let res = false;\n    selectableRowIds.forEach(selectableRowId => {\n      if (selected.has(selectableRowId)) {\n        res = true;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionMethods.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.toggleItem(e, rowId),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.deselectItem(e, rowId),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.selectItem(e, rowId),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n  const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected,\n      allRowsSelected,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AAGhG,MAAMC,OAAO,IAAMC;AAEnB,OAAO,MAAMC,6BAAkD;IAC7DC,iBAAiB,KAAK;IACtBC,WAAWJ;IACXK,aAAaL;IACbM,eAAe,IAAM,KAAK;IAC1BC,WAAWP;IACXQ,cAAc,IAAIC;IAClBC,kBAAkB,KAAK;IACvBC,eAAeX;IACfY,WAAWZ;IACXa,eAAe;AACjB,EAAE;AAEF,OAAO,SAASC,kBAAyBC,OAA4B,EAAE;IACrE,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,uBAAuBD,YAAYD;AACvF,CAAC;AAED,OAAO,SAASE,uBACdD,UAAqC,EACrCD,OAA4B,EACD;IAC3B,MAAM,EAAEG,MAAK,EAAEC,SAAQ,EAAE,GAAGH;IAC5B,MAAM,EAAEH,eAAeA,cAAa,EAAEO,qBAAoB,EAAEC,cAAa,EAAEC,kBAAiB,EAAE,GAAGP;IAEjG,MAAM,CAACQ,UAAUC,iBAAiB,GAAGzB,aAAa;QAChDc;QACAO;QACAC;QACAC;IACF;IAEA,0EAA0E;IAC1E,MAAMG,mBAAmB5B,MAAM6B,OAAO,CAAC,IAAM;QAC3C,MAAMC,SAAS,IAAIlB;QACnB,IAAK,IAAImB,IAAI,GAAGA,IAAIV,MAAMW,MAAM,EAAED,IAAK;gBAC1BT;YAAXQ,OAAOG,GAAG,CAACX,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWD,KAAK,CAACU,EAAE,eAAnBT,uBAAAA,YAAwBS,CAAC;QACtC;QAEA,OAAOD;IACT,GAAG;QAACT;QAAOC;KAAS;IAEpB,MAAMhB,kBAAkBN,MAAM6B,OAAO,CAAC,IAAM;QAC1C,IAAIb,kBAAkB,UAAU;YAC9B,MAAMkB,cAAcC,MAAMC,IAAI,CAACV,SAAS,CAAC,EAAE;YAC3C,OAAOE,iBAAiBS,GAAG,CAACH;QAC9B,CAAC;QAED,mBAAmB;QACnB,IAAIR,SAASY,IAAI,GAAGV,iBAAiBU,IAAI,EAAE;YACzC,OAAO,KAAK;QACd,CAAC;QAED,IAAIC,MAAM,IAAI;QACdX,iBAAiBY,OAAO,CAACC,CAAAA,kBAAmB;YAC1C,IAAI,CAACf,SAASW,GAAG,CAACI,kBAAkB;gBAClCF,MAAM,KAAK;YACb,CAAC;QACH;QAEA,OAAOA;IACT,GAAG;QAACX;QAAkBF;QAAUV;KAAc;IAE9C,MAAMH,mBAAmBb,MAAM6B,OAAO,CAAC,IAAM;QAC3C,IAAIH,SAASY,IAAI,IAAI,GAAG;YACtB,OAAO,KAAK;QACd,CAAC;QAED,IAAIC,MAAM,KAAK;QACfX,iBAAiBY,OAAO,CAACC,CAAAA,kBAAmB;YAC1C,IAAIf,SAASW,GAAG,CAACI,kBAAkB;gBACjCF,MAAM,IAAI;YACZ,CAAC;QACH;QAEA,OAAOA;IACT,GAAG;QAACX;QAAkBF;KAAS;IAE/B,MAAMZ,gBAAsDb,iBAAiByC,CAAAA,IAAK;YAGvDpB;QAFzBK,iBAAiBgB,cAAc,CAC7BD,GACArB,MAAMuB,GAAG,CAAC,CAACC,MAAMd;YAAMT,OAAAA,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWuB,mBAAXvB,uBAAAA,YAAoBS,CAAC;;IAEhD;IAEA,MAAMhB,YAA8Cd,iBAAiB,CAACyC,GAAGI,QACvEnB,iBAAiBoB,UAAU,CAACL,GAAGI;IAGjC,MAAMtC,cAAkDP,iBAAiB,CAACyC,GAAGI,QAC3EnB,iBAAiBqB,YAAY,CAACN,GAAGI;IAGnC,MAAMpC,YAA8CT,iBAAiB,CAACyC,GAAGI,QACvEnB,iBAAiBsB,UAAU,CAACP,GAAGI;IAGjC,MAAMrC,gBAAsD,CAACqC,QAAsBnB,iBAAiBuB,UAAU,CAACJ;IAE/G,MAAMvC,YAA8CN,iBAAiByC,CAAAA,IAAKf,iBAAiBwB,UAAU,CAACT;IAEtG,OAAO;QACL,GAAGvB,UAAU;QACbiC,WAAW;YACTpC;YACAH;YACAP;YACAK,cAAce;YACdX;YACAD;YACAP;YACAC;YACAE;YACAD;QACF;IACF;AACF,CAAC"}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js

@@ -83,26 +83,7 @@ const useFlexLayoutStyles = /*#__PURE__*/ (0, _react["__styles"])({
             "f1uha7eq",
             "f145mzao"
         ],
-        qhf8xq: "f10pi13n",
-        Ba2hzls: [
-            "f1bwmy6q",
-            "f156ixcz"
-        ],
-        Bhwr9k8: [
-            "f156ixcz",
-            "f1bwmy6q"
-        ],
-        Bb54w5r: [
-            "fsy9rq9",
-            "fl6c5zn"
-        ],
-        bgd754: [
-            "fl6c5zn",
-            "fsy9rq9"
-        ],
-        Boazqr3: "f1tpyba1",
-        Blqj7q0: "f1pnds93",
-        xlw1ys: "fa5446a"
+        qhf8xq: "f10pi13n"
     },
     rootInteractive: {
         Jwef8y: "f1t94bn6",
@@ -179,13 +160,6 @@ const useFlexLayoutStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}",
         ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}",
         ".f10pi13n{position:relative;}",
-        ".f1bwmy6q[data-keyboard-resizing]{border-bottom-right-radius:var(--borderRadiusMedium);}",
-        ".f156ixcz[data-keyboard-resizing]{border-bottom-left-radius:var(--borderRadiusMedium);}",
-        ".fsy9rq9[data-keyboard-resizing]{border-top-right-radius:var(--borderRadiusMedium);}",
-        ".fl6c5zn[data-keyboard-resizing]{border-top-left-radius:var(--borderRadiusMedium);}",
-        ".f1tpyba1[data-keyboard-resizing]{outline-width:var(--strokeWidthThick);}",
-        ".f1pnds93[data-keyboard-resizing]{outline-style:solid;}",
-        ".fa5446a[data-keyboard-resizing]{outline-color:var(--colorStrokeFocus2);}",
         ".fq6nmtn{resize:horizontal;}",
         ".f1e4lqlz{box-sizing:content-box;}",
         ".f1u2r49w{background-color:inherit;}",

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { KeyboardResizingCurrentColumnDataAttribute } from '../../hooks/useTableColumnSizing';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f15pt5es\",\n    ha4doy: \"fmrv4ls\"\n  }\n}, {\n  d: [\".f15pt5es{display:table-cell;}\", \".fmrv4ls{vertical-align:middle;}\"]\n});\nconst useFlexLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"fkjuxzh\",\n    Bf4jedk: \"f10tiqix\"\n  }\n}, {\n  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;}\", \".f10tiqix{min-width:0px;}\"]\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Bhrd7zp: \"figsok6\",\n    z8tnut: \"f1nbblvp\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1ov4xf1\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    B3nxjsc: \"fhix6mv\",\n    Bmvh20x: \"fha7anx\",\n    robkg1: \"f1fmzww4\",\n    pehzd3: [\"fs9qmxf\", \"f187m4uq\"],\n    B8osjzx: [\"f187m4uq\", \"fs9qmxf\"],\n    u7xebq: [\"f145mzao\", \"f1uha7eq\"],\n    Blsv9te: [\"f1uha7eq\", \"f145mzao\"],\n    qhf8xq: \"f10pi13n\",\n    Ba2hzls: [\"f1bwmy6q\", \"f156ixcz\"],\n    Bhwr9k8: [\"f156ixcz\", \"f1bwmy6q\"],\n    Bb54w5r: [\"fsy9rq9\", \"fl6c5zn\"],\n    bgd754: [\"fl6c5zn\", \"fsy9rq9\"],\n    Boazqr3: \"f1tpyba1\",\n    Blqj7q0: \"f1pnds93\",\n    xlw1ys: \"fa5446a\"\n  },\n  rootInteractive: {\n    Jwef8y: \"f1t94bn6\",\n    ecr2s2: \"f1wfn5kd\"\n  },\n  resetButton: {\n    B3rzk8w: \"fq6nmtn\",\n    B7ck84d: \"f1e4lqlz\",\n    De3pzq: \"f1u2r49w\",\n    sj55zd: \"f1ym3bx4\",\n    Bahqtrf: \"f1mo0ibp\",\n    Be2twd7: \"fjoy568\",\n    Bg96gwp: \"fytdu2e\",\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    icvyot: \"f1ern45e\",\n    vrafjx: [\"f1n71otn\", \"f1deefiw\"],\n    oivjwe: \"f1h8hb77\",\n    wvpqe5: [\"f1deefiw\", \"f1n71otn\"],\n    Bv0vk6g: \"f37px4s\",\n    fsow6f: \"fgusgyc\"\n  },\n  button: {\n    qhf8xq: \"f10pi13n\",\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bqenvij: \"f1l02sjl\",\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\",\n    sshi5w: \"f1nxs5xn\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"fkjuxzh\",\n    oeaueh: \"f1s6fcnf\"\n  },\n  sortable: {\n    Bceei9c: \"f1k6fduh\"\n  },\n  sortIcon: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    z8tnut: \"fclwglc\"\n  },\n  resizeHandle: {}\n}, {\n  d: [\".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1nbblvp{padding-top:0px;}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1ov4xf1{padding-bottom:0px;}\", \".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}\", \".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}\", \".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}\", \".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}\", \".f10pi13n{position:relative;}\", \".f1bwmy6q[data-keyboard-resizing]{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f156ixcz[data-keyboard-resizing]{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".fsy9rq9[data-keyboard-resizing]{border-top-right-radius:var(--borderRadiusMedium);}\", \".fl6c5zn[data-keyboard-resizing]{border-top-left-radius:var(--borderRadiusMedium);}\", \".f1tpyba1[data-keyboard-resizing]{outline-width:var(--strokeWidthThick);}\", \".f1pnds93[data-keyboard-resizing]{outline-style:solid;}\", \".fa5446a[data-keyboard-resizing]{outline-color:var(--colorStrokeFocus2);}\", \".fq6nmtn{resize:horizontal;}\", \".f1e4lqlz{box-sizing:content-box;}\", \".f1u2r49w{background-color:inherit;}\", \".f1ym3bx4{color:inherit;}\", \".f1mo0ibp{font-family:inherit;}\", \".fjoy568{font-size:inherit;}\", \".fytdu2e{line-height:normal;}\", \".f1mtd64y{overflow-x:visible;}\", \".f1y7q3j9{overflow-y:visible;}\", \".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1ern45e{border-top-style:none;}\", \".f1n71otn{border-right-style:none;}\", \".f1deefiw{border-left-style:none;}\", \".f1h8hb77{border-bottom-style:none;}\", \".f37px4s{-webkit-appearance:button;}\", \".fgusgyc{text-align:unset;}\", \".fly5x3f{width:100%;}\", \".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;}\", \".f1l02sjl{height:100%;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\", \".f1nxs5xn{min-height:32px;}\", \".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;}\", \".f1s6fcnf{outline-style:none;}\", \".f1k6fduh{cursor:pointer;}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\"],\n  h: [\".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\"],\n  a: [\".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\"]\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = state => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles()\n  };\n  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n  state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTableHeaderCellStyles.styles.js.map"],"names":["tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","root","button","sortIcon","aside","useTableLayoutStyles","__styles","mc9l5x","ha4doy","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","useStyles","Bhrd7zp","z8tnut","z189sj","Byoj8tv","uwmqm3","B3nxjsc","Bmvh20x","robkg1","pehzd3","B8osjzx","u7xebq","Blsv9te","qhf8xq","Ba2hzls","Bhwr9k8","Bb54w5r","bgd754","Boazqr3","Blqj7q0","xlw1ys","rootInteractive","Jwef8y","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","state","styles","layoutStyles","table","flex","className","mergeClasses","noNativeElements"],"mappings":"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"}
+{"version":3,"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f15pt5es\",\n    ha4doy: \"fmrv4ls\"\n  }\n}, {\n  d: [\".f15pt5es{display:table-cell;}\", \".fmrv4ls{vertical-align:middle;}\"]\n});\nconst useFlexLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"fkjuxzh\",\n    Bf4jedk: \"f10tiqix\"\n  }\n}, {\n  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;}\", \".f10tiqix{min-width:0px;}\"]\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Bhrd7zp: \"figsok6\",\n    z8tnut: \"f1nbblvp\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1ov4xf1\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    B3nxjsc: \"fhix6mv\",\n    Bmvh20x: \"fha7anx\",\n    robkg1: \"f1fmzww4\",\n    pehzd3: [\"fs9qmxf\", \"f187m4uq\"],\n    B8osjzx: [\"f187m4uq\", \"fs9qmxf\"],\n    u7xebq: [\"f145mzao\", \"f1uha7eq\"],\n    Blsv9te: [\"f1uha7eq\", \"f145mzao\"],\n    qhf8xq: \"f10pi13n\"\n  },\n  rootInteractive: {\n    Jwef8y: \"f1t94bn6\",\n    ecr2s2: \"f1wfn5kd\"\n  },\n  resetButton: {\n    B3rzk8w: \"fq6nmtn\",\n    B7ck84d: \"f1e4lqlz\",\n    De3pzq: \"f1u2r49w\",\n    sj55zd: \"f1ym3bx4\",\n    Bahqtrf: \"f1mo0ibp\",\n    Be2twd7: \"fjoy568\",\n    Bg96gwp: \"fytdu2e\",\n    B68tc82: \"f1mtd64y\",\n    Bmxbyg5: \"f1y7q3j9\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    icvyot: \"f1ern45e\",\n    vrafjx: [\"f1n71otn\", \"f1deefiw\"],\n    oivjwe: \"f1h8hb77\",\n    wvpqe5: [\"f1deefiw\", \"f1n71otn\"],\n    Bv0vk6g: \"f37px4s\",\n    fsow6f: \"fgusgyc\"\n  },\n  button: {\n    qhf8xq: \"f10pi13n\",\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bqenvij: \"f1l02sjl\",\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\",\n    sshi5w: \"f1nxs5xn\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"fkjuxzh\",\n    oeaueh: \"f1s6fcnf\"\n  },\n  sortable: {\n    Bceei9c: \"f1k6fduh\"\n  },\n  sortIcon: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    z8tnut: \"fclwglc\"\n  },\n  resizeHandle: {}\n}, {\n  d: [\".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1nbblvp{padding-top:0px;}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1ov4xf1{padding-bottom:0px;}\", \".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}\", \".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}\", \".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}\", \".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}\", \".f10pi13n{position:relative;}\", \".fq6nmtn{resize:horizontal;}\", \".f1e4lqlz{box-sizing:content-box;}\", \".f1u2r49w{background-color:inherit;}\", \".f1ym3bx4{color:inherit;}\", \".f1mo0ibp{font-family:inherit;}\", \".fjoy568{font-size:inherit;}\", \".fytdu2e{line-height:normal;}\", \".f1mtd64y{overflow-x:visible;}\", \".f1y7q3j9{overflow-y:visible;}\", \".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1ern45e{border-top-style:none;}\", \".f1n71otn{border-right-style:none;}\", \".f1deefiw{border-left-style:none;}\", \".f1h8hb77{border-bottom-style:none;}\", \".f37px4s{-webkit-appearance:button;}\", \".fgusgyc{text-align:unset;}\", \".fly5x3f{width:100%;}\", \".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;}\", \".f1l02sjl{height:100%;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\", \".f1nxs5xn{min-height:32px;}\", \".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;}\", \".f1s6fcnf{outline-style:none;}\", \".f1k6fduh{cursor:pointer;}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\"],\n  h: [\".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\"],\n  a: [\".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\"]\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = state => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles()\n  };\n  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n  state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTableHeaderCellStyles.styles.js.map"],"names":["tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","root","button","sortIcon","aside","useTableLayoutStyles","__styles","mc9l5x","ha4doy","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","useStyles","Bhrd7zp","z8tnut","z189sj","Byoj8tv","uwmqm3","B3nxjsc","Bmvh20x","robkg1","pehzd3","B8osjzx","u7xebq","Blsv9te","qhf8xq","rootInteractive","Jwef8y","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","state","styles","layoutStyles","table","flex","className","mergeClasses","noNativeElements"],"mappings":"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"}

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js

@@ -43,6 +43,8 @@ const tableResizeHandleClassNames = {
         Bmy1vo4: "f13u1uyl",
         B3o57yi: "fezquic",
         Bj3rh1h: "f19g0ac",
+        B3cna0y: "f1tkae59",
+        Brovlpu: "ftqa4ok",
         B7zu5sd: "f15pjodv",
         Bs6t6z0: "ftgrb5f",
         Fdvyjd: "f2df6js",
@@ -83,6 +85,10 @@ const tableResizeHandleClassNames = {
         ".fw2wsqs:after{bottom:0;}",
         ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}"
     ],
+    f: [
+        ".f1tkae59:focus{opacity:1;}",
+        ".ftqa4ok:focus{outline-style:none;}"
+    ],
     h: [
         ".f15pjodv:hover{opacity:1;}"
     ]

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n  root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    qhf8xq: \"f1euv43f\",\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    Bhzewxz: \"f15twtuk\",\n    B5kzvoi: \"f1yab3r1\",\n    a9b677: \"fjw5fx7\",\n    B6of3ja: \"f1hu3pq6\",\n    t21cq0: [\"fn2i5td\", \"f1eybr6b\"],\n    jrapky: \"f19f4twv\",\n    Frg6f3: [\"f1eybr6b\", \"fn2i5td\"],\n    Bceei9c: \"fc3en1c\",\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f13u1uyl\",\n    B3o57yi: \"fezquic\",\n    Bj3rh1h: \"f19g0ac\",\n    B7zu5sd: \"f15pjodv\",\n    Bs6t6z0: \"ftgrb5f\",\n    Fdvyjd: \"f2df6js\",\n    Biobvvw: \"fshsryb\",\n    Hdbjpj: \"f11ef69\",\n    jc51t6: [\"f12lb1dx\", \"f13tbxeo\"],\n    u6d25: \"fu4ulse\",\n    Bj55yzk: \"fw2wsqs\",\n    Bkbwdz4: \"f1swzn7y\"\n  }\n}, {\n  d: [\".f1euv43f{position:absolute;}\", \".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".fjw5fx7{width:16px;}\", \".f1hu3pq6{margin-top:0;}\", \".fn2i5td{margin-right:-8px;}\", \".f1eybr6b{margin-left:-8px;}\", \".f19f4twv{margin-bottom:0;}\", \".fc3en1c{cursor:col-resize;}\", \".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".fezquic{transition-duration:.2s;}\", \".f19g0ac{z-index:1;}\", \".ftgrb5f:after{content:\\\" \\\";}\", \".f2df6js:after{display:block;}\", \".fshsryb:after{width:1px;}\", \".f11ef69:after{position:absolute;}\", \".f12lb1dx:after{left:50%;}\", \".f13tbxeo:after{right:50%;}\", \".fu4ulse:after{top:0;}\", \".fw2wsqs:after{bottom:0;}\", \".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}\"],\n  h: [\".f15pjodv:hover{opacity:1;}\"]\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTableResizeHandleStyles.styles.js.map"],"names":["tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","root","useStyles","__styles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","B6of3ja","t21cq0","jrapky","Frg6f3","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B7zu5sd","Bs6t6z0","Fdvyjd","Biobvvw","Hdbjpj","jc51t6","u6d25","Bj55yzk","Bkbwdz4","d","h","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,2BAA2B,MAA3BA;IAuCAC,mCAAmC,MAAnCA;;uBAzCsC;AAE5C,MAAMD,8BAA8B;IACzCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,OAAO;QACPC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;QAAuB;QAAsB;QAAqB;QAAwB;QAAyB;QAA4B;QAAgC;QAAgC;QAA+B;QAAgC;QAAwB;QAA2C;QAAsC;QAAwB;QAAkC;QAAkC;QAA8B;QAAsC;QAA8B;QAA+B;QAA0B;QAA6B;KAAgE;IAChvBC,GAAG;QAAC;KAA8B;AACpC;AAIO,MAAM5B,sCAAsC6B,CAAAA,QAAS;IAC1D,MAAMC,SAAS5B;IACf2B,MAAM5B,IAAI,CAAC8B,SAAS,GAAGC,IAAAA,mBAAY,EAACjC,4BAA4BE,IAAI,EAAE6B,OAAO7B,IAAI,EAAE4B,MAAM5B,IAAI,CAAC8B,SAAS;IACvG,OAAOF;AACT,GACA,6DAA6D"}
+{"version":3,"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n  root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    qhf8xq: \"f1euv43f\",\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    Bhzewxz: \"f15twtuk\",\n    B5kzvoi: \"f1yab3r1\",\n    a9b677: \"fjw5fx7\",\n    B6of3ja: \"f1hu3pq6\",\n    t21cq0: [\"fn2i5td\", \"f1eybr6b\"],\n    jrapky: \"f19f4twv\",\n    Frg6f3: [\"f1eybr6b\", \"fn2i5td\"],\n    Bceei9c: \"fc3en1c\",\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f13u1uyl\",\n    B3o57yi: \"fezquic\",\n    Bj3rh1h: \"f19g0ac\",\n    B3cna0y: \"f1tkae59\",\n    Brovlpu: \"ftqa4ok\",\n    B7zu5sd: \"f15pjodv\",\n    Bs6t6z0: \"ftgrb5f\",\n    Fdvyjd: \"f2df6js\",\n    Biobvvw: \"fshsryb\",\n    Hdbjpj: \"f11ef69\",\n    jc51t6: [\"f12lb1dx\", \"f13tbxeo\"],\n    u6d25: \"fu4ulse\",\n    Bj55yzk: \"fw2wsqs\",\n    Bkbwdz4: \"f1swzn7y\"\n  }\n}, {\n  d: [\".f1euv43f{position:absolute;}\", \".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".fjw5fx7{width:16px;}\", \".f1hu3pq6{margin-top:0;}\", \".fn2i5td{margin-right:-8px;}\", \".f1eybr6b{margin-left:-8px;}\", \".f19f4twv{margin-bottom:0;}\", \".fc3en1c{cursor:col-resize;}\", \".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".fezquic{transition-duration:.2s;}\", \".f19g0ac{z-index:1;}\", \".ftgrb5f:after{content:\\\" \\\";}\", \".f2df6js:after{display:block;}\", \".fshsryb:after{width:1px;}\", \".f11ef69:after{position:absolute;}\", \".f12lb1dx:after{left:50%;}\", \".f13tbxeo:after{right:50%;}\", \".fu4ulse:after{top:0;}\", \".fw2wsqs:after{bottom:0;}\", \".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}\"],\n  f: [\".f1tkae59:focus{opacity:1;}\", \".ftqa4ok:focus{outline-style:none;}\"],\n  h: [\".f15pjodv:hover{opacity:1;}\"]\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTableResizeHandleStyles.styles.js.map"],"names":["tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","root","useStyles","__styles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","B6of3ja","t21cq0","jrapky","Frg6f3","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bs6t6z0","Fdvyjd","Biobvvw","Hdbjpj","jc51t6","u6d25","Bj55yzk","Bkbwdz4","d","f","h","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,2BAA2B,MAA3BA;IA0CAC,mCAAmC,MAAnCA;;uBA5CsC;AAE5C,MAAMD,8BAA8B;IACzCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,OAAO;QACPC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;QAAuB;QAAsB;QAAqB;QAAwB;QAAyB;QAA4B;QAAgC;QAAgC;QAA+B;QAAgC;QAAwB;QAA2C;QAAsC;QAAwB;QAAkC;QAAkC;QAA8B;QAAsC;QAA8B;QAA+B;QAA0B;QAA6B;KAAgE;IAChvBC,GAAG;QAAC;QAA+B;KAAsC;IACzEC,GAAG;QAAC;KAA8B;AACpC;AAIO,MAAM/B,sCAAsCgC,CAAAA,QAAS;IAC1D,MAAMC,SAAS/B;IACf8B,MAAM/B,IAAI,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAACpC,4BAA4BE,IAAI,EAAEgC,OAAOhC,IAAI,EAAE+B,MAAM/B,IAAI,CAACiC,SAAS;IACvG,OAAOF;AACT,GACA,6DAA6D"}

package/lib-commonjs/hooks/useKeyboardResizing.js

@@ -10,21 +10,21 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _keyboardKeys = require("@fluentui/keyboard-keys");
 const _reactUtilities = require("@fluentui/react-utilities");
-const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _reactTabster = require("@fluentui/react-tabster");
 const STEP = 20;
 const PRECISION_MODIFIER = _keyboardKeys.Shift;
 const PRECISION_FACTOR = 1 / 4;
 function useKeyboardResizing(columnResizeState) {
     const [columnId, setColumnId] = _react.useState();
     const onChangeRef = _react.useRef();
-    const addListenerTimeout = _react.useRef();
+    const { findPrevFocusable  } = (0, _reactTabster.useFocusFinders)();
     const columnResizeStateRef = _react.useRef(columnResizeState);
     _react.useEffect(()=>{
         columnResizeStateRef.current = columnResizeState;
     }, [
         columnResizeState
     ]);
-    const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const [resizeHandleRefs] = _react.useState(()=>new Map());
     const keyboardHandler = (0, _reactUtilities.useEventCallback)((event)=>{
         if (!columnId) {
             return;
@@ -38,14 +38,14 @@ function useKeyboardResizing(columnResizeState) {
         switch(event.key){
             case _keyboardKeys.ArrowLeft:
                 stopEvent();
-                columnResizeStateRef.current.setColumnWidth(event, {
+                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {
                     columnId,
                     width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
                 });
                 return;
             case _keyboardKeys.ArrowRight:
                 stopEvent();
-                columnResizeStateRef.current.setColumnWidth(event, {
+                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {
                     columnId,
                     width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
                 });
@@ -53,64 +53,85 @@ function useKeyboardResizing(columnResizeState) {
             case _keyboardKeys.Space:
             case _keyboardKeys.Enter:
             case _keyboardKeys.Escape:
+                var _resizeHandleRefs_get, _resizeHandleRefs_get_current;
                 stopEvent();
-                disableInteractiveMode();
+                (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();
                 break;
         }
     });
-    // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
-    _react.useEffect(()=>{
-        return ()=>{
-            var _targetDocument_defaultView, _targetDocument_defaultView1;
-            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(addListenerTimeout.current);
-            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('keydown', keyboardHandler);
-        };
-    }, [
-        keyboardHandler,
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
-    ]);
     const enableInteractiveMode = _react.useCallback((colId)=>{
-        var _onChangeRef_current, _targetDocument_defaultView;
+        var _onChangeRef_current, _resizeHandleRefs_get;
         setColumnId(colId);
         (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
-        // Create the listener in the next tick, because the event that triggered this is still propagating
-        // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.
-        // No idea why this is happening, but this is a working workaround.
-        // Tracked here: https://github.com/microsoft/fluentui/issues/27177
-        addListenerTimeout.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setTimeout(()=>{
-            var _targetDocument_defaultView;
-            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('keydown', keyboardHandler);
-        }, 0);
+        const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
+        if (handle) {
+            handle.setAttribute('tabindex', '-1');
+            handle.tabIndex = -1;
+            handle.focus();
+        }
     }, [
-        keyboardHandler,
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+        resizeHandleRefs
     ]);
     const disableInteractiveMode = _react.useCallback(()=>{
-        var _targetDocument_defaultView;
-        if (columnId) {
-            var _onChangeRef_current;
-            (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        var _onChangeRef_current, _resizeHandleRefs_get;
+        if (!columnId) {
+            return;
+        }
+        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        // Find the previous focusable element (table header button) and focus it.
+        const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
+        if (el) {
+            var _findPrevFocusable;
+            (_findPrevFocusable = findPrevFocusable(el)) === null || _findPrevFocusable === void 0 ? void 0 : _findPrevFocusable.focus(); // Focus the previous focusable element (header button).
+            el.removeAttribute('tabindex');
         }
         setColumnId(undefined);
-        targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('keydown', keyboardHandler);
     }, [
         columnId,
-        keyboardHandler,
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
+        findPrevFocusable,
+        resizeHandleRefs
     ]);
     const toggleInteractiveMode = (colId, onChange)=>{
         onChangeRef.current = onChange;
         if (!columnId) {
             enableInteractiveMode(colId);
         } else if (colId && columnId !== colId) {
+            enableInteractiveMode(colId);
             setColumnId(colId);
-            onChange === null || onChange === void 0 ? void 0 : onChange(columnId, true);
         } else {
             disableInteractiveMode();
         }
     };
+    const getKeyboardResizingRef = _react.useCallback((colId)=>{
+        const ref = resizeHandleRefs.get(colId) || /*#__PURE__*/ _react.createRef();
+        resizeHandleRefs.set(colId, ref);
+        return ref;
+    }, [
+        resizeHandleRefs
+    ]);
+    // This makes sure the left and right arrow keys are ignored in tabster,
+    // so that they can be used for resizing.
+    const tabsterAttrs = (0, _reactTabster.useTabsterAttributes)({
+        focusable: {
+            ignoreKeydown: {
+                ArrowLeft: true,
+                ArrowRight: true
+            }
+        }
+    });
     return {
         toggleInteractiveMode,
-        columnId
+        columnId,
+        getKeyboardResizingProps: (colId, currentWidth)=>({
+                onKeyDown: keyboardHandler,
+                onBlur: disableInteractiveMode,
+                ref: getKeyboardResizingRef(colId),
+                role: 'separator',
+                'aria-label': 'Resize column',
+                'aria-valuetext': `${currentWidth} pixels`,
+                'aria-hidden': colId === columnId ? false : true,
+                tabIndex: colId === columnId ? 0 : undefined,
+                ...tabsterAttrs
+            })
     };
 }

package/lib-commonjs/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useKeyboardResizing.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\nexport function useKeyboardResizing(columnResizeState) {\n    const [columnId, setColumnId] = React.useState();\n    const onChangeRef = React.useRef();\n    const addListenerTimeout = React.useRef();\n    const columnResizeStateRef = React.useRef(columnResizeState);\n    React.useEffect(()=>{\n        columnResizeStateRef.current = columnResizeState;\n    }, [\n        columnResizeState\n    ]);\n    const { targetDocument  } = useFluent();\n    const keyboardHandler = useEventCallback((event)=>{\n        if (!columnId) {\n            return;\n        }\n        const width = columnResizeStateRef.current.getColumnWidth(columnId);\n        const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n        const stopEvent = ()=>{\n            event.preventDefault();\n            event.stopPropagation();\n        };\n        switch(event.key){\n            case ArrowLeft:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event, {\n                    columnId,\n                    width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case ArrowRight:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event, {\n                    columnId,\n                    width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case Space:\n            case Enter:\n            case Escape:\n                stopEvent();\n                disableInteractiveMode();\n                break;\n        }\n    });\n    // On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener\n    React.useEffect(()=>{\n        return ()=>{\n            var _targetDocument_defaultView, _targetDocument_defaultView1;\n            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(addListenerTimeout.current);\n            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('keydown', keyboardHandler);\n        };\n    }, [\n        keyboardHandler,\n        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView\n    ]);\n    const enableInteractiveMode = React.useCallback((colId)=>{\n        var _onChangeRef_current, _targetDocument_defaultView;\n        setColumnId(colId);\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);\n        // Create the listener in the next tick, because the event that triggered this is still propagating\n        // when Enter was pressed and would be caught in the keyboardHandler, disabling the keyboard mode immediately.\n        // No idea why this is happening, but this is a working workaround.\n        // Tracked here: https://github.com/microsoft/fluentui/issues/27177\n        addListenerTimeout.current = targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.setTimeout(()=>{\n            var _targetDocument_defaultView;\n            targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('keydown', keyboardHandler);\n        }, 0);\n    }, [\n        keyboardHandler,\n        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView\n    ]);\n    const disableInteractiveMode = React.useCallback(()=>{\n        var _targetDocument_defaultView;\n        if (columnId) {\n            var _onChangeRef_current;\n            (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);\n        }\n        setColumnId(undefined);\n        targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('keydown', keyboardHandler);\n    }, [\n        columnId,\n        keyboardHandler,\n        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView\n    ]);\n    const toggleInteractiveMode = (colId, onChange)=>{\n        onChangeRef.current = onChange;\n        if (!columnId) {\n            enableInteractiveMode(colId);\n        } else if (colId && columnId !== colId) {\n            setColumnId(colId);\n            onChange === null || onChange === void 0 ? void 0 : onChange(columnId, true);\n        } else {\n            disableInteractiveMode();\n        }\n    };\n    return {\n        toggleInteractiveMode,\n        columnId\n    };\n}\n"],"names":["useKeyboardResizing","STEP","PRECISION_MODIFIER","Shift","PRECISION_FACTOR","columnResizeState","columnId","setColumnId","React","useState","onChangeRef","useRef","addListenerTimeout","columnResizeStateRef","useEffect","current","targetDocument","useFluent","keyboardHandler","useEventCallback","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","ArrowLeft","setColumnWidth","ArrowRight","Space","Enter","Escape","disableInteractiveMode","_targetDocument_defaultView","_targetDocument_defaultView1","defaultView","clearTimeout","removeEventListener","enableInteractiveMode","useCallback","colId","_onChangeRef_current","call","setTimeout","addEventListener","undefined","toggleInteractiveMode","onChange"],"mappings":"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"}
+{"version":3,"sources":["useKeyboardResizing.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\nexport function useKeyboardResizing(columnResizeState) {\n    const [columnId, setColumnId] = React.useState();\n    const onChangeRef = React.useRef();\n    const { findPrevFocusable  } = useFocusFinders();\n    const columnResizeStateRef = React.useRef(columnResizeState);\n    React.useEffect(()=>{\n        columnResizeStateRef.current = columnResizeState;\n    }, [\n        columnResizeState\n    ]);\n    const [resizeHandleRefs] = React.useState(()=>new Map());\n    const keyboardHandler = useEventCallback((event)=>{\n        if (!columnId) {\n            return;\n        }\n        const width = columnResizeStateRef.current.getColumnWidth(columnId);\n        const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n        const stopEvent = ()=>{\n            event.preventDefault();\n            event.stopPropagation();\n        };\n        switch(event.key){\n            case ArrowLeft:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n                    columnId,\n                    width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case ArrowRight:\n                stopEvent();\n                columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n                    columnId,\n                    width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)\n                });\n                return;\n            case Space:\n            case Enter:\n            case Escape:\n                var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n                _resizeHandleRefs_get, _resizeHandleRefs_get_current;\n                stopEvent();\n                (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();\n                break;\n        }\n    });\n    const enableInteractiveMode = React.useCallback((colId)=>{\n        var _onChangeRef_current, _resizeHandleRefs_get;\n        setColumnId(colId);\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);\n        const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;\n        if (handle) {\n            handle.setAttribute('tabindex', '-1');\n            handle.tabIndex = -1;\n            handle.focus();\n        }\n    }, [\n        resizeHandleRefs\n    ]);\n    const disableInteractiveMode = React.useCallback(()=>{\n        var // Notify the onChange listener that we are disabling interactive mode.\n        _onChangeRef_current, _resizeHandleRefs_get;\n        if (!columnId) {\n            return;\n        }\n        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);\n        // Find the previous focusable element (table header button) and focus it.\n        const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;\n        if (el) {\n            var _findPrevFocusable;\n            (_findPrevFocusable = findPrevFocusable(el)) === null || _findPrevFocusable === void 0 ? void 0 : _findPrevFocusable.focus(); // Focus the previous focusable element (header button).\n            el.removeAttribute('tabindex');\n        }\n        setColumnId(undefined);\n    }, [\n        columnId,\n        findPrevFocusable,\n        resizeHandleRefs\n    ]);\n    const toggleInteractiveMode = (colId, onChange)=>{\n        onChangeRef.current = onChange;\n        if (!columnId) {\n            enableInteractiveMode(colId);\n        } else if (colId && columnId !== colId) {\n            enableInteractiveMode(colId);\n            setColumnId(colId);\n        } else {\n            disableInteractiveMode();\n        }\n    };\n    const getKeyboardResizingRef = React.useCallback((colId)=>{\n        const ref = resizeHandleRefs.get(colId) || React.createRef();\n        resizeHandleRefs.set(colId, ref);\n        return ref;\n    }, [\n        resizeHandleRefs\n    ]);\n    // This makes sure the left and right arrow keys are ignored in tabster,\n    // so that they can be used for resizing.\n    const tabsterAttrs = useTabsterAttributes({\n        focusable: {\n            ignoreKeydown: {\n                ArrowLeft: true,\n                ArrowRight: true\n            }\n        }\n    });\n    return {\n        toggleInteractiveMode,\n        columnId,\n        getKeyboardResizingProps: (colId, currentWidth)=>({\n                onKeyDown: keyboardHandler,\n                onBlur: disableInteractiveMode,\n                ref: getKeyboardResizingRef(colId),\n                role: 'separator',\n                'aria-label': 'Resize column',\n                'aria-valuetext': `${currentWidth} pixels`,\n                'aria-hidden': colId === columnId ? false : true,\n                tabIndex: colId === columnId ? 0 : undefined,\n                ...tabsterAttrs\n            })\n    };\n}\n"],"names":["useKeyboardResizing","STEP","PRECISION_MODIFIER","Shift","PRECISION_FACTOR","columnResizeState","columnId","setColumnId","React","useState","onChangeRef","useRef","findPrevFocusable","useFocusFinders","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","useEventCallback","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","ArrowLeft","setColumnWidth","nativeEvent","ArrowRight","Space","Enter","Escape","_resizeHandleRefs_get","_resizeHandleRefs_get_current","get","blur","enableInteractiveMode","useCallback","colId","_onChangeRef_current","call","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","_findPrevFocusable","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","useTabsterAttributes","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -9,7 +9,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    KeyboardResizingCurrentColumnDataAttribute: ()=>KeyboardResizingCurrentColumnDataAttribute,
     defaultColumnSizingState: ()=>defaultColumnSizingState,
     useTableColumnSizing_unstable: ()=>useTableColumnSizing_unstable
 });
@@ -20,7 +19,6 @@ const _useMeasureElement = require("./useMeasureElement");
 const _useTableColumnResizeMouseHandler = require("./useTableColumnResizeMouseHandler");
 const _useTableColumnResizeState = require("./useTableColumnResizeState");
 const _useKeyboardResizing = require("./useKeyboardResizing");
-const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';
 const defaultColumnSizingState = {
     getColumnWidths: ()=>[],
     getOnMouseDown: ()=>()=>null,
@@ -59,7 +57,7 @@ function useTableColumnSizingState(tableState, params) {
     // Creates the mouse handler and attaches the state to it
     const mouseHandler = (0, _useTableColumnResizeMouseHandler.useTableColumnResizeMouseHandler)(columnResizeState);
     // Creates the keyboard handler for resizing columns
-    const { toggleInteractiveMode , columnId: keyboardResizingColumnId  } = (0, _useKeyboardResizing.useKeyboardResizing)(columnResizeState);
+    const { toggleInteractiveMode , getKeyboardResizingProps  } = (0, _useKeyboardResizing.useKeyboardResizing)(columnResizeState);
     const enableKeyboardMode = _react.useCallback((columnId, onChange)=>(e)=>{
             e.preventDefault();
             e.nativeEvent.stopPropagation();
@@ -82,14 +80,12 @@ function useTableColumnSizingState(tableState, params) {
                 const col = columnResizeState.getColumnById(columnId);
                 const aside = /*#__PURE__*/ _react.createElement(_tableResizeHandle.TableResizeHandle, {
                     onMouseDown: mouseHandler.getOnMouseDown(columnId),
-                    onTouchStart: mouseHandler.getOnMouseDown(columnId)
+                    onTouchStart: mouseHandler.getOnMouseDown(columnId),
+                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
                 });
                 return col ? {
                     style: getColumnStyles(col),
-                    aside,
-                    ...keyboardResizingColumnId === columnId ? {
-                        [KeyboardResizingCurrentColumnDataAttribute]: ''
-                    } : {}
+                    aside
                 } : {};
             },
             getTableCellProps: (columnId)=>{

package/lib-commonjs/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';\nexport const defaultColumnSizingState = {\n    getColumnWidths: ()=>[],\n    getOnMouseDown: ()=>()=>null,\n    setColumnWidth: ()=>null,\n    getTableHeaderCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    getTableCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\n    // False positive, these plugin hooks are intended to be run on every render\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return (tableState)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column) {\n    const width = column.width;\n    return {\n        // native styles\n        width,\n        // non-native element styles (flex layout)\n        minWidth: width,\n        maxWidth: width\n    };\n}\nfunction useTableColumnSizingState(tableState, params) {\n    const { columns  } = tableState;\n    // Gets the container width\n    const { width , measureElementRef  } = useMeasureElement();\n    // Creates the state based on columns and available containerWidth\n    const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);\n    // Creates the mouse handler and attaches the state to it\n    const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n    // Creates the keyboard handler for resizing columns\n    const { toggleInteractiveMode , columnId: keyboardResizingColumnId  } = useKeyboardResizing(columnResizeState);\n    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n            e.preventDefault();\n            e.nativeEvent.stopPropagation();\n            toggleInteractiveMode(columnId, onChange);\n        }, [\n        toggleInteractiveMode\n    ]);\n    return {\n        ...tableState,\n        tableRef: measureElementRef,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: {\n            getOnMouseDown: mouseHandler.getOnMouseDown,\n            setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {\n                    columnId,\n                    width: w\n                }),\n            getColumnWidths: columnResizeState.getColumns,\n            getTableHeaderCellProps: (columnId)=>{\n                const col = columnResizeState.getColumnById(columnId);\n                const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {\n                    onMouseDown: mouseHandler.getOnMouseDown(columnId),\n                    onTouchStart: mouseHandler.getOnMouseDown(columnId)\n                });\n                return col ? {\n                    style: getColumnStyles(col),\n                    aside,\n                    ...keyboardResizingColumnId === columnId ? {\n                        [KeyboardResizingCurrentColumnDataAttribute]: ''\n                    } : {}\n                } : {};\n            },\n            getTableCellProps: (columnId)=>{\n                const col = columnResizeState.getColumnById(columnId);\n                return col ? {\n                    style: getColumnStyles(col)\n                } : {};\n            },\n            enableKeyboardMode\n        }\n    };\n}\n"],"names":["KeyboardResizingCurrentColumnDataAttribute","defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","keyboardResizingColumnId","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":";;;;;;;;;;;IAMaA,0CAA0C,MAA1CA;IACAC,wBAAwB,MAAxBA;IAcGC,6BAA6B,MAA7BA;;;6DArBO;mCACW;mCACA;kDACe;2CACP;qCACN;AAC7B,MAAMF,6CAA6C;AACnD,MAAMC,2BAA2B;IACpCE,iBAAiB,IAAI,EAAE;IACvBC,gBAAgB,IAAI,IAAI,IAAI;IAC5BC,gBAAgB,IAAI,IAAI;IACxBC,yBAAyB,IAAK,CAAA;YACtBC,OAAO,CAAC;YACRC,UAAU;QACd,CAAA;IACJC,mBAAmB,IAAK,CAAA;YAChBF,OAAO,CAAC;YACRC,UAAU;QACd,CAAA;IACJE,oBAAoB,IAAI,IAAI,IAAI;AACpC;AACO,SAASR,8BAA8BS,MAAM,EAAE;IAClD,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAAaC,0BAA0BD,YAAYD;AAC/D;AACA,SAASG,gBAAgBC,MAAM,EAAE;IAC7B,MAAMC,QAAQD,OAAOC,KAAK;IAC1B,OAAO;QACH,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACd;AACJ;AACA,SAASH,0BAA0BD,UAAU,EAAED,MAAM,EAAE;IACnD,MAAM,EAAEQ,QAAO,EAAG,GAAGP;IACrB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAGI,kBAAiB,EAAG,GAAGC,IAAAA,oCAAiB;IACxD,kEAAkE;IAClE,MAAMC,oBAAoBC,IAAAA,oDAAyB,EAACJ,SAASH,QAAS,CAAA,AAACL,CAAAA,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOa,oBAAoB,AAAD,KAAM,CAAA,GAAIb;IAC3J,yDAAyD;IACzD,MAAMc,eAAeC,IAAAA,kEAAgC,EAACJ;IACtD,oDAAoD;IACpD,MAAM,EAAEK,sBAAqB,EAAGnB,UAAUoB,yBAAwB,EAAG,GAAGC,IAAAA,wCAAmB,EAACP;IAC5F,MAAMZ,qBAAqBoB,OAAMC,WAAW,CAAC,CAACvB,UAAUwB,WAAW,CAACC,IAAI;YAChEA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BT,sBAAsBnB,UAAUwB;QACpC,GAAG;QACHL;KACH;IACD,OAAO;QACH,GAAGf,UAAU;QACbyB,UAAUjB;QACV,gEAAgE;QAChEkB,uBAAuB;YACnBlC,gBAAgBqB,aAAarB,cAAc;YAC3CC,gBAAgB,CAACG,UAAU+B,IAAIjB,kBAAkBjB,cAAc,CAACmC,WAAW;oBACnEhC;oBACAQ,OAAOuB;gBACX;YACJpC,iBAAiBmB,kBAAkBmB,UAAU;YAC7CnC,yBAAyB,CAACE,WAAW;gBACjC,MAAMkC,MAAMpB,kBAAkBqB,aAAa,CAACnC;gBAC5C,MAAMoC,QAAQ,WAAW,GAAGd,OAAMe,aAAa,CAACC,oCAAiB,EAAE;oBAC/DC,aAAatB,aAAarB,cAAc,CAACI;oBACzCwC,cAAcvB,aAAarB,cAAc,CAACI;gBAC9C;gBACA,OAAOkC,MAAM;oBACTnC,OAAOO,gBAAgB4B;oBACvBE;oBACA,GAAGhB,6BAA6BpB,WAAW;wBACvC,CAACR,2CAA2C,EAAE;oBAClD,IAAI,CAAC,CAAC;gBACV,IAAI,CAAC,CAAC;YACV;YACAS,mBAAmB,CAACD,WAAW;gBAC3B,MAAMkC,MAAMpB,kBAAkBqB,aAAa,CAACnC;gBAC5C,OAAOkC,MAAM;oBACTnC,OAAOO,gBAAgB4B;gBAC3B,IAAI,CAAC,CAAC;YACV;YACAhC;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n    getColumnWidths: ()=>[],\n    getOnMouseDown: ()=>()=>null,\n    setColumnWidth: ()=>null,\n    getTableHeaderCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    getTableCellProps: ()=>({\n            style: {},\n            columnId: ''\n        }),\n    enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\n    // False positive, these plugin hooks are intended to be run on every render\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return (tableState)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column) {\n    const width = column.width;\n    return {\n        // native styles\n        width,\n        // non-native element styles (flex layout)\n        minWidth: width,\n        maxWidth: width\n    };\n}\nfunction useTableColumnSizingState(tableState, params) {\n    const { columns  } = tableState;\n    // Gets the container width\n    const { width , measureElementRef  } = useMeasureElement();\n    // Creates the state based on columns and available containerWidth\n    const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);\n    // Creates the mouse handler and attaches the state to it\n    const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n    // Creates the keyboard handler for resizing columns\n    const { toggleInteractiveMode , getKeyboardResizingProps  } = useKeyboardResizing(columnResizeState);\n    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n            e.preventDefault();\n            e.nativeEvent.stopPropagation();\n            toggleInteractiveMode(columnId, onChange);\n        }, [\n        toggleInteractiveMode\n    ]);\n    return {\n        ...tableState,\n        tableRef: measureElementRef,\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        columnSizing_unstable: {\n            getOnMouseDown: mouseHandler.getOnMouseDown,\n            setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {\n                    columnId,\n                    width: w\n                }),\n            getColumnWidths: columnResizeState.getColumns,\n            getTableHeaderCellProps: (columnId)=>{\n                const col = columnResizeState.getColumnById(columnId);\n                const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {\n                    onMouseDown: mouseHandler.getOnMouseDown(columnId),\n                    onTouchStart: mouseHandler.getOnMouseDown(columnId),\n                    ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)\n                });\n                return col ? {\n                    style: getColumnStyles(col),\n                    aside\n                } : {};\n            },\n            getTableCellProps: (columnId)=>{\n                const col = columnResizeState.getColumnById(columnId);\n                return col ? {\n                    style: getColumnStyles(col)\n                } : {};\n            },\n            enableKeyboardMode\n        }\n    };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":";;;;;;;;;;;IAMaA,wBAAwB,MAAxBA;IAcGC,6BAA6B,MAA7BA;;;6DApBO;mCACW;mCACA;kDACe;2CACP;qCACN;AAC7B,MAAMD,2BAA2B;IACpCE,iBAAiB,IAAI,EAAE;IACvBC,gBAAgB,IAAI,IAAI,IAAI;IAC5BC,gBAAgB,IAAI,IAAI;IACxBC,yBAAyB,IAAK,CAAA;YACtBC,OAAO,CAAC;YACRC,UAAU;QACd,CAAA;IACJC,mBAAmB,IAAK,CAAA;YAChBF,OAAO,CAAC;YACRC,UAAU;QACd,CAAA;IACJE,oBAAoB,IAAI,IAAI,IAAI;AACpC;AACO,SAASR,8BAA8BS,MAAM,EAAE;IAClD,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAAaC,0BAA0BD,YAAYD;AAC/D;AACA,SAASG,gBAAgBC,MAAM,EAAE;IAC7B,MAAMC,QAAQD,OAAOC,KAAK;IAC1B,OAAO;QACH,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACd;AACJ;AACA,SAASH,0BAA0BD,UAAU,EAAED,MAAM,EAAE;IACnD,MAAM,EAAEQ,QAAO,EAAG,GAAGP;IACrB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAGI,kBAAiB,EAAG,GAAGC,IAAAA,oCAAiB;IACxD,kEAAkE;IAClE,MAAMC,oBAAoBC,IAAAA,oDAAyB,EAACJ,SAASH,QAAS,CAAA,AAACL,CAAAA,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOa,oBAAoB,AAAD,KAAM,CAAA,GAAIb;IAC3J,yDAAyD;IACzD,MAAMc,eAAeC,IAAAA,kEAAgC,EAACJ;IACtD,oDAAoD;IACpD,MAAM,EAAEK,sBAAqB,EAAGC,yBAAwB,EAAG,GAAGC,IAAAA,wCAAmB,EAACP;IAClF,MAAMZ,qBAAqBoB,OAAMC,WAAW,CAAC,CAACvB,UAAUwB,WAAW,CAACC,IAAI;YAChEA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BT,sBAAsBnB,UAAUwB;QACpC,GAAG;QACHL;KACH;IACD,OAAO;QACH,GAAGf,UAAU;QACbyB,UAAUjB;QACV,gEAAgE;QAChEkB,uBAAuB;YACnBlC,gBAAgBqB,aAAarB,cAAc;YAC3CC,gBAAgB,CAACG,UAAU+B,IAAIjB,kBAAkBjB,cAAc,CAACmC,WAAW;oBACnEhC;oBACAQ,OAAOuB;gBACX;YACJpC,iBAAiBmB,kBAAkBmB,UAAU;YAC7CnC,yBAAyB,CAACE,WAAW;gBACjC,MAAMkC,MAAMpB,kBAAkBqB,aAAa,CAACnC;gBAC5C,MAAMoC,QAAQ,WAAW,GAAGd,OAAMe,aAAa,CAACC,oCAAiB,EAAE;oBAC/DC,aAAatB,aAAarB,cAAc,CAACI;oBACzCwC,cAAcvB,aAAarB,cAAc,CAACI;oBAC1C,GAAGoB,yBAAyBpB,UAAU,AAACkC,CAAAA,QAAQ,IAAI,IAAIA,QAAQ,KAAK,IAAI,KAAK,IAAIA,IAAI1B,KAAK,AAAD,KAAM,EAAE;gBACrG;gBACA,OAAO0B,MAAM;oBACTnC,OAAOO,gBAAgB4B;oBACvBE;gBACJ,IAAI,CAAC,CAAC;YACV;YACAnC,mBAAmB,CAACD,WAAW;gBAC3B,MAAMkC,MAAMpB,kBAAkBqB,aAAa,CAACnC;gBAC5C,OAAOkC,MAAM;oBACTnC,OAAOO,gBAAgB4B;gBAC3B,IAAI,CAAC,CAAC;YACV;YACAhC;QACJ;IACJ;AACJ"}

package/lib-commonjs/hooks/useTableSelection.js

@@ -13,6 +13,8 @@ _export(exports, {
     useTableSelection: ()=>useTableSelection,
     useTableSelectionState: ()=>useTableSelectionState
 });
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
 const noop = ()=>undefined;
 const defaultTableSelectionState = {
@@ -41,6 +43,54 @@ function useTableSelectionState(tableState, options) {
         selectedItems,
         onSelectionChange
     });
+    // Selection state can contain obselete items (i.e. rows that are removed)
+    const selectableRowIds = _react.useMemo(()=>{
+        const rowIds = new Set();
+        for(let i = 0; i < items.length; i++){
+            var _getRowId;
+            rowIds.add((_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(items[i])) !== null && _getRowId !== void 0 ? _getRowId : i);
+        }
+        return rowIds;
+    }, [
+        items,
+        getRowId
+    ]);
+    const allRowsSelected = _react.useMemo(()=>{
+        if (selectionMode === 'single') {
+            const selectedRow = Array.from(selected)[0];
+            return selectableRowIds.has(selectedRow);
+        }
+        // multiselect case
+        if (selected.size < selectableRowIds.size) {
+            return false;
+        }
+        let res = true;
+        selectableRowIds.forEach((selectableRowId)=>{
+            if (!selected.has(selectableRowId)) {
+                res = false;
+            }
+        });
+        return res;
+    }, [
+        selectableRowIds,
+        selected,
+        selectionMode
+    ]);
+    const someRowsSelected = _react.useMemo(()=>{
+        if (selected.size <= 0) {
+            return false;
+        }
+        let res = false;
+        selectableRowIds.forEach((selectableRowId)=>{
+            if (selected.has(selectableRowId)) {
+                res = true;
+            }
+        });
+        return res;
+    }, [
+        selectableRowIds,
+        selected
+    ]);
     const toggleAllRows = (0, _reactUtilities.useEventCallback)((e)=>{
         var _getRowId;
         selectionMethods.toggleAllItems(e, items.map((item, i)=>{
@@ -56,8 +106,8 @@ function useTableSelectionState(tableState, options) {
         ...tableState,
         selection: {
             selectionMode,
-            someRowsSelected: selected.size > 0,
-            allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,
+            someRowsSelected,
+            allRowsSelected,
             selectedRows: selected,
             toggleRow,
             toggleAllRows,

package/lib-commonjs/hooks/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelection.js"],"sourcesContent":["import { useEventCallback, useSelection } from '@fluentui/react-utilities';\nconst noop = ()=>undefined;\nexport const defaultTableSelectionState = {\n    allRowsSelected: false,\n    clearRows: noop,\n    deselectRow: noop,\n    isRowSelected: ()=>false,\n    selectRow: noop,\n    selectedRows: new Set(),\n    someRowsSelected: false,\n    toggleAllRows: noop,\n    toggleRow: noop,\n    selectionMode: 'multiselect'\n};\nexport function useTableSelection(options) {\n    // False positive, these plugin hooks are intended to be run on every render\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return (tableState)=>useTableSelectionState(tableState, options);\n}\nexport function useTableSelectionState(tableState, options) {\n    const { items , getRowId  } = tableState;\n    const { selectionMode: selectionMode , defaultSelectedItems , selectedItems , onSelectionChange  } = options;\n    const [selected, selectionMethods] = useSelection({\n        selectionMode,\n        defaultSelectedItems,\n        selectedItems,\n        onSelectionChange\n    });\n    const toggleAllRows = useEventCallback((e)=>{\n        var _getRowId;\n        selectionMethods.toggleAllItems(e, items.map((item, i)=>{\n            return (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i;\n        }));\n    });\n    const toggleRow = useEventCallback((e, rowId)=>selectionMethods.toggleItem(e, rowId));\n    const deselectRow = useEventCallback((e, rowId)=>selectionMethods.deselectItem(e, rowId));\n    const selectRow = useEventCallback((e, rowId)=>selectionMethods.selectItem(e, rowId));\n    const isRowSelected = (rowId)=>selectionMethods.isSelected(rowId);\n    const clearRows = useEventCallback((e)=>selectionMethods.clearItems(e));\n    return {\n        ...tableState,\n        selection: {\n            selectionMode,\n            someRowsSelected: selected.size > 0,\n            allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,\n            selectedRows: selected,\n            toggleRow,\n            toggleAllRows,\n            clearRows,\n            deselectRow,\n            selectRow,\n            isRowSelected\n        }\n    };\n}\n"],"names":["defaultTableSelectionState","useTableSelection","useTableSelectionState","noop","undefined","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","options","tableState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","useSelection","useEventCallback","e","_getRowId","toggleAllItems","map","item","i","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection","size","length"],"mappings":";;;;;;;;;;;IAEaA,0BAA0B,MAA1BA;IAYGC,iBAAiB,MAAjBA;IAKAC,sBAAsB,MAAtBA;;gCAnB+B;AAC/C,MAAMC,OAAO,IAAIC;AACV,MAAMJ,6BAA6B;IACtCK,iBAAiB,KAAK;IACtBC,WAAWH;IACXI,aAAaJ;IACbK,eAAe,IAAI,KAAK;IACxBC,WAAWN;IACXO,cAAc,IAAIC;IAClBC,kBAAkB,KAAK;IACvBC,eAAeV;IACfW,WAAWX;IACXY,eAAe;AACnB;AACO,SAASd,kBAAkBe,OAAO,EAAE;IACvC,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAAaf,uBAAuBe,YAAYD;AAC5D;AACO,SAASd,uBAAuBe,UAAU,EAAED,OAAO,EAAE;IACxD,MAAM,EAAEE,MAAK,EAAGC,SAAQ,EAAG,GAAGF;IAC9B,MAAM,EAAEF,eAAeA,cAAa,EAAGK,qBAAoB,EAAGC,cAAa,EAAGC,kBAAiB,EAAG,GAAGN;IACrG,MAAM,CAACO,UAAUC,iBAAiB,GAAGC,IAAAA,4BAAY,EAAC;QAC9CV;QACAK;QACAC;QACAC;IACJ;IACA,MAAMT,gBAAgBa,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QACxC,IAAIC;QACJJ,iBAAiBK,cAAc,CAACF,GAAGT,MAAMY,GAAG,CAAC,CAACC,MAAMC,IAAI;YACpD,OAAO,AAACJ,CAAAA,YAAYT,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASY,KAAK,AAAD,MAAO,IAAI,IAAIH,cAAc,KAAK,IAAIA,YAAYI,CAAC;QAC5I;IACJ;IACA,MAAMlB,YAAYY,IAAAA,gCAAgB,EAAC,CAACC,GAAGM,QAAQT,iBAAiBU,UAAU,CAACP,GAAGM;IAC9E,MAAM1B,cAAcmB,IAAAA,gCAAgB,EAAC,CAACC,GAAGM,QAAQT,iBAAiBW,YAAY,CAACR,GAAGM;IAClF,MAAMxB,YAAYiB,IAAAA,gCAAgB,EAAC,CAACC,GAAGM,QAAQT,iBAAiBY,UAAU,CAACT,GAAGM;IAC9E,MAAMzB,gBAAgB,CAACyB,QAAQT,iBAAiBa,UAAU,CAACJ;IAC3D,MAAM3B,YAAYoB,IAAAA,gCAAgB,EAAC,CAACC,IAAIH,iBAAiBc,UAAU,CAACX;IACpE,OAAO;QACH,GAAGV,UAAU;QACbsB,WAAW;YACPxB;YACAH,kBAAkBW,SAASiB,IAAI,GAAG;YAClCnC,iBAAiBU,kBAAkB,WAAWQ,SAASiB,IAAI,GAAG,IAAIjB,SAASiB,IAAI,KAAKtB,MAAMuB,MAAM;YAChG/B,cAAca;YACdT;YACAD;YACAP;YACAC;YACAE;YACAD;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTableSelection.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useSelection } from '@fluentui/react-utilities';\nconst noop = ()=>undefined;\nexport const defaultTableSelectionState = {\n    allRowsSelected: false,\n    clearRows: noop,\n    deselectRow: noop,\n    isRowSelected: ()=>false,\n    selectRow: noop,\n    selectedRows: new Set(),\n    someRowsSelected: false,\n    toggleAllRows: noop,\n    toggleRow: noop,\n    selectionMode: 'multiselect'\n};\nexport function useTableSelection(options) {\n    // False positive, these plugin hooks are intended to be run on every render\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return (tableState)=>useTableSelectionState(tableState, options);\n}\nexport function useTableSelectionState(tableState, options) {\n    const { items , getRowId  } = tableState;\n    const { selectionMode: selectionMode , defaultSelectedItems , selectedItems , onSelectionChange  } = options;\n    const [selected, selectionMethods] = useSelection({\n        selectionMode,\n        defaultSelectedItems,\n        selectedItems,\n        onSelectionChange\n    });\n    // Selection state can contain obselete items (i.e. rows that are removed)\n    const selectableRowIds = React.useMemo(()=>{\n        const rowIds = new Set();\n        for(let i = 0; i < items.length; i++){\n            var _getRowId;\n            rowIds.add((_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(items[i])) !== null && _getRowId !== void 0 ? _getRowId : i);\n        }\n        return rowIds;\n    }, [\n        items,\n        getRowId\n    ]);\n    const allRowsSelected = React.useMemo(()=>{\n        if (selectionMode === 'single') {\n            const selectedRow = Array.from(selected)[0];\n            return selectableRowIds.has(selectedRow);\n        }\n        // multiselect case\n        if (selected.size < selectableRowIds.size) {\n            return false;\n        }\n        let res = true;\n        selectableRowIds.forEach((selectableRowId)=>{\n            if (!selected.has(selectableRowId)) {\n                res = false;\n            }\n        });\n        return res;\n    }, [\n        selectableRowIds,\n        selected,\n        selectionMode\n    ]);\n    const someRowsSelected = React.useMemo(()=>{\n        if (selected.size <= 0) {\n            return false;\n        }\n        let res = false;\n        selectableRowIds.forEach((selectableRowId)=>{\n            if (selected.has(selectableRowId)) {\n                res = true;\n            }\n        });\n        return res;\n    }, [\n        selectableRowIds,\n        selected\n    ]);\n    const toggleAllRows = useEventCallback((e)=>{\n        var _getRowId;\n        selectionMethods.toggleAllItems(e, items.map((item, i)=>{\n            return (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i;\n        }));\n    });\n    const toggleRow = useEventCallback((e, rowId)=>selectionMethods.toggleItem(e, rowId));\n    const deselectRow = useEventCallback((e, rowId)=>selectionMethods.deselectItem(e, rowId));\n    const selectRow = useEventCallback((e, rowId)=>selectionMethods.selectItem(e, rowId));\n    const isRowSelected = (rowId)=>selectionMethods.isSelected(rowId);\n    const clearRows = useEventCallback((e)=>selectionMethods.clearItems(e));\n    return {\n        ...tableState,\n        selection: {\n            selectionMode,\n            someRowsSelected,\n            allRowsSelected,\n            selectedRows: selected,\n            toggleRow,\n            toggleAllRows,\n            clearRows,\n            deselectRow,\n            selectRow,\n            isRowSelected\n        }\n    };\n}\n"],"names":["defaultTableSelectionState","useTableSelection","useTableSelectionState","noop","undefined","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","options","tableState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","useSelection","selectableRowIds","React","useMemo","rowIds","i","length","_getRowId","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","useEventCallback","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.6.1",
+  "version": "9.7.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,13 +37,13 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
     "@fluentui/react-aria": "^9.3.27",
-    "@fluentui/react-avatar": "^9.5.13",
-    "@fluentui/react-checkbox": "^9.1.25",
+    "@fluentui/react-avatar": "^9.5.14",
+    "@fluentui/react-checkbox": "^9.1.26",
     "@fluentui/react-context-selector": "^9.1.26",
-    "@fluentui/react-icons": "^2.0.203",
-    "@fluentui/react-radio": "^9.1.25",
+    "@fluentui/react-icons": "^2.0.207",
+    "@fluentui/react-radio": "^9.1.26",
     "@fluentui/react-shared-contexts": "^9.6.0",
-    "@fluentui/react-tabster": "^9.10.0",
+    "@fluentui/react-tabster": "^9.11.0",
     "@fluentui/react-theme": "^9.1.9",
     "@fluentui/react-utilities": "^9.10.1",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.12",