@fluentui/react-table 9.6.0 → 9.7.0

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":"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"}

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,