feat(hooks): implement Menu component (#3405)

* feat(hooks): implement Menu component

FX-1156

* address feedback

* rename test

* test

* userEvent

Author: Haroenv

examples/hooks/App.tsx

@@ -11,6 +11,7 @@ import {
   Hits,
   HitsPerPage,
   InfiniteHits,
+  Menu,
   Pagination,
   RefinementList,
   PoweredBy,
@@ -22,7 +23,6 @@ import {
 import {
   Breadcrumb,
   HierarchicalMenu,
-  Menu,
   NumericMenu,
   Panel,
   QueryRuleContext,

examples/hooks/components/Menu.tsx

@@ -1,6 +1,5 @@
 export * from './Breadcrumb';
 export * from './HierarchicalMenu';
-export * from './Menu';
 export * from './NumericMenu';
 export * from './Panel';
 export * from './QueryRuleContext';

examples/hooks/components/index.ts

@@ -0,0 +1,119 @@
+import React from 'react';
+
+import { cx } from './lib/cx';
+import { ShowMoreButton } from './ShowMoreButton';
+
+import type { CreateURL } from 'instantsearch.js';
+import type { MenuItem } from 'instantsearch.js/es/connectors/menu/connectMenu';
+
+export type MenuProps = React.HTMLAttributes<HTMLDivElement> & {
+  items: MenuItem[];
+  classNames?: Partial<MenuCSSClasses>;
+  showMore?: boolean;
+  canToggleShowMore: boolean;
+  onToggleShowMore: () => void;
+  isShowingMore: boolean;
+  createURL: CreateURL<MenuItem['value']>;
+  onRefine: (item: MenuItem) => void;
+};
+
+export type MenuCSSClasses = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: 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
+   */
+  itemSelected: string;
+  /**
+   * Class names to apply to each link element
+   */
+  link: string;
+  /**
+   * Class names to apply to each label element
+   */
+  label: string;
+  /**
+   * Class names to apply to each facet count element
+   */
+  count: string;
+  /**
+   * Class names to apply to the "Show more" button
+   */
+  showMore: string;
+  /**
+   * Class names to apply to the "Show more" button if it's disabled
+   */
+  showMoreDisabled: string;
+};
+
+export function Menu({
+  items,
+  classNames = {},
+  showMore,
+  canToggleShowMore,
+  onToggleShowMore,
+  isShowingMore,
+  createURL,
+  onRefine,
+  ...props
+}: MenuProps) {
+  return (
+    <div
+      {...props}
+      className={cx('ais-Menu', classNames.root, props.className)}
+    >
+      <ul className={cx('ais-Menu-list', classNames.list)}>
+        {items.map((item) => (
+          <li
+            key={item.label}
+            className={cx(
+              'ais-Menu-item',
+              classNames.item,
+              item.isRefined &&
+                cx('ais-Menu-item--selected', classNames.itemSelected)
+            )}
+          >
+            <a
+              className={cx('ais-Menu-link', classNames.link)}
+              href={createURL(item.value)}
+              onClick={(event) => {
+                event.preventDefault();
+                onRefine(item);
+              }}
+            >
+              <span className={cx('ais-Menu-label', classNames.label)}>
+                {item.label}
+              </span>
+              <span className={cx('ais-Menu-count', classNames.count)}>
+                {item.count}
+              </span>
+            </a>
+          </li>
+        ))}
+      </ul>
+      {showMore && (
+        <ShowMoreButton
+          className={cx(
+            'ais-Menu-showMore',
+            classNames.showMore,
+            !canToggleShowMore &&
+              cx('ais-Menu-showMore--disabled', classNames.showMoreDisabled)
+          )}
+          disabled={!canToggleShowMore}
+          onClick={onToggleShowMore}
+          isShowingMore={isShowingMore}
+        />
+      )}
+    </div>
+  );
+}

packages/react-instantsearch-hooks-dom/src/ui/Menu.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Highlight } from './Highlight';
 import { cx } from './lib/cx';
+import { ShowMoreButton } from './ShowMoreButton';
 
 import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList';
 
@@ -12,7 +13,10 @@ export type RefinementListProps = React.HTMLAttributes<HTMLDivElement> & {
   query: string;
   searchBox?: React.ReactNode;
   noResults?: React.ReactNode;
-  showMoreButton?: React.ReactNode;
+  showMore?: boolean;
+  canToggleShowMore: boolean;
+  onToggleShowMore: () => void;
+  isShowingMore: boolean;
   classNames?: Partial<RefinementListClassNames>;
 };
 
@@ -57,6 +61,14 @@ export type RefinementListClassNames = {
    * Class names to apply to the facet count of each item
    */
   count: string;
+  /**
+   * Class names to apply to the "Show more" button
+   */
+  showMore: string;
+  /**
+   * Class names to apply to the "Show more" button if it's disabled
+   */
+  showMoreDisabled: string;
 };
 
 export function RefinementList({
@@ -65,7 +77,10 @@ export function RefinementList({
   query,
   searchBox,
   noResults,
-  showMoreButton,
+  showMore,
+  canToggleShowMore,
+  onToggleShowMore,
+  isShowingMore,
   className,
   classNames = {},
   ...props
@@ -144,7 +159,22 @@ export function RefinementList({
           ))}
         </ul>
       )}
-      {showMoreButton}
+      {showMore && (
+        <ShowMoreButton
+          className={cx(
+            'ais-RefinementList-showMore',
+            classNames.showMore,
+            !canToggleShowMore &&
+              cx(
+                'ais-RefinementList-showMore--disabled',
+                classNames.showMoreDisabled
+              )
+          )}
+          disabled={!canToggleShowMore}
+          onClick={onToggleShowMore}
+          isShowingMore={isShowingMore}
+        />
+      )}
     </div>
   );
 }

packages/react-instantsearch-hooks-dom/src/ui/RefinementList.tsx

@@ -1,4 +1,5 @@
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { InfiniteHits } from '../InfiniteHits';
@@ -240,7 +241,7 @@ describe('InfiniteHits', () => {
     );
 
     act(() => {
-      fireEvent.click(
+      userEvent.click(
         container.querySelector('.ais-InfiniteHits-loadPrevious')!
       );
     });
@@ -257,7 +258,7 @@ describe('InfiniteHits', () => {
     );
 
     act(() => {
-      fireEvent.click(container.querySelector('.ais-InfiniteHits-loadMore')!);
+      userEvent.click(container.querySelector('.ais-InfiniteHits-loadMore')!);
     });
 
     expect(onShowMore).toHaveBeenCalledTimes(1);