feat(recommend): add Trending Facets widget (#6957)

* feat(recommend): add Trending Facets widget

Add the `trendingFacets` Recommend model widget across instantsearch.js
and React flavors. Unlike other Recommend widgets that return product
hits, Trending Facets returns facet values (e.g., trending brands or
categories) as a pure-display, read-only list.

New packages/exports:
- `connectTrendingFacets` connector (instantsearch.js)
- `trendingFacets` widget (instantsearch.js)
- `createTrendingFacetsComponent` UI component (instantsearch-ui-components)
- `useTrendingFacets` React hook (react-instantsearch-core)
- `<TrendingFacets>` React component (react-instantsearch)
- `TrendingFacetItem` type with `{ facetName, facetValue, _score }`

Key design decisions:
- Standalone UI component (not based on shared Recommend base)
- Strict `TrendingFacetItem` type, not wrapped in `Hit<>`
- No `sendEvent`/analytics in v1
- Supports `queryParameters`, `fallbackParameters`, `escapeHTML`,
  `transformItems`, and full template customization (item/header/empty)

* fix: address Copilot review feedback

- Add exports to UMD entrypoints (connectors/index.umd.ts, widgets/index.umd.ts)
- Replace custom escapeFacetValue() with shared escape() from escape-html.ts
- Add runtime validation for required facetName option

* fix: add TrendingFacets to UMD exports and update test fixtures

- Add TrendingFacets to react-instantsearch UMD widget index
- Update all-widgets.test.tsx inline snapshot with TrendingFacets entry
- Add trendingFacets case to widgets index.test.ts (required facetName)

* fix: handle v4 TrendingFacetsQuery type gap for queryParameters/fallbackParameters

The v4 algoliasearch TrendingFacetsQuery type doesn't include
queryParameters or fallbackParameters (v5 does). Use `as any` at the
addTrendingFacets call boundary with a comment documenting the gap.

* update bundlesize

* test: add TrendingFacets to common test suite

- Add createTrendingFacetsSearchClient mock with facet-shaped fixture data
- Add common widget tests (options, links) for TrendingFacets
- Add common connector tests (options, state) for TrendingFacets
- Register in IS.js, React, and Vue (skipped) common test entry points

* fix: add TrendingFacets connector stub to Vue common tests

Author: raed667

bundlesize.config.json

@@ -10,11 +10,11 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "121.25 kB"
+      "maxSize": "121.8 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "253 kB"
+      "maxSize": "253.4 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",

packages/instantsearch-ui-components/src/components/TrendingFacets.tsx

@@ -0,0 +1,135 @@
+/** @jsx createElement */
+
+import { cx } from '../lib';
+
+import type { ComponentProps, Renderer } from '../types';
+
+export type TrendingFacetItem = {
+  facetName: string;
+  facetValue: string;
+  _score: number;
+};
+
+export type TrendingFacetsClassNames = {
+  root: string;
+  emptyRoot: string;
+  title: string;
+  container: string;
+  list: string;
+  item: string;
+};
+
+export type TrendingFacetsTranslations = {
+  title: string;
+};
+
+export type TrendingFacetsProps = ComponentProps<'div'> & {
+  items: TrendingFacetItem[];
+  classNames?: Partial<TrendingFacetsClassNames>;
+  itemComponent?: (props: { item: TrendingFacetItem }) => JSX.Element;
+  headerComponent?: (props: {
+    classNames: Partial<TrendingFacetsClassNames>;
+    items: TrendingFacetItem[];
+    translations: Required<TrendingFacetsTranslations>;
+  }) => JSX.Element;
+  emptyComponent?: () => JSX.Element;
+  status: 'idle' | 'loading' | 'stalled' | 'error';
+  translations?: Partial<TrendingFacetsTranslations>;
+};
+
+export function createTrendingFacetsComponent({
+  createElement,
+  Fragment,
+}: Renderer) {
+  function DefaultHeader({
+    classNames = {},
+    items,
+    translations,
+  }: {
+    classNames: Partial<TrendingFacetsClassNames>;
+    items: TrendingFacetItem[];
+    translations: Required<TrendingFacetsTranslations>;
+  }) {
+    if (!items || items.length < 1) {
+      return null;
+    }
+
+    if (!translations.title) {
+      return null;
+    }
+
+    return <h3 className={classNames.title}>{translations.title}</h3>;
+  }
+
+  function DefaultItem({ item }: { item: TrendingFacetItem }) {
+    return <Fragment>{item.facetValue}</Fragment>;
+  }
+
+  function DefaultEmpty() {
+    return <Fragment>No results</Fragment>;
+  }
+
+  return function TrendingFacets(userProps: TrendingFacetsProps) {
+    const {
+      classNames = {},
+      emptyComponent: EmptyComponent = DefaultEmpty,
+      headerComponent: HeaderComponent = DefaultHeader,
+      itemComponent: ItemComponent = DefaultItem,
+      items,
+      status,
+      translations: userTranslations,
+      ...props
+    } = userProps;
+
+    const translations: Required<TrendingFacetsTranslations> = {
+      title: 'Trending',
+      ...userTranslations,
+    };
+
+    const cssClasses: TrendingFacetsClassNames = {
+      root: cx('ais-TrendingFacets', classNames.root),
+      emptyRoot: cx(
+        'ais-TrendingFacets',
+        classNames.root,
+        'ais-TrendingFacets--empty',
+        classNames.emptyRoot,
+        props.className
+      ),
+      title: cx('ais-TrendingFacets-title', classNames.title),
+      container: cx('ais-TrendingFacets-container', classNames.container),
+      list: cx('ais-TrendingFacets-list', classNames.list),
+      item: cx('ais-TrendingFacets-item', classNames.item),
+    };
+
+    if (items.length === 0 && status === 'idle') {
+      return (
+        <section {...props} className={cssClasses.emptyRoot}>
+          <EmptyComponent />
+        </section>
+      );
+    }
+
+    return (
+      <section {...props} className={cssClasses.root}>
+        <HeaderComponent
+          classNames={cssClasses}
+          items={items}
+          translations={translations}
+        />
+
+        <div className={cssClasses.container}>
+          <ol className={cssClasses.list}>
+            {items.map((item, index) => (
+              <li
+                key={`${item.facetName}:${item.facetValue}:${index}`}
+                className={cssClasses.item}
+              >
+                <ItemComponent item={item} />
+              </li>
+            ))}
+          </ol>
+        </div>
+      </section>
+    );
+  };
+}