Implement custom content typing

[georgekaran]

Closes #2699

[changeset-bot]

🦋 Changeset detected

Latest commit: 60778d2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@ariakit/core	Patch
@ariakit/react-core	Patch
@ariakit/react	Patch
@ariakit/test	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[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 60778d2:

Sandbox	Source
Ariakit	Configuration

[diegohaz]

Thanks for implementing this.

I'm not entirely sure about this API, though. I'd like to explore more alternatives to see if they mesh better with other use cases (when they come up).

For instance, the lookup text is currently obtained from the item object using item.element?.textContent || item.children. The children property, while still undocumented, will become more useful once we implement the virtualization feature, where the items could be passed to the store (via the defaultItems prop) before being rendered and the children property would be equivalent to the children prop passed to the composite item element:

const defaultItems = [
  { value: "Apple", children: "🍎 Apple" },
  // ...
];

<SelectProvider defaultItems={defaultItems}>
  <Select />
  <SelectPopover>
    <SelectRenderer>
      {(item) => <SelectItem key={item.id} {...item} />}
    </SelectRenderer>
  </SelectPopover>
</SelectProvider>

I wonder whether we could use a new property: typeaheadText, lookupText, etc. This way, we could pass it to the item component (or to the item object when passing default items beforehand for virtualization), eliminating the need to repeat the same logic for Select and SelectPopover:

<SelectPopover>
  <SelectItem typeaheadText="Apple" value="Apple">
    🍎 Apple
  </SelectItem>
</SelectPopover>

This property would be registered along with the item in the composite store and used by CompositeTypeahead:

item.typeaheadText || item.element?.textContent || item.children

This is just an idea. I'm not entirely convinced about it either.

[georgekaran]

Hey @diegohaz

I really loved your idea of implementation, in fact the need for repeating the same logic for Select and SelectPopover was bothering me either but I decided to open the PR so we could iterate over the best solution.

I will implement the recommendations, and then we can revisit the process for further improvement.

[diegohaz]

It looks good, thanks a lot!

I'll try to gather a few more use cases to see if this API makes sense.

[diegohaz]

typeaheadText is missing in the callback deps. We should probably add the linter to the project as it could help identify existing issues like that.

[georgekaran]

Yeah, I agree.

Could we include this lint in the following PR? I've done a few tests, and there are some things we must address in other files too.

[diegohaz]

Yes, it's better as a separate PR.