add renderItemWrapper fn to AccordionList (#19279)

frontend/src/metabase/components/AccordionList.info.js → frontend/src/metabase/components/AccordionList/AccordionList.info.js

 import React from "react";
+import styled from "styled-components";
+
 import AccordionList from "metabase/components/AccordionList";
+import TippyPopover from "metabase/components/Popover/TippyPopover";
 
 export const component = AccordionList;
 export const category = "pickers";
@@ -8,6 +11,9 @@ export const description = `
 An expandable and searchable list of sections and items.
 `;
 
+const PopoverContent = styled.div`
+  padding: 1em;
+`;
 const sections = [
   {
     name: "Widgets",
@@ -51,4 +57,20 @@ export const examples = {
       hideSingleSectionTitle
     />
   ),
+  "List Item Popover": (
+    <AccordionList
+      className="text-brand full"
+      sections={sections}
+      itemIsSelected={item => item.name === "Foo"}
+      renderItemWrapper={(itemContent, item) => (
+        <TippyPopover
+          placement="left-start"
+          interactive
+          content={<PopoverContent>{item.name}</PopoverContent>}
+        >
+          {itemContent}
+        </TippyPopover>
+      )}
+    />
+  ),
 };

frontend/src/metabase/components/AccordionList.jsx → frontend/src/metabase/components/AccordionList/AccordionList.jsx

@@ -73,6 +73,7 @@ export default class AccordionList extends Component {
     renderItemDescription: PropTypes.func,
     renderItemIcon: PropTypes.func,
     renderItemExtra: PropTypes.func,
+    renderItemWrapper: PropTypes.func,
     getItemClassName: PropTypes.func,
 
     alwaysTogglable: PropTypes.bool,
@@ -474,6 +475,7 @@ const AccordionListCell = ({
   renderItemDescription,
   renderItemIcon,
   renderItemExtra,
+  renderItemWrapper,
   searchText,
   onChangeSearchText,
   searchPlaceholder,
@@ -601,6 +603,10 @@ const AccordionListCell = ({
         )}
       </div>
     );
+
+    if (renderItemWrapper) {
+      content = renderItemWrapper(content, item);
+    }
   }
 
   return (

frontend/test/metabase/components/AccordionList.unit.spec.js → frontend/src/metabase/components/AccordionList/AccordionList.unit.spec.js

 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import AccordionList from "metabase/components/AccordionList";
+import TippyPopover from "metabase/components/Popover/TippyPopover";
 
 const SECTIONS = [
   {
@@ -80,6 +82,28 @@ describe("AccordionList", () => {
     fireEvent.change(SEARCH_FIELD, { target: { value: "Something Else" } });
     assertAbsence(["Foo", "Bar", "Baz"]);
   });
+
+  describe("with the `renderItemWrapper` prop", () => {
+    it("should be able to wrap the list items in components like popovers", async () => {
+      const renderItemWrapper = (itemContent, item) => {
+        return (
+          <TippyPopover content={<div>popover</div>}>
+            {itemContent}
+          </TippyPopover>
+        );
+      };
+
+      render(
+        <AccordionList
+          sections={SECTIONS}
+          renderItemWrapper={renderItemWrapper}
+        />,
+      );
+
+      userEvent.hover(screen.getByText("Foo"));
+      expect(await screen.findByText("popover")).toBeVisible();
+    });
+  });
 });
 
 function assertAbsence(array) {

frontend/src/metabase/components/AccordionList/index.js

+export { default } from "./AccordionList";