feat(theme): patch theme

Co-authored-by: Kevin Granger <[email protected]>

bundlesize.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "14.50 kB"
+      "maxSize": "14.75 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
@@ -23,6 +23,10 @@
     {
       "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
       "maxSize": "4 kB"
+    },
+    {
+      "path": "packages/autocomplete-theme-classic/dist/theme.css",
+      "maxSize": "4 kB"
     }
   ]
 }

packages/autocomplete-js/src/__tests__/render.test.ts

@@ -1,6 +1,7 @@
 import { fireEvent, waitFor } from '@testing-library/dom';
 import {
   createElement as preactCreateElement,
+  Fragment,
   Fragment as PreactFragment,
   render,
 } from 'preact';
@@ -358,16 +359,24 @@ describe('render', () => {
           },
         ];
       },
-      render({ createElement, children }, root) {
+      render({ createElement, children, sections }, root) {
         expect(children).toEqual(
           expect.objectContaining({
-            type: 'div',
+            type: Fragment,
             props: {
-              className: expect.any(String),
-              children: expect.arrayContaining([
-                expect.any(Object),
-                expect.any(Object),
-              ]),
+              children: [
+                expect.objectContaining({
+                  props: {
+                    className: 'aa-PanelLayout aa-Panel--Scrollable',
+                    children: sections,
+                  },
+                }),
+                expect.objectContaining({
+                  props: {
+                    className: 'aa-GradientBottom',
+                  },
+                }),
+              ],
             },
           })
         );

packages/autocomplete-js/src/render.tsx

@@ -166,7 +166,10 @@ export function renderPanel<TItem extends BaseItem>(
   ));
 
   const children = (
-    <div className="aa-PanelLayout aa-Panel--Scrollable">{sections}</div>
+    <Fragment>
+      <div className="aa-PanelLayout aa-Panel--Scrollable">{sections}</div>
+      <div className="aa-GradientBottom" />
+    </Fragment>
   );
   const elements = sections.reduce((acc, current) => {
     acc[current.props['data-autocomplete-source-id']] = current;