Skip to content

feat(react): port MenuSelect, NumericMenu, and RatingMenu#7031

Draft
aymeric-giraudet wants to merge 1 commit into
chore/port-widget-test-infrafrom
chore/port-widget-react-widgets
Draft

feat(react): port MenuSelect, NumericMenu, and RatingMenu#7031
aymeric-giraudet wants to merge 1 commit into
chore/port-widget-test-infrafrom
chore/port-widget-react-widgets

Conversation

@aymeric-giraudet
Copy link
Copy Markdown
Member

Stacked on top of #7030.

Summary

Closes the three remaining React widget gaps from the port-widget skill audit. Each ported widget pairs a hook (in `react-instantsearch-core`) with a public widget and a presentational UI component in `react-instantsearch`.

  • MenuSelect: variant of `Menu` that reuses `useMenu` (no new hook), renders a plain `` UI with optional `defaultOptionLabel` and `itemLabel` props, and sets `$$widgetType: 'ais.menuSelect'`. NumericMenu: thin wrapper around the existing `useNumericMenu` hook. UI renders a radio-button list matching the `ais-NumericMenu-*` class names used by JS and Vue. RatingMenu: adds a new `useRatingMenu` hook in `react-instantsearch-core`, plus a presentational UI component that renders the SVG star symbols, anchor links with `aria-label`, and modifier-click handling. Each port replaces the `throw new Error('X is not supported in React InstantSearch')` placeholder in `packages/react-instantsearch/src/tests/common-widgets.test.tsx`, removes the corresponding `skippedTests` entry, and adds a switch case in `widgets/tests/utils/all-widgets.tsx` so SSR coverage applies. Test plan [x] `npx jest packages/react-instantsearch packages/react-instantsearch-core --no-coverage` — 107 suites green, 884 passing. [x] `npx jest packages/react-instantsearch/src/widgets/tests --no-coverage` — `all-widgets.test.tsx` snapshot includes the three new widgets with correct `$$widgetType` and `$$type` values. Next in the stack: Vue recommendation widgets.

Closes the three remaining gaps in `react-instantsearch` that the
`port-widget` skill audit surfaced:

- **MenuSelect**: a variant of `Menu` that reuses `useMenu`, renders a
  plain `<select>` UI with `defaultOption`/`itemLabel` escape hatches,
  and sets `$$widgetType: 'ais.menuSelect'`.
- **NumericMenu**: thin wrapper around the existing
  `useNumericMenu` hook. UI is a radio-button list matching the
  `ais-NumericMenu-*` class names used by the JS and Vue flavors.
- **RatingMenu**: adds a new `useRatingMenu` hook to
  `react-instantsearch-core`, plus a presentational UI component that
  renders the SVG star symbols, anchor links with `aria-label`, and
  modifier-click handling for opening in a new tab.

Replaces the corresponding "X is not supported in React InstantSearch"
test placeholders with real render setups, removes the
`skippedTests` entries, and wires the widgets into
`__utils__/all-widgets.tsx` so SSR coverage applies.
@codacy-production
Copy link
Copy Markdown

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 27 complexity · 1 duplication

Metric Results
Complexity 27
Duplication 1

View in Codacy

TIP This summary will be updated as you push new changes.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 13, 2026

More templates

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@7031

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@7031

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@7031

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@7031

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@7031

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@7031

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@7031

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@7031

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@7031

commit: 60ee072

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant