CustomSelectControl: Refactor to use Ariakit store state for current value

[yogeshbhutkar]

Fixes: #67759

What?

This PR fixes a bug where the Button component's description fails to update correctly when uncontrolled.

How?

The implementation replaces store.getState() with Ariakit.useStoreState(store) to accurately retrieve the current value, ensuring the description updates as expected.

Testing Instructions

1. Add the below code snippet to the storybook.

export const Uncontrolled = {
	args: {
		...Default.args,
	},
};

2. In DevTools, checkout out the accessibility panel for the main combobox button. The button description will now update after changing the selected options.

Screencast

Before:

custom-select-control-before-720p.mov

After:

[yogeshbhutkar]

This PR also works well with the previously raised issue #67721 and takes a different approach as mentioned in #67733.

Screen.Recording.2024-12-11.at.2.11.44.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

Thanks, @yogeshbhutkar! I can confirm that this fixes the issue.

Let's add a changelog entry. I think this is a good merge.

[tyxla]

Confirming this looks good and works well. Happy to ship once we have a CHANGELOG entry as @Mamaduka suggested.

[mirka]

Oh great, nice clean fix! Thank you 🙌

[yogeshbhutkar]

Added changelog entry.

CC: @Mamaduka

[Mamaduka]

Suggested change

	- `CustomSelectControl`: use `useStoreState` to get `currentValue` for optimistic updates ([#67815](https://github.com/WordPress/gutenberg/pull/67815))
	- `CustomSelectControl`: Use `useStoreState` to get `currentValue` and avoid stale values ([#67815](https://github.com/WordPress/gutenberg/pull/67815)).

A minor suggestion. The optimistic updates refer to a different pattern, especially after the React 19 release.

[yogeshbhutkar]

Thanks for the suggestion @Mamaduka. Fixed in the latest commit 🚀.