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

packages/react-instantsearch-core/src/connectors/useRatingMenu.ts

@@ -0,0 +1,22 @@
+import connectRatingMenu from 'instantsearch.js/es/connectors/rating-menu/connectRatingMenu';
+
+import { useConnector } from '../hooks/useConnector';
+
+import type { AdditionalWidgetProperties } from '../hooks/useConnector';
+import type {
+  RatingMenuConnectorParams,
+  RatingMenuWidgetDescription,
+} from 'instantsearch.js/es/connectors/rating-menu/connectRatingMenu';
+
+export type UseRatingMenuProps = RatingMenuConnectorParams;
+
+export function useRatingMenu(
+  props: UseRatingMenuProps,
+  additionalWidgetProperties?: AdditionalWidgetProperties
+) {
+  return useConnector<RatingMenuConnectorParams, RatingMenuWidgetDescription>(
+    connectRatingMenu,
+    props,
+    additionalWidgetProperties
+  );
+}

packages/react-instantsearch-core/src/index.ts

@@ -26,6 +26,7 @@ export * from './connectors/usePagination';
 export * from './connectors/usePoweredBy';
 export * from './connectors/useQueryRules';
 export * from './connectors/useRange';
+export * from './connectors/useRatingMenu';
 export * from './connectors/useRefinementList';
 export * from './connectors/useRelatedProducts';
 export * from './connectors/useSearchBox';

packages/react-instantsearch/src/__tests__/common-widgets.test.tsx

@@ -12,13 +12,16 @@ import {
   HierarchicalMenu,
   Breadcrumb,
   Menu,
+  MenuSelect,
+  NumericMenu,
   Pagination,
   InfiniteHits,
   SearchBox,
   useInstantSearch,
   Hits,
   Index,
   RangeInput,
+  RatingMenu,
   HitsPerPage,
   ClearRefinements,
   CurrentRefinements,
@@ -282,11 +285,21 @@ const testSetups: TestSetupsMap<TestSuites, 'react'> = {
       </form>
     );
   },
-  createRatingMenuWidgetTests() {
-    throw new Error('RatingMenu is not supported in React InstantSearch');
+  createRatingMenuWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <RatingMenu {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
   },
-  createNumericMenuWidgetTests() {
-    throw new Error('NumericMenu is not supported in React InstantSearch');
+  createNumericMenuWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <NumericMenu {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
   },
   createToggleRefinementWidgetTests({ instantSearchOptions, widgetParams }) {
     render(
@@ -382,8 +395,13 @@ const testSetups: TestSetupsMap<TestSuites, 'react'> = {
       flavor: 'react-instantsearch',
     };
   },
-  createMenuSelectWidgetTests() {
-    throw new Error('MenuSelect is not supported in React InstantSearch');
+  createMenuSelectWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <MenuSelect {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
   },
   createDynamicWidgetsWidgetTests({ instantSearchOptions, widgetParams }) {
     render(
@@ -454,12 +472,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createInfiniteHitsWidgetTests: { act },
   createHitsWidgetTests: { act },
   createRangeInputWidgetTests: { act },
-  createRatingMenuWidgetTests: {
-    act,
-    skippedTests: {
-      'RatingMenu widget common tests': true,
-    },
-  },
+  createRatingMenuWidgetTests: { act },
   createInstantSearchWidgetTests: { act },
   createHitsPerPageWidgetTests: { act },
   createClearRefinementsWidgetTests: { act },
@@ -468,24 +481,14 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createSearchBoxWidgetTests: { act },
   createSortByWidgetTests: { act },
   createStatsWidgetTests: { act },
-  createNumericMenuWidgetTests: {
-    act,
-    skippedTests: {
-      'NumericMenu widget common tests': true,
-    },
-  },
+  createNumericMenuWidgetTests: { act },
   createRelatedProductsWidgetTests: { act },
   createFrequentlyBoughtTogetherWidgetTests: { act },
   createTrendingItemsWidgetTests: { act },
   createTrendingFacetsWidgetTests: { act },
   createLookingSimilarWidgetTests: { act },
   createPoweredByWidgetTests: { act },
-  createMenuSelectWidgetTests: {
-    act,
-    skippedTests: {
-      'MenuSelect widget common tests': true,
-    },
-  },
+  createMenuSelectWidgetTests: { act },
   createDynamicWidgetsWidgetTests: { act },
   createChatWidgetTests: {
     act,

packages/react-instantsearch/src/ui/MenuSelect.tsx

@@ -0,0 +1,80 @@
+import { cx } from 'instantsearch-ui-components';
+import React from 'react';
+
+import type { MenuItem } from 'instantsearch.js/es/connectors/menu/connectMenu';
+
+export type MenuSelectProps = Omit<
+  React.ComponentProps<'div'>,
+  'onChange' | 'defaultValue'
+> & {
+  items: MenuItem[];
+  value: string;
+  onChange?: (value: string) => void;
+  classNames?: Partial<MenuSelectClassNames>;
+  defaultOptionLabel?: string;
+  itemLabel?: (item: MenuItem) => React.ReactNode;
+};
+
+export type MenuSelectClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element when there are no refinements possible
+   */
+  noRefinementRoot: string;
+  /**
+   * Class names to apply to the select element
+   */
+  select: string;
+  /**
+   * Class names to apply to the option element
+   */
+  option: string;
+};
+
+export function MenuSelect({
+  items,
+  value,
+  onChange = () => {},
+  classNames = {},
+  defaultOptionLabel = 'See all',
+  itemLabel = (item) => `${item.label} (${item.count})`,
+  ...props
+}: MenuSelectProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        'ais-MenuSelect',
+        classNames.root,
+        items.length === 0 &&
+          cx('ais-MenuSelect--noRefinement', classNames.noRefinementRoot),
+        props.className
+      )}
+    >
+      <select
+        className={cx('ais-MenuSelect-select', classNames.select)}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        <option
+          className={cx('ais-MenuSelect-option', classNames.option)}
+          value=""
+        >
+          {defaultOptionLabel}
+        </option>
+        {items.map((item) => (
+          <option
+            key={item.value}
+            className={cx('ais-MenuSelect-option', classNames.option)}
+            value={item.value}
+          >
+            {itemLabel(item)}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

packages/react-instantsearch/src/ui/NumericMenu.tsx

@@ -0,0 +1,100 @@
+import { cx } from 'instantsearch-ui-components';
+import React from 'react';
+
+import type { NumericMenuRenderStateItem } from 'instantsearch.js/es/connectors/numeric-menu/connectNumericMenu';
+
+export type NumericMenuProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
+  items: NumericMenuRenderStateItem[];
+  attribute: string;
+  onRefine: (value: string) => void;
+  classNames?: Partial<NumericMenuClassNames>;
+};
+
+export type NumericMenuClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element when there are no refinements possible
+   */
+  noRefinementRoot: string;
+  /**
+   * Class names to apply to the list element
+   */
+  list: string;
+  /**
+   * Class names to apply to each item element
+   */
+  item: string;
+  /**
+   * Class names to apply to each selected item element
+   */
+  selectedItem: string;
+  /**
+   * Class names to apply to each label element
+   */
+  label: string;
+  /**
+   * Class names to apply to each radio input element
+   */
+  radio: string;
+  /**
+   * Class names to apply to each label text element
+   */
+  labelText: string;
+};
+
+export function NumericMenu({
+  items,
+  attribute,
+  onRefine,
+  classNames = {},
+  ...props
+}: NumericMenuProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        'ais-NumericMenu',
+        classNames.root,
+        items.length === 0 &&
+          cx('ais-NumericMenu--noRefinement', classNames.noRefinementRoot),
+        props.className
+      )}
+    >
+      <ul className={cx('ais-NumericMenu-list', classNames.list)}>
+        {items.map((item) => (
+          <li
+            key={item.value}
+            className={cx(
+              'ais-NumericMenu-item',
+              classNames.item,
+              item.isRefined &&
+                cx('ais-NumericMenu-item--selected', classNames.selectedItem)
+            )}
+          >
+            <label className={cx('ais-NumericMenu-label', classNames.label)}>
+              <input
+                className={cx('ais-NumericMenu-radio', classNames.radio)}
+                type="radio"
+                name={attribute}
+                value={item.value}
+                checked={item.isRefined}
+                onChange={(event) => onRefine(event.target.value)}
+              />
+              <span
+                className={cx(
+                  'ais-NumericMenu-labelText',
+                  classNames.labelText
+                )}
+              >
+                {item.label}
+              </span>
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}