BREAKING: useTable renamed to useTableFeatures

[ling1726]

⚠️ Breaking change

In order to avoid future naming conflicts hooks have been renamed to be more specific to the Table component

• useSelection -> useTableSelection
• useSort -> useTableSort
• useTable -> useTableFeatures (to avoid conflict with useTable_unstable)

Previous Behavior

  import { useTable, useSort, useSelection } from '@fluentui/react-components/unstable';
  const {
    getRows,
    selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
    sort: { getSortDirection, toggleColumnSort, sort },
  } = useTable(
    {
      columns,
      items,
    },
    [
      useSelection({
        selectionMode: 'multiselect',
        defaultSelectedItems: new Set([0, 1]),
      }),
      useSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } }),
    ],
  );

New Behavior

  import { useTableFeatures, useTableSort, useTableSelection } from '@fluentui/react-components/unstable';
  const {
    getRows,
    selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
    sort: { getSortDirection, toggleColumnSort, sort },
  } = useTableFeatures(
    {
      columns,
      items,
    },
    [
      useTableSelection ({
        selectionMode: 'multiselect',
        defaultSelectedItems: new Set([0, 1]),
      }),
      useTableSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } }),
    ],
  );

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 6f450a1713c40d5429306ab1f6d76bc19e65c295 (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1294	1352	5000
Button	mount	932	936	5000
FluentProvider	mount	1608	1596	5000
FluentProviderWithTheme	mount	627	629	10
FluentProviderWithTheme	virtual-rerender	582	589	10
FluentProviderWithTheme	virtual-rerender-with-unmount	640	627	10
MakeStyles	mount	1890	1923	50000
SpinButton	mount	2526	2529	5000

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	59.018 kB 16.371 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	186.456 kB 52.327 kB
react-components react-components: FluentProvider & webLightTheme	33.48 kB 11.037 kB
react-portal-compat PortalCompatProvider	5.857 kB 1.978 kB

_{🤖 This report was generated against 6f450a1713c40d5429306ab1f6d76bc19e65c295}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4775f03:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[layershifter]

Is there sense to also rename useSelection & useSort? import { useSort } from '@fluentui/react-components' might be confusing as it does not have a connection to the component.

[ling1726]

Is there sense to also rename useSelection & useSort? import { useSort } from '@fluentui/react-components' might be confusing as it does not have a connection to the component.

Perhaps, there's less urgency there since there's no naming conflict there

[ling1726]

In any case I've renmaed useSelection and useSort to useTableSelection and useTableSort respectively @layershifter