@powerportalspro/react-powerbi 0.0.0-stage → 13.0.0

package/dist/index.js

@@ -0,0 +1,710 @@
+import { useRef, useState, useEffect } from 'react';
+import { makeStyles, tokens, MessageBar, MessageBarBody, MessageBarActions, Button, Spinner, mergeClasses } from '@fluentui/react-components';
+import { PowerBIConnectionRequiredError, PowerPortalsProError } from '@powerportalspro/core';
+import { usePowerPortalsPro, useLocale, usePrefixedT } from '@powerportalspro/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/power-bi-report.tsx
+
+// src/core/portal-theme.ts
+var PORTAL_SERIES_COLORS = [
+  "#d13438",
+  // red
+  "#107c10",
+  // green
+  "#ffb900",
+  // yellow
+  "#5c2d91",
+  // purple
+  "#008272",
+  // teal
+  "#d83b01",
+  // orange
+  "#e3008c",
+  // pink / magenta
+  "#4f6bed",
+  // cornflower
+  "#498205",
+  // forest
+  "#00cc6a",
+  // seafoam
+  "#7160e8",
+  // lavender
+  "#8e562e",
+  // brown
+  "#a4262c",
+  // burgundy
+  "#3a96dd",
+  // lightBlue
+  "#0099bc"
+  // cyan
+];
+function solid(color) {
+  return { solid: { color } };
+}
+function channels(color) {
+  return [1, 3, 5].map((start) => parseInt(color.slice(start, start + 2), 16));
+}
+function raisedSurface(colors) {
+  const surface = channels(colors.surface);
+  const foreground = channels(colors.foreground);
+  const brightness = ([red, green, blue]) => red * 0.299 + green * 0.587 + blue * 0.114;
+  if (brightness(surface) >= brightness(foreground)) return colors.surface;
+  const raised = surface.map((channel, index) => Math.round(channel + (foreground[index] - channel) * 0.15));
+  return `#${raised.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+function portalTheme(colors, options = {}) {
+  const text = (color) => ({ color });
+  const backdrop = options.transparent ? 100 : 0;
+  const tooltip = raisedSurface(colors);
+  const axis = {
+    labelColor: solid(colors.foregroundSecondary),
+    titleColor: solid(colors.foregroundSecondary),
+    gridlineColor: solid(colors.strokeSubtle)
+  };
+  return {
+    name: "Portal",
+    dataColors: [colors.brand, ...PORTAL_SERIES_COLORS],
+    firstLevelElements: colors.foreground,
+    secondLevelElements: colors.foregroundSecondary,
+    thirdLevelElements: colors.strokeSubtle,
+    fourthLevelElements: colors.foregroundTertiary,
+    background: colors.surface,
+    secondaryBackground: colors.stroke,
+    tableAccent: colors.brand,
+    hyperlink: colors.link,
+    visitedHyperlink: colors.link,
+    good: colors.good,
+    neutral: colors.neutral,
+    bad: colors.bad,
+    textClasses: {
+      callout: text(colors.foreground),
+      title: text(colors.foreground),
+      header: text(colors.foreground),
+      label: text(colors.foreground),
+      // Legends, data labels and category labels, which the base theme draws in a light gray.
+      lightLabel: text(colors.foregroundSecondary),
+      smallLightLabel: text(colors.foregroundSecondary),
+      largeLightLabel: text(colors.foregroundSecondary)
+    },
+    visualStyles: {
+      "*": {
+        "*": {
+          background: [{ show: true, color: solid(colors.surface), transparency: backdrop }],
+          categoryAxis: [axis],
+          valueAxis: [axis],
+          // Tooltips are on unless the report turned them off, so colors alone switch nothing on.
+          // Each color twice: the classic tooltip reads the plain one, the modern one the themed.
+          visualTooltip: [
+            {
+              background: solid(tooltip),
+              themedBackground: solid(tooltip),
+              titleFontColor: solid(colors.foregroundSecondary),
+              themedTitleFontColor: solid(colors.foregroundSecondary),
+              valueFontColor: solid(colors.foreground),
+              themedValueFontColor: solid(colors.foreground)
+            }
+          ]
+        }
+      },
+      card: {
+        "*": {
+          labels: [{ color: solid(colors.foreground) }],
+          categoryLabels: [{ color: solid(colors.foregroundSecondary) }]
+        }
+      },
+      // Detail labels sit beside the slices, on the page, rather than on them.
+      donutChart: { "*": { labels: [{ color: solid(colors.foregroundSecondary) }] } },
+      pieChart: { "*": { labels: [{ color: solid(colors.foregroundSecondary) }] } },
+      // A funnel names its stages through its category axis's own color, not an axis label color.
+      funnel: {
+        "*": {
+          categoryAxis: [{ color: solid(colors.foregroundSecondary) }],
+          percentBarLabel: [{ color: solid(colors.foregroundSecondary) }]
+        }
+      },
+      // Tables and matrices: their text and gridlines, and nothing behind the cells, which show the
+      // visual's own background as they do by default. The lines under the headers and over the
+      // total stay the accent, from `tableAccent`.
+      tableEx: {
+        "*": {
+          columnHeaders: [{ fontColor: solid(colors.foreground) }],
+          values: [{ fontColorPrimary: solid(colors.foreground), fontColorSecondary: solid(colors.foreground) }],
+          total: [{ fontColor: solid(colors.foreground) }],
+          grid: [{ gridHorizontalColor: solid(colors.strokeSubtle), gridVerticalColor: solid(colors.strokeSubtle) }]
+        }
+      },
+      pivotTable: {
+        "*": {
+          columnHeaders: [{ fontColor: solid(colors.foreground) }],
+          rowHeaders: [
+            { fontColor: solid(colors.foreground), expandCollapseButtonsColor: solid(colors.foregroundSecondary) }
+          ],
+          values: [{ fontColorPrimary: solid(colors.foreground), fontColorSecondary: solid(colors.foreground) }],
+          total: [{ fontColor: solid(colors.foreground) }],
+          subTotals: [{ fontColor: solid(colors.foreground) }],
+          columnTotal: [{ fontColor: solid(colors.foreground) }],
+          rowTotal: [{ fontColor: solid(colors.foreground) }],
+          grid: [{ gridHorizontalColor: solid(colors.strokeSubtle), gridVerticalColor: solid(colors.strokeSubtle) }]
+        }
+      },
+      slicer: {
+        "*": {
+          header: [{ fontColor: solid(colors.foreground) }],
+          items: [{ fontColor: solid(colors.foreground) }],
+          date: [{ fontColor: solid(colors.foreground) }],
+          numericInputStyle: [{ fontColor: solid(colors.foreground) }]
+        }
+      },
+      multiRowCard: {
+        "*": {
+          cardTitle: [{ color: solid(colors.foreground) }],
+          dataLabels: [{ color: solid(colors.foreground) }],
+          categoryLabels: [{ color: solid(colors.foregroundSecondary) }]
+        }
+      },
+      page: {
+        "*": {
+          background: [{ color: solid(colors.surface), transparency: backdrop }],
+          outspace: [{ color: solid(colors.surface), transparency: backdrop }],
+          outspacePane: [
+            {
+              backgroundColor: solid(colors.surface),
+              foregroundColor: solid(colors.foreground),
+              borderColor: solid(colors.stroke)
+            }
+          ],
+          filterCard: [
+            {
+              $id: "Applied",
+              backgroundColor: solid(colors.surfaceSubtle),
+              foregroundColor: solid(colors.foreground)
+            },
+            {
+              $id: "Available",
+              backgroundColor: solid(colors.surface),
+              foregroundColor: solid(colors.foreground)
+            }
+          ]
+        }
+      }
+    }
+  };
+}
+function toHexColor(value) {
+  const text = value.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{3,8})$/.exec(text)?.[1];
+  if (hex) {
+    if (hex.length === 3 || hex.length === 4) return `#${[...hex.slice(0, 3)].map((digit) => digit + digit).join("")}`;
+    if (hex.length === 6 || hex.length === 8) return `#${hex.slice(0, 6)}`;
+    return null;
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/.exec(text);
+  if (rgb) {
+    const channels2 = rgb.slice(1, 4).map((channel) => Math.max(0, Math.min(255, Math.round(Number(channel)))));
+    return `#${channels2.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+  }
+  return null;
+}
+function resolveColor(value, scope) {
+  const direct = toHexColor(value);
+  if (direct || !value.trim()) return direct;
+  const probe = scope.ownerDocument.createElement("span");
+  probe.style.color = value;
+  probe.style.display = "none";
+  scope.appendChild(probe);
+  try {
+    return toHexColor(getComputedStyle(probe).color);
+  } finally {
+    probe.remove();
+  }
+}
+function token(styles, scope, ...names) {
+  for (const name of names) {
+    const color = resolveColor(styles.getPropertyValue(name), scope);
+    if (color) return color;
+  }
+  return null;
+}
+function surfaceBehind(element) {
+  for (let current = element.parentElement; current; current = current.parentElement) {
+    const background = getComputedStyle(current).backgroundColor;
+    const alpha = /^rgba\([^)]*,\s*([\d.]+)\s*\)$/.exec(background)?.[1];
+    if (background && background !== "transparent" && (alpha === void 0 || Number(alpha) > 0)) {
+      return toHexColor(background);
+    }
+  }
+  return null;
+}
+function readPortalColors(element) {
+  const styles = getComputedStyle(element);
+  const foreground = token(styles, element, "--colorNeutralForeground1");
+  const background = token(styles, element, "--colorNeutralBackground1");
+  if (!foreground || !background) return null;
+  const surface = surfaceBehind(element) ?? background;
+  const or = (color, fallback) => color ?? fallback;
+  return {
+    surface,
+    surfaceSubtle: or(token(styles, element, "--colorNeutralBackground3", "--colorNeutralBackground2"), surface),
+    foreground,
+    foregroundSecondary: or(token(styles, element, "--colorNeutralForeground2"), foreground),
+    foregroundTertiary: or(token(styles, element, "--colorNeutralForeground3"), foreground),
+    stroke: or(token(styles, element, "--colorNeutralStroke1"), foreground),
+    strokeSubtle: or(token(styles, element, "--colorNeutralStroke3", "--colorNeutralStroke2"), surface),
+    brand: or(token(styles, element, "--colorBrandBackground"), foreground),
+    link: or(token(styles, element, "--colorBrandForegroundLink", "--colorBrandForeground1"), foreground),
+    good: or(token(styles, element, "--colorStatusSuccessForeground1", "--colorPaletteGreenForeground1"), foreground),
+    neutral: or(token(styles, element, "--colorStatusWarningForeground1", "--colorPaletteMarigoldForeground1"), foreground),
+    bad: or(token(styles, element, "--colorStatusDangerForeground1", "--colorPaletteRedForeground1"), foreground)
+  };
+}
+function watchPortalTheme(element, onChange) {
+  let pending = false;
+  const notify = () => {
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(() => {
+      pending = false;
+      onChange();
+    });
+  };
+  const observer = new MutationObserver(notify);
+  for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    observer.observe(ancestor, { attributes: true });
+  }
+  const scheme = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+  scheme?.addEventListener("change", notify);
+  return () => {
+    observer.disconnect();
+    scheme?.removeEventListener("change", notify);
+  };
+}
+
+// src/core/embed-report.ts
+var TokenTypeAad = 0;
+var TokenTypeEmbed = 1;
+var PermissionsRead = 0;
+var ViewModeView = 0;
+var FilterTypeBasic = 1;
+var BackgroundDefault = 0;
+var BackgroundTransparent = 1;
+var FiltersReplaceAll = 1;
+var POWER_BI_HOST = "https://app.powerbi.com";
+var preparedHosts = /* @__PURE__ */ new WeakMap();
+function originOf(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return null;
+  }
+}
+var RENEW_BEFORE_MS = 5 * 60 * 1e3;
+var RENEW_RETRY_MS = 60 * 1e3;
+var sharedService;
+function powerBIService() {
+  return sharedService ??= import('powerbi-client').then(
+    ({ factories, service }) => new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory)
+  );
+}
+function toBasicFilters(filters) {
+  return (filters ?? []).map((filter) => ({
+    $schema: "http://powerbi.com/product/schema#basic",
+    target: { table: filter.table, column: filter.column },
+    operator: "In",
+    values: [...filter.values],
+    filterType: FilterTypeBasic,
+    requireSingleSelection: false
+  }));
+}
+function toSettings(settings) {
+  return {
+    panes: {
+      filters: { visible: settings.filterPaneVisible ?? false },
+      pageNavigation: { visible: settings.pageNavigationVisible ?? true }
+    },
+    background: settings.transparentBackground ? BackgroundTransparent : BackgroundDefault,
+    ...settings.language || settings.formatLocale ? {
+      localeSettings: {
+        ...settings.language ? { language: settings.language } : {},
+        ...settings.formatLocale ? { formatLocale: settings.formatLocale } : {}
+      }
+    } : {}
+  };
+}
+function buildEmbedConfiguration(token2, settings, theme) {
+  const common = {
+    id: token2.itemId,
+    embedUrl: token2.embedUrl,
+    accessToken: token2.embedToken,
+    tokenType: token2.tokenType === "aad" ? TokenTypeAad : TokenTypeEmbed
+  };
+  if (token2.itemType === "dashboard") return { type: "dashboard", ...common, pageView: "fitToWidth" };
+  if (token2.itemType === "tile") return { type: "tile", ...common, dashboardId: token2.dashboardId ?? "" };
+  return {
+    type: "report",
+    ...common,
+    permissions: PermissionsRead,
+    viewMode: ViewModeView,
+    ...settings.pageName ? { pageName: settings.pageName } : {},
+    filters: toBasicFilters(settings.filters),
+    settings: toSettings(settings),
+    ...theme ? { theme: { themeJson: theme } } : {}
+  };
+}
+function themeFor(settings, element, events = {}) {
+  if (settings.themeJson) {
+    if (typeof settings.themeJson !== "string") return settings.themeJson;
+    try {
+      return JSON.parse(settings.themeJson);
+    } catch (error) {
+      events.error?.(`The report's theme isn't valid JSON: ${messageOf(error)}`);
+      return null;
+    }
+  }
+  if (!wantsPortalTheme(settings)) return null;
+  const colors = readPortalColors(element);
+  return colors ? portalTheme(colors, { transparent: settings.transparentBackground === true }) : null;
+}
+function wantsPortalTheme(settings) {
+  return !settings.themeJson && settings.usePortalTheme !== false;
+}
+async function preparePowerBIFrame(element, signal) {
+  const powerBI = await powerBIService();
+  if (signal?.aborted) return;
+  try {
+    powerBI.bootstrap(element, { type: "report", hostname: POWER_BI_HOST });
+    preparedHosts.set(element, POWER_BI_HOST);
+  } catch {
+  }
+}
+async function clearPowerBIFrame(element) {
+  const powerBI = await powerBIService();
+  preparedHosts.delete(element);
+  powerBI.reset(element);
+}
+function renewDelay(expiresOn, now) {
+  return Math.max(0, Date.parse(expiresOn) - now - RENEW_BEFORE_MS);
+}
+function toDataSelection(detail) {
+  const event = detail ?? {};
+  const values = [];
+  for (const point of event.dataPoints ?? []) {
+    for (const identity of point.identity ?? []) {
+      const table = identity.target?.table;
+      const column = identity.target?.column;
+      if (!table || !column) continue;
+      const equals = identity.equals;
+      values.push({
+        table,
+        column,
+        value: typeof equals === "string" || typeof equals === "number" || typeof equals === "boolean" ? equals : null
+      });
+    }
+  }
+  return { visualTitle: event.visual?.title || null, values };
+}
+function sameFilters(a, b) {
+  return JSON.stringify(a ?? []) === JSON.stringify(b ?? []);
+}
+function sameSettings(a, b) {
+  return JSON.stringify(toSettings(a)) === JSON.stringify(toSettings(b));
+}
+function messageOf(error) {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  const detail = error;
+  return detail?.detailedMessage || detail?.message || "The report reported an error.";
+}
+async function embedPowerBIReport(element, token2, settings, events, renewToken) {
+  const powerBI = await powerBIService();
+  let shown = { ...settings };
+  let wanted = shown;
+  let loaded = false;
+  let expiresOn = token2.expiresOn;
+  let timer;
+  let renewing;
+  let disposed = false;
+  let stopWatchingTheme;
+  let reportedThemeError;
+  let pendingThemeError;
+  const themeEvents = {
+    error: (message) => {
+      if (message === reportedThemeError) return;
+      reportedThemeError = message;
+      if (loaded) events.error?.(message);
+      else pendingThemeError = message;
+    }
+  };
+  const isReport = token2.itemType !== "dashboard" && token2.itemType !== "tile";
+  const isTile = token2.itemType === "tile";
+  const preparedHost = preparedHosts.get(element);
+  preparedHosts.delete(element);
+  if (preparedHost && (originOf(token2.embedUrl) !== preparedHost || !isReport)) powerBI.reset(element);
+  const theme = isReport ? themeFor(settings, element, themeEvents) : null;
+  const embedded = powerBI.embed(element, buildEmbedConfiguration(token2, settings, theme));
+  const report = embedded;
+  let shownTheme = JSON.stringify(theme);
+  async function apply() {
+    const previous = shown;
+    const next = wanted;
+    shown = next;
+    if (!isReport) return;
+    if (next.pageName && next.pageName !== previous.pageName) await report.setPage(next.pageName);
+    if (!sameFilters(previous.filters, next.filters)) {
+      await report.updateFilters(FiltersReplaceAll, toBasicFilters(next.filters));
+    }
+    if (!sameSettings(previous, next)) await report.updateSettings(toSettings(next));
+    const nextTheme = themeFor(next, element, themeEvents);
+    if (nextTheme === null && wantsPortalTheme(next)) return;
+    const nextThemeKey = JSON.stringify(nextTheme);
+    if (nextThemeKey !== shownTheme) {
+      shownTheme = nextThemeKey;
+      await (nextTheme ? report.applyTheme({ themeJson: nextTheme }) : report.resetTheme());
+    }
+  }
+  function applyNow() {
+    if (loaded && !disposed) void apply().catch((error) => events.error?.(messageOf(error)));
+  }
+  function watchTheme(next) {
+    if (isReport && wantsPortalTheme(next)) {
+      stopWatchingTheme ??= watchPortalTheme(element, applyNow);
+    } else {
+      stopWatchingTheme?.();
+      stopWatchingTheme = void 0;
+    }
+  }
+  function schedule(delay) {
+    clearTimeout(timer);
+    timer = setTimeout(() => void renew(), delay);
+  }
+  function renew() {
+    return renewing ??= (async () => {
+      try {
+        const next = await renewToken();
+        if (disposed) return;
+        await embedded.setAccessToken(next.embedToken);
+        expiresOn = next.expiresOn;
+        schedule(renewDelay(expiresOn, Date.now()));
+      } catch (error) {
+        if (disposed) return;
+        events.error?.(messageOf(error));
+        schedule(RENEW_RETRY_MS);
+      } finally {
+        renewing = void 0;
+      }
+    })();
+  }
+  function onVisibilityChange() {
+    if (document.visibilityState === "visible" && renewDelay(expiresOn, Date.now()) === 0) void renew();
+  }
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  schedule(renewDelay(expiresOn, Date.now()));
+  watchTheme(settings);
+  function onLoaded() {
+    if (loaded) return;
+    loaded = true;
+    events.loaded?.();
+    if (pendingThemeError) {
+      events.error?.(pendingThemeError);
+      pendingThemeError = void 0;
+    }
+    applyNow();
+  }
+  embedded.on("loaded", onLoaded);
+  embedded.on("rendered", () => events.rendered?.());
+  embedded.on("error", (event) => events.error?.(messageOf(event?.detail)));
+  if (isReport) {
+    report.on("pageChanged", (event) => {
+      const page = event?.detail?.newPage;
+      if (page) events.pageChanged?.({ name: page.name, displayName: page.displayName });
+    });
+    report.on("dataSelected", (event) => events.dataSelected?.(toDataSelection(event?.detail)));
+  } else {
+    if (isTile) embedded.on("tileLoaded", onLoaded);
+    embedded.on("tileClicked", (event) => {
+      const detail = event?.detail ?? {};
+      events.tileClicked?.({ tileId: detail.tileId ?? token2.itemId, navigationUrl: detail.navigationUrl || null });
+    });
+  }
+  return {
+    async update(next) {
+      wanted = { ...next };
+      if (!disposed) watchTheme(wanted);
+      if (loaded && !disposed) await apply();
+    },
+    async refreshTheme() {
+      if (loaded && !disposed) await apply();
+    },
+    dispose() {
+      disposed = true;
+      clearTimeout(timer);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      stopWatchingTheme?.();
+      powerBI.reset(element);
+    }
+  };
+}
+var STRINGS_PREFIX = "app.components.powerbi-report";
+var useStyles = makeStyles({
+  root: {
+    position: "relative",
+    minWidth: 0
+  },
+  // Power BI sizes its frame to the element it is given, so the element is what takes the size.
+  frame: {
+    width: "100%",
+    height: "100%",
+    "& iframe": { border: "none" }
+  },
+  // Kept in the layout, so Power BI sizes its frame as it loads, but not shown until the report is.
+  frameLoading: {
+    visibility: "hidden"
+  },
+  // The grid's loading overlay: a spinner over a tinted pane, the tint behind so the spinner stays
+  // at full strength.
+  overlay: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1,
+    "::before": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      backgroundColor: tokens.colorNeutralBackground2,
+      opacity: 0.7,
+      zIndex: -1
+    }
+  }
+});
+function PowerBIReport(props) {
+  const {
+    reportKey,
+    pageName,
+    filters,
+    filterPaneVisible,
+    pageNavigationVisible,
+    transparentBackground,
+    usePortalTheme,
+    themeJson,
+    height = "600px",
+    width = "100%",
+    className,
+    style
+  } = props;
+  const { ppp } = usePowerPortalsPro();
+  const { locale } = useLocale();
+  const t = usePrefixedT(STRINGS_PREFIX);
+  const styles = useStyles();
+  const frameRef = useRef(null);
+  const embeddedRef = useRef(null);
+  const [failure, setFailure] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  const settings = {
+    pageName: pageName ?? null,
+    filters: filters ?? null,
+    filterPaneVisible,
+    pageNavigationVisible,
+    transparentBackground,
+    language: locale,
+    formatLocale: locale,
+    usePortalTheme,
+    themeJson
+  };
+  const settingsRef = useRef(settings);
+  settingsRef.current = settings;
+  useEffect(() => {
+    const element = frameRef.current;
+    if (!element) return;
+    const controller = new AbortController();
+    let embedded = null;
+    setFailure(null);
+    setLoading(true);
+    const issue = () => ppp.getPowerBIEmbedTokenAsync({ reportKey }, controller.signal);
+    void preparePowerBIFrame(element, controller.signal).catch(() => void 0);
+    issue().then(async (token2) => {
+      if (controller.signal.aborted) return;
+      const report = await embedPowerBIReport(
+        element,
+        token2,
+        settingsRef.current,
+        {
+          loaded: () => {
+            setLoading(false);
+            propsRef.current.onLoaded?.();
+          },
+          rendered: () => propsRef.current.onRendered?.(),
+          // One before the report loads is Power BI's to show, in its frame, so the frame comes out.
+          error: (message) => {
+            setLoading(false);
+            propsRef.current.onError?.(message);
+          },
+          pageChanged: (page) => propsRef.current.onPageChanged?.(page),
+          dataSelected: (selection) => propsRef.current.onDataSelected?.(selection),
+          tileClicked: (click) => propsRef.current.onTileClicked?.(click)
+        },
+        issue
+      );
+      if (controller.signal.aborted) {
+        report.dispose();
+        return;
+      }
+      embedded = report;
+      embeddedRef.current = report;
+      await report.update(settingsRef.current);
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      setFailure(
+        error instanceof PowerBIConnectionRequiredError ? "connect" : error instanceof PowerPortalsProError && error.status === 403 ? "unavailable" : "failed"
+      );
+      setLoading(false);
+      propsRef.current.onError?.(error instanceof Error ? error.message : String(error));
+      void clearPowerBIFrame(element).catch(() => void 0);
+    });
+    return () => {
+      controller.abort();
+      if (embedded) embedded.dispose();
+      else void clearPowerBIFrame(element).catch(() => void 0);
+      embeddedRef.current = null;
+    };
+  }, [ppp, reportKey]);
+  const settingsKey = JSON.stringify(settings);
+  useEffect(() => {
+    void embeddedRef.current?.update(settingsRef.current).catch(
+      (error) => propsRef.current.onError?.(error instanceof Error ? error.message : String(error))
+    );
+  }, [settingsKey]);
+  return /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-powerbi-report", styles.root, className), style: { height, width, ...style }, children: [
+    failure === "connect" ? /* @__PURE__ */ jsxs(MessageBar, { intent: "info", children: [
+      /* @__PURE__ */ jsx(MessageBarBody, { children: t("connect-description") }),
+      /* @__PURE__ */ jsx(MessageBarActions, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          appearance: "primary",
+          onClick: () => window.location.assign(
+            ppp.powerBIConnectUrl(window.location.pathname + window.location.search + window.location.hash)
+          ),
+          children: t("connect")
+        }
+      ) })
+    ] }) : failure ? /* @__PURE__ */ jsx(MessageBar, { intent: failure === "unavailable" ? "warning" : "error", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t(failure) }) }) : null,
+    loading && failure === null ? /* @__PURE__ */ jsx("div", { className: styles.overlay, children: /* @__PURE__ */ jsx(Spinner, { size: "large", label: t("loading") }) }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: frameRef,
+        className: mergeClasses(styles.frame, loading && styles.frameLoading),
+        hidden: failure !== null
+      }
+    )
+  ] });
+}
+
+export { PowerBIReport };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map