@powerportalspro/react-fluent 5.1.0 → 6.0.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { makeStyles, mergeClasses, Input, tokens, Toolbar, ToolbarButton, ToolbarDivider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItemRadio, Button, createLightTheme, createDarkTheme, makeStaticStyles, MessageBar, MessageBarBody, Dropdown, Option, Spinner, Field, Textarea, Switch, Checkbox, Label, TabList, Tab, Tooltip, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, RadioGroup, Radio, useId as useId$1, Text, Overflow, OverflowItem, SearchBox, CounterBadge, Popover, PopoverTrigger, PopoverSurface, MenuItem, Combobox, TagPicker, TagPickerControl, TagPickerGroup, Tag, TagPickerInput, TagPickerList, TagPickerOption, webDarkTheme, webLightTheme, teamsDarkTheme, teamsLightTheme, FluentProvider, Avatar, Divider, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, useOverflowMenu, useIsOverflowItemVisible, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, MessageBarTitle, DialogTrigger } from '@fluentui/react-components';
-import { MaskMode, useMaskedTextField, useT, usePowerPortalsPro, useRecordContext, useColumnMetadata, useLocale, MainContext, useTableMetadata, useWarnAboutUnsavedChanges, useMainContext, useViewsForTable, useViewMetadata, QueryStatus, useGridData, RecordContext, DialogServiceProvider, useUrlCultureStrategy, useDefaultLocale, useSupportedLocales, setAspNetCultureCookie, buildLocalePath, useAuth, AuthStatus, useOverlayServiceState, OverlayServiceProvider, useOverlayForTarget, useLocalization, useLocalizationLoaded, useValidationContext, useDialogService, useRunWithOverlay, useRecordContextOptional, useOrganizationSettings, useUnsavedChangesGuard, useColumnValidationErrors } from '@powerportalspro/react';
+import { makeStyles, mergeClasses, Input, tokens, Toolbar, ToolbarButton, ToolbarDivider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItemRadio, Button, createLightTheme, createDarkTheme, makeStaticStyles, MessageBar, MessageBarBody, Dropdown, Option, Spinner, Field, Textarea, Switch, Checkbox, Label, TabList, Tab, Tooltip, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, RadioGroup, Radio, useId as useId$1, Text, Overflow, OverflowItem, SearchBox, CounterBadge, Popover, PopoverTrigger, PopoverSurface, MenuItem, Combobox, TagPicker, TagPickerControl, TagPickerGroup, Tag, TagPickerInput, TagPickerList, TagPickerOption, webDarkTheme, webLightTheme, teamsDarkTheme, teamsLightTheme, FluentProvider, Avatar, Divider, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, useOverflowMenu, useIsOverflowItemVisible, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, createTableColumn, DataGrid, DataGridHeader, DataGridRow, DataGridHeaderCell, DataGridBody, DataGridCell, MessageBarTitle, DialogTrigger } from '@fluentui/react-components';
+import { MaskMode, useMaskedTextField, useT, usePowerPortalsPro, useRecordContext, useColumnMetadata, useLocale, MainContext, useTableMetadata, useWarnAboutUnsavedChanges, useMainContext, useViewsForTable, useViewMetadata, QueryStatus, useGridData, RecordContext, DialogServiceProvider, useUrlCultureStrategy, useDefaultLocale, useSupportedLocales, setAspNetCultureCookie, buildLocalePath, useAuth, AuthStatus, useOverlayServiceState, OverlayServiceProvider, useOverlayForTarget, useLocalization, useLocalizationLoaded, useValidationContext, useDialogService, useRunWithOverlay, useRecordContextOptional, useOrganizationSettings, useUnsavedChangesGuard, useColumnValidationErrors, isKeyModeEnabled } from '@powerportalspro/react';
 import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useCallback, createContext, useMemo, useId, useLayoutEffect, useContext, useTransition, Children, isValidElement } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { ArrowRotateCounterclockwise20Regular, ArrowRotateClockwise20Regular, FlipHorizontal20Regular, FlipVertical20Regular, ZoomIn20Regular, ZoomOut20Regular, ArrowReset20Regular, ChevronDown16Regular, Grid20Regular, Crop20Regular, FullScreenMinimize20Regular, FullScreenMaximize20Regular, ArrowDownload20Regular, Prohibited20Regular, Checkmark20Filled, ArrowDownload24Regular, ArrowClockwise24Regular, ChevronUp12Regular, ChevronDown12Regular, DocumentArrowLeft24Regular, ChevronDown20Regular, ChevronRight20Regular, Folder20Regular, Document20Regular, ErrorCircle20Regular, Eye20Regular, Dismiss20Regular, Edit20Regular, Add16Regular, Edit16Regular, LinkAdd16Regular, LinkDismiss16Regular, Delete16Regular, Settings20Regular, Search20Regular, ArrowClockwise20Regular, ArrowSortDown16Regular, ArrowSortUp16Regular, Dismiss24Regular, LinkAdd20Regular, QuestionCircle24Regular, Info24Regular, DismissCircle24Regular, Warning24Regular, CheckmarkCircle24Regular, ArrowExit20Regular, PersonEdit20Regular, ArrowSwap20Regular, SignOut20Regular, MoreVerticalRegular, ArrowSyncRegular, ArrowDownloadRegular, Save24Regular, Delete24Regular, Add20Regular, Delete20Regular, LinkDismiss20Regular, ArrowUpload32Regular, ArrowUpload24Regular, ArrowSync24Regular, DrawerArrowDownload24Regular, Money20Regular, ErrorCircle12Filled, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular } from '@fluentui/react-icons';
+import { ArrowRotateCounterclockwise20Regular, ArrowRotateClockwise20Regular, FlipHorizontal20Regular, FlipVertical20Regular, ZoomIn20Regular, ZoomOut20Regular, ArrowReset20Regular, ChevronDown16Regular, Grid20Regular, Crop20Regular, FullScreenMinimize20Regular, FullScreenMaximize20Regular, ArrowDownload20Regular, Prohibited20Regular, Checkmark20Filled, ArrowDownload24Regular, ArrowClockwise24Regular, ChevronUp12Regular, ChevronDown12Regular, DocumentArrowLeft24Regular, ChevronDown20Regular, ChevronRight20Regular, Folder20Regular, Document20Regular, ErrorCircle20Regular, Eye20Regular, Dismiss20Regular, Edit20Regular, Add16Regular, Edit16Regular, LinkAdd16Regular, LinkDismiss16Regular, Delete16Regular, Settings20Regular, Search20Regular, ArrowClockwise20Regular, ArrowSortDown16Regular, ArrowSortUp16Regular, Dismiss24Regular, LinkAdd20Regular, QuestionCircle24Regular, Info24Regular, DismissCircle24Regular, Warning24Regular, CheckmarkCircle24Regular, ArrowExit20Regular, PersonEdit20Regular, ArrowSwap20Regular, SignOut20Regular, MoreVerticalRegular, ArrowSyncRegular, EyeRegular, ArrowDownloadRegular, SearchRegular, DismissRegular, Save24Regular, Delete24Regular, Add20Regular, Delete20Regular, LinkDismiss20Regular, ArrowUpload32Regular, ArrowUpload24Regular, ArrowSync24Regular, DrawerArrowDownload24Regular, Money20Regular, ErrorCircle12Filled, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular } from '@fluentui/react-icons';
 import { RequiredLevel, DateTimeBehavior, getRecordReferenceId, RelationshipFilterMode, SwitchIdentityResult, TableSecurityPermission } from '@powerportalspro/core';
 import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { TimePicker } from '@fluentui/react-timepicker-compat';
@@ -9015,7 +9015,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: () => isKeyModeEnabled() ? `tables.${resolvedColumn.tableName}.columns.${columnName.split(".").pop() ?? columnName}.label` : resolvedColumn.displayName,
           cell: (cellCtx) => {
             const rowRecord = cellCtx.row.original;
             const rowId = rowRecord.id;
@@ -13558,27 +13564,57 @@ function NavMenu({ children, width, className, style }) {
   useNavSelectedStyles();
   const location = useLocation();
   const navigate = useNavigate();
-  const { allRoutes, defaultOpen } = useMemo(
+  const { allRoutes, groups, defaultOpenIndexes } = useMemo(
     () => collectNavTree(children),
     [children]
   );
-  const selectedValue = useMemo(
+  const selectedRoute = useMemo(
     () => bestRouteMatch(allRoutes, location.pathname),
     [allRoutes, location.pathname]
   );
+  const [openIndexes, setOpenIndexes] = 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;
+  useEffect(() => {
+    if (selectedGroupIndex < 0) return;
+    setOpenIndexes(
+      (prev) => prev.has(selectedGroupIndex) ? prev : new Set(prev).add(selectedGroupIndex)
+    );
+  }, [selectedGroupIndex]);
+  const openCategories = 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__ */ jsx(
     Nav,
     {
-      selectedValue: selectedValue ?? "",
+      selectedValue: selectedRoute?.to ?? "",
       onNavItemSelect: handleSelect,
-      defaultOpenCategories: defaultOpen,
+      openCategories,
+      onNavCategoryItemToggle: handleCategoryToggle,
       className: mergeClasses("ppp-nav-menu", styles.nav, className),
       style: navStyle,
       children
@@ -13608,42 +13644,46 @@ function NavItem({ to, icon, children }) {
 }
 function collectNavTree(children) {
   const allRoutes = [];
-  const defaultOpen = [];
-  const visit = (nodes) => {
+  const groups = [];
+  const defaultOpenIndexes = [];
+  const visit = (nodes, groupIndex) => {
     Children.forEach(nodes, (child) => {
       if (!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;
     }
   }
@@ -14386,8 +14426,28 @@ var useStyles12 = makeStyles({
   mergedButtons: {
     display: "flex",
     flexWrap: "wrap",
-    gap: tokens.spacingHorizontalS
+    gap: tokens.spacingHorizontalL
+  },
+  // One culture group: language label + inspect button + download button, kept together.
+  mergedCulture: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalXS
   },
+  mergedCultureLabel: { fontSize: tokens.fontSizeBase200 },
+  dialogSurface: { maxWidth: "1100px", width: "90vw" },
+  dialogToolbar: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalM,
+    flexWrap: "wrap",
+    marginBottom: 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: tokens.spacingHorizontalS },
+  grow: { flex: 1 },
   sectionBody: {
     display: "flex",
     flexDirection: "column",
@@ -14406,6 +14466,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 = useT();
@@ -14415,6 +14484,7 @@ function LocalizationAdmin({ className }) {
   const [isReloading, setIsReloading] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [message, setMessage] = useState();
+  const [mergedDialogCulture, setMergedDialogCulture] = useState(null);
   const loadOverview = useCallback(async () => {
     try {
       const value = await ppp.getLocalizationOverviewAsync();
@@ -14572,17 +14642,44 @@ function LocalizationAdmin({ className }) {
       /* @__PURE__ */ jsx(LocalizationTranslator, {}),
       availableCultures.length > 0 && /* @__PURE__ */ jsx(Section, { headerText: t("app.localization-admin.download-merged-title"), borderVisible: true, children: /* @__PURE__ */ jsx(SectionColumn, { children: /* @__PURE__ */ jsxs("div", { className: styles.sectionBody, children: [
         /* @__PURE__ */ jsx(Text, { children: t("app.localization-admin.download-merged-description") }),
-        /* @__PURE__ */ jsx("div", { className: styles.mergedButtons, children: availableCultures.map((culture) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "outline",
-            disabled: isDownloading,
-            icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
-            onClick: () => onDownloadMerged(culture),
-            children: culture
-          },
-          culture
-        )) })
+        /* @__PURE__ */ jsx("div", { className: styles.mergedButtons, children: availableCultures.map((culture) => /* @__PURE__ */ jsxs("div", { className: styles.mergedCulture, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.mergedCultureLabel, children: cultureLabel(culture) }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: t("app.localization-admin.view-merged-tooltip", [
+                cultureLabel(culture)
+              ]),
+              relationship: "label",
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "outline",
+                  icon: /* @__PURE__ */ jsx(EyeRegular, {}),
+                  onClick: () => setMergedDialogCulture(culture)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: t("app.localization-admin.download-merged-tooltip", [
+                cultureLabel(culture)
+              ]),
+              relationship: "label",
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "subtle",
+                  disabled: isDownloading,
+                  icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
+                  onClick: () => onDownloadMerged(culture)
+                }
+              )
+            }
+          )
+        ] }, culture)) })
       ] }) }) }),
       /* @__PURE__ */ jsx(Section, { headerText: t("app.localization-admin.sources-title"), borderVisible: true, children: /* @__PURE__ */ jsx(SectionColumn, { children: /* @__PURE__ */ jsxs("div", { className: styles.sectionBody, children: [
         /* @__PURE__ */ jsx(Text, { children: t("app.localization-admin.sources-description") }),
@@ -14613,7 +14710,22 @@ function LocalizationAdmin({ className }) {
       ] }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: mergeClasses("ppp-localization-admin", styles.root, className), children: content });
+  return /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-localization-admin", styles.root, className), children: [
+    content,
+    mergedDialogCulture !== null && /* @__PURE__ */ jsx(
+      MergedSourcesDialog,
+      {
+        culture: mergedDialogCulture,
+        label: cultureLabel(mergedDialogCulture),
+        onClose: () => setMergedDialogCulture(null),
+        onDownload: () => onDownloadMerged(mergedDialogCulture),
+        isDownloading,
+        ppp,
+        t,
+        styles
+      }
+    )
+  ] });
 }
 function ConfigRow({ styles, label, value }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -14663,6 +14775,177 @@ function SourceRow({
     )) }) })
   ] });
 }
+var MERGED_PAGE_SIZE = 100;
+function MergedSourcesDialog({
+  culture,
+  label,
+  onClose,
+  onDownload,
+  isDownloading,
+  ppp,
+  t,
+  styles
+}) {
+  const [entries, setEntries] = useState(null);
+  const [loadError, setLoadError] = useState();
+  const [filter, setFilter] = useState("");
+  const [page, setPage] = useState(0);
+  const [sortState, setSortState] = useState({
+    sortColumn: "key",
+    sortDirection: "ascending"
+  });
+  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 = useMemo(
+    () => [
+      createTableColumn({
+        columnId: "key",
+        compare: (a, b) => a.key.localeCompare(b.key),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-key"),
+        renderCell: (item) => item.key
+      }),
+      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)}`)
+      }),
+      createTableColumn({
+        columnId: "source",
+        compare: (a, b) => a.sourceDisplayName.localeCompare(b.sourceDisplayName),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-source"),
+        renderCell: (item) => item.sourceDisplayName
+      }),
+      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 = 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 = 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]);
+  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 = useMemo(
+    () => ({
+      key: { minWidth: 200, defaultWidth: 320 },
+      kind: { minWidth: 110, defaultWidth: 140 },
+      source: { minWidth: 200, defaultWidth: 300 },
+      value: { minWidth: 200, defaultWidth: 360 }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (_event, data) => !data.open && onClose(), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: t("app.localization-admin.merged-dialog-title", [label]) }),
+    /* @__PURE__ */ jsx(DialogContent, { children: loadError !== void 0 ? /* @__PURE__ */ jsx(MessageBar, { intent: "error", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t("app.localization-admin.merged-load-failed", [loadError]) }) }) : entries === null ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.dialogToolbar, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: styles.filterInput,
+            value: filter,
+            onChange: (_event, data) => setFilter(data.value),
+            contentBefore: /* @__PURE__ */ jsx(SearchRegular, {}),
+            placeholder: t("app.localization-admin.merged-filter-placeholder")
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styles.lastReloaded, children: t("app.localization-admin.merged-count", [sorted.length, entries.length]) }),
+        /* @__PURE__ */ jsx("span", { className: styles.grow }),
+        pageCount > 1 && /* @__PURE__ */ jsxs("span", { className: styles.pager, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              appearance: "subtle",
+              disabled: currentPage === 0,
+              onClick: () => setPage(currentPage - 1),
+              children: t("app.localization-admin.merged-prev")
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.lastReloaded, children: t("app.localization-admin.merged-page", [currentPage + 1, pageCount]) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              appearance: "subtle",
+              disabled: currentPage >= pageCount - 1,
+              onClick: () => setPage(currentPage + 1),
+              children: t("app.localization-admin.merged-next")
+            }
+          )
+        ] })
+      ] }),
+      sorted.length === 0 ? /* @__PURE__ */ jsx(MessageBar, { intent: "info", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t("app.localization-admin.merged-empty") }) }) : /* @__PURE__ */ jsx("div", { className: styles.dialogGrid, children: /* @__PURE__ */ jsxs(
+        DataGrid,
+        {
+          items: paged,
+          columns,
+          sortable: true,
+          resizableColumns: true,
+          sortState,
+          onSortChange: (_event, next) => setSortState(next),
+          columnSizingOptions,
+          getRowId: (item) => item.key,
+          size: "small",
+          children: [
+            /* @__PURE__ */ jsx(DataGridHeader, { children: /* @__PURE__ */ jsx(DataGridRow, { children: ({ renderHeaderCell }) => /* @__PURE__ */ jsx(DataGridHeaderCell, { children: renderHeaderCell() }) }) }),
+            /* @__PURE__ */ jsx(DataGridBody, { children: ({ item, rowId }) => /* @__PURE__ */ jsx(DataGridRow, { children: ({ renderCell }) => /* @__PURE__ */ jsx(DataGridCell, { children: renderCell(item) }) }, rowId) })
+          ]
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "primary",
+          icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
+          disabled: isDownloading,
+          onClick: onDownload,
+          children: t("app.localization-admin.merged-download-button")
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { appearance: "secondary", icon: /* @__PURE__ */ jsx(DismissRegular, {}), onClick: onClose, children: t("app.buttons.close.label") })
+    ] })
+  ] }) }) });
+}
 var useStyles13 = makeStyles({
   root: {
     display: "flex",