From 1eecc65fa86cb490dc2987dedaedbbc7812fac10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 28 Jan 2021 12:31:54 +0100
Subject: [PATCH] fix(js): update panel markup

---
 packages/autocomplete-js/src/render.ts | 123 ++++++++++++-------------
 1 file changed, 60 insertions(+), 63 deletions(-)

diff --git a/packages/autocomplete-js/src/render.ts b/packages/autocomplete-js/src/render.ts
index d3cbd02ca..de3f8d84a 100644
--- a/packages/autocomplete-js/src/render.ts
+++ b/packages/autocomplete-js/src/render.ts
@@ -94,83 +94,80 @@ export function renderPanel<TItem extends BaseItem>(
     return createElement('section', {
       key: sourceIndex,
       className: classNames.source,
-      children: createElement('ul', {
-        className: classNames.list,
-        ...propGetters.getListProps({
-          state,
-          props: autocomplete.getListProps({}),
-          ...autocompleteScopeApi,
-        }),
-        children: [
-          source.templates.header &&
-            createElement('div', {
-              className: classNames.sourceHeader,
+      children: [
+        source.templates.header &&
+          createElement('div', {
+            className: classNames.sourceHeader,
+            children: [
+              source.templates.header({
+                createElement,
+                Fragment,
+                items,
+                source,
+                state,
+              }),
+            ],
+          }),
+        items.length === 0 && source.templates.empty
+          ? createElement('div', {
+              className: classNames.sourceEmpty,
               children: [
-                source.templates.header({
+                source.templates.empty({
                   createElement,
                   Fragment,
-                  items,
                   source,
                   state,
                 }),
               ],
-            }),
-          items.length === 0 && source.templates.empty
-            ? createElement('div', {
-                className: classNames.sourceEmpty,
-                children: [
-                  source.templates.empty({
-                    createElement,
-                    Fragment,
+            })
+          : createElement('ul', {
+              className: classNames.list,
+              ...propGetters.getListProps({
+                state,
+                props: autocomplete.getListProps({}),
+                ...autocompleteScopeApi,
+              }),
+              children: [
+                ...items.map((item) => {
+                  const itemProps = autocomplete.getItemProps({
+                    item,
                     source,
-                    state,
-                  }),
-                ],
-              })
-            : createElement('ul', {
-                className: classNames.list,
-                children: [
-                  ...items.map((item) => {
-                    const itemProps = autocomplete.getItemProps({
-                      item,
-                      source,
-                    });
+                  });
 
-                    return createElement('li', {
-                      key: itemProps.id,
-                      className: classNames.item,
-                      ...propGetters.getItemProps({
+                  return createElement('li', {
+                    key: itemProps.id,
+                    className: classNames.item,
+                    ...propGetters.getItemProps({
+                      state,
+                      props: itemProps,
+                      ...autocompleteScopeApi,
+                    }),
+                    children: [
+                      source.templates.item({
+                        createElement,
+                        Fragment,
+                        item,
                         state,
-                        props: itemProps,
-                        ...autocompleteScopeApi,
                       }),
-                      children: [
-                        source.templates.item({
-                          createElement,
-                          Fragment,
-                          item,
-                          state,
-                        }),
-                      ],
-                    });
-                  }),
-                ],
-              }),
-          source.templates.footer &&
-            createElement('div', {
-              className: classNames.sourceFooter,
-              children: [
-                source.templates.footer({
-                  createElement,
-                  Fragment,
-                  items,
-                  source,
-                  state,
+                    ],
+                  });
                 }),
               ],
             }),
-        ],
-      }),
+        source.templates.footer &&
+          createElement('div', {
+            className: classNames.sourceFooter,
+            children: [
+              source.templates.footer({
+                createElement,
+                Fragment,
+                items,
+                source,
+                state,
+              }),
+            ],
+          }),
+      ],
     });
   });
   const children = createElement('div', {