@fluentui/react-table 9.0.0-alpha.2 → 9.0.0-alpha.20

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.20",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -13,38 +13,43 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-table/src && yarn docs",
     "type-check": "tsc -b tsconfig.json",
     "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "start": "yarn storybook",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.13",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.2.0",
-    "@fluentui/react-checkbox": "^9.0.5",
+    "@fluentui/keyboard-keys": "^9.0.1",
+    "@fluentui/react-aria": "^9.3.5",
+    "@fluentui/react-avatar": "^9.2.14",
+    "@fluentui/react-checkbox": "^9.0.20",
+    "@fluentui/react-context-selector": "^9.1.5",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-tabster": "^9.1.1",
-    "@fluentui/react-theme": "^9.1.0",
-    "@fluentui/react-utilities": "^9.1.0",
-    "@griffel/react": "^1.3.0",
+    "@fluentui/react-radio": "^9.0.18",
+    "@fluentui/react-tabster": "^9.3.7",
+    "@fluentui/react-theme": "^9.1.5",
+    "@fluentui/react-utilities": "^9.4.0",
+    "@griffel/react": "^1.5.2",
     "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": [
@@ -52,5 +57,13 @@
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }

package/lib/hooks/useSelection.js

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import { createSelectionManager } from './selectionManager';
-export function useSelection(options) {
-  const {
-    selectionMode,
-    items,
-    getRowId,
-    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) => getRowId(item, 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 {
-    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

@@ -1 +0,0 @@
-{"version":3,"sources":["hooks/useSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,gBAA/B,QAAuD,2BAAvD;AACA,SAAS,sBAAT,QAAuC,oBAAvC;AAkBA,OAAM,SAAU,YAAV,CAA8B,OAA9B,EAAiE;EACrE,MAAM;IAAE,aAAF;IAAiB,KAAjB;IAAwB,QAAxB;IAAkC,oBAAlC;IAAwD,aAAxD;IAAuE;EAAvE,IAA6F,OAAnG;EAEA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,oBAAoB,CAAC;IACnD,YAAY,EAAE,IAAI,GAAJ,EADqC;IAEnD,YAAY,EAAE,oBAFqC;IAGnD,KAAK,EAAE;EAH4C,CAAD,CAApD;EAMA,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC1C,OAAO,sBAAsB,CAAC,aAAD,EAAgB,gBAAgB,IAAG;MAC9D,WAAW,CAAC,MAAK;QACf,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,gBAAH,CAAjB;QACA,OAAO,gBAAP;MACD,CAHU,CAAX;IAID,CAL4B,CAA7B;EAMD,CAPwB,EAOtB,CAAC,iBAAD,EAAoB,aAApB,EAAmC,WAAnC,CAPsB,CAAzB;EASA,MAAM,aAAa,GAAiD,gBAAgB,CAAC,MAAK;IACxF,gBAAgB,CAAC,cAAjB,CACE,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAa,QAAQ,CAAC,IAAD,EAAO,CAAP,CAA/B,CADF,EAEE,QAFF;EAID,CALmF,CAApF;EAOA,MAAM,SAAS,GAA6C,gBAAgB,CAAE,KAAD,IAC3E,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CAD0E,CAA5E;EAIA,MAAM,WAAW,GAA+C,gBAAgB,CAAE,KAAD,IAC/E,gBAAgB,CAAC,YAAjB,CAA8B,KAA9B,EAAqC,QAArC,CAD8E,CAAhF;EAIA,MAAM,SAAS,GAA6C,gBAAgB,CAAE,KAAD,IAC3E,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CAD0E,CAA5E;;EAIA,MAAM,aAAa,GAAkD,KAAD,IAClE,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CADF;;EAGA,OAAO;IACL,gBAAgB,EAAE,QAAQ,CAAC,IAAT,GAAgB,CAD7B;IAEL,eAAe,EAAE,aAAa,KAAK,QAAlB,GAA6B,QAAQ,CAAC,IAAT,GAAgB,CAA7C,GAAiD,QAAQ,CAAC,IAAT,KAAkB,KAAK,CAAC,MAFrF;IAGL,YAAY,EAAE,QAHT;IAIL,SAJK;IAKL,aALK;IAML,SAAS,EAAE,gBAAgB,CAAC,UANvB;IAOL,WAPK;IAQL,SARK;IASL;EATK,CAAP;AAWD","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type {\n  GetRowIdInternal,\n  OnSelectionChangeCallback,\n  RowId,\n  SelectionMode,\n  TableSelectionStateInternal,\n} from './types';\n\ninterface UseSelectionOptions<TItem> {\n  selectionMode: SelectionMode;\n  items: TItem[];\n  getRowId: GetRowIdInternal<TItem>;\n  defaultSelectedItems?: Set<RowId>;\n  selectedItems?: Set<RowId>;\n  onSelectionChange?: OnSelectionChangeCallback;\n}\n\nexport function useSelection<TItem>(options: UseSelectionOptions<TItem>): TableSelectionStateInternal {\n  const { selectionMode, items, getRowId, 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: TableSelectionStateInternal['toggleAllRows'] = useEventCallback(() => {\n    selectionManager.toggleAllItems(\n      items.map((item, i) => getRowId(item, i)),\n      selected,\n    );\n  });\n\n  const toggleRow: TableSelectionStateInternal['toggleRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.toggleItem(rowId, selected),\n  );\n\n  const deselectRow: TableSelectionStateInternal['deselectRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.deselectItem(rowId, selected),\n  );\n\n  const selectRow: TableSelectionStateInternal['selectRow'] = useEventCallback((rowId: RowId) =>\n    selectionManager.selectItem(rowId, selected),\n  );\n\n  const isRowSelected: TableSelectionStateInternal['isRowSelected'] = (rowId: RowId) =>\n    selectionManager.isSelected(rowId, selected);\n\n  return {\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"],"sourceRoot":"../src/"}

package/lib/hooks/useSort.js

@@ -1,72 +0,0 @@
-import { useControllableState } from '@fluentui/react-utilities';
-export function useSort(options) {
-  const {
-    columns,
-    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 = items => items.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, b) * mod;
-  });
-
-  const getSortDirection = columnId => {
-    return sortColumn === columnId ? sortDirection : undefined;
-  };
-
-  return {
-    sortColumn,
-    sortDirection,
-    sort,
-    setColumnSort,
-    toggleColumnSort,
-    getSortDirection
-  };
-}
-//# sourceMappingURL=useSort.js.map

package/lib/hooks/useSort.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["hooks/useSort.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AAUA,OAAM,SAAU,OAAV,CAAyB,OAAzB,EAAuD;EAC3D,MAAM;IAAE,OAAF;IAAW,SAAX;IAAsB,gBAAtB;IAAwC;EAAxC,IAAyD,OAA/D;EAEA,MAAM,CAAC,MAAD,EAAS,SAAT,IAAsB,oBAAoB,CAAY;IAC1D,YAAY,EAAE;MACZ,aAAa,EAAE,WADH;MAEZ,UAAU,EAAE;IAFA,CAD4C;IAK1D,YAAY,EAAE,gBAL4C;IAM1D,KAAK,EAAE;EANmD,CAAZ,CAAhD;EASA,MAAM;IAAE,UAAF;IAAc;EAAd,IAAgC,MAAtC;;EAEA,MAAM,gBAAgB,GAAI,QAAD,IAAmC;IAC1D,SAAS,CAAC,CAAC,IAAG;MACZ,MAAM,QAAQ,GAAG,EAAE,GAAG,CAAL;QAAQ,UAAU,EAAE;MAApB,CAAjB;;MACA,IAAI,CAAC,CAAC,UAAF,KAAiB,QAArB,EAA+B;QAC7B,QAAQ,CAAC,aAAT,GAAyB,CAAC,CAAC,aAAF,KAAoB,WAApB,GAAkC,YAAlC,GAAiD,WAA1E;MACD,CAFD,MAEO;QACL,QAAQ,CAAC,aAAT,GAAyB,WAAzB;MACD;;MAED,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,QAAH,CAAZ;MACA,OAAO,QAAP;IACD,CAVQ,CAAT;EAWD,CAZD;;EAcA,MAAM,aAAa,GAAmD,CAAC,cAAD,EAAiB,iBAAjB,KAAsC;IAC1G,MAAM,QAAQ,GAAG;MAAE,UAAU,EAAE,cAAd;MAA8B,aAAa,EAAE;IAA7C,CAAjB;IACA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,QAAH,CAAZ;IACA,SAAS,CAAC,QAAD,CAAT;EACD,CAJD;;EAMA,MAAM,IAAI,GAAI,KAAD,IACX,KAAK,CAAC,KAAN,GAAc,IAAd,CAAmB,CAAC,CAAD,EAAI,CAAJ,KAAS;IAC1B,MAAM,aAAa,GAAG,OAAO,CAAC,IAAR,CAAa,MAAM,IAAI,MAAM,CAAC,QAAP,KAAoB,UAA3C,CAAtB;;IACA,IAAI,EAAC,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,OAAhB,CAAJ,EAA6B;MAC3B,OAAO,CAAP;IACD;;IAED,MAAM,GAAG,GAAG,aAAa,KAAK,WAAlB,GAAgC,CAAhC,GAAoC,CAAC,CAAjD;IACA,OAAO,aAAa,CAAC,OAAd,CAAsB,CAAtB,EAAyB,CAAzB,IAA8B,GAArC;EACD,CARD,CADF;;EAWA,MAAM,gBAAgB,GAAuD,QAAD,IAAuB;IACjG,OAAO,UAAU,KAAK,QAAf,GAA0B,aAA1B,GAA0C,SAAjD;EACD,CAFD;;EAIA,OAAO;IACL,UADK;IAEL,aAFK;IAGL,IAHK;IAIL,aAJK;IAKL,gBALK;IAML;EANK,CAAP;AAQD","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport type { ColumnDefinition, ColumnId, OnSortChangeCallback, SortState, TableSortStateInternal } from './types';\n\ninterface UseSortOptions<TItem> {\n  columns: ColumnDefinition<TItem>[];\n  sortState?: SortState;\n  defaultSortState?: SortState;\n  onSortChange?: OnSortChangeCallback;\n}\n\nexport function useSort<TItem>(options: UseSortOptions<TItem>): TableSortStateInternal<TItem> {\n  const { columns, 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: TableSortStateInternal<TItem>['setColumnSort'] = (nextSortColumn, nextSortDirection) => {\n    const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n    onSortChange?.(newState);\n    setSorted(newState);\n  };\n\n  const sort = (items: TItem[]) =>\n    items.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, b) * mod;\n    });\n\n  const getSortDirection: TableSortStateInternal<TItem>['getSortDirection'] = (columnId: ColumnId) => {\n    return sortColumn === columnId ? sortDirection : undefined;\n  };\n\n  return {\n    sortColumn,\n    sortDirection,\n    sort,\n    setColumnSort,\n    toggleColumnSort,\n    getSortDirection,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/hooks/useTable.js

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { useSelection } from './useSelection';
-import { useSort } from './useSort';
-export function useTable(options) {
-  const {
-    items: baseItems,
-    columns,
-    getRowId: getUserRowId = () => undefined,
-    selectionMode = 'multiselect',
-    rowEnhancer = row => row,
-    defaultSelectedRows,
-    selectedRows: userSelectedRows,
-    onSelectionChange,
-    sortState: userSortState,
-    defaultSortState,
-    onSortChange
-  } = options;
-  const getRowId = React.useCallback((item, index) => {
-    var _a;
-
-    return (_a = getUserRowId(item)) !== null && _a !== void 0 ? _a : index;
-  }, [getUserRowId]);
-  const {
-    sortColumn,
-    sortDirection,
-    toggleColumnSort,
-    setColumnSort,
-    getSortDirection,
-    sort
-  } = useSort({
-    columns,
-    sortState: userSortState,
-    defaultSortState,
-    onSortChange
-  });
-  const sortState = React.useMemo(() => ({
-    sortColumn,
-    sortDirection,
-    setColumnSort,
-    toggleColumnSort,
-    getSortDirection
-  }), [sortColumn, sortDirection, setColumnSort, toggleColumnSort, getSortDirection]);
-  const {
-    isRowSelected,
-    toggleRow,
-    toggleAllRows,
-    clearRows,
-    selectedRows,
-    allRowsSelected,
-    someRowsSelected,
-    selectRow,
-    deselectRow
-  } = useSelection({
-    selectionMode,
-    items: baseItems,
-    getRowId,
-    defaultSelectedItems: defaultSelectedRows,
-    selectedItems: userSelectedRows,
-    onSelectionChange
-  });
-  const selectionState = React.useMemo(() => ({
-    isRowSelected,
-    clearRows,
-    deselectRow,
-    selectRow,
-    toggleAllRows,
-    toggleRow,
-    selectedRows: Array.from(selectedRows),
-    allRowsSelected,
-    someRowsSelected
-  }), [isRowSelected, clearRows, deselectRow, selectRow, toggleAllRows, toggleRow, selectedRows, allRowsSelected, someRowsSelected]);
-  const rows = React.useMemo(() => sort(baseItems).map((item, i) => {
-    return rowEnhancer({
-      item,
-      rowId: getRowId(item, i)
-    }, {
-      selection: selectionState,
-      sort: sortState
-    });
-  }), [baseItems, getRowId, sort, rowEnhancer, selectionState, sortState]);
-  return {
-    rows,
-    selection: selectionState,
-    sort: sortState
-  };
-}
-//# sourceMappingURL=useTable.js.map

package/lib/hooks/useTable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["hooks/useTable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AASA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,OAAT,QAAwB,WAAxB;AAEA,OAAM,SAAU,QAAV,CACJ,OADI,EACsC;EAE1C,MAAM;IACJ,KAAK,EAAE,SADH;IAEJ,OAFI;IAGJ,QAAQ,EAAE,YAAY,GAAG,MAAM,SAH3B;IAIJ,aAAa,GAAG,aAJZ;IAKJ,WAAW,GAAI,GAAD,IAA0B,GALpC;IAMJ,mBANI;IAOJ,YAAY,EAAE,gBAPV;IAQJ,iBARI;IASJ,SAAS,EAAE,aATP;IAUJ,gBAVI;IAWJ;EAXI,IAYF,OAZJ;EAcA,MAAM,QAAQ,GAA4B,KAAK,CAAC,WAAN,CACxC,CAAC,IAAD,EAAc,KAAd,KAA+B;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAD,CAAZ,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,EAAlB,GAAsB,KAAtB;EAA2B,CADnB,EAExC,CAAC,YAAD,CAFwC,CAA1C;EAIA,MAAM;IAAE,UAAF;IAAc,aAAd;IAA6B,gBAA7B;IAA+C,aAA/C;IAA8D,gBAA9D;IAAgF;EAAhF,IAAyF,OAAO,CAAC;IACrG,OADqG;IAErG,SAAS,EAAE,aAF0F;IAGrG,gBAHqG;IAIrG;EAJqG,CAAD,CAAtG;EAMA,MAAM,SAAS,GAAmB,KAAK,CAAC,OAAN,CAChC,OAAO;IACL,UADK;IAEL,aAFK;IAGL,aAHK;IAIL,gBAJK;IAKL;EALK,CAAP,CADgC,EAQhC,CAAC,UAAD,EAAa,aAAb,EAA4B,aAA5B,EAA2C,gBAA3C,EAA6D,gBAA7D,CARgC,CAAlC;EAWA,MAAM;IACJ,aADI;IAEJ,SAFI;IAGJ,aAHI;IAIJ,SAJI;IAKJ,YALI;IAMJ,eANI;IAOJ,gBAPI;IAQJ,SARI;IASJ;EATI,IAUF,YAAY,CAAC;IACf,aADe;IAEf,KAAK,EAAE,SAFQ;IAGf,QAHe;IAIf,oBAAoB,EAAE,mBAJP;IAKf,aAAa,EAAE,gBALA;IAMf;EANe,CAAD,CAVhB;EAmBA,MAAM,cAAc,GAAwB,KAAK,CAAC,OAAN,CAC1C,OAAO;IACL,aADK;IAEL,SAFK;IAGL,WAHK;IAIL,SAJK;IAKL,aALK;IAML,SANK;IAOL,YAAY,EAAE,KAAK,CAAC,IAAN,CAAW,YAAX,CAPT;IAQL,eARK;IASL;EATK,CAAP,CAD0C,EAY1C,CACE,aADF,EAEE,SAFF,EAGE,WAHF,EAIE,SAJF,EAKE,aALF,EAME,SANF,EAOE,YAPF,EAQE,eARF,EASE,gBATF,CAZ0C,CAA5C;EAyBA,MAAM,IAAI,GAAG,KAAK,CAAC,OAAN,CACX,MACE,IAAI,CAAC,SAAD,CAAJ,CAAgB,GAAhB,CAAoB,CAAC,IAAD,EAAO,CAAP,KAAY;IAC9B,OAAO,WAAW,CAChB;MACE,IADF;MAEE,KAAK,EAAE,QAAQ,CAAC,IAAD,EAAO,CAAP;IAFjB,CADgB,EAKhB;MAAE,SAAS,EAAE,cAAb;MAA6B,IAAI,EAAE;IAAnC,CALgB,CAAlB;EAOD,CARD,CAFS,EAWX,CAAC,SAAD,EAAY,QAAZ,EAAsB,IAAtB,EAA4B,WAA5B,EAAyC,cAAzC,EAAyD,SAAzD,CAXW,CAAb;EAcA,OAAO;IACL,IADK;IAEL,SAAS,EAAE,cAFN;IAGL,IAAI,EAAE;EAHD,CAAP;AAKD","sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableOptions,\n  TableState,\n  RowState,\n  TableSelectionState,\n  TableSortState,\n  GetRowIdInternal,\n} from './types';\nimport { useSelection } from './useSelection';\nimport { useSort } from './useSort';\n\nexport function useTable<TItem, TRowState extends RowState<TItem> = RowState<TItem>>(\n  options: UseTableOptions<TItem, TRowState>,\n): TableState<TItem, TRowState> {\n  const {\n    items: baseItems,\n    columns,\n    getRowId: getUserRowId = () => undefined,\n    selectionMode = 'multiselect',\n    rowEnhancer = (row: RowState<TItem>) => row as TRowState,\n    defaultSelectedRows,\n    selectedRows: userSelectedRows,\n    onSelectionChange,\n    sortState: userSortState,\n    defaultSortState,\n    onSortChange,\n  } = options;\n\n  const getRowId: GetRowIdInternal<TItem> = React.useCallback(\n    (item: TItem, index: number) => getUserRowId(item) ?? index,\n    [getUserRowId],\n  );\n  const { sortColumn, sortDirection, toggleColumnSort, setColumnSort, getSortDirection, sort } = useSort({\n    columns,\n    sortState: userSortState,\n    defaultSortState,\n    onSortChange,\n  });\n  const sortState: TableSortState = React.useMemo(\n    () => ({\n      sortColumn,\n      sortDirection,\n      setColumnSort,\n      toggleColumnSort,\n      getSortDirection,\n    }),\n    [sortColumn, sortDirection, setColumnSort, toggleColumnSort, getSortDirection],\n  );\n\n  const {\n    isRowSelected,\n    toggleRow,\n    toggleAllRows,\n    clearRows,\n    selectedRows,\n    allRowsSelected,\n    someRowsSelected,\n    selectRow,\n    deselectRow,\n  } = useSelection({\n    selectionMode,\n    items: baseItems,\n    getRowId,\n    defaultSelectedItems: defaultSelectedRows,\n    selectedItems: userSelectedRows,\n    onSelectionChange,\n  });\n\n  const selectionState: TableSelectionState = React.useMemo(\n    () => ({\n      isRowSelected,\n      clearRows,\n      deselectRow,\n      selectRow,\n      toggleAllRows,\n      toggleRow,\n      selectedRows: Array.from(selectedRows),\n      allRowsSelected,\n      someRowsSelected,\n    }),\n    [\n      isRowSelected,\n      clearRows,\n      deselectRow,\n      selectRow,\n      toggleAllRows,\n      toggleRow,\n      selectedRows,\n      allRowsSelected,\n      someRowsSelected,\n    ],\n  );\n\n  const rows = React.useMemo(\n    () =>\n      sort(baseItems).map((item, i) => {\n        return rowEnhancer(\n          {\n            item,\n            rowId: getRowId(item, i),\n          },\n          { selection: selectionState, sort: sortState },\n        );\n      }),\n    [baseItems, getRowId, sort, rowEnhancer, selectionState, sortState],\n  );\n\n  return {\n    rows,\n    selection: selectionState,\n    sort: sortState,\n  };\n}\n"],"sourceRoot":"../src/"}

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