feat(sdk): theme option to customize popover's z-index (#45613)

* customize popover z-index

* make popover z-index customizable

* make the popover z-index customizable

* add tests for popover z-index

* also specify z-index for mantine popover

enterprise/frontend/src/embedding-sdk/README.md

@@ -610,6 +610,12 @@ const theme = {
         },
       },
     },
+
+    // Popover are used in components such as click actions in interactive questions.
+    popover: {
+      // z-index of the popover. Useful for embedding components in a modal. defaults to 4.
+      zIndex: 4,
+    },
   },
 };
 ```

enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts

@@ -124,14 +124,19 @@ export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge<
   },
 });
 
-export const EMBEDDING_SDK_COMPONENTS_OVERRIDES: MantineThemeOverride["components"] =
-  {
+export function getEmbeddingComponentOverrides(
+  theme?: DeepPartial<MetabaseComponentTheme>,
+): MantineThemeOverride["components"] {
+  return {
     HoverCard: {
       defaultProps: {
         withinPortal: true,
         portalProps: {
           target: `#${EMBEDDING_SDK_ROOT_ELEMENT_ID}`,
         },
+
+        ...(theme?.popover?.zIndex && { zIndex: theme.popover.zIndex }),
       },
     },
   };
+}

enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.ts

@@ -13,7 +13,7 @@ import { colorTuple } from "./color-tuple";
 import {
   DEFAULT_EMBEDDED_COMPONENT_THEME,
   DEFAULT_SDK_FONT_SIZE,
-  EMBEDDING_SDK_COMPONENTS_OVERRIDES,
+  getEmbeddingComponentOverrides,
 } from "./default-component-theme";
 import type { MappableSdkColor } from "./embedding-color-palette";
 import { SDK_TO_MAIN_APP_COLORS_MAPPING } from "./embedding-color-palette";
@@ -45,7 +45,7 @@ export function getEmbeddingThemeOverride(
       fontSize: theme.fontSize ?? SDK_BASE_FONT_SIZE,
     },
 
-    components: EMBEDDING_SDK_COMPONENTS_OVERRIDES,
+    components: getEmbeddingComponentOverrides(theme.components),
   };
 
   if (theme.colors) {

enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts

 import {
   DEFAULT_EMBEDDED_COMPONENT_THEME,
-  EMBEDDING_SDK_COMPONENTS_OVERRIDES,
+  getEmbeddingComponentOverrides,
 } from "embedding-sdk/lib/theme/default-component-theme";
 
 import { getEmbeddingThemeOverride } from "./get-embedding-theme";
@@ -30,7 +30,7 @@ describe("Transform Embedding Theme Override", () => {
         fontSize: "2rem",
         ...DEFAULT_EMBEDDED_COMPONENT_THEME,
       },
-      components: EMBEDDING_SDK_COMPONENTS_OVERRIDES,
+      components: getEmbeddingComponentOverrides(theme.components),
     });
   });
 });

enterprise/frontend/src/embedding-sdk/types/theme/index.ts

@@ -168,6 +168,12 @@ export type MetabaseComponentTheme = {
     };
   };
 
+  /** Popover */
+  popover?: {
+    /** z-index of the popover. Useful for embedding components in a modal. Defaults to 4. */
+    zIndex?: number;
+  };
+
   collectionBrowser: {
     breadcrumbs: {
       expandButton: {

frontend/src/metabase/components/Popover/TippyPopover.tsx

@@ -7,13 +7,14 @@ import type * as tippy from "tippy.js";
 
 import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
 import EventSandbox from "metabase/components/EventSandbox";
+import { DEFAULT_Z_INDEX } from "metabase/components/Popover/constants";
 import { isCypressActive } from "metabase/env";
 import useSequencedContentCloseHandler from "metabase/hooks/use-sequenced-content-close-handler";
 import { isReducedMotionPreferred } from "metabase/lib/dom";
+import { useMantineTheme } from "metabase/ui";
 
 import type { SizeToFitOptions } from "./SizeToFitModifier";
 import { sizeToFitModifierFn } from "./SizeToFitModifier";
-import { DEFAULT_Z_INDEX } from "./constants";
 
 const TippyComponent = TippyReact.default;
 type TippyProps = TippyReact.TippyProps;
@@ -91,6 +92,9 @@ function TippyPopover({
   const shouldShowContent = mounted && content != null;
   const isControlled = props.visible != null;
 
+  const theme = useMantineTheme();
+  const { zIndex = DEFAULT_Z_INDEX } = theme.other.popover ?? {};
+
   const { setupCloseHandler, removeCloseHandler } =
     useSequencedContentCloseHandler();
 
@@ -140,7 +144,7 @@ function TippyPopover({
     <TippyComponent
       className={cx("popover", className)}
       theme="popover"
-      zIndex={DEFAULT_Z_INDEX}
+      zIndex={zIndex}
       arrow={false}
       offset={OFFSET}
       appendTo={appendTo}

frontend/src/metabase/components/Popover/TippyPopover.unit.spec.js

@@ -3,6 +3,8 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useEffect } from "react";
 
+import { ThemeProvider } from "metabase/ui";
+
 import TippyPopover from "./TippyPopover";
 
 const defaultTarget = (
@@ -50,6 +52,22 @@ describe("Popover", () => {
     );
   });
 
+  it("should respect the z-index theme setting", async () => {
+    render(
+      <ThemeProvider theme={{ other: { popover: { zIndex: 505 } } }}>
+        <TippyPopover content={<Content />} visible>
+          {defaultTarget}
+        </TippyPopover>
+      </ThemeProvider>,
+    );
+
+    // Tippy's root element is a direct parent, but it has no identifiable role.
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByRole("tooltip").parentElement).toHaveStyle({
+      zIndex: 505,
+    });
+  });
+
   describe("lazy", () => {
     it("should by default lazily render content", async () => {
       const contentFn = jest.fn();