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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,2BAAA,gBAAA,OAAA,CAAA,+CAAA,CAAA;;AAEa,OAAA,CAAA,iBAAA,GAAoB,cAApB;AACA,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,OAAA,CAAA;AADyD,CAApD;;AAIb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAkBA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAmBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAlB;AA2BA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,kBAAA,CAAmB,IADE,EAErB,MAAM,CAAC,IAFc,EAGrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHe,EAIrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJhD,EAKrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CALpC,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;EASA,OAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  smaller: {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  smaller: {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n    boxSizing: 'border-box',\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    fontSize: tokens.fontSizeBase200,\n  },\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  smaller: {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  smaller: {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const isHeaderRow = useIsInTableHeader();\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    styles[state.appearance],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTableSelectionCell_unstable = void 0;
 
-const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const react_checkbox_1 = /*#__PURE__*/require("@fluentui/react-checkbox");
 
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+const react_radio_1 = /*#__PURE__*/require("@fluentui/react-radio");
 
 const useTableCell_1 = /*#__PURE__*/require("../TableCell/useTableCell");
 
@@ -28,17 +26,20 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 
 
 const useTableSelectionCell_unstable = (props, ref) => {
-  var _a, _b;
-
   const tableCellState = useTableCell_1.useTableCell_unstable(props, ref);
   const {
     noNativeElements
   } = tableContext_1.useTableContext();
-  const type = (_a = props.type) !== null && _a !== void 0 ? _a : 'checkbox';
+  const {
+    type = 'checkbox',
+    checked = false,
+    subtle = false,
+    hidden = false
+  } = props;
   return { ...tableCellState,
     components: { ...tableCellState.components,
       checkboxIndicator: react_checkbox_1.Checkbox,
-      radioIndicator: 'span'
+      radioIndicator: react_radio_1.Radio
     },
     checkboxIndicator: react_utilities_1.resolveShorthand(props.checkboxIndicator, {
       required: type === 'checkbox',
@@ -49,12 +50,14 @@ const useTableSelectionCell_unstable = (props, ref) => {
     radioIndicator: react_utilities_1.resolveShorthand(props.radioIndicator, {
       required: type === 'radio',
       defaultProps: {
-        children: React.createElement(react_icons_1.CheckmarkFilled, null)
+        checked: !!checked
       }
     }),
     type,
-    checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false,
-    noNativeElements
+    checked,
+    noNativeElements,
+    subtle,
+    hidden
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;;;EAC3B,MAAM,cAAc,GAAG,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,GAA7B,CAAvB;EACA,MAAM;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EACA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,EAAV,GAAc,UAA3B;EAEA,OAAO,EACL,GAAG,cADE;IAEL,UAAU,EAAE,EACV,GAAG,cAAc,CAAC,UADR;MAEV,iBAAiB,EAAE,gBAAA,CAAA,QAFT;MAGV,cAAc,EAAE;IAHN,CAFP;IAOL,iBAAiB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,iBAAvB,EAA0C;MAC3D,QAAQ,EAAE,IAAI,KAAK,UADwC;MAE3D,YAAY,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;MAAjB;IAF6C,CAA1C,CAPd;IAWL,cAAc,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,cAAvB,EAAuC;MACrD,QAAQ,EAAE,IAAI,KAAK,OADkC;MAErD,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB;MAAZ;IAFuC,CAAvC,CAXX;IAeL,IAfK;IAgBL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB,KAhBrB;IAiBL;EAjBK,CAAP;AAmBD,CA3BM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { CheckmarkFilled } from '@fluentui/react-icons';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const type = props.type ?? 'checkbox';\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: 'span',\n    },\n    checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n      required: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n    }),\n    radioIndicator: resolveShorthand(props.radioIndicator, {\n      required: type === 'radio',\n      defaultProps: { children: <CheckmarkFilled /> },\n    }),\n    type,\n    checked: props.checked ?? false,\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,cAAc,GAAG,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,GAA7B,CAAvB;EACA,MAAM;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EACA,MAAM;IAAE,IAAI,GAAG,UAAT;IAAqB,OAAO,GAAG,KAA/B;IAAsC,MAAM,GAAG,KAA/C;IAAsD,MAAM,GAAG;EAA/D,IAAyE,KAA/E;EAEA,OAAO,EACL,GAAG,cADE;IAEL,UAAU,EAAE,EACV,GAAG,cAAc,CAAC,UADR;MAEV,iBAAiB,EAAE,gBAAA,CAAA,QAFT;MAGV,cAAc,EAAE,aAAA,CAAA;IAHN,CAFP;IAOL,iBAAiB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,iBAAvB,EAA0C;MAC3D,QAAQ,EAAE,IAAI,KAAK,UADwC;MAE3D,YAAY,EAAE;QAAE,OAAO,EAAE,KAAK,CAAC;MAAjB;IAF6C,CAA1C,CAPd;IAWL,cAAc,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,cAAvB,EAAuC;MACrD,QAAQ,EAAE,IAAI,KAAK,OADkC;MAErD,YAAY,EAAE;QAAE,OAAO,EAAE,CAAC,CAAC;MAAb;IAFuC,CAAvC,CAXX;IAeL,IAfK;IAgBL,OAhBK;IAiBL,gBAjBK;IAkBL,MAlBK;IAmBL;EAnBK,CAAP;AAqBD,CA7BM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n      required: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n    }),\n    radioIndicator: resolveShorthand(props.radioIndicator, {\n      required: type === 'radio',\n      defaultProps: { checked: !!checked },\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -7,6 +7,8 @@ exports.useTableSelectionCellStyles_unstable = exports.tableSelectionCellClassNa
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
 exports.tableSelectionCellClassNames = {
   root: 'fui-TableSelectionCell',
   checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
@@ -57,11 +59,19 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "B5pe6w7": "f1cqkysu",
     "p4uzdd": "f1sgf1mg"
   },
+  "subtle": {
+    "abs64n": "fk73vx1",
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "B113ap8": "f1upwfw9"
+  },
   "hidden": {
     "Bcdw1i0": "fd7fpy0"
   }
 }, {
-  "d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fd7fpy0{visibility:hidden;}"]
+  "d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fk73vx1{opacity:0;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 /**
  * Apply styling to the TableSelectionCell slots based on the state
@@ -74,14 +84,14 @@ const useTableSelectionCellStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
-  state.root.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);
 
   if (state.checkboxIndicator) {
     state.checkboxIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
   }
 
   if (state.radioIndicator) {
-    state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.checked === false && styles.hidden, state.radioIndicator.className);
+    state.radioIndicator.className = react_1.mergeClasses(exports.tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
   }
 
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAAxE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,4BAAA,CAA6B,IADR,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAMA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,OAAA,CAAA,YAAA,CAClC,OAAA,CAAA,4BAAA,CAA6B,iBADK,EAElC,KAAK,CAAC,iBAAN,CAAwB,SAFU,CAApC;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,MAAM,CAAC,cAFwB,EAG/B,KAAK,CAAC,OAAN,KAAkB,KAAlB,IAA2B,MAAM,CAAC,MAHH,EAI/B,KAAK,CAAC,cAAN,CAAqB,SAJU,CAAjC;EAMD;;EAED,OAAO,KAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    '& svg': {\n      width: '16px',\n      height: '16px',\n    },\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.checked === false && styles.hidden,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAAxE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiCA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,4BAAA,CAA6B,IADR,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,OAAN,KAAkB,KAAlC,IAA2C,MAAM,CAAC,MAJ7B,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EAQA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,OAAA,CAAA,YAAA,CAClC,OAAA,CAAA,4BAAA,CAA6B,iBADK,EAElC,KAAK,CAAC,iBAAN,CAAwB,SAFU,CAApC;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,MAAM,CAAC,cAFwB,EAG/B,KAAK,CAAC,cAAN,CAAqB,SAHU,CAAjC;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    '& svg': {\n      width: '16px',\n      height: '16px',\n    },\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/tableHeaderContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsInTableHeader = exports.TableHeaderContextProvider = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const tableHeaderContext = /*#__PURE__*/React.createContext(undefined);
+const tableHeaderContextDefaultValue = '';
+exports.TableHeaderContextProvider = tableHeaderContext.Provider;
+
+const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;
+
+exports.useIsInTableHeader = useIsInTableHeader;
+//# sourceMappingURL=tableHeaderContext.js.map

package/lib-commonjs/contexts/tableHeaderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/contexts/tableHeaderContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAAwC,SAAxC,CAA3B;AAEA,MAAM,8BAA8B,GAAG,EAAvC;AAEa,OAAA,CAAA,0BAAA,GAA6B,kBAAkB,CAAC,QAAhD;;AACN,MAAM,kBAAkB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,MAAyC,8BAA1E;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\n\nconst tableHeaderContext = React.createContext<string | undefined>(undefined);\n\nconst tableHeaderContextDefaultValue = '';\n\nexport const TableHeaderContextProvider = tableHeaderContext.Provider;\nexport const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0-alpha.7",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,25 +26,26 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.15",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.16",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.2.2",
-    "@fluentui/react-avatar": "^9.2.2",
-    "@fluentui/react-checkbox": "^9.0.8",
+    "@fluentui/react-aria": "^9.2.3",
+    "@fluentui/react-avatar": "^9.2.3",
+    "@fluentui/react-checkbox": "^9.0.9",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-tabster": "^9.1.3",
-    "@fluentui/react-theme": "^9.1.0",
-    "@fluentui/react-utilities": "^9.1.1",
-    "@griffel/react": "^1.4.0",
+    "@fluentui/react-radio": "^9.0.9",
+    "@fluentui/react-tabster": "^9.2.0",
+    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-utilities": "^9.1.2",
+    "@griffel/react": "^1.4.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <18.0.0",
-    "@types/react-dom": ">=16.8.0 <18.0.0",
-    "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0"
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

package/lib/navigationModes/cell.js

@@ -1,250 +0,0 @@
-export function applyCellNavigation(element) {
-  const container = element;
-  let column = 0;
-  let mode = undefined;
-  let movingOut = false;
-  const pre = document.createElement('div');
-  const post = document.createElement('div');
-
-  if (!pre || !post) {
-    return;
-  }
-
-  pre.tabIndex = 0;
-  post.tabIndex = 0;
-  pre.addEventListener('focus', () => {
-    if (movingOut) {
-      movingOut = false;
-      return;
-    } else {
-      treeWalker.currentNode = container;
-      const candidate = treeWalker.nextNode();
-
-      if (isHTMLElement(candidate)) {
-        column = 0;
-        candidate.focus();
-      }
-    }
-  });
-  post.addEventListener('focus', () => {
-    if (movingOut) {
-      movingOut = false;
-      return;
-    } else {
-      treeWalker.currentNode = post;
-      const candidate = treeWalker.previousNode();
-
-      if (isHTMLElement(candidate)) {
-        column = findColumnCount(candidate);
-        candidate.focus();
-      }
-    }
-  });
-  container.before(pre);
-  container.after(post);
-
-  const acceptNode = node => {
-    if (!isHTMLElement(node)) {
-      return NodeFilter.FILTER_SKIP;
-    }
-
-    if (mode === 'column') {
-      return acceptCell(node);
-    }
-
-    if (mode === 'row') {
-      return acceptRow(node);
-    }
-
-    if (node.tabIndex >= 0) {
-      return NodeFilter.FILTER_ACCEPT;
-    }
-
-    return NodeFilter.FILTER_SKIP;
-  };
-
-  const acceptCell = node => {
-    if (isRow(node)) {
-      return NodeFilter.FILTER_REJECT;
-    }
-
-    if (node.tabIndex < 0) {
-      return NodeFilter.FILTER_SKIP;
-    }
-
-    return NodeFilter.FILTER_ACCEPT;
-  };
-
-  const acceptRow = node => {
-    if (isRow(node)) {
-      return NodeFilter.FILTER_ACCEPT;
-    }
-
-    return NodeFilter.FILTER_SKIP;
-  };
-
-  const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode
-  });
-
-  const up = current => {
-    mode = 'row';
-    treeWalker.currentNode = current;
-    treeWalker.previousNode(); // current row
-
-    const row = treeWalker.previousNode();
-
-    if (!row) {
-      return null;
-    }
-
-    mode = 'column';
-    treeWalker.currentNode = row;
-    let curCol = 0;
-    let node = null;
-
-    while (curCol <= column) {
-      node = treeWalker.nextNode();
-      curCol++;
-    }
-
-    if (isHTMLElement(node)) {
-      return node;
-    }
-
-    return null;
-  };
-
-  const down = current => {
-    mode = 'row';
-    treeWalker.currentNode = current;
-    const row = treeWalker.nextNode();
-
-    if (!row) {
-      return null;
-    }
-
-    mode = 'column';
-    treeWalker.currentNode = row;
-    let curCol = 0;
-    let node = null;
-
-    while (curCol <= column) {
-      node = treeWalker.nextNode();
-      curCol++;
-    }
-
-    if (isHTMLElement(node)) {
-      return node;
-    }
-
-    return null;
-  };
-
-  const left = current => {
-    treeWalker.currentNode = current;
-    mode = 'column';
-    const node = treeWalker.previousNode();
-
-    if (isHTMLElement(node)) {
-      column--;
-      return node;
-    }
-
-    return null;
-  };
-
-  const right = current => {
-    mode = 'column';
-    treeWalker.currentNode = current;
-    const node = treeWalker.nextNode();
-
-    if (isHTMLElement(node)) {
-      column++;
-      return node;
-    }
-
-    return null;
-  };
-
-  const onKeyDown = e => {
-    const target = e.target;
-
-    if (!target || !isHTMLElement(target)) {
-      return;
-    }
-
-    let next = null;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        next = down(target);
-        break;
-
-      case 'ArrowUp':
-        next = up(target);
-        break;
-
-      case 'ArrowLeft':
-        next = left(target);
-        break;
-
-      case 'ArrowRight':
-        next = right(target);
-        break;
-
-      case 'Tab':
-        movingOut = true;
-
-        if (e.shiftKey) {
-          pre.focus();
-        } else {
-          post.focus();
-        }
-
-        break;
-
-      default:
-        return;
-    }
-
-    if (next) {
-      e.preventDefault();
-      next.focus();
-    }
-  };
-
-  const onFocusOut = () => {
-    mode = undefined;
-  };
-
-  container.addEventListener('keydown', onKeyDown);
-  container.addEventListener('focusout', onFocusOut);
-  return () => {
-    container.removeEventListener('focusout', onFocusOut);
-    container.removeEventListener('keydown', onKeyDown);
-  };
-}
-
-function isHTMLElement(node) {
-  return node instanceof HTMLElement;
-}
-
-function isRow(element) {
-  if (element.getAttribute('role') === 'row' || element.tagName === 'TR') {
-    return true;
-  }
-
-  return false;
-}
-
-function findColumnCount(node) {
-  let cur = node;
-
-  while (cur.parentElement && !isRow(cur)) {
-    cur = cur.parentElement;
-  }
-
-  return cur.querySelectorAll('[role="cell"], [role="gridcell"], td').length - 1;
-}
-//# sourceMappingURL=cell.js.map

package/lib/navigationModes/cell.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-table/src/navigationModes/cell.ts"],"names":[],"mappings":"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","sourcesContent":["export function applyCellNavigation(element: HTMLElement) {\n  const container = element;\n  let column = 0;\n  let mode: 'row' | 'column' | undefined = undefined;\n  let movingOut = false;\n\n  const pre = document.createElement('div');\n  const post = document.createElement('div');\n\n  if (!pre || !post) {\n    return;\n  }\n\n  pre.tabIndex = 0;\n  post.tabIndex = 0;\n\n  pre.addEventListener('focus', () => {\n    if (movingOut) {\n      movingOut = false;\n      return;\n    } else {\n      treeWalker.currentNode = container;\n      const candidate = treeWalker.nextNode();\n      if (isHTMLElement(candidate)) {\n        column = 0;\n        candidate.focus();\n      }\n    }\n  });\n\n  post.addEventListener('focus', () => {\n    if (movingOut) {\n      movingOut = false;\n      return;\n    } else {\n      treeWalker.currentNode = post;\n      const candidate = treeWalker.previousNode();\n      if (isHTMLElement(candidate)) {\n        column = findColumnCount(candidate);\n        candidate.focus();\n      }\n    }\n  });\n\n  container.before(pre);\n  container.after(post);\n\n  const acceptNode = (node: Node) => {\n    if (!isHTMLElement(node)) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    if (mode === 'column') {\n      return acceptCell(node);\n    }\n\n    if (mode === 'row') {\n      return acceptRow(node);\n    }\n\n    if (node.tabIndex >= 0) {\n      return NodeFilter.FILTER_ACCEPT;\n    }\n\n    return NodeFilter.FILTER_SKIP;\n  };\n\n  const acceptCell = (node: HTMLElement) => {\n    if (isRow(node)) {\n      return NodeFilter.FILTER_REJECT;\n    }\n\n    if (node.tabIndex < 0) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    return NodeFilter.FILTER_ACCEPT;\n  };\n\n  const acceptRow = (node: HTMLElement) => {\n    if (isRow(node)) {\n      return NodeFilter.FILTER_ACCEPT;\n    }\n\n    return NodeFilter.FILTER_SKIP;\n  };\n\n  const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { acceptNode });\n\n  const up = (current: HTMLElement) => {\n    mode = 'row';\n    treeWalker.currentNode = current;\n    treeWalker.previousNode(); // current row\n    const row = treeWalker.previousNode();\n    if (!row) {\n      return null;\n    }\n\n    mode = 'column';\n    treeWalker.currentNode = row;\n    let curCol = 0;\n    let node: Node | null = null;\n    while (curCol <= column) {\n      node = treeWalker.nextNode();\n      curCol++;\n    }\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const down = (current: HTMLElement) => {\n    mode = 'row';\n    treeWalker.currentNode = current;\n    const row = treeWalker.nextNode();\n    if (!row) {\n      return null;\n    }\n\n    mode = 'column';\n    treeWalker.currentNode = row;\n    let curCol = 0;\n    let node: Node | null = null;\n    while (curCol <= column) {\n      node = treeWalker.nextNode();\n      curCol++;\n    }\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const left = (current: HTMLElement) => {\n    treeWalker.currentNode = current;\n    mode = 'column';\n    const node = treeWalker.previousNode();\n\n    if (isHTMLElement(node)) {\n      column--;\n      return node;\n    }\n    return null;\n  };\n\n  const right = (current: HTMLElement) => {\n    mode = 'column';\n    treeWalker.currentNode = current;\n    const node = treeWalker.nextNode();\n    if (isHTMLElement(node)) {\n      column++;\n      return node;\n    }\n    return null;\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    const target = e.target;\n    if (!target || !isHTMLElement(target)) {\n      return;\n    }\n\n    let next: HTMLElement | null = null;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        next = down(target);\n        break;\n      case 'ArrowUp':\n        next = up(target);\n        break;\n      case 'ArrowLeft':\n        next = left(target);\n        break;\n      case 'ArrowRight':\n        next = right(target);\n        break;\n      case 'Tab':\n        movingOut = true;\n        if (e.shiftKey) {\n          pre.focus();\n        } else {\n          post.focus();\n        }\n\n        break;\n      default:\n        return;\n    }\n\n    if (next) {\n      e.preventDefault();\n      next.focus();\n    }\n  };\n\n  const onFocusOut = () => {\n    mode = undefined;\n  };\n\n  container.addEventListener('keydown', onKeyDown);\n  container.addEventListener('focusout', onFocusOut);\n  return () => {\n    container.removeEventListener('focusout', onFocusOut);\n    container.removeEventListener('keydown', onKeyDown);\n  };\n}\n\nfunction isHTMLElement(node: unknown): node is HTMLElement {\n  return node instanceof HTMLElement;\n}\n\nfunction isRow(element: HTMLElement) {\n  if (element.getAttribute('role') === 'row' || element.tagName === 'TR') {\n    return true;\n  }\n\n  return false;\n}\n\nfunction findColumnCount(node: HTMLElement) {\n  let cur = node;\n  while (cur.parentElement && !isRow(cur)) {\n    cur = cur.parentElement;\n  }\n\n  return cur.querySelectorAll('[role=\"cell\"], [role=\"gridcell\"], td').length - 1;\n}\n"],"sourceRoot":"../src/"}