feat(js): pass elements record to render (#490)

This adds an API to easily retrieve generated UI elements to manipulate the panel UI.

```
import { render } from 'preact';

autocomplete({
  // ...
  plugins: [recentSearchesPlugin, querySuggestionsPlugin],
  getSources({ query }) {
    return [
      {
        sourceId: 'products',
        // ...
      },
    ];
  },
  render({ elements }, root) {
    const { recentSearchesPlugin, querySuggestionsPlugin, products } = elements;

    render(
      <div className="aa-PanelLayout">
        <div>
          {recentSearchesPlugin}
          {querySuggestionsPlugin}
        </div>
        <div>{products}</div>
      </div>,
      root
    );
  },
});
```

Author: francoischalifour

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

@@ -406,6 +406,7 @@ describe('autocomplete-js', () => {
         state: expect.anything(),
         children: expect.anything(),
         sections: expect.any(Array),
+        elements: expect.any(Object),
         createElement: expect.anything(),
         Fragment: expect.anything(),
       },

packages/autocomplete-js/src/render.tsx

@@ -168,6 +168,13 @@ export function renderPanel<TItem extends BaseItem>(
   const children = (
     <div className="aa-PanelLayout aa-Panel--Scrollable">{sections}</div>
   );
+  const elements = sections.reduce((acc, current) => {
+    acc[current.props['data-autocomplete-source-id']] = current;
+    return acc;
+  }, {});
 
-  render({ children, state, sections, createElement, Fragment }, dom.panel);
+  render(
+    { children, state, sections, elements, createElement, Fragment },
+    dom.panel
+  );
 }

packages/autocomplete-js/src/types/AutocompleteRender.ts

@@ -8,6 +8,7 @@ export type AutocompleteRender<TItem extends BaseItem> = (
     children: VNode;
     state: AutocompleteState<TItem>;
     sections: VNode[];
+    elements: Record<string, VNode>;
     createElement: Pragma;
     Fragment: PragmaFrag;
   },