From a56c9d4da87ca2b8b32c373da99f6f9fee0170fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 9 Feb 2021 10:37:08 +0100
Subject: [PATCH] feat(theme): add `aa-ItemWrapper` CSS class

This CSS class allows to keep the same design with an item wrapper for users who don't have access to `Fragment` (e.g., when using `dangerouslySetInnerHTML`).

Example:

```js
autocomplete({
  // ...
  getSources() {
    return [
      {
        // ...
        templates: {
          item({ item, createElement }) {
            return createElement('div', {
              className: 'aa-ItemWrapper',
              dangerouslySetInnerHTML: {
                __html: `
                  <div class="aa-ItemIcon">
                    <img
                      src="${item.image}"
                      alt="${item.name}"
                    >
                  </div>
                  <div class="aa-ItemContent">
                    <div class="aa-ItemContentTitle">
                      ${item.name}
                    </div>
                  </div>
                `,
              },
            });
          },
        },
      },
    ];
  },
});
```
---
 packages/autocomplete-theme-classic/src/theme.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
index 20d6aa338..cf1928e5b 100644
--- a/packages/autocomplete-theme-classic/src/theme.scss
+++ b/packages/autocomplete-theme-classic/src/theme.scss
@@ -300,13 +300,16 @@ body {
     }
   }
   // wrap hit with url but we don't need to see it
+  .aa-ItemWrapper,
   .aa-ItemLink {
     align-items: center;
-    color: inherit;
     display: flex;
-    text-decoration: none;
     width: 100%;
   }
+  .aa-ItemLink {
+    color: inherit;
+    text-decoration: none;
+  }
   // the result type icon inlined svg or img
   .aa-ItemIcon {
     align-items: center;