@powerportalspro/react-fluent 5.1.0 → 6.0.0

package/dist/index.cjs

@@ -9030,7 +9030,13 @@ function MainGridImpl({
         (row) => row.properties?.[columnName],
         {
           id: columnName,
-          header: () => resolvedColumn.displayName,
+          // Headers normally show the server-resolved Dataverse display name, which bypasses the
+          // client `t()` — so the ?ppp-show-keys aid couldn't reach them. Consult key-mode here too:
+          // when it's on, show the column's localization key (the one a consumer would override),
+          // keyed by the column's OWN owning table (`resolvedColumn.tableName` — the related table
+          // for a linked-entity column, not the grid's primary table). For linked columns the name
+          // is a dotted alias path, so take the segment after the last dot as the real column name.
+          header: () => react$1.isKeyModeEnabled() ? `tables.${resolvedColumn.tableName}.columns.${columnName.split(".").pop() ?? columnName}.label` : resolvedColumn.displayName,
           cell: (cellCtx) => {
             const rowRecord = cellCtx.row.original;
             const rowId = rowRecord.id;
@@ -13573,27 +13579,57 @@ function NavMenu({ children, width, className, style }) {
   useNavSelectedStyles();
   const location = reactRouterDom.useLocation();
   const navigate = reactRouterDom.useNavigate();
-  const { allRoutes, defaultOpen } = react.useMemo(
+  const { allRoutes, groups, defaultOpenIndexes } = react.useMemo(
     () => collectNavTree(children),
     [children]
   );
-  const selectedValue = react.useMemo(
+  const selectedRoute = react.useMemo(
     () => bestRouteMatch(allRoutes, location.pathname),
     [allRoutes, location.pathname]
   );
+  const [openIndexes, setOpenIndexes] = react.useState(
+    () => /* @__PURE__ */ new Set([
+      ...defaultOpenIndexes,
+      // Seed the active route's group too, so it's open on first paint
+      // (the effect below only fires after mount).
+      ...selectedRoute && selectedRoute.groupIndex >= 0 ? [selectedRoute.groupIndex] : []
+    ])
+  );
+  const selectedGroupIndex = selectedRoute?.groupIndex ?? -1;
+  react.useEffect(() => {
+    if (selectedGroupIndex < 0) return;
+    setOpenIndexes(
+      (prev) => prev.has(selectedGroupIndex) ? prev : new Set(prev).add(selectedGroupIndex)
+    );
+  }, [selectedGroupIndex]);
+  const openCategories = react.useMemo(
+    () => groups.filter((_, index) => openIndexes.has(index)),
+    [groups, openIndexes]
+  );
   const handleSelect = (_, data) => {
     const value = data.value;
     if (typeof value === "string" && value.startsWith("/")) {
       navigate(value);
     }
   };
+  const handleCategoryToggle = (_, data) => {
+    const index = groups.indexOf(data.value);
+    if (index < 0) return;
+    setOpenIndexes((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
   const navStyle = width ? { ...style, minWidth: width, maxWidth: width } : style;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNav.Nav,
     {
-      selectedValue: selectedValue ?? "",
+      selectedValue: selectedRoute?.to ?? "",
       onNavItemSelect: handleSelect,
-      defaultOpenCategories: defaultOpen,
+      openCategories,
+      onNavCategoryItemToggle: handleCategoryToggle,
       className: reactComponents.mergeClasses("ppp-nav-menu", styles.nav, className),
       style: navStyle,
       children
@@ -13623,42 +13659,46 @@ function NavItem({ to, icon, children }) {
 }
 function collectNavTree(children) {
   const allRoutes = [];
-  const defaultOpen = [];
-  const visit = (nodes) => {
+  const groups = [];
+  const defaultOpenIndexes = [];
+  const visit = (nodes, groupIndex) => {
     react.Children.forEach(nodes, (child) => {
       if (!react.isValidElement(child)) return;
       if (child.type === NavGroup) {
         const props = child.props;
         const value = props.value ?? `group:${props.label}`;
-        if (props.defaultExpanded) defaultOpen.push(value);
-        visit(props.children);
+        const index = groups.length;
+        groups.push(value);
+        if (props.defaultExpanded) defaultOpenIndexes.push(index);
+        visit(props.children, index);
         return;
       }
       if (child.type === NavItem) {
         const props = child.props;
         allRoutes.push({
           to: props.to,
-          match: props.match ?? (props.to === "/" ? "exact" : "prefix")
+          match: props.match ?? (props.to === "/" ? "exact" : "prefix"),
+          groupIndex
         });
         return;
       }
       const wrapperChildren = child.props.children;
-      if (wrapperChildren !== void 0) visit(wrapperChildren);
+      if (wrapperChildren !== void 0) visit(wrapperChildren, groupIndex);
     });
   };
-  visit(children);
-  return { allRoutes, defaultOpen };
+  visit(children, -1);
+  return { allRoutes, groups, defaultOpenIndexes };
 }
 function bestRouteMatch(routes, pathname) {
   const normalize = (p) => p.length > 1 && p.endsWith("/") ? p.slice(0, -1) : p;
   const target = normalize(pathname);
   let best;
   let bestLen = -1;
-  for (const { to, match } of routes) {
-    const route = normalize(to);
-    const matches = route === target || match === "prefix" && (route === "/" || target.startsWith(route + "/"));
+  for (const candidate of routes) {
+    const route = normalize(candidate.to);
+    const matches = route === target || candidate.match === "prefix" && (route === "/" || target.startsWith(route + "/"));
     if (matches && route.length > bestLen) {
-      best = to;
+      best = candidate;
       bestLen = route.length;
     }
   }
@@ -14401,8 +14441,28 @@ var useStyles12 = reactComponents.makeStyles({
   mergedButtons: {
     display: "flex",
     flexWrap: "wrap",
-    gap: reactComponents.tokens.spacingHorizontalS
+    gap: reactComponents.tokens.spacingHorizontalL
+  },
+  // One culture group: language label + inspect button + download button, kept together.
+  mergedCulture: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalXS
   },
+  mergedCultureLabel: { fontSize: reactComponents.tokens.fontSizeBase200 },
+  dialogSurface: { maxWidth: "1100px", width: "90vw" },
+  dialogToolbar: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalM,
+    flexWrap: "wrap",
+    marginBottom: reactComponents.tokens.spacingVerticalS
+  },
+  // Scroll viewport for the merged grid so a tall result set scrolls inside the dialog.
+  dialogGrid: { maxHeight: "60vh", overflowY: "auto", overflowX: "auto" },
+  filterInput: { minWidth: "260px" },
+  pager: { display: "flex", alignItems: "center", gap: reactComponents.tokens.spacingHorizontalS },
+  grow: { flex: 1 },
   sectionBody: {
     display: "flex",
     flexDirection: "column",
@@ -14421,6 +14481,15 @@ function downloadBytes(fileName, data, contentType = "application/json") {
   anchor.click();
   URL.revokeObjectURL(url);
 }
+var kindKeyOf = (kind) => KIND_KEY[Number(kind)] ?? "tablemetadata";
+function cultureLabel(culture) {
+  try {
+    const name = new Intl.DisplayNames(void 0, { type: "language" }).of(culture);
+    return name && name.toLowerCase() !== culture.toLowerCase() ? `${name} (${culture})` : culture;
+  } catch {
+    return culture;
+  }
+}
 function LocalizationAdmin({ className }) {
   const styles = useStyles12();
   const t = react$1.useT();
@@ -14430,6 +14499,7 @@ function LocalizationAdmin({ className }) {
   const [isReloading, setIsReloading] = react.useState(false);
   const [isDownloading, setIsDownloading] = react.useState(false);
   const [message, setMessage] = react.useState();
+  const [mergedDialogCulture, setMergedDialogCulture] = react.useState(null);
   const loadOverview = react.useCallback(async () => {
     try {
       const value = await ppp.getLocalizationOverviewAsync();
@@ -14587,17 +14657,44 @@ function LocalizationAdmin({ className }) {
       /* @__PURE__ */ jsxRuntime.jsx(LocalizationTranslator, {}),
       availableCultures.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Section, { headerText: t("app.localization-admin.download-merged-title"), borderVisible: true, children: /* @__PURE__ */ jsxRuntime.jsx(SectionColumn, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sectionBody, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { children: t("app.localization-admin.download-merged-description") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mergedButtons, children: availableCultures.map((culture) => /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
-          {
-            appearance: "outline",
-            disabled: isDownloading,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownloadRegular, {}),
-            onClick: () => onDownloadMerged(culture),
-            children: culture
-          },
-          culture
-        )) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mergedButtons, children: availableCultures.map((culture) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mergedCulture, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.mergedCultureLabel, children: cultureLabel(culture) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Tooltip,
+            {
+              content: t("app.localization-admin.view-merged-tooltip", [
+                cultureLabel(culture)
+              ]),
+              relationship: "label",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Button,
+                {
+                  appearance: "outline",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.EyeRegular, {}),
+                  onClick: () => setMergedDialogCulture(culture)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Tooltip,
+            {
+              content: t("app.localization-admin.download-merged-tooltip", [
+                cultureLabel(culture)
+              ]),
+              relationship: "label",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Button,
+                {
+                  appearance: "subtle",
+                  disabled: isDownloading,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownloadRegular, {}),
+                  onClick: () => onDownloadMerged(culture)
+                }
+              )
+            }
+          )
+        ] }, culture)) })
       ] }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Section, { headerText: t("app.localization-admin.sources-title"), borderVisible: true, children: /* @__PURE__ */ jsxRuntime.jsx(SectionColumn, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sectionBody, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Text, { children: t("app.localization-admin.sources-description") }),
@@ -14628,7 +14725,22 @@ function LocalizationAdmin({ className }) {
       ] }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses("ppp-localization-admin", styles.root, className), children: content });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses("ppp-localization-admin", styles.root, className), children: [
+    content,
+    mergedDialogCulture !== null && /* @__PURE__ */ jsxRuntime.jsx(
+      MergedSourcesDialog,
+      {
+        culture: mergedDialogCulture,
+        label: cultureLabel(mergedDialogCulture),
+        onClose: () => setMergedDialogCulture(null),
+        onDownload: () => onDownloadMerged(mergedDialogCulture),
+        isDownloading,
+        ppp,
+        t,
+        styles
+      }
+    )
+  ] });
 }
 function ConfigRow({ styles, label, value }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -14678,6 +14790,177 @@ function SourceRow({
     )) }) })
   ] });
 }
+var MERGED_PAGE_SIZE = 100;
+function MergedSourcesDialog({
+  culture,
+  label,
+  onClose,
+  onDownload,
+  isDownloading,
+  ppp,
+  t,
+  styles
+}) {
+  const [entries, setEntries] = react.useState(null);
+  const [loadError, setLoadError] = react.useState();
+  const [filter, setFilter] = react.useState("");
+  const [page, setPage] = react.useState(0);
+  const [sortState, setSortState] = react.useState({
+    sortColumn: "key",
+    sortDirection: "ascending"
+  });
+  react.useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const value = await ppp.getMergedLocalizationEntriesAsync(culture);
+        if (!cancelled) {
+          setEntries(value);
+          setLoadError(void 0);
+        }
+      } catch (reason) {
+        if (!cancelled) {
+          setEntries(null);
+          setLoadError(reason instanceof Error ? reason.message : String(reason));
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [ppp, culture]);
+  const columns = react.useMemo(
+    () => [
+      reactComponents.createTableColumn({
+        columnId: "key",
+        compare: (a, b) => a.key.localeCompare(b.key),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-key"),
+        renderCell: (item) => item.key
+      }),
+      reactComponents.createTableColumn({
+        columnId: "kind",
+        compare: (a, b) => Number(a.sourceKind) - Number(b.sourceKind),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-kind"),
+        renderCell: (item) => t(`app.localization-admin.kind-${kindKeyOf(item.sourceKind)}`)
+      }),
+      reactComponents.createTableColumn({
+        columnId: "source",
+        compare: (a, b) => a.sourceDisplayName.localeCompare(b.sourceDisplayName),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-source"),
+        renderCell: (item) => item.sourceDisplayName
+      }),
+      reactComponents.createTableColumn({
+        columnId: "value",
+        compare: (a, b) => a.value.localeCompare(b.value),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-value"),
+        renderCell: (item) => item.value
+      })
+    ],
+    [t]
+  );
+  const filtered = react.useMemo(() => {
+    if (!entries) return [];
+    const q = filter.trim().toLowerCase();
+    const base = q ? entries.filter(
+      (e) => e.key.toLowerCase().includes(q) || e.value.toLowerCase().includes(q) || e.sourceDisplayName.toLowerCase().includes(q)
+    ) : entries;
+    return [...base];
+  }, [entries, filter]);
+  const sorted = react.useMemo(() => {
+    const column = columns.find((c) => c.columnId === sortState.sortColumn);
+    if (!column?.compare) return filtered;
+    const sign = sortState.sortDirection === "ascending" ? 1 : -1;
+    return [...filtered].sort((a, b) => sign * column.compare(a, b));
+  }, [filtered, columns, sortState]);
+  react.useEffect(() => {
+    setPage(0);
+  }, [filter, sortState]);
+  const pageCount = Math.max(1, Math.ceil(sorted.length / MERGED_PAGE_SIZE));
+  const currentPage = Math.min(page, pageCount - 1);
+  const paged = sorted.slice(currentPage * MERGED_PAGE_SIZE, currentPage * MERGED_PAGE_SIZE + MERGED_PAGE_SIZE);
+  const columnSizingOptions = react.useMemo(
+    () => ({
+      key: { minWidth: 200, defaultWidth: 320 },
+      kind: { minWidth: 110, defaultWidth: 140 },
+      source: { minWidth: 200, defaultWidth: 300 },
+      value: { minWidth: 200, defaultWidth: 360 }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open: true, onOpenChange: (_event, data) => !data.open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: t("app.localization-admin.merged-dialog-title", [label]) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: loadError !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: t("app.localization-admin.merged-load-failed", [loadError]) }) }) : entries === null ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.dialogToolbar, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Input,
+          {
+            className: styles.filterInput,
+            value: filter,
+            onChange: (_event, data) => setFilter(data.value),
+            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SearchRegular, {}),
+            placeholder: t("app.localization-admin.merged-filter-placeholder")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.lastReloaded, children: t("app.localization-admin.merged-count", [sorted.length, entries.length]) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.grow }),
+        pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.pager, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              size: "small",
+              appearance: "subtle",
+              disabled: currentPage === 0,
+              onClick: () => setPage(currentPage - 1),
+              children: t("app.localization-admin.merged-prev")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.lastReloaded, children: t("app.localization-admin.merged-page", [currentPage + 1, pageCount]) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              size: "small",
+              appearance: "subtle",
+              disabled: currentPage >= pageCount - 1,
+              onClick: () => setPage(currentPage + 1),
+              children: t("app.localization-admin.merged-next")
+            }
+          )
+        ] })
+      ] }),
+      sorted.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "info", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: t("app.localization-admin.merged-empty") }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dialogGrid, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactComponents.DataGrid,
+        {
+          items: paged,
+          columns,
+          sortable: true,
+          resizableColumns: true,
+          sortState,
+          onSortChange: (_event, next) => setSortState(next),
+          columnSizingOptions,
+          getRowId: (item) => item.key,
+          size: "small",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DataGridHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DataGridRow, { children: ({ renderHeaderCell }) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DataGridHeaderCell, { children: renderHeaderCell() }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DataGridBody, { children: ({ item, rowId }) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DataGridRow, { children: ({ renderCell }) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DataGridCell, { children: renderCell(item) }) }, rowId) })
+          ]
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Button,
+        {
+          appearance: "primary",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownloadRegular, {}),
+          disabled: isDownloading,
+          onClick: onDownload,
+          children: t("app.localization-admin.merged-download-button")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "secondary", icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DismissRegular, {}), onClick: onClose, children: t("app.buttons.close.label") })
+    ] })
+  ] }) }) });
+}
 var useStyles13 = reactComponents.makeStyles({
   root: {
     display: "flex",