@powerportalspro/react-calendar 12.0.0 → 13.0.0

package/dist/index.js

@@ -1,14 +1,14 @@
-import { makeStyles, tokens, useThemeClassName, Toolbar, Dropdown, Option, mergeClasses, ToolbarButton, Text, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuItemRadio, SearchBox, Tooltip, MessageBar, MessageBarBody, MessageBarActions, Button, Spinner, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, MenuItem, Field, SpinButton, Checkbox, ToggleButton, RadioGroup, Radio, Input } from '@fluentui/react-components';
-import { ChevronRightRegular, ChevronLeftRegular, ArrowClockwiseRegular, ArrowRepeatAllRegular, AddRegular, ChevronDownRegular } from '@fluentui/react-icons';
+import { makeStyles, tokens, useThemeClassName, ToolbarButton, Text, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuItemRadio, MessageBar, MessageBarBody, Spinner, Tooltip, Button, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, MenuItem, Field, Dropdown, Option, SpinButton, Checkbox, ToggleButton, RadioGroup, Radio, Input } from '@fluentui/react-components';
+import { ChevronRightRegular, ChevronLeftRegular, ArrowRepeatAllRegular, AddRegular, ChevronDownRegular } from '@fluentui/react-icons';
 import FullCalendar, { useCalendarController } from '@fullcalendar/react';
 import dayGridPlugin from '@fullcalendar/react/daygrid';
 import interactionPlugin from '@fullcalendar/react/interaction';
 import listPlugin from '@fullcalendar/react/list';
 import timeGridPlugin from '@fullcalendar/react/timegrid';
 import formaTheme from '@fullcalendar/react/themes/forma';
-import { savedViewControl, SavedViewControlKind, defaultViewId, isViewHidden, TableSecurityPermission, MultiTableViewType, shownViewTables, getRecordReferenceId } from '@powerportalspro/core';
-import { useDialogService, usePrefixedT, useT, useUserTimeZone, useLocale, usePowerPortalsPro, useLocalization, RecordContext, useRecordContext, useLocalizationLoaded, QueryStatus, useRunWithOverlay, useMainContext } from '@powerportalspro/react';
-import { useSavedViews, useMultiTableViews, ViewSort, ViewFilterMenu, GridSaveViewDialog, GridManageViewsPanel, MultiTableFilterDialog, MultiTableRecordPanel, multiTableFilterTabs, applyMultiTableFilter, RecordDialogShell, RecordDialogFrame, SaveContextButton, multiTableFilterQueries, ColumnEdit, StatusReasonEdit, DeleteContextButton } from '@powerportalspro/react-fluent';
+import { savedViewControl, SavedViewControlKind, MultiTableUses, defaultViewId, MultiTableViewType, isViewHidden, TableSecurityPermission, shownViewTables, findRecordPage, recordPageUrl, getRecordReferenceId, firstDayOfWeek } from '@powerportalspro/core';
+import { useDialogService, usePrefixedT, useT, useUserTimeZone, useLocale, usePowerPortalsPro, useLocalization, replaceQueryParam, useRecordPages, RecordContext, useRecordContext, useLocalizationLoaded, QueryStatus, useRunWithOverlay, useMainContext } from '@powerportalspro/react';
+import { useSavedViews, useMultiTableViews, useMultiTableTableSet, EVERY_TABLE_VIEW_ID, useSavedViewSession, everyRow, ViewToolbar, ViewSearchBox, ViewFilterMenu, ViewRefreshButton, ViewPicker, ViewSort, SavedViewDialogs, MultiTableFilterDialog, ViewLoadMessages, MultiTableRecordPanel, viewLabelOf, followRecordLink, RecordDialogShell, RecordDialogFrame, SaveContextButton, ColumnEdit, StatusReasonEdit, DeleteContextButton, SharedTooltip } from '@powerportalspro/react-fluent';
 import { createContext, useContext, useState, useMemo, useRef, useEffect, useCallback, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -26,8 +26,6 @@ function useCalendarContext() {
   if (!context) throw new Error("useCalendarContext must be used in a <Calendar>, among its toolbar items.");
   return context;
 }
-
-// src/recurrence-pattern.ts
 var RecurrenceFrequency = {
   Daily: 0,
   Weekly: 1,
@@ -180,15 +178,6 @@ function describeRecurrence(pattern, start, locale, t) {
   }
   return repeats;
 }
-function firstDayOfWeek(locale) {
-  try {
-    const intlLocale = new Intl.Locale(locale);
-    const firstDay = intlLocale.getWeekInfo?.().firstDay ?? intlLocale.weekInfo?.firstDay;
-    return firstDay === void 0 ? 0 : firstDay % 7;
-  } catch {
-    return 0;
-  }
-}
 function weekOrder(locale) {
   const first = firstDayOfWeek(locale);
   return Array.from({ length: 7 }, (_, i) => (first + i) % 7);
@@ -304,6 +293,7 @@ function RecurrenceEdit({ value, onChange, start, allowNone = true, readOnly = f
   const t = usePrefixedT("app.components.calendar.recurrence");
   const id = useId();
   const language = locale ?? navigator.language;
+  const rootRef = useRef(null);
   const startDay = useRef(start.weekday);
   useEffect(() => {
     const was = startDay.current;
@@ -322,7 +312,8 @@ function RecurrenceEdit({ value, onChange, start, allowNone = true, readOnly = f
     const pattern = startingPattern(frequency, start);
     onChange(value ? { ...pattern, end: value.end, occurrences: value.occurrences, endDate: value.endDate } : pattern);
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: styles.root, children: [
+    /* @__PURE__ */ jsx(SharedTooltip, { containerRef: rootRef }),
     /* @__PURE__ */ jsx(Field, { label: t("label"), children: /* @__PURE__ */ jsx(
       Dropdown,
       {
@@ -395,7 +386,7 @@ function PatternFields({
             size: "small",
             checked: pressed,
             disabled: readOnly,
-            title: dayName(weekday, locale),
+            "data-ppp-tooltip": dayName(weekday, locale),
             "aria-label": dayName(weekday, locale),
             onClick: () => {
               const days = value.days ^ flag;
@@ -495,12 +486,28 @@ function AppointmentDetailsDialog({
   onClose,
   onSaved,
   children,
-  location = "center"
+  location = "center",
+  showRecordLinks = true,
+  onNavigate
 }) {
   const t = usePrefixedT("app.components.calendar");
   const tAll = useT();
   const open = appointment !== null || newAppointment2 !== null;
   const isSeries = appointment?.isSeries === true;
+  const recordPages = useRecordPages({ enabled: showRecordLinks });
+  const appointmentPage = showRecordLinks && appointment && !isSeries ? findRecordPage(recordPages, "appointment") : void 0;
+  const pageUrl = appointmentPage && appointment ? recordPageUrl(appointmentPage, appointment.id) : void 0;
+  const openPage = pageUrl !== void 0 && /* @__PURE__ */ jsx(
+    Button,
+    {
+      as: "a",
+      href: pageUrl,
+      className: "ppp-calendar-open-record",
+      onClick: (event) => followRecordLink(event, pageUrl, onNavigate),
+      children: tAll("app.buttons.open.label")
+    }
+  );
+  const regardingLinks = { showRecordLinks, ...onNavigate && { onNavigate } };
   const mayCreateSeries = useMayCreateSeries(open && editable && !isSeries && appointment?.recurring !== true);
   const saved = () => {
     onClose();
@@ -527,16 +534,21 @@ function AppointmentDetailsDialog({
               title: appointment ? appointment.subject : t("new-appointment"),
               actions: editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(DeleteAction, { seriesId: appointment?.seriesId ?? null, onDeleted: saved }),
+                openPage,
                 /* @__PURE__ */ jsx(SaveContextButton, { appearance: "primary", onSaved: saved }),
                 /* @__PURE__ */ jsx(Button, { onClick: onClose, children: tAll("app.buttons.cancel.label") })
-              ] }) : /* @__PURE__ */ jsx(Button, { appearance: "primary", onClick: onClose, children: t("close") }),
-              children: isSeries ? /* @__PURE__ */ jsx(SeriesRecord, { editable, regardingTables }) : /* @__PURE__ */ jsx(
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                openPage,
+                /* @__PURE__ */ jsx(Button, { appearance: "primary", onClick: onClose, children: t("close") })
+              ] }),
+              children: isSeries ? /* @__PURE__ */ jsx(SeriesRecord, { editable, regardingTables, regardingLinks }) : /* @__PURE__ */ jsx(
                 AppointmentRecord,
                 {
                   recurring: appointment?.recurring ?? false,
                   editable,
                   creating: !appointment,
                   regardingTables,
+                  regardingLinks,
                   mayCreateSeries,
                   children
                 }
@@ -629,6 +641,7 @@ function AppointmentRecord({
   editable,
   creating,
   regardingTables,
+  regardingLinks,
   mayCreateSeries,
   children
 }) {
@@ -655,7 +668,7 @@ function AppointmentRecord({
     !creating && /* @__PURE__ */ jsx(ColumnEdit, { columnName: "organizer", readOnly: true }),
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "requiredattendees", readOnly }),
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "optionalattendees", readOnly }),
-    /* @__PURE__ */ jsx(ColumnEdit, { columnName: "regardingobjectid", readOnly, ...regardingTables && { targetTables: regardingTables } }),
+    /* @__PURE__ */ jsx(ColumnEdit, { columnName: "regardingobjectid", readOnly, ...regardingTables && { targetTables: regardingTables }, ...regardingLinks }),
     !creating && /* @__PURE__ */ jsx(StatusReasonEdit, { columnName: "statuscode", allowStateChange: true, readOnly }),
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "description", readOnly })
   ] });
@@ -744,7 +757,11 @@ function seriesRequests(pattern, appointment, timeZone) {
   };
   return [request];
 }
-function SeriesRecord({ editable, regardingTables }) {
+function SeriesRecord({
+  editable,
+  regardingTables,
+  regardingLinks
+}) {
   const styles = useStyles2();
   const t = usePrefixedT("app.components.calendar");
   const ctx = useRecordContext();
@@ -802,7 +819,7 @@ function SeriesRecord({ editable, regardingTables }) {
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "organizer", readOnly: true }),
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "requiredattendees", readOnly }),
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "optionalattendees", readOnly }),
-    /* @__PURE__ */ jsx(ColumnEdit, { columnName: "regardingobjectid", readOnly, ...regardingTables && { targetTables: regardingTables } }),
+    /* @__PURE__ */ jsx(ColumnEdit, { columnName: "regardingobjectid", readOnly, ...regardingTables && { targetTables: regardingTables }, ...regardingLinks }),
     /* @__PURE__ */ jsx(ColumnEdit, { columnName: "description", readOnly })
   ] });
 }
@@ -1217,8 +1234,47 @@ function newAppointment(range, regarding) {
     }
   };
 }
+function offeredViewIds(defaultViewId2, viewIds, multiTableViewIds, customViews) {
+  const ids = [
+    ...defaultViewId2 ? [defaultViewId2] : [],
+    ...viewIds ?? [],
+    ...multiTableViewIds ?? [],
+    ...(customViews ?? []).map((view) => view.id)
+  ].map((id) => id.toLowerCase());
+  return ids.length === 0 ? [EVERY_TABLE_VIEW_ID] : [...new Set(ids)];
+}
+function findCustomView(id, customViews) {
+  if (!id) return void 0;
+  return customViews?.find((view) => view.id.toLowerCase() === id.toLowerCase());
+}
+function selectedViewId(offered, picked) {
+  return picked && offered.includes(picked.toLowerCase()) ? picked.toLowerCase() : offered[0];
+}
+function offersViews(offered) {
+  return offered.some((id) => id !== EVERY_TABLE_VIEW_ID);
+}
+function withSavedViews(pageViews, savedViews, settings, control, shown, offersSavedViews) {
+  if (!offersSavedViews) return [...pageViews];
+  let all = [...new Set([...pageViews, ...savedViews].map((id) => id.toLowerCase()))];
+  const userDefault = defaultViewId(settings, all, control);
+  if (userDefault) all = [userDefault, ...all.filter((id) => id !== userDefault)];
+  const offered = all.filter((id) => id === shown?.toLowerCase() || !isViewHidden(settings, id, control));
+  return offered.length > 0 ? offered : all;
+}
+var LAYOUTS = ["day", "workWeek", "week", "month", "agenda"];
+function readSavedLayout(json) {
+  if (!json?.trim()) return void 0;
+  try {
+    const layout = JSON.parse(json).layout;
+    return LAYOUTS.find((x) => x === layout);
+  } catch {
+    return void 0;
+  }
+}
+function writeSavedLayout(layout) {
+  return JSON.stringify({ version: 1, layout });
+}
 var APPOINTMENT_TABLE = "appointment";
-var EVERY_TABLE_VIEW_ID = "00000000-0000-0000-0000-000000000000";
 var SERIES_TABLE2 = "recurringappointmentmaster";
 var DEFAULT_CALENDAR_TABLES = [APPOINTMENT_TABLE, "task"];
 var CALENDAR_COLUMNS = {
@@ -1284,10 +1340,10 @@ function drawnTimes(item, dateOnly, timeZone) {
   return { start: zonedMidnight(first, timeZone), end: zonedMidnight(after, timeZone) };
 }
 function fromMultiTableItem(item, info, drawn) {
-  const definition = info?.definition;
+  const dates = info?.definition?.calendar;
   const changeable = new Set((info?.changeableColumns ?? []).map((x) => x.toLowerCase()));
-  const movable = (Number(item.permissions ?? 0) & TableSecurityPermission.Write) !== 0 && !isClosed(item) && !!definition?.start && changeable.has(definition.start.toLowerCase());
-  const resizable = movable && !!definition?.end && changeable.has(definition.end.toLowerCase());
+  const movable = (Number(item.permissions ?? 0) & TableSecurityPermission.Write) !== 0 && !isClosed(item) && !!dates?.start && changeable.has(dates.start.toLowerCase());
+  const resizable = movable && !!dates?.end && changeable.has(dates.end.toLowerCase());
   const isAppointment = item.table === APPOINTMENT_TABLE;
   const state = stateOf(item);
   const location = valueOf2(item.record, "location");
@@ -1305,7 +1361,7 @@ function fromMultiTableItem(item, info, drawn) {
     durationEditable: resizable ? null : false,
     showAs: isAppointment ? showAsOf(typeof status === "number" ? status : null, state) : AppointmentShowAs.Busy,
     canceled: state === 2,
-    color: definition?.color ?? null,
+    color: info?.definition?.color ?? null,
     record: item.record ?? null
   };
 }
@@ -1313,86 +1369,23 @@ function stored(moment, dateOnly, timeZone) {
   return dateOnly ? `${localDate(moment, timeZone)}T00:00:00.000Z` : moment.toISOString();
 }
 function moveRecord(change, item, info, dateOnly, timeZone) {
-  const definition = info?.definition;
-  if (!definition?.start) return null;
+  const dates = info?.definition?.calendar;
+  if (!dates?.start) return null;
   const changeable = new Set((info?.changeableColumns ?? []).map((x) => x.toLowerCase()));
-  const allDayColumn = definition.allDay && changeable.has(definition.allDay.toLowerCase()) ? definition.allDay : null;
+  const allDayColumn = dates.allDay && changeable.has(dates.allDay.toLowerCase()) ? dates.allDay : null;
   if (change.allDay !== (item.isAllDay ?? false) && !allDayColumn) return null;
   if (dateOnly && !change.allDay) return null;
   const end = change.end ?? new Date(change.start.getTime() + (change.allDay ? DAY_MS2 : 30 * MINUTE_MS2));
   const drawn = drawnTimes(item, dateOnly, timeZone);
   const lengthChanged = end.getTime() - change.start.getTime() !== drawn.end.getTime() - drawn.start.getTime();
   const properties = {
-    [definition.start]: { $type: 2, value: stored(change.start, dateOnly, timeZone) }
+    [dates.start]: { $type: 2, value: stored(change.start, dateOnly, timeZone) }
   };
-  if (definition.end && (!item.hasNoEnd || lengthChanged))
-    properties[definition.end] = { $type: 2, value: stored(end, dateOnly, timeZone) };
+  if (dates.end && (!item.hasNoEnd || lengthChanged))
+    properties[dates.end] = { $type: 2, value: stored(end, dateOnly, timeZone) };
   if (allDayColumn) properties[allDayColumn] = { $type: 0, value: change.allDay };
   return { tableName: item.table, id: item.id, properties };
 }
-function tablesOf(tables, registered, allowed, stored2, isStoredView) {
-  let named;
-  if (tables) named = tables.map((x) => x.table ?? "");
-  else if (isStoredView) {
-    if (!stored2) return null;
-    named = [...stored2];
-  } else named = registered.map((x) => x.table ?? "");
-  const expanded = named.flatMap(
-    (table) => table.toLowerCase() === "activitypointer" ? registered.filter((x) => x.isActivity).map((x) => x.table ?? "") : [table.toLowerCase()]
-  );
-  return [...new Set(expanded)].filter(
-    (table) => registered.some((x) => x.table === table) && (!allowed || allowed.has(table))
-  );
-}
-function hiddenByDefault(viewId, shown, defaults) {
-  if (viewId !== EVERY_TABLE_VIEW_ID || !shown.some((table) => defaults.has(table))) return [];
-  return shown.filter((table) => !defaults.has(table));
-}
-
-// src/calendar-query.ts
-function offeredViewIds(defaultViewId2, viewIds, multiTableViewIds, customViews) {
-  const ids = [
-    ...defaultViewId2 ? [defaultViewId2] : [],
-    ...viewIds ?? [],
-    ...multiTableViewIds ?? [],
-    ...(customViews ?? []).map((view) => view.id)
-  ].map((id) => id.toLowerCase());
-  return ids.length === 0 ? [EVERY_TABLE_VIEW_ID] : [...new Set(ids)];
-}
-function findCustomView(id, customViews) {
-  if (!id) return void 0;
-  return customViews?.find((view) => view.id.toLowerCase() === id.toLowerCase());
-}
-function selectedViewId(offered, picked) {
-  return picked && offered.includes(picked.toLowerCase()) ? picked.toLowerCase() : offered[0];
-}
-function offersViews(offered) {
-  return offered.some((id) => id !== EVERY_TABLE_VIEW_ID);
-}
-function everyRow(table) {
-  return `<fetch><entity name="${table}" /></fetch>`;
-}
-function withSavedViews(pageViews, savedViews, settings, control, shown, offersSavedViews) {
-  if (!offersSavedViews) return [...pageViews];
-  let all = [...new Set([...pageViews, ...savedViews].map((id) => id.toLowerCase()))];
-  const userDefault = defaultViewId(settings, all, control);
-  if (userDefault) all = [userDefault, ...all.filter((id) => id !== userDefault)];
-  const offered = all.filter((id) => id === shown?.toLowerCase() || !isViewHidden(settings, id, control));
-  return offered.length > 0 ? offered : all;
-}
-var LAYOUTS = ["day", "workWeek", "week", "month", "agenda"];
-function readSavedLayout(json) {
-  if (!json?.trim()) return void 0;
-  try {
-    const layout = JSON.parse(json).layout;
-    return LAYOUTS.find((x) => x === layout);
-  } catch {
-    return void 0;
-  }
-}
-function writeSavedLayout(layout) {
-  return JSON.stringify({ version: 1, layout });
-}
 
 // ../../node_modules/.pnpm/@fullcalendar+react@7.1.3_react-dom@19.2.5_react@19.2.5__react@19.2.5_temporal-polyfill@1.0.6/node_modules/@fullcalendar/react/skeleton.css
 var skeleton_default = `
@@ -1919,8 +1912,6 @@ function ensureFullCalendarStyles(document2) {
   ensureStyleSheet(document2, STYLE_ID2, `${skeleton_default}
 ${theme_default}`);
 }
-
-// src/persisted-calendar-state.ts
 var DATE2 = /^(\d{4})-(\d{2})-(\d{2})$/;
 var GUID2 = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 function isDate(value) {
@@ -1958,21 +1949,10 @@ function encodePersistedCalendarState(state) {
   return Object.keys(compact).length > 0 ? JSON.stringify(compact) : null;
 }
 function writePersistedCalendarState(queryParameterName, state) {
-  if (!queryParameterName || typeof window === "undefined") return;
-  const encoded = encodePersistedCalendarState(state);
-  const params = new URLSearchParams(window.location.search);
-  if (params.get(queryParameterName) === encoded) return;
-  if (encoded === null) params.delete(queryParameterName);
-  else params.set(queryParameterName, encoded);
-  const query = params.toString();
-  window.history.replaceState(
-    window.history.state,
-    "",
-    `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`
-  );
+  if (!queryParameterName) return;
+  replaceQueryParam(queryParameterName, encodePersistedCalendarState(state) ?? void 0);
 }
 var plugins = [formaTheme, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin];
-var SEARCH_DEBOUNCE_MS = 300;
 var layoutKeys = {
   day: "layouts.day",
   workWeek: "layouts.work-week",
@@ -1987,32 +1967,6 @@ var useStyles3 = makeStyles({
     gap: tokens.spacingVerticalS,
     minHeight: 0
   },
-  // Two groups: the views, navigation and title, then search and the rest at the end. On a narrow
-  // screen the end group wraps below the first as a whole rather than squeezing the title.
-  toolbar: {
-    alignItems: "center",
-    flexWrap: "wrap",
-    justifyContent: "space-between",
-    rowGap: tokens.spacingVerticalXS,
-    columnGap: tokens.spacingHorizontalS,
-    paddingInline: 0
-  },
-  toolbarStart: {
-    display: "flex",
-    alignItems: "center",
-    gap: tokens.spacingHorizontalXS,
-    flex: "1 1 auto",
-    minWidth: 0
-  },
-  toolbarEnd: {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: tokens.spacingHorizontalXS,
-    marginInlineStart: "auto",
-    minWidth: 0
-  },
   // The period and the moves through it, kept together.
   navigation: {
     display: "flex",
@@ -2034,10 +1988,6 @@ var useStyles3 = makeStyles({
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
-  // As wide as a grid's view picker.
-  viewPicker: {
-    minWidth: "220px"
-  },
   search: {
     width: "220px",
     maxWidth: "100%"
@@ -2107,6 +2057,8 @@ function Calendar({
   defaultLayout = "week",
   layouts,
   editable = false,
+  showRecordLinks = true,
+  onNavigate,
   regardingTables,
   height = "600px",
   onAppointmentClick,
@@ -2175,6 +2127,7 @@ function Calendar({
   );
   const viewId = selectedViewId(offered, shownViewId);
   if (viewSettled) openedViewRef.current ??= viewId;
+  const tableSet = useMultiTableTableSet({ use: MultiTableUses.Calendar, viewId, tables, defaultTables });
   const openingLayoutRef = useRef(void 0);
   if (openingLayoutRef.current === void 0 && viewSettled) {
     const savedLayout = persisted.l ? void 0 : readSavedLayout(savedCalendarLayout(viewId));
@@ -2183,8 +2136,7 @@ function Calendar({
   const initialLayout = openingLayoutRef.current ?? openingLayout(layoutsOffered, persisted.l, defaultLayout);
   const viewOpeningLayout = (id) => openingLayout(layoutsOffered, readSavedLayout(savedCalendarLayout(id)), defaultLayout);
   const showsSearch = !appointments && allowSearch;
-  const [searchText, setSearchText] = useState(() => includeSearchInPersistedState ? persisted.q ?? "" : "");
-  const [search, setSearch] = useState(searchText);
+  const [search, setSearch] = useState(() => includeSearchInPersistedState ? persisted.q ?? "" : "");
   const picksViews = !appointments && offered.length > 1;
   const namesViews = picksViews || !appointments && saved.available;
   const namedViewIds = saved.available ? [.../* @__PURE__ */ new Set([...offered, ...pageViews])] : offered;
@@ -2205,10 +2157,10 @@ function Calendar({
       const multiTable = new Map(viewNames.multiTable);
       const missing = multiTableIds.filter((x) => !multiTable.has(x));
       if (missing.length > 0) {
-        const registeredViews = (await registeredAsync().catch(() => null))?.views ?? [];
+        const registeredViews = (await tableSet.registeredAsync().catch(() => null))?.views ?? [];
         for (const id of missing) {
           const known2 = registeredViews.find((view2) => view2.id?.toLowerCase() === id);
-          multiTable.set(id, known2 ? known2.name ?? null : await storedViewName(id));
+          multiTable.set(id, known2 ? known2.name ?? null : (await tableSet.storedViewName(id)).name);
         }
       }
       if (current) setViewNames({ dataverse, multiTable });
@@ -2235,12 +2187,7 @@ function Calendar({
     }
     if (!viewNames.dataverse.has(id)) return null;
     const metadata = viewNames.dataverse.get(id);
-    if (metadata) {
-      const key = `tables.${metadata.tableName}.views.${id}.label`;
-      const localized = tAll(key);
-      if (localized !== key) return localized;
-    }
-    return metadata?.displayName ?? metadata?.name ?? id;
+    return metadata ? viewLabelOf({ ...metadata, id }, tAll) : id;
   };
   const showsSavedViewsMenu = allowSavedViews && !appointments && (saved.available || saved.needsSignIn);
   const viewOptions = useMemo(() => {
@@ -2250,11 +2197,8 @@ function Calendar({
       return label === null ? null : { id, label };
     });
     if (labeled.some((option) => option === null)) return [];
-    const options2 = labeled;
-    if (viewSort === ViewSort.NameAscending) options2.sort((a, b) => a.label.localeCompare(b.label, locale));
-    if (viewSort === ViewSort.NameDescending) options2.sort((a, b) => b.label.localeCompare(a.label, locale));
-    return options2;
-  }, [offered, customViewsKey, saved.views, multiSaved.views, viewNames, viewSort, tAll, locale, showsSavedViewsMenu]);
+    return labeled;
+  }, [offered, customViewsKey, saved.views, multiSaved.views, viewNames, tAll, showsSavedViewsMenu]);
   const showsViewPicker = !appointments && viewOptions.length > (showsSavedViewsMenu ? 0 : 1);
   useEffect(() => {
     ensureFullCalendarStyles(document);
@@ -2289,7 +2233,7 @@ function Calendar({
   useEffect(() => () => void (latestStart.current = -1), []);
   const user = authState.status === "authenticated" ? authState.user?.userId : null;
   const tablesKey = (tables ?? []).map((table) => table.trim().toLowerCase()).join(",");
-  const allowedTables = tablesKey ? new Set(tablesKey.split(",")) : null;
+  const allowedTables = tableSet.allowed;
   const mayCreateAppointments = () => {
     let asked = mayCreate.current;
     if (!asked || asked.user !== user) {
@@ -2349,33 +2293,9 @@ function Calendar({
   const [refreshes, setRefreshes] = useState(0);
   const latestLoad = useRef(null);
   useEffect(() => () => latestLoad.current?.abort(), []);
-  const registeredRef = useRef(null);
-  const [registered, setRegistered] = useState(null);
-  const registeredAsync = () => {
-    let asked = registeredRef.current;
-    if (!asked || asked.user !== user) {
-      const answer = ppp.getMultiTableTablesAsync();
-      asked = registeredRef.current = { user, answer };
-      answer.then(
-        (response) => registeredRef.current?.answer === answer && setRegistered(response),
-        () => {
-          if (registeredRef.current?.answer === answer) registeredRef.current = null;
-        }
-      );
-    }
-    return asked.answer;
-  };
-  const infoOf = (table) => registered?.tables?.find((x) => x.table === table);
-  const storedViewName = async (id) => {
-    try {
-      const stored2 = await ppp.retrieveRecordAsync("ppp_multitableview", id, ["ppp_name"]);
-      const name = stored2.properties?.["ppp_name"]?.value;
-      return typeof name === "string" ? name : null;
-    } catch {
-      return null;
-    }
-  };
-  const storedViewTables = useRef(/* @__PURE__ */ new Map());
+  const registeredAsync = tableSet.registeredAsync;
+  const infoOf = tableSet.infoOf;
+  const tableLabel = tableSet.tableLabel;
   const isStoredView = (id, response) => isMultiTableView(id) && !(response.views ?? []).some((view2) => view2.id?.toLowerCase() === id);
   const viewTablesAsync = async (id) => {
     if (id === EVERY_TABLE_VIEW_ID) return null;
@@ -2392,35 +2312,15 @@ function Calendar({
     console.warn(`[Calendar] The view ${id} doesn't exist or is on a table the user may not read, so it shows nothing.`);
     return [];
   };
+  const knownTablesOf = (id, viewTables, response) => tableSet.tablesOf(viewTables, isStoredView(id, response) ? id : null);
   const defaultsKey = defaultTables.map((table) => table.trim().toLowerCase()).join(",");
-  const [knownTables, setKnownTables] = useState({ viewId: void 0, tables: [] });
-  const known = knownTables.viewId === viewId ? knownTables.tables : [];
-  const [hiddenChoice, setHiddenChoice] = useState(null);
-  const hiddenIn = (id, of) => hiddenChoice && hiddenChoice.viewId === id ? hiddenChoice.tables : hiddenByDefault(id, of, new Set(defaultsKey.split(",").filter(Boolean)));
-  const hidden = hiddenIn(viewId, known);
-  const shownIn = (id, of, byView = false) => {
-    const off = byView ? hiddenByDefault(id, of, new Set(defaultsKey.split(",").filter(Boolean))) : hiddenIn(id, of);
-    return of.length < 2 ? [...of] : of.filter((table) => !off.includes(table));
-  };
-  const shownTables = shownIn(viewId, known);
-  const kinds = known.length > 1 ? known : [];
-  const hiddenAtOpen = hiddenByDefault(viewId, known, new Set(defaultsKey.split(",").filter(Boolean)));
-  const tablesChanged = kinds.some((table) => hidden.includes(table) !== hiddenAtOpen.includes(table));
-  const showTable = (table, shown) => {
-    const next = shown ? hidden.filter((x) => x !== table) : [.../* @__PURE__ */ new Set([...hidden, table])];
-    setHiddenChoice({ viewId, tables: next });
-  };
-  useLocalization(known.map((table) => `tables.${table}`));
-  const tableLabel = (table) => {
-    const key = `tables.${table}.label`;
-    const label = tAll(key);
-    return label !== key ? label : table;
-  };
+  const known = tableSet.known;
+  const shownTables = tableSet.shown;
   const rows = useRef(/* @__PURE__ */ new Map());
   const dateOnly = useRef(/* @__PURE__ */ new Map());
   const learnDateOnly = async (tables2, response) => {
     for (const table of [...new Set(tables2)].filter((x) => !dateOnly.current.has(x))) {
-      const start = response.tables?.find((x) => x.table === table)?.definition?.start;
+      const start = response.tables?.find((x) => x.table === table)?.definition?.calendar?.start;
       try {
         const metadata = await tableMetadataCache.getAsync(table);
         const column = metadata?.columns?.find((x) => x.columnName === start);
@@ -2431,22 +2331,12 @@ function Calendar({
     }
   };
   const [failures, setFailures] = useState([]);
-  const showsFilterButton = !appointments && allowFiltering && !(registered && isStoredView(viewId, registered));
-  const [userFilter, setUserFilter] = useState(null);
-  useEffect(() => {
-    setUserFilter((current) => current && current.viewId !== viewId ? null : current);
-    setHiddenChoice((current) => current && current.viewId !== viewId ? null : current);
-  }, [viewId]);
-  const filtered = userFilter && userFilter.viewId === viewId ? userFilter : null;
-  const [filterDialog, setFilterDialog] = useState(null);
+  const showsFilterButton = !appointments && allowFiltering && !(tableSet.registered && isStoredView(viewId, tableSet.registered));
+  const filtered = tableSet.filter;
   const filterTablesAsync = async (id) => {
-    const response = await registeredAsync();
-    const tablesShown = await viewTablesAsync(id) ?? (id === EVERY_TABLE_VIEW_ID ? (tablesOf(null, response.tables ?? [], allowedTables, null, false) ?? []).map((table) => ({ table })) : []);
-    return multiTableFilterQueries(tablesShown, async (viewOf) => (await viewMetadataCache.getAsync(viewOf))?.fetchXml);
-  };
-  const isShownTable = (table, named, shownNow, response) => {
-    const lower = (x) => x.toLowerCase();
-    return lower(table) === "activitypointer" ? shownNow.some((x) => response.tables?.find((info) => info.table === x)?.isActivity && !named.map(lower).includes(lower(x))) : shownNow.map(lower).includes(lower(table));
+    await registeredAsync();
+    const tablesShown = await viewTablesAsync(id) ?? (id === EVERY_TABLE_VIEW_ID ? (tableSet.tablesOf(null) ?? []).map((table) => ({ table })) : []);
+    return tableSet.filterQueries(tablesShown);
   };
   const openFilter = async () => {
     const id = viewId;
@@ -2454,36 +2344,14 @@ function Calendar({
     try {
       const response = await registeredAsync();
       const tablesShown = await filterTablesAsync(id);
-      const knownNow = tablesOf(
-        await viewTablesAsync(id) ?? null,
-        response.tables ?? [],
-        allowedTables,
-        storedViewTables.current.get(id),
-        isStoredView(id, response)
-      ) ?? [];
-      const shownNow = shownIn(id, knownNow);
-      const named = tablesShown.map((x) => x.table.table ?? "");
-      const tabs = multiTableFilterTabs(
-        tablesShown,
-        (table) => isShownTable(table, named, shownNow, response),
-        tableLabel,
-        filtered?.criteria
-      );
-      const shownByView = shownIn(id, knownNow, true);
-      const viewTabs = multiTableFilterTabs(tablesShown, (table) => isShownTable(table, named, shownByView, response), tableLabel);
-      if (tabs.length > 0 && id === viewId) setFilterDialog({ viewId: id, tables: tablesShown, tabs, viewTabs });
+      const knownNow = knownTablesOf(id, await viewTablesAsync(id) ?? null, response) ?? [];
+      tableSet.openFilter(id, tablesShown, knownNow, tableLabel);
     } catch (error) {
       console.warn("[Calendar] The filters of the view shown could not be read.", error);
     }
   };
   const applyFilter = (criteria, restoreView) => {
-    const dialog2 = filterDialog;
-    setFilterDialog(null);
-    if (!dialog2 || dialog2.viewId !== viewId) return;
-    const filter = applyMultiTableFilter(dialog2.tables, restoreView ? dialog2.viewTabs : dialog2.tabs, criteria);
-    setUserFilter(filter ? { viewId, tables: filter.tables, criteria: filter.criteria } : null);
-    if (!restoreView) return;
-    setHiddenChoice(null);
+    if (!tableSet.applyFilter(criteria, restoreView) || !restoreView) return;
     const layout = viewOpeningLayout(viewId);
     if (layout !== currentLayout && layoutsOffered.includes(layout)) controller.changeView(toFullCalendarView(layout));
   };
@@ -2496,7 +2364,7 @@ function Calendar({
     customViewsKey,
     filtered?.tables ?? null,
     searched,
-    hiddenChoice,
+    tableSet.hiddenChoice,
     tablesKey,
     defaultsKey,
     matchParties ?? null,
@@ -2526,14 +2394,10 @@ function Calendar({
     openingViewRef.current = offered[0];
     if (viewSettled && previous !== void 0 && previous !== offered[0]) persist();
   }, [offered[0]]);
-  useEffect(() => {
-    if (searchText === search) return;
-    const timer = setTimeout(() => {
-      setSearch(searchText);
-      persist({ search: searchText });
-    }, SEARCH_DEBOUNCE_MS);
-    return () => clearTimeout(timer);
-  }, [searchText]);
+  const searchFor = (text) => {
+    setSearch(text);
+    persist({ search: text });
+  };
   const events = useMemo(() => {
     if (appointments) return appointments.map(toEventInput);
     return async (info) => {
@@ -2546,8 +2410,8 @@ function Calendar({
         const response = await registeredAsync();
         const viewTables = await viewTablesAsync(id);
         const stored2 = isStoredView(id, response);
-        let knownNow = tablesOf(viewTables, response.tables ?? [], allowedTables, storedViewTables.current.get(id), stored2);
-        if (latestLoad.current === load && knownNow) setKnownTables({ viewId: id, tables: knownNow });
+        let knownNow = knownTablesOf(id, viewTables, response);
+        if (latestLoad.current === load && knownNow) tableSet.setKnown(id, knownNow);
         if (knownNow?.length === 0) {
           if (latestLoad.current === load) {
             setFailed(false);
@@ -2563,7 +2427,7 @@ function Calendar({
           viewId: filtered || !isMultiTableView(id) ? null : id,
           tables: filtered ? [...filtered.tables] : viewTables && viewTables.length > 0 ? [...viewTables] : null,
           // A view whose tables aren't known yet is read as the calendar allows.
-          includeTables: knownNow ? shownIn(id, knownNow) : allowedTables ? [...allowedTables] : null,
+          includeTables: knownNow ? tableSet.shownIn(id, knownNow) : allowedTables ? [...allowedTables] : null,
           regarding: regarding ? { tableName: regarding.tableName, id: regarding.id } : null,
           matchParties: matchParties ?? null,
           series: series ?? null,
@@ -2572,9 +2436,8 @@ function Calendar({
         };
         const range = await ppp.loadMultiTableRangeAsync(request, load.signal);
         if (!knownNow && stored2) {
-          storedViewTables.current.set(id, range.tables ?? []);
-          knownNow = tablesOf(null, response.tables ?? [], allowedTables, range.tables ?? [], true) ?? [];
-          if (latestLoad.current === load) setKnownTables({ viewId: id, tables: knownNow });
+          knownNow = tableSet.learnTables(id, range.tables ?? []);
+          if (latestLoad.current === load) tableSet.setKnown(id, knownNow);
         }
         const items = range.items ?? [];
         await learnDateOnly(items.map((item) => item.table ?? ""), response);
@@ -2691,13 +2554,10 @@ function Calendar({
   const shownSaved = findSaved(viewId);
   const shownSavedMulti = findSavedMulti(viewId);
   const showsAppointmentsAlone = shownTables.length === 1 && shownTables[0] === APPOINTMENT_TABLE;
-  const canSaveView = shownTables.length > 0 && !(registered && isStoredView(viewId, registered));
-  const viewChanged = !!filtered || tablesChanged || currentLayout !== viewOpeningLayout(viewId);
+  const canSaveView = shownTables.length > 0 && !(tableSet.registered && isStoredView(viewId, tableSet.registered));
+  const viewChanged = !!filtered || tableSet.tablesChanged || currentLayout !== viewOpeningLayout(viewId);
   const savedViewChanged = (!!shownSaved || !!shownSavedMulti) && canSaveView && viewChanged;
   const isUserDefault = !!viewId && defaultViewId(saved.settings, offered, savedViewsControl) === viewId;
-  const [savingView, setSavingView] = useState(false);
-  const [nameDialog, setNameDialog] = useState(null);
-  const [manageViewsOpen, setManageViewsOpen] = useState(false);
   const currentQuery = async () => {
     if (!showsAppointmentsAlone || !viewId) return void 0;
     const own = filtered?.tables.find((x) => x.table === APPOINTMENT_TABLE);
@@ -2710,261 +2570,195 @@ function Calendar({
     const tablesNow = filtered ? [...filtered.tables] : (await filterTablesAsync(viewId)).map((x) => x.table);
     return shownViewTables(tablesNow, known, shownTables, (table) => !!response.tables?.find((info) => info.table === table)?.isActivity);
   };
-  const runSavedViewChange = async (change) => {
-    if (savingView) return;
-    setSavingView(true);
-    try {
-      await change();
-    } catch (error) {
-      console.warn("[Calendar] A change to the user\u2019s saved views failed.", error);
-      await dialog.showErrorAsync(tAll("app.components.grid.saved-views-error"));
-    } finally {
-      setSavingView(false);
-    }
-  };
-  const signedIn = async (action) => {
-    if (!saved.needsSignIn) {
-      await action();
-      return;
-    }
-    const result = await dialog.showConfirmationAsync(tAll("app.components.grid.saved-views-sign-in-message"), {
-      title: tAll("app.components.grid.saved-views-sign-in-title"),
-      primaryText: tAll("app.buttons.login.label"),
-      secondaryText: tAll("app.buttons.cancel.label")
-    });
-    if (result.canceled) return;
-    const returnUrl = window.location.pathname + window.location.search + window.location.hash;
-    window.location.assign(`${signInUrl}${signInUrl.includes("?") ? "&" : "?"}ReturnUrl=${encodeURIComponent(returnUrl)}`);
-  };
   const showSavedView = (id) => {
-    setUserFilter(null);
-    setHiddenChoice(null);
+    tableSet.reset();
     setPickedViewId(id);
     persist({ viewId: id });
   };
-  const saveView = () => runSavedViewChange(async () => {
-    if (shownSavedMulti) {
-      const tables2 = await currentTables();
-      if (tables2.length === 0) return;
-      await multiSaved.update(shownSavedMulti.id, { tables: tables2, calendarLayout: writeSavedLayout(currentLayout) });
-    } else {
-      if (!shownSaved) return;
-      const fetchXml = await currentQuery();
-      if (!fetchXml) return;
-      await saved.update(shownSaved.id, { fetchXml, calendarLayout: writeSavedLayout(currentLayout) });
-    }
-    setUserFilter(null);
-    setHiddenChoice(null);
-  });
-  const saveViewAs = (name) => runSavedViewChange(async () => {
-    const fetchXml = showsAppointmentsAlone ? await currentQuery() : void 0;
-    if (fetchXml) {
-      const view3 = await saved.create(name, fetchXml, { calendarLayout: writeSavedLayout(currentLayout) });
-      showSavedView(view3.id.toLowerCase());
-      return;
-    }
-    const tables2 = await currentTables();
-    if (tables2.length === 0) return;
-    const view2 = await multiSaved.create(name, tables2, { calendarLayout: writeSavedLayout(currentLayout) });
-    showSavedView(view2.id.toLowerCase());
-  });
-  const cloneView = (id, name) => runSavedViewChange(async () => {
-    const own = findSaved(id);
-    const custom = findCustomView(id, customViewDefinitions)?.tables;
-    const only = custom?.length === 1 && custom[0].table === APPOINTMENT_TABLE && (custom[0].viewType ?? MultiTableViewType.FetchXml) === MultiTableViewType.FetchXml ? custom[0].fetchXml ?? everyRow(APPOINTMENT_TABLE) : void 0;
-    const ownMulti = findSavedMulti(id);
-    const dataverse = own || only || ownMulti || custom ? void 0 : await viewMetadataCache.getAsync(id);
-    const fetchXml = own?.definition.fetchXml ?? only ?? (dataverse?.tableName.toLowerCase() === APPOINTMENT_TABLE ? dataverse.fetchXml : void 0);
-    if (fetchXml) {
-      await saved.create(name, fetchXml, { gridLayout: own?.gridLayout, calendarLayout: own?.calendarLayout });
-      return;
-    }
-    const tables2 = ownMulti?.tables ?? await viewTablesAsync(id) ?? (id === EVERY_TABLE_VIEW_ID ? known.map((table) => ({ table })) : null);
-    if (!tables2 || tables2.length === 0) return;
-    await multiSaved.create(name, tables2, { calendarLayout: ownMulti?.calendarLayout });
-  });
-  const renameView = (id, name) => runSavedViewChange(async () => void (findSavedMulti(id) ? await multiSaved.update(id, { name }) : await saved.update(id, { name })));
-  const deleteView = async (id) => {
-    const result = await dialog.showConfirmationAsync(
-      tAll("app.components.grid.saved-views-delete-message", [findSaved(id)?.name ?? findSavedMulti(id)?.name ?? ""]),
-      {
-        title: tAll("app.components.grid.saved-views-delete-title"),
-        primaryText: tAll("app.components.grid.saved-views-delete"),
-        secondaryText: tAll("app.buttons.cancel.label")
-      }
-    );
-    if (result.canceled) return;
-    await runSavedViewChange(async () => {
-      if (findSavedMulti(id)) {
-        await multiSaved.remove(id);
-        await saved.reloadSettings();
-      } else {
-        await saved.remove(id);
-      }
-      if (id.toLowerCase() === viewId) setUserFilter(null);
-    });
-  };
-  const setDefault = (id, isDefault) => runSavedViewChange(() => saved.setDefault(id, isDefault, viewLabel(id)));
-  const setHidden = (id, isHidden) => runSavedViewChange(() => saved.setHidden(id, isHidden, viewLabel(id)));
   function viewLabel(id) {
     return labelOf(id.toLowerCase()) ?? findSaved(id)?.name ?? findSavedMulti(id)?.name ?? id;
   }
-  const managedViews = useMemo(() => {
-    if (!manageViewsOpen) return [];
-    const all = [.../* @__PURE__ */ new Set([...pageViews, ...savedIds.map((x) => x.toLowerCase())])];
-    const userDefault = defaultViewId(saved.settings, all, savedViewsControl);
-    return all.map((id) => ({
-      id,
-      name: viewLabel(id),
-      isSaved: !!findSaved(id) || !!findSavedMulti(id),
-      isDefault: id === userDefault,
-      isHidden: isViewHidden(saved.settings, id, savedViewsControl),
-      isShown: id === viewId
-    }));
-  }, [manageViewsOpen, pageViews, savedIds, saved.settings, savedViewsControl, viewId, viewOptions, viewNames]);
-  const onNameDialogSave = (name) => {
-    const asked = nameDialog;
-    setNameDialog(null);
-    if (!asked) return;
-    if (asked.kind === "rename") void renameView(asked.viewId, name);
-    else if (asked.kind === "clone") void cloneView(asked.viewId, name);
-    else void saveViewAs(name);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: styles.root, style: { height }, children: [
-    /* @__PURE__ */ jsxs(Toolbar, { className: styles.toolbar, "aria-label": t("toolbar"), children: [
-      /* @__PURE__ */ jsx("div", { className: styles.toolbarStart, children: showsViewPicker && /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          className: mergeClasses("ppp-calendar-view-picker", styles.viewPicker),
-          "aria-label": tAll("app.components.view-selector.view-name"),
-          value: viewOptions.find((option) => option.id === viewId)?.label ?? "",
-          selectedOptions: viewId ? [viewId] : [],
-          onOptionSelect: (_, data) => pickView(data.optionValue),
-          children: viewOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option.id, text: option.label, children: option.label }, option.id))
+  const session = useSavedViewSession({
+    saved,
+    signInUrl,
+    operations: {
+      shownViewId: viewId,
+      savedViewName: (id) => findSaved(id)?.name ?? findSavedMulti(id)?.name,
+      managedViewName: viewLabel,
+      // Every view for the Manage views panel, the hidden ones among them.
+      managedViews: () => {
+        const all = [.../* @__PURE__ */ new Set([...pageViews, ...savedIds.map((x) => x.toLowerCase())])];
+        const userDefault = defaultViewId(saved.settings, all, savedViewsControl);
+        return all.map((id) => ({
+          id,
+          name: viewLabel(id),
+          isSaved: !!findSaved(id) || !!findSavedMulti(id),
+          isDefault: id === userDefault,
+          isHidden: isViewHidden(saved.settings, id, savedViewsControl),
+          isShown: id === viewId
+        }));
+      },
+      save: async () => {
+        if (shownSavedMulti) {
+          const tables2 = await currentTables();
+          if (tables2.length === 0) return;
+          await multiSaved.update(shownSavedMulti.id, { tables: tables2, calendarLayout: writeSavedLayout(currentLayout) });
+        } else {
+          if (!shownSaved) return;
+          const fetchXml = await currentQuery();
+          if (!fetchXml) return;
+          await saved.update(shownSaved.id, { fetchXml, calendarLayout: writeSavedLayout(currentLayout) });
         }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.toolbarEnd, children: [
-        /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-calendar-navigation", styles.navigation), children: [
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
+        tableSet.reset();
+      },
+      saveAs: async (name) => {
+        const fetchXml = showsAppointmentsAlone ? await currentQuery() : void 0;
+        if (fetchXml) {
+          const view3 = await saved.create(name, fetchXml, { calendarLayout: writeSavedLayout(currentLayout) });
+          showSavedView(view3.id.toLowerCase());
+          return;
+        }
+        const tables2 = await currentTables();
+        if (tables2.length === 0) return;
+        const view2 = await multiSaved.create(name, tables2, { calendarLayout: writeSavedLayout(currentLayout) });
+        showSavedView(view2.id.toLowerCase());
+      },
+      clone: async (id, name) => {
+        const own = findSaved(id);
+        const custom = findCustomView(id, customViewDefinitions)?.tables;
+        const only = custom?.length === 1 && custom[0].table === APPOINTMENT_TABLE && (custom[0].viewType ?? MultiTableViewType.FetchXml) === MultiTableViewType.FetchXml ? custom[0].fetchXml ?? everyRow(APPOINTMENT_TABLE) : void 0;
+        const ownMulti = findSavedMulti(id);
+        const dataverse = own || only || ownMulti || custom ? void 0 : await viewMetadataCache.getAsync(id);
+        const fetchXml = own?.definition.fetchXml ?? only ?? (dataverse?.tableName.toLowerCase() === APPOINTMENT_TABLE ? dataverse.fetchXml : void 0);
+        if (fetchXml) {
+          await saved.create(name, fetchXml, { gridLayout: own?.gridLayout, calendarLayout: own?.calendarLayout });
+          return;
+        }
+        const tables2 = ownMulti?.tables ?? await viewTablesAsync(id) ?? (id === EVERY_TABLE_VIEW_ID ? known.map((table) => ({ table })) : null);
+        if (!tables2 || tables2.length === 0) return;
+        await multiSaved.create(name, tables2, { calendarLayout: ownMulti?.calendarLayout });
+      },
+      rename: async (id, name) => void (findSavedMulti(id) ? await multiSaved.update(id, { name }) : await saved.update(id, { name })),
+      remove: async (id) => {
+        if (findSavedMulti(id)) {
+          await multiSaved.remove(id);
+          await saved.reloadSettings();
+        } else {
+          await saved.remove(id);
+        }
+        if (id.toLowerCase() === viewId) tableSet.clearFilter();
+      },
+      openView: (id) => pickView(id)
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, style: { height }, children: [
+    /* @__PURE__ */ jsxs(
+      ViewToolbar,
+      {
+        className: "ppp-calendar-toolbar",
+        ariaLabel: t("toolbar"),
+        start: showsViewPicker && /* @__PURE__ */ jsx(
+          ViewPicker,
+          {
+            className: "ppp-calendar-view-picker",
+            options: viewOptions,
+            sort: viewSort,
+            value: viewId,
+            onChange: pickView,
+            isUserView: (id) => saved.available && (!!findSaved(id) || !!findSavedMulti(id))
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-calendar-navigation", styles.navigation), children: [
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                appearance: "subtle",
+                disabled: buttons?.today?.isDisabled ?? false,
+                onClick: () => controller.today(),
+                children: t("today")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                appearance: "subtle",
+                icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRightRegular, {}) : /* @__PURE__ */ jsx(ChevronLeftRegular, {}),
+                "aria-label": t("previous"),
+                onClick: () => controller.prev()
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                appearance: "subtle",
+                icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeftRegular, {}) : /* @__PURE__ */ jsx(ChevronRightRegular, {}),
+                "aria-label": t("next"),
+                onClick: () => controller.next()
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { className: styles.title, as: "h2", "aria-live": "polite", children: view?.title })
+          ] }),
+          children !== void 0 && /* @__PURE__ */ jsx(CalendarContext.Provider, { value: calendarContext, children }),
+          layoutsOffered.length > 1 && /* @__PURE__ */ jsxs(Menu, { checkedValues: { layout: [currentLayout] }, onCheckedValueChange: onLayoutChecked, children: [
+            /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(MenuButton, { className: "ppp-calendar-layout", appearance: "subtle", children: t(layoutKeys[currentLayout]) }) }),
+            /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsx(MenuList, { children: layoutsOffered.map((layout) => /* @__PURE__ */ jsx(MenuItemRadio, { name: "layout", value: layout, children: t(layoutKeys[layout]) }, layout)) }) })
+          ] }),
+          showsSearch && /* @__PURE__ */ jsx(
+            ViewSearchBox,
             {
-              appearance: "subtle",
-              disabled: buttons?.today?.isDisabled ?? false,
-              onClick: () => controller.today(),
-              children: t("today")
+              className: mergeClasses("ppp-calendar-search", styles.search),
+              placeholder: t("search-placeholder"),
+              value: search,
+              onChange: searchFor
             }
           ),
           /* @__PURE__ */ jsx(
-            ToolbarButton,
+            ViewFilterMenu,
             {
-              appearance: "subtle",
-              icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRightRegular, {}) : /* @__PURE__ */ jsx(ChevronLeftRegular, {}),
-              "aria-label": t("previous"),
-              onClick: () => controller.prev()
+              changed: viewChanged,
+              onEditFilters: showsFilterButton ? () => void openFilter() : void 0,
+              tables: appointments ? void 0 : tableSet.menuTables(tableLabel),
+              onTableShownChange: tableSet.showTable,
+              savedViews: session.menu({
+                canSave: savedViewChanged,
+                canSaveAs: canSaveView && viewChanged,
+                canSetDefault: !!viewId && !isUserDefault
+              })
             }
           ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
+          !appointments && /* @__PURE__ */ jsx(
+            ViewRefreshButton,
             {
-              appearance: "subtle",
-              icon: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeftRegular, {}) : /* @__PURE__ */ jsx(ChevronRightRegular, {}),
-              "aria-label": t("next"),
-              onClick: () => controller.next()
+              className: "ppp-calendar-refresh",
+              disabled: loading,
+              onClick: () => setRefreshes((count) => count + 1)
             }
-          ),
-          /* @__PURE__ */ jsx(Text, { className: styles.title, as: "h2", "aria-live": "polite", children: view?.title })
-        ] }),
-        children !== void 0 && /* @__PURE__ */ jsx(CalendarContext.Provider, { value: calendarContext, children }),
-        layoutsOffered.length > 1 && /* @__PURE__ */ jsxs(Menu, { checkedValues: { layout: [currentLayout] }, onCheckedValueChange: onLayoutChecked, children: [
-          /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(MenuButton, { className: "ppp-calendar-layout", appearance: "subtle", children: t(layoutKeys[currentLayout]) }) }),
-          /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsx(MenuList, { children: layoutsOffered.map((layout) => /* @__PURE__ */ jsx(MenuItemRadio, { name: "layout", value: layout, children: t(layoutKeys[layout]) }, layout)) }) })
-        ] }),
-        showsSearch && /* @__PURE__ */ jsx(
-          SearchBox,
-          {
-            className: mergeClasses("ppp-calendar-search", styles.search),
-            placeholder: t("search-placeholder"),
-            "aria-label": t("search-placeholder"),
-            value: searchText,
-            onChange: (_, data) => setSearchText(data.value)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ViewFilterMenu,
-          {
-            changed: viewChanged,
-            onEditFilters: showsFilterButton ? () => void openFilter() : void 0,
-            tables: appointments ? void 0 : kinds.map((table) => ({ table, label: tableLabel(table), shown: !hidden.includes(table) })),
-            onTableShownChange: showTable,
-            savedViews: showsSavedViewsMenu ? {
-              canSave: savedViewChanged,
-              canSaveAs: canSaveView && viewChanged,
-              canSetDefault: !!viewId && !isUserDefault,
-              busy: savingView,
-              onSave: () => void signedIn(saveView),
-              onSaveAs: () => void signedIn(() => setNameDialog({ kind: "saveAs", viewId: viewId ?? "", name: "" })),
-              onSetDefault: () => void signedIn(() => viewId ? setDefault(viewId, true) : void 0),
-              onManage: () => void signedIn(() => setManageViewsOpen(true))
-            } : void 0
-          }
-        ),
-        !appointments && /* @__PURE__ */ jsx(Tooltip, { content: tAll("app.buttons.refresh.label"), relationship: "label", withArrow: true, children: /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            className: "ppp-calendar-refresh",
-            appearance: "subtle",
-            icon: /* @__PURE__ */ jsx(ArrowClockwiseRegular, {}),
-            disabled: loading,
-            onClick: () => setRefreshes((count) => count + 1)
-          }
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      GridSaveViewDialog,
-      {
-        open: nameDialog !== null,
-        title: tAll(
-          nameDialog?.kind === "rename" ? "app.components.grid.saved-views-rename-title" : nameDialog?.kind === "clone" ? "app.components.grid.saved-views-clone-title" : "app.components.grid.saved-views-save-as-title"
-        ),
-        name: nameDialog?.name ?? "",
-        onSave: onNameDialogSave,
-        onCancel: () => setNameDialog(null)
+          )
+        ]
       }
     ),
-    saved.available && /* @__PURE__ */ jsx(
-      GridManageViewsPanel,
+    /* @__PURE__ */ jsx(SavedViewDialogs, { session }),
+    /* @__PURE__ */ jsx(
+      MultiTableFilterDialog,
       {
-        open: manageViewsOpen,
-        onOpenChange: setManageViewsOpen,
-        views: managedViews,
-        busy: savingView,
-        onOpenView: (id) => {
-          setManageViewsOpen(false);
-          pickView(id);
-        },
-        onSetDefault: (id, isDefault) => void setDefault(id, isDefault),
-        onSetHidden: (id, isHidden) => void setHidden(id, isHidden),
-        onRename: (id) => setNameDialog({ kind: "rename", viewId: id, name: findSaved(id)?.name ?? findSavedMulti(id)?.name ?? "" }),
-        onClone: (id) => setNameDialog({ kind: "clone", viewId: id, name: tAll("app.components.grid.saved-views-copy-of", [viewLabel(id)]) }),
-        onDelete: (id) => void deleteView(id)
+        open: tableSet.filterDialog !== null,
+        tabs: tableSet.filterDialog?.tabs ?? [],
+        viewTabs: tableSet.filterDialog?.viewTabs,
+        onApply: applyFilter,
+        onCancel: tableSet.closeFilter
       }
     ),
     /* @__PURE__ */ jsx(
-      MultiTableFilterDialog,
+      ViewLoadMessages,
       {
-        open: filterDialog !== null,
-        tabs: filterDialog?.tabs ?? [],
-        viewTabs: filterDialog?.viewTabs,
-        onApply: applyFilter,
-        onCancel: () => setFilterDialog(null)
+        failed,
+        errorText: t("error"),
+        failedTables: failures.length > 0 ? t("failed-tables", [failures.map((x) => tableLabel(x.table ?? "")).join(", ")]) : null,
+        retryText: t("retry"),
+        onRetry: () => setRefreshes((count) => count + 1)
       }
     ),
-    failed ? /* @__PURE__ */ jsx(MessageBar, { intent: "error", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t("error") }) }) : failures.length > 0 && // A table that couldn't be read leaves the rest of the range as it is.
-    /* @__PURE__ */ jsxs(MessageBar, { intent: "warning", children: [
-      /* @__PURE__ */ jsx(MessageBarBody, { children: t("failed-tables", [failures.map((x) => tableLabel(x.table ?? "")).join(", ")]) }),
-      /* @__PURE__ */ jsx(MessageBarActions, { children: /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => setRefreshes((count) => count + 1), children: t("retry") }) })
-    ] }),
     truncated && /* @__PURE__ */ jsx(MessageBar, { intent: "warning", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t("truncated") }) }),
     /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
       /* @__PURE__ */ jsx("div", { className: styles.surface, children: viewSettled && /* @__PURE__ */ jsx(
@@ -3026,6 +2820,8 @@ function Calendar({
         editable,
         regardingTables,
         location: dialogLocation,
+        showRecordLinks,
+        onNavigate,
         onClose: () => {
           setOpenAppointment(null);
           setCreating(null);