Creating a clear button for grid list

[MAST1999]

I'm trying to add a clear button, like I've done for the DateRangePicker:

function ClearDateRangePicker() {
	const state = useContext(DateRangePickerStateContext);

	return state.value ? (
		<Button
			variant="icon"
			className="px-2"
			slot={null}
			onPress={() => {
				state?.setValue(null);
			}}
		>
			x
		</Button>
	) : null;
}

But I don't know which context to use. Looking into the Grid List component, I see I can't hoist the context up and use it in a general way.

Because the GridListInner has all the contexts. I tried using a wrapping ListStateContext but then I have to provide the collection, disabledKeys and selectionManager.

I've tried ListStateContext as well but with no luck 😞

I feel like I'm missing something here.

[snowystinger]

Could you just control the state from outside? I'm imagining you have something like this:

function MyGridList() {
  return (
    <>
      <GridList>...</GridList>
      <Button>Clear</Button>
    </>
  )
}

(since you can't put a button inside the GridList)

in which case you can just control it with state and props like a controlled component

function MyGridList(props) {
  let [selectedKeys, setSelectedKeys] = useState(new Set());
  return (
    <>
      <GridList selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>...</GridList>
      <Button onPress={() => setSelectedKeys(new Set())}>Clear</Button>
    </>
  )
}

Otherwise, selection is available through ListStateContext -> selectionManager.clearSelection()

[MAST1999]

I tried ListStateContext but it gives me undefined.
I think it's because the context is created inside the GridList itself, so I don't have access to it.

I have tried this, for example:

function ClearableGridList({ children, ...props }: GridListProps) {
		<GridListContext.Provider value={{ selectionMode: 'multiple', items, ...props }}>
			<GridList>
				{children}
			</GridList>
			<ClearGridListButton />
		</GridListContext.Provider>
}

function ClearGridListButton() {
	const state = useContext(ListStateContext);
	console.log('ListStateContext: ', state); // it's always null :(
	return state?.selectionManager.firstSelectedKey ? (
		<Button
			variant="icon"
			slot={null}
			onPress={() => {
				state?.selectionManager.clearSelection()
			}}
		>
			<X className="size-4" />
		</Button>
	) : null;

}

[snowystinger]

Right

(since you can't put a button inside the GridList)

You can't access the context if you aren't inside the component, so this makes sense. You should use the controlled state for the selection.

If you tried to put it inside the GridList, that'd be invalid accessibility. You can put it outside though and use things like absolute position to make it look visually like it's inside the GridList if you wanted.

[MAST1999]

OK, that's what I'm doing right now.

I'm wondering if we can move ListStateContext in the GridListContext as well or something along those lines, so the composition model stays the same.

[snowystinger]

So you want to be able to control selectedKeys like you can control selectionMode in this example https://react-spectrum.adobe.com/react-aria/GridList.html#contexts ?

[MAST1999]

Yes, that would be awesome.