ref: Create ListItemSelectedState to declaratively render

[ryan953]

Within <ListItemCheckboxProvider> you've usually got to manually create a sub-component so that it's possible to call the hookuseListItemCheckboxContext() properly. That's kind of annoying sometimes, and looks like this:

function MyListWrapper() {
  return (
    <ListItemCheckboxProvider ...>
      <MyListHeader />
    </ListItemCheckboxProvider>
  );
}

function MyListHeader() {
  const {isAnySelected} = useListItemCheckboxContext();
  return isAnySelected ? <BulkActions /> : <NormalTableHeaders />;
}

Ideally we can have all my page-specific stuff in the same file/component, which means the ListItemCheckbox stuff needs a better interface. This is a step in that direction and looks like:

function MyList() {
  return (
    <ListItemCheckboxProvider ...>
      <ListItemSelectedState selected="none">
        <NormalTableHeaders />
      </ListItemSelectedState>
      <ListItemSelectedState selected="any">
        <BulkActions />
      </ListItemSelectedState>
    </ListItemCheckboxProvider>
  );
}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 1eb50e4. Configure here.}