fix(js): update panel markup

algolia · Jan 28, 2021 · 1eecc65 · 1eecc65
1 parent eb98af6
commit 1eecc65
Showing 1 changed file with 60 additions and 63 deletions.
diff --git 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', {