@fluentui/react-table 0.0.0-nightly-20221007-1237.1

package/lib/hooks/selectionManager.js

@@ -0,0 +1,89 @@
+export function createSelectionManager(mode, onSelectionChange = () => undefined) {
+  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;
+  return managerFactory(onSelectionChange);
+}
+
+function createMultipleSelectionManager(onSelectionChange) {
+  const toggleAllItems = (itemIds, selectedItems) => {
+    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
+
+    if (allItemsSelected) {
+      selectedItems.clear();
+    } else {
+      itemIds.forEach(itemId => selectedItems.add(itemId));
+    }
+
+    onSelectionChange(new Set(selectedItems));
+  };
+
+  const toggleItem = (itemId, selectedItems) => {
+    if (selectedItems.has(itemId)) {
+      selectedItems.delete(itemId);
+    } else {
+      selectedItems.add(itemId);
+    }
+
+    onSelectionChange(new Set(selectedItems));
+  };
+
+  const selectItem = (itemId, selectedItems) => {
+    selectedItems.add(itemId);
+    onSelectionChange(new Set(selectedItems));
+  };
+
+  const deselectItem = (itemId, selectedItems) => {
+    selectedItems.delete(itemId);
+    onSelectionChange(new Set(selectedItems));
+  };
+
+  const clearItems = () => {
+    onSelectionChange(new Set());
+  };
+
+  const isSelected = (itemId, selectedItems) => {
+    return selectedItems.has(itemId);
+  };
+
+  return {
+    toggleItem,
+    selectItem,
+    deselectItem,
+    clearItems,
+    isSelected,
+    toggleAllItems
+  };
+}
+
+function createSingleSelectionManager(onSelectionChange) {
+  const toggleItem = itemId => {
+    onSelectionChange(new Set([itemId]));
+  };
+
+  const clearItems = () => {
+    onSelectionChange(new Set());
+  };
+
+  const isSelected = (itemId, selectedItems) => {
+    return selectedItems.has(itemId);
+  };
+
+  const selectItem = itemId => {
+    onSelectionChange(new Set([itemId]));
+  };
+
+  return {
+    deselectItem: clearItems,
+    selectItem,
+    toggleAllItems: () => {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');
+      }
+
+      return undefined;
+    },
+    toggleItem,
+    clearItems,
+    isSelected
+  };
+}
+//# sourceMappingURL=selectionManager.js.map

package/lib/hooks/selectionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":"AAeA,OAAM,SAAU,sBAAV,CACJ,IADI,EAEJ,iBAAA,GAA+C,MAAM,SAFjD,EAE0D;EAE9D,MAAM,cAAc,GAAG,IAAI,KAAK,aAAT,GAAyB,8BAAzB,GAA0D,4BAAjF;EAEA,OAAO,cAAc,CAAC,iBAAD,CAArB;AACD;;AAED,SAAS,8BAAT,CAAwC,iBAAxC,EAAoF;EAClF,MAAM,cAAc,GAAG,CAAC,OAAD,EAA6B,aAA7B,KAAoE;IACzF,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAR,CAAc,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAxB,CAAzB;;IAEA,IAAI,gBAAJ,EAAsB;MACpB,aAAa,CAAC,KAAd;IACD,CAFD,MAEO;MACL,OAAO,CAAC,OAAR,CAAgB,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAA1B;IACD;;IAED,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAVD;;EAYA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAJ,EAA+B;MAC7B,aAAa,CAAC,MAAd,CAAqB,MAArB;IACD,CAFD,MAEO;MACL,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACD;;IAED,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CARD;;EAUA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACA,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAHD;;EAKA,MAAM,YAAY,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IACpF,aAAa,CAAC,MAAd,CAAqB,MAArB;IACA,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,aAAR,CAAD,CAAjB;EACD,CAHD;;EAKA,MAAM,UAAU,GAAG,MAAK;IACtB,iBAAiB,CAAC,IAAI,GAAJ,EAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,OAAO;IACL,UADK;IAEL,UAFK;IAGL,YAHK;IAIL,UAJK;IAKL,UALK;IAML;EANK,CAAP;AAQD;;AAED,SAAS,4BAAT,CAAsC,iBAAtC,EAAkF;EAChF,MAAM,UAAU,GAAI,MAAD,IAA4B;IAC7C,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,MAAK;IACtB,iBAAiB,CAAC,IAAI,GAAJ,EAAD,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,MAAM,UAAU,GAAI,MAAD,IAA4B;IAC7C,iBAAiB,CAAC,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAD,CAAjB;EACD,CAFD;;EAIA,OAAO;IACL,YAAY,EAAE,UADT;IAEL,UAFK;IAGL,cAAc,EAAE,MAAK;MACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC,MAAM,IAAI,KAAJ,CAAU,6EAAV,CAAN;MACD;;MAED,OAAO,SAAP;IACD,CATI;IAUL,UAVK;IAWL,UAXK;IAYL;EAZK,CAAP;AAcD","sourcesContent":["import { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n  toggleItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  selectItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  deselectItem(id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n  clearItems(): void;\n  isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n  toggleAllItems(itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n  mode: SelectionMode,\n  onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n  const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n  return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleAllItems = (itemIds: SelectionItemId[], selectedItems: Set<SelectionItemId>) => {\n    const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n    if (allItemsSelected) {\n      selectedItems.clear();\n    } else {\n      itemIds.forEach(itemId => selectedItems.add(itemId));\n    }\n\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const toggleItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    if (selectedItems.has(itemId)) {\n      selectedItems.delete(itemId);\n    } else {\n      selectedItems.add(itemId);\n    }\n\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const selectItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    selectedItems.add(itemId);\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const deselectItem = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    selectedItems.delete(itemId);\n    onSelectionChange(new Set(selectedItems));\n  };\n\n  const clearItems = () => {\n    onSelectionChange(new Set());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  return {\n    toggleItem,\n    selectItem,\n    deselectItem,\n    clearItems,\n    isSelected,\n    toggleAllItems,\n  };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n  const toggleItem = (itemId: SelectionItemId) => {\n    onSelectionChange(new Set([itemId]));\n  };\n\n  const clearItems = () => {\n    onSelectionChange(new Set<SelectionItemId>());\n  };\n\n  const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n    return selectedItems.has(itemId);\n  };\n\n  const selectItem = (itemId: SelectionItemId) => {\n    onSelectionChange(new Set([itemId]));\n  };\n\n  return {\n    deselectItem: clearItems,\n    selectItem,\n    toggleAllItems: () => {\n      if (process.env.NODE_ENV !== 'production') {\n        throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n      }\n\n      return undefined;\n    },\n    toggleItem,\n    clearItems,\n    isSelected,\n  };\n}\n"],"sourceRoot":""}

package/lib/hooks/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/hooks/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: ColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface ColumnDefinition<TItem> {\n  columnId: ColumnId;\n  compare?: (a: TItem, b: TItem) => number;\n}\n\nexport type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (\n  row: RowState<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: ColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (columnId: ColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: ColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: (rows: RowState<TItem>[]) => RowState<TItem>[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: () => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (rowId: RowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (rowId: RowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: () => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (rowId: RowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<RowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: RowId) => boolean;\n}\n\nexport interface RowState<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: RowId;\n}\n\nexport interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: ColumnDefinition<TItem>[];\n}\n\nexport interface UseSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?: (state: SortState) => void;\n}\n\nexport interface UseSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<RowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<RowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?: (selectedItems: Set<RowId>) => void;\n}\n\nexport interface UseTableOptions<TItem> {\n  columns: ColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => RowId;\n}\n\nexport type TableStatePlugin = <TItem>(tableState: TableState<TItem>) => TableState<TItem>;\n"]}

package/lib/hooks/useSelection.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import { createSelectionManager } from './selectionManager';
+
+const noop = () => undefined;
+
+export const defaultTableSelectionState = {
+  allRowsSelected: false,
+  clearRows: noop,
+  deselectRow: noop,
+  isRowSelected: () => false,
+  selectRow: noop,
+  selectedRows: /*#__PURE__*/new Set(),
+  someRowsSelected: false,
+  toggleAllRows: noop,
+  toggleRow: noop
+};
+export function useSelection(options) {
+  // False positive, these plugin hooks are intended to be run on every render
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return tableState => useSelectionState(tableState, options);
+}
+export function useSelectionState(tableState, options) {
+  const {
+    items,
+    getRowId
+  } = tableState;
+  const {
+    selectionMode,
+    defaultSelectedItems,
+    selectedItems,
+    onSelectionChange
+  } = options;
+  const [selected, setSelected] = useControllableState({
+    initialState: new Set(),
+    defaultState: defaultSelectedItems,
+    state: selectedItems
+  });
+  const selectionManager = React.useMemo(() => {
+    return createSelectionManager(selectionMode, newSelectedItems => {
+      setSelected(() => {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedItems);
+        return newSelectedItems;
+      });
+    });
+  }, [onSelectionChange, selectionMode, setSelected]);
+  const toggleAllRows = useEventCallback(() => {
+    selectionManager.toggleAllItems(items.map((item, i) => {
+      var _a;
+
+      return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i;
+    }), selected);
+  });
+  const toggleRow = useEventCallback(rowId => selectionManager.toggleItem(rowId, selected));
+  const deselectRow = useEventCallback(rowId => selectionManager.deselectItem(rowId, selected));
+  const selectRow = useEventCallback(rowId => selectionManager.selectItem(rowId, selected));
+
+  const isRowSelected = rowId => selectionManager.isSelected(rowId, selected);
+
+  return { ...tableState,
+    selection: {
+      someRowsSelected: selected.size > 0,
+      allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,
+      selectedRows: selected,
+      toggleRow,
+      toggleAllRows,
+      clearRows: selectionManager.clearItems,
+      deselectRow,
+      selectRow,
+      isRowSelected
+    }
+  };
+}
+//# sourceMappingURL=useSelection.js.map

package/lib/hooks/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type { RowId, TableSelectionState, TableState, UseSelectionOptions } 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};\n\nexport function useSelection<TItem>(options: UseSelectionOptions) {\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: TableState<TItem>) => useSelectionState(tableState, options);\n}\n\nexport function useSelectionState<TItem>(\n  tableState: TableState<TItem>,\n  options: UseSelectionOptions,\n): TableState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, setSelected] = useControllableState({\n    initialState: new Set<RowId>(),\n    defaultState: defaultSelectedItems,\n    state: selectedItems,\n  });\n\n  const selectionManager = React.useMemo(() => {\n    return createSelectionManager(selectionMode, newSelectedItems => {\n      setSelected(() => {\n        onSelectionChange?.(newSelectedItems);\n        return newSelectedItems;\n      });\n    });\n  }, [onSelectionChange, selectionMode, setSelected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(() => {\n    selectionManager.toggleAllItems(\n      items.map((item, i) => getRowId?.(item) ?? i),\n      selected,\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.toggleItem(rowId, selected),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.deselectItem(rowId, selected),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.selectItem(rowId, selected),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: RowId) =>\n    selectionManager.isSelected(rowId, selected);\n\n  return {\n    ...tableState,\n    selection: {\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: selectionManager.clearItems,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"sourceRoot":""}

package/lib/hooks/useSort.js

@@ -0,0 +1,94 @@
+import { useControllableState } from '@fluentui/react-utilities';
+
+const noop = () => undefined;
+
+export const defaultTableSortState = {
+  getSortDirection: () => 'ascending',
+  setColumnSort: noop,
+  sort: rows => [...rows],
+  sortColumn: undefined,
+  sortDirection: 'ascending',
+  toggleColumnSort: noop
+};
+export function useSort(options) {
+  // False positive, these plugin hooks are intended to be run on every render
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return tableState => useSortState(tableState, options);
+}
+export function useSortState(tableState, options) {
+  const {
+    columns
+  } = tableState;
+  const {
+    sortState,
+    defaultSortState,
+    onSortChange
+  } = options;
+  const [sorted, setSorted] = useControllableState({
+    initialState: {
+      sortDirection: 'ascending',
+      sortColumn: undefined
+    },
+    defaultState: defaultSortState,
+    state: sortState
+  });
+  const {
+    sortColumn,
+    sortDirection
+  } = sorted;
+
+  const toggleColumnSort = columnId => {
+    setSorted(s => {
+      const newState = { ...s,
+        sortColumn: columnId
+      };
+
+      if (s.sortColumn === columnId) {
+        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';
+      } else {
+        newState.sortDirection = 'ascending';
+      }
+
+      onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
+      return newState;
+    });
+  };
+
+  const setColumnSort = (nextSortColumn, nextSortDirection) => {
+    const newState = {
+      sortColumn: nextSortColumn,
+      sortDirection: nextSortDirection
+    };
+    onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
+    setSorted(newState);
+  };
+
+  const sort = rows => {
+    return rows.slice().sort((a, b) => {
+      const sortColumnDef = columns.find(column => column.columnId === sortColumn);
+
+      if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
+        return 0;
+      }
+
+      const mod = sortDirection === 'ascending' ? 1 : -1;
+      return sortColumnDef.compare(a.item, b.item) * mod;
+    });
+  };
+
+  const getSortDirection = columnId => {
+    return sortColumn === columnId ? sortDirection : undefined;
+  };
+
+  return { ...tableState,
+    sort: {
+      sort,
+      sortColumn,
+      sortDirection,
+      setColumnSort,
+      toggleColumnSort,
+      getSortDirection
+    }
+  };
+}
+//# sourceMappingURL=useSort.js.map

package/lib/hooks/useSort.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":"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","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport type { ColumnId, RowState, SortState, TableSortState, TableState, UseSortOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n  getSortDirection: () => 'ascending',\n  setColumnSort: noop,\n  sort: (rows: RowState<unknown>[]) => [...rows],\n  sortColumn: undefined,\n  sortDirection: 'ascending',\n  toggleColumnSort: noop,\n};\n\nexport function useSort<TItem>(options: UseSortOptions) {\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: TableState<TItem>) => useSortState(tableState, options);\n}\n\nexport function useSortState<TItem>(tableState: TableState<TItem>, options: UseSortOptions): TableState<TItem> {\n  const { columns } = tableState;\n  const { sortState, defaultSortState, onSortChange } = options;\n\n  const [sorted, setSorted] = useControllableState<SortState>({\n    initialState: {\n      sortDirection: 'ascending' as const,\n      sortColumn: undefined,\n    },\n    defaultState: defaultSortState,\n    state: sortState,\n  });\n\n  const { sortColumn, sortDirection } = sorted;\n\n  const toggleColumnSort = (columnId: ColumnId | undefined) => {\n    setSorted(s => {\n      const newState = { ...s, sortColumn: columnId };\n      if (s.sortColumn === columnId) {\n        newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n      } else {\n        newState.sortDirection = 'ascending';\n      }\n\n      onSortChange?.(newState);\n      return newState;\n    });\n  };\n\n  const setColumnSort: TableSortState<TItem>['setColumnSort'] = (nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(newState);\n    setSorted(newState);\n  };\n\n  const sort = (rows: RowState<TItem>[]) => {\n    return rows.slice().sort((a, b) => {\n      const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n      if (!sortColumnDef?.compare) {\n        return 0;\n      }\n\n      const mod = sortDirection === 'ascending' ? 1 : -1;\n      return sortColumnDef.compare(a.item, b.item) * mod;\n    });\n  };\n\n  const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: ColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    ...tableState,\n    sort: {\n      sort,\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    },\n  };\n}\n"],"sourceRoot":""}

package/lib/hooks/useTable.js

@@ -0,0 +1,32 @@
+import { defaultTableSelectionState } from './useSelection';
+import { defaultTableSortState } from './useSort';
+
+const defaultRowEnhancer = row => row;
+
+export function useTable(options, plugins = []) {
+  const {
+    items,
+    getRowId,
+    columns
+  } = options;
+
+  const getRows = (rowEnhancer = defaultRowEnhancer) => items.map((item, i) => {
+    var _a;
+
+    return rowEnhancer({
+      item,
+      rowId: (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i
+    });
+  });
+
+  const initialState = {
+    getRowId,
+    items,
+    columns,
+    getRows,
+    selection: defaultTableSelectionState,
+    sort: defaultTableSortState
+  };
+  return plugins.reduce((state, plugin) => plugin(state), initialState);
+}
+//# sourceMappingURL=useTable.js.map

package/lib/hooks/useTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../packages/react-components/react-table/src/hooks/useTable.ts"],"names":[],"mappings":"AACA,SAAS,0BAAT,QAA2C,gBAA3C;AACA,SAAS,qBAAT,QAAsC,WAAtC;;AAEA,MAAM,kBAAkB,GAA4C,GAAG,IAAI,GAA3E;;AAEA,OAAM,SAAU,QAAV,CAA0B,OAA1B,EAA2D,OAAA,GAA8B,EAAzF,EAA2F;EAC/F,MAAM;IAAE,KAAF;IAAS,QAAT;IAAmB;EAAnB,IAA+B,OAArC;;EAEA,MAAM,OAAO,GAAG,CACd,WAAA,GAAc,kBADA,KAEX,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;IAAA,IAAA,EAAA;;IAAC,OAAA,WAAW,CAAC;MAAE,IAAF;MAAQ,KAAK,EAAE,CAAA,EAAA,GAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,IAAH,CAAR,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;IAAnC,CAAD,CAAX;EAAmD,CAA1E,CAFL;;EAIA,MAAM,YAAY,GAAsB;IACtC,QADsC;IAEtC,KAFsC;IAGtC,OAHsC;IAItC,OAJsC;IAKtC,SAAS,EAAE,0BAL2B;IAMtC,IAAI,EAAE;EANgC,CAAxC;EASA,OAAO,OAAO,CAAC,MAAR,CAAe,CAAC,KAAD,EAAQ,MAAR,KAAmB,MAAM,CAAC,KAAD,CAAxC,EAAiD,YAAjD,CAAP;AACD","sourcesContent":["import type { UseTableOptions, TableState, RowState, RowEnhancer, TableStatePlugin, TableSortState } from './types';\nimport { defaultTableSelectionState } from './useSelection';\nimport { defaultTableSortState } from './useSort';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, RowState<unknown>> = row => row;\n\nexport function useTable<TItem>(options: UseTableOptions<TItem>, plugins: TableStatePlugin[] = []): TableState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends RowState<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"sourceRoot":""}

package/lib/index.js

@@ -0,0 +1,12 @@
+export { useTable, useSelection, useSort } from './hooks';
+export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';
+export { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';
+export { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';
+export { Table, tableClassName, tableClassNames, useTableStyles_unstable, useTable_unstable, renderTable_unstable } from './Table';
+export { TableHeader, tableHeaderClassNames, tableHeaderClassName, useTableHeaderStyles_unstable, useTableHeader_unstable, renderTableHeader_unstable } from './TableHeader';
+export { TableHeaderCell, tableHeaderCellClassName, tableHeaderCellClassNames, useTableHeaderCellStyles_unstable, useTableHeaderCell_unstable, renderTableHeaderCell_unstable } from './TableHeaderCell';
+export { TableContextProvider, useTableContext } from './contexts/tableContext';
+export { TableSelectionCell, useTableSelectionCellStyles_unstable, useTableSelectionCell_unstable, renderTableSelectionCell_unstable, tableSelectionCellClassNames } from './TableSelectionCell';
+export { TableCellActions, tableCellActionsClassNames, useTableCellActionsStyles_unstable, useTableCellActions_unstable, renderTableCellActions_unstable } from './TableCellActions';
+export { TableCellLayout, tableCellLayoutClassNames, useTableCellLayoutStyles_unstable, useTableCellLayout_unstable, renderTableCellLayout_unstable } from './TableCellLayout';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../packages/react-components/react-table/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,EAAmB,YAAnB,EAAiC,OAAjC,QAAgD,SAAhD;AAaA,SACE,SADF,EAEE,mBAFF,EAGE,kBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,QADF,EAEE,kBAFF,EAGE,iBAHF,EAIE,0BAJF,EAKE,oBALF,EAME,uBANF,QAOO,YAPP;AAUA,SACE,SADF,EAEE,kBAFF,EAGE,mBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,KADF,EAEE,cAFF,EAGE,eAHF,EAIE,uBAJF,EAKE,iBALF,EAME,oBANF,QAOO,SAPP;AAUA,SACE,WADF,EAEE,qBAFF,EAGE,oBAHF,EAIE,6BAJF,EAKE,uBALF,EAME,0BANF,QAOO,eAPP;AAUA,SACE,eADF,EAEE,wBAFF,EAGE,yBAHF,EAIE,iCAJF,EAKE,2BALF,EAME,8BANF,QAOO,mBAPP;AAUA,SAAS,oBAAT,EAA+B,eAA/B,QAAsD,yBAAtD;AACA,SACE,kBADF,EAEE,oCAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,4BALF,QAMO,sBANP;AASA,SACE,gBADF,EAEE,0BAFF,EAGE,kCAHF,EAIE,4BAJF,EAKE,+BALF,QAMO,oBANP;AASA,SACE,eADF,EAEE,yBAFF,EAGE,iCAHF,EAIE,2BAJF,EAKE,8BALF,QAMO,mBANP","sourcesContent":["export { useTable, useSelection, useSort } from './hooks';\nexport type {\n  UseTableOptions,\n  TableState as HeadlessTableState,\n  TableSelectionState,\n  TableSortState,\n  TableStatePlugin,\n  RowState,\n  RowId,\n  ColumnDefinition,\n  ColumnId,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n"],"sourceRoot":""}

package/lib/navigationModes/cell.js

@@ -0,0 +1,250 @@
+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

@@ -0,0 +1 @@
+{"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":""}