blixify-ui-web 1.2.122 → 1.2.124

package/lib/components/data/dataTemplate/index.js

@@ -125,6 +125,7 @@ var stepper_1 = require("../../display/stepper");
 var table_1 = require("../../display/table");
 var newTable_1 = require("../../display/newTable");
 var newList_1 = require("../../display/newList");
+var newGrid_1 = require("../../display/newGrid");
 var newKanban_1 = require("../../display/newKanban");
 var newCalendar_1 = require("../../display/newCalendar");
 var address_1 = require("../../input/address");
@@ -199,10 +200,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // Every read of the view type below uses resolvedType. The distinction matters
     // most in effect dependency arrays — following props.type there would leave
     // the list never refetching while the panel is open, which fails silently.
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82;
     // INFO: the panel cannot navigate its way out — handleNavigate("read") is
     // routed straight back into it — so expand-to-full-page is local state.
-    var _79 = (0, react_1.useState)(false), drawerPageView = _79[0], setDrawerPageView = _79[1];
+    var _83 = (0, react_1.useState)(false), drawerPageView = _83[0], setDrawerPageView = _83[1];
     // INFO: the panel keeps rendering the record it was opened with rather than
     // live props. Without this, navigating back to the list would re-render the
     // still-mounted panel as a second list behind the overlay.
@@ -284,16 +285,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _80 = intialiseDefaultFilterValues(), initialFilterSearch = _80.initialFilterSearch, initialFilterSearchParams = _80.initialFilterSearchParams, initialFilterSelection = _80.initialFilterSelection, initialFilterReference = _80.initialFilterReference, initialFilterReferenceDate = _80.initialFilterReferenceDate;
+    var _84 = intialiseDefaultFilterValues(), initialFilterSearch = _84.initialFilterSearch, initialFilterSearchParams = _84.initialFilterSearchParams, initialFilterSelection = _84.initialFilterSelection, initialFilterReference = _84.initialFilterReference, initialFilterReferenceDate = _84.initialFilterReferenceDate;
     // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
-    var _81 = (0, viewStatePersistence_1.usePersistedViewState)({
+    var _85 = (0, viewStatePersistence_1.usePersistedViewState)({
         mode: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.persistViewState,
         collectionId: props.collectionId,
         persistKey: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.persistKey,
         type: resolvedType,
-    }), persistedState = _81.persistedState, isPersistEnabled = _81.isEnabled, handleSaveView = _81.handleSaveView;
-    var _82 = (0, react_1.useState)(false), loading = _82[0], setLoading = _82[1];
-    var _83 = (0, react_1.useState)(), notification = _83[0], setNotification = _83[1];
+    }), rawPersistedState = _85.persistedState, isPersistEnabled = _85.isEnabled, handleSaveView = _85.handleSaveView, handleRegisterViewSnapshot = _85.handleRegisterViewSnapshot;
+    // INFO: drop stored filters/sort on removed columns — they would empty the table
+    var persistedState = (0, react_1.useMemo)(function () { return (0, viewStatePersistence_1.handlePruneStaleColumns)(rawPersistedState, props.model); }, [rawPersistedState, props.model]);
+    var _86 = (0, react_1.useState)(false), loading = _86[0], setLoading = _86[1];
+    var _87 = (0, react_1.useState)(), notification = _87[0], setNotification = _87[1];
     // INFO: a success toast is confirmation, not a decision — it clears itself so
     // it never sits on the floating step bar; errors stay until dismissed
     (0, react_1.useEffect)(function () {
@@ -303,59 +306,59 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return function () { return clearTimeout(timer); };
     }, [notification]);
     //INFO : Used by List
-    var _84 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _84[0], setFilterSearch = _84[1];
-    var _85 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _85[0], setFilterSearchParams = _85[1];
-    var _86 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _86[0], setFilterSelection = _86[1];
-    var _87 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _87[0], setFilterReference = _87[1];
-    var _88 = (0, react_1.useState)({}), filterReferenceSearch = _88[0], setFilterReferenceSearch = _88[1];
-    var _89 = (0, react_1.useState)({}), filterReferenceList = _89[0], setFilterReferenceList = _89[1];
-    var _90 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
+    var _88 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _88[0], setFilterSearch = _88[1];
+    var _89 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _89[0], setFilterSearchParams = _89[1];
+    var _90 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _90[0], setFilterSelection = _90[1];
+    var _91 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _91[0], setFilterReference = _91[1];
+    var _92 = (0, react_1.useState)({}), filterReferenceSearch = _92[0], setFilterReferenceSearch = _92[1];
+    var _93 = (0, react_1.useState)({}), filterReferenceList = _93[0], setFilterReferenceList = _93[1];
+    var _94 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
         ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
-        : initialFilterReferenceDate), filterReferenceDate = _90[0], setFilterReferenceDate = _90[1];
-    var _91 = (0, react_1.useState)(true), tableLoading = _91[0], setTableLoading = _91[1];
-    var _92 = (0, react_1.useState)(""), cursor = _92[0], setCursor = _92[1];
-    var _93 = (0, react_1.useState)(""), lastCursor = _93[0], setLastCursor = _93[1];
-    var _94 = (0, react_1.useState)([]), tableData = _94[0], setTableData = _94[1];
-    var _95 = (0, react_1.useState)([]), spaceTableData = _95[0], setSpaceTableData = _95[1];
+        : initialFilterReferenceDate), filterReferenceDate = _94[0], setFilterReferenceDate = _94[1];
+    var _95 = (0, react_1.useState)(true), tableLoading = _95[0], setTableLoading = _95[1];
+    var _96 = (0, react_1.useState)(""), cursor = _96[0], setCursor = _96[1];
+    var _97 = (0, react_1.useState)(""), lastCursor = _97[0], setLastCursor = _97[1];
+    var _98 = (0, react_1.useState)([]), tableData = _98[0], setTableData = _98[1];
+    var _99 = (0, react_1.useState)([]), spaceTableData = _99[0], setSpaceTableData = _99[1];
     // INFO: a save resolves after later renders, so it reads the table from here —
     // the state it closed over can predate an earlier save on the same row
     var tableDataRef = (0, react_1.useRef)([]);
     var spaceTableDataRef = (0, react_1.useRef)([]);
     tableDataRef.current = tableData;
     spaceTableDataRef.current = spaceTableData;
-    var _96 = (0, react_1.useState)(0), size = _96[0], setSize = _96[1];
-    var _97 = (0, react_1.useState)((_k = (_h = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _h !== void 0 ? _h : (_j = props.organise) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0), pageIndex = _97[0], setPageIndex = _97[1];
-    var _98 = (0, react_1.useState)([]), selectedIds = _98[0], setSelectedIds = _98[1];
-    var _99 = (0, react_1.useState)(false), selectAll = _99[0], setSelectAll = _99[1];
-    var _100 = (0, react_1.useState)(""), deletePasscode = _100[0], setDeletePasscode = _100[1];
-    var _101 = (0, react_1.useState)(""), deletePasscodeInput = _101[0], setDeletePasscodeInput = _101[1];
-    var _102 = (0, react_1.useState)(""), deleteFeedId = _102[0], setDeleteFeedId = _102[1];
+    var _100 = (0, react_1.useState)(0), size = _100[0], setSize = _100[1];
+    var _101 = (0, react_1.useState)((_k = (_h = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _h !== void 0 ? _h : (_j = props.organise) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0), pageIndex = _101[0], setPageIndex = _101[1];
+    var _102 = (0, react_1.useState)([]), selectedIds = _102[0], setSelectedIds = _102[1];
+    var _103 = (0, react_1.useState)(false), selectAll = _103[0], setSelectAll = _103[1];
+    var _104 = (0, react_1.useState)(""), deletePasscode = _104[0], setDeletePasscode = _104[1];
+    var _105 = (0, react_1.useState)(""), deletePasscodeInput = _105[0], setDeletePasscodeInput = _105[1];
+    var _106 = (0, react_1.useState)(""), deleteFeedId = _106[0], setDeleteFeedId = _106[1];
     //INFO : Used by List Organise
     // INFO: Internal sort state that overrides props.organise?.sort when
     // persistViewState is enabled and a persisted sort exists
-    var _103 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _103[0], setPersistedSort = _103[1];
-    var _104 = (0, react_1.useState)(false), filterDraft = _104[0], setFilterDraft = _104[1];
-    var _105 = (0, react_1.useState)(false), addTabModal = _105[0], setAddTabModal = _105[1];
+    var _107 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _107[0], setPersistedSort = _107[1];
+    var _108 = (0, react_1.useState)(false), filterDraft = _108[0], setFilterDraft = _108[1];
+    var _109 = (0, react_1.useState)(false), addTabModal = _109[0], setAddTabModal = _109[1];
     //INFO : resolve the initial tab synchronously so the mount cond is already
     // tab-scoped — an empty initial tab caused a second wasted list fetch
-    var _106 = (0, react_1.useState)(function () {
+    var _110 = (0, react_1.useState)(function () {
         var _a, _b;
         return (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, resolvedType, props.collectionId, props.id, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.viewId);
-    }), selectedTab = _106[0], setSelectedTab = _106[1];
-    var _107 = (0, react_1.useState)("dayGridMonth"), calendarView = _107[0], setCalendarView = _107[1];
+    }), selectedTab = _110[0], setSelectedTab = _110[1];
+    var _111 = (0, react_1.useState)("dayGridMonth"), calendarView = _111[0], setCalendarView = _111[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    var _108 = (0, react_1.useState)("month"), newCalendarViewMode = _108[0], setNewCalendarViewMode = _108[1];
-    var _109 = (0, react_1.useState)(new Date()), calendarTabMonth = _109[0], setCalendarTabMonth = _109[1];
-    var _110 = (0, react_1.useState)(true), kanbanDroppable = _110[0], setKanbanDroppable = _110[1];
-    var _111 = (0, react_1.useState)([]), kanbanOptions = _111[0], setKanbanOptions = _111[1];
-    var _112 = (0, react_1.useState)(false), queryForm = _112[0], setQueryForm = _112[1];
-    var _113 = (0, react_1.useState)(false), batchUpdateModal = _113[0], setBatchUpdateModal = _113[1];
-    var _114 = (0, react_1.useState)({
+    var _112 = (0, react_1.useState)("month"), newCalendarViewMode = _112[0], setNewCalendarViewMode = _112[1];
+    var _113 = (0, react_1.useState)(new Date()), calendarTabMonth = _113[0], setCalendarTabMonth = _113[1];
+    var _114 = (0, react_1.useState)(true), kanbanDroppable = _114[0], setKanbanDroppable = _114[1];
+    var _115 = (0, react_1.useState)([]), kanbanOptions = _115[0], setKanbanOptions = _115[1];
+    var _116 = (0, react_1.useState)(false), queryForm = _116[0], setQueryForm = _116[1];
+    var _117 = (0, react_1.useState)(false), batchUpdateModal = _117[0], setBatchUpdateModal = _117[1];
+    var _118 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _114[0], setBatchUpdateData = _114[1];
-    var _115 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _118[0], setBatchUpdateData = _118[1];
+    var _119 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -381,8 +384,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), structure = _115[0], setStructure = _115[1];
-    var _116 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _116[0], setAdditionalQuery = _116[1];
+    }), structure = _119[0], setStructure = _119[1];
+    var _120 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _120[0], setAdditionalQuery = _120[1];
     // INFO: State for user-configurable flex filters (Monday.com-style)
     // INFO: Initialize with one empty row so users see inputs immediately without clicking "Add Filter"
     var defaultFlexFilterRow = [
@@ -393,9 +396,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _117 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _121 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _117[0], setFlexFilters = _117[1];
+        : defaultFlexFilterRow), flexFilters = _121[0], setFlexFilters = _121[1];
     // INFO: always-current mirror of flexFilters, read by the imperative apply/
     // clear methods so chained calls in one tick aren't stale.
     var flexFiltersRef = (0, react_1.useRef)(flexFilters);
@@ -408,108 +411,124 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }, [flexFilters]);
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _118 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _122 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFiltersDebounced = _118[0], setFlexFiltersDebounced = _118[1];
-    var _119 = (0, react_1.useState)({}), flexFilterReferenceOptions = _119[0], setFlexFilterReferenceOptions = _119[1];
-    var _120 = (0, react_1.useState)({}), flexFilterReferenceSearch = _120[0], setFlexFilterReferenceSearch = _120[1];
-    var _121 = (0, react_1.useState)(false), flexFilterModalOpen = _121[0], setFlexFilterModalOpen = _121[1];
-    var _122 = (0, react_1.useState)(false), viewSettingsModalOpen = _122[0], setViewSettingsModalOpen = _122[1];
+        : defaultFlexFilterRow), flexFiltersDebounced = _122[0], setFlexFiltersDebounced = _122[1];
+    var _123 = (0, react_1.useState)({}), flexFilterReferenceOptions = _123[0], setFlexFilterReferenceOptions = _123[1];
+    var _124 = (0, react_1.useState)({}), flexFilterReferenceSearch = _124[0], setFlexFilterReferenceSearch = _124[1];
+    var _125 = (0, react_1.useState)(false), flexFilterModalOpen = _125[0], setFlexFilterModalOpen = _125[1];
+    var _126 = (0, react_1.useState)(false), viewSettingsModalOpen = _126[0], setViewSettingsModalOpen = _126[1];
     // INFO: Columns the end user chose to hide (bareSettings.bareViewSettings).
     // Deliberately kept out of `structure`: the props-sync effect below resets
     // structure to props.model whenever props change, which would wipe the
     // choice, and the persist effect derives schema-level hiddenColumnIds from
     // structure — writing user hides there would blur the two concepts.
-    var _123 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _123[0], setUserHiddenColumnIds = _123[1];
-    var _124 = (0, react_1.useState)(""), columnSearch = _124[0], setColumnSearch = _124[1];
-    var _125 = (0, react_1.useState)(null), draggingColumnId = _125[0], setDraggingColumnId = _125[1];
+    var _127 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _127[0], setUserHiddenColumnIds = _127[1];
+    var _128 = (0, react_1.useState)(""), columnSearch = _128[0], setColumnSearch = _128[1];
+    var _129 = (0, react_1.useState)([]), savedViews = _129[0], setSavedViews = _129[1];
+    var _130 = (0, react_1.useState)(null), activeSavedViewId = _130[0], setActiveSavedViewId = _130[1];
+    // INFO: null while the name box is closed
+    var _131 = (0, react_1.useState)(null), savedViewName = _131[0], setSavedViewName = _131[1];
+    var _132 = (0, react_1.useState)(null), deletingSavedViewId = _132[0], setDeletingSavedViewId = _132[1];
+    var _133 = (0, react_1.useState)(null), draggingColumnId = _133[0], setDraggingColumnId = _133[1];
     var columnRowRefs = (0, react_1.useRef)({});
     //INFO : Used by Auth
-    var _126 = (0, react_1.useState)({
+    var _134 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _126[0], setAuthMethods = _126[1];
-    var _127 = (0, react_1.useState)(""), selectedAuthMethod = _127[0], setSelectedAuthMethod = _127[1];
+    }), authMethods = _134[0], setAuthMethods = _134[1];
+    var _135 = (0, react_1.useState)(""), selectedAuthMethod = _135[0], setSelectedAuthMethod = _135[1];
     // INFO: Used by Activity Log
-    var _128 = (0, react_1.useState)(false), activityModal = _128[0], setActivityModal = _128[1];
-    var _129 = (0, react_1.useState)(""), activityId = _129[0], setActivityId = _129[1];
+    var _136 = (0, react_1.useState)(false), activityModal = _136[0], setActivityModal = _136[1];
+    var _137 = (0, react_1.useState)(""), activityId = _137[0], setActivityId = _137[1];
     //INFO : Used by Export
-    var _130 = (0, react_1.useState)(null), csvFile = _130[0], setCSVFile = _130[1];
-    var _131 = (0, react_1.useState)([]), csvFileData = _131[0], setCSVFileData = _131[1];
-    var _132 = (0, react_1.useState)(0), stepCSVIndex = _132[0], setStepCSVIndex = _132[1];
-    var _133 = (0, react_1.useState)({}), listCSVMapAttribute = _133[0], setListCSVMapAttribute = _133[1];
-    var _134 = (0, react_1.useState)({}), listCSVObjAttribute = _134[0], setListCSVObjAttribute = _134[1];
-    var _135 = (0, react_1.useState)([]), csvAPIAttribute = _135[0], setCSVAPIAttribute = _135[1];
-    var _136 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _136[0], setExportCSVEmail = _136[1];
-    var _137 = (0, react_1.useState)(((_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.defaultExportPDFName) || ""), exportPDFTitle = _137[0], setExportPDFTitle = _137[1];
-    var _138 = (0, react_1.useState)(false), exportPDFLoading = _138[0], setExportPDFLoading = _138[1];
-    var _139 = (0, react_1.useState)(false), exportReadPDFLoading = _139[0], setExportReadPDFLoading = _139[1];
-    var _140 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sumColumnId) !== null && _u !== void 0 ? _u : []), exportSumAttributeIds = _140[0], setExportSumAttributeIds = _140[1];
-    var _141 = (0, react_1.useState)((_x = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.exportSettings) === null || _w === void 0 ? void 0 : _w.hideSubItems) !== null && _x !== void 0 ? _x : false), hideSubItems = _141[0], setHideSubItems = _141[1];
-    var _142 = (0, react_1.useState)([]), importTableData = _142[0], setImportTableData = _142[1];
-    var _143 = (0, react_1.useState)([]), queryList = _143[0], setQueryList = _143[1];
-    var _144 = (0, react_1.useState)(undefined), allQueryList = _144[0], setAllQueryList = _144[1];
-    var _145 = (0, react_1.useState)(-1), queryIndex = _145[0], setQueryIndex = _145[1];
-    var _146 = (0, react_1.useState)((_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _146[0], setGroupId = _146[1];
-    var _147 = (0, react_1.useState)(""), readTabSection = _147[0], setReadTabSection = _147[1];
-    var _148 = (0, react_1.useState)(false), readFloatingNav = _148[0], setReadFloatingNav = _148[1];
+    var _138 = (0, react_1.useState)(null), csvFile = _138[0], setCSVFile = _138[1];
+    var _139 = (0, react_1.useState)([]), csvFileData = _139[0], setCSVFileData = _139[1];
+    var _140 = (0, react_1.useState)(0), stepCSVIndex = _140[0], setStepCSVIndex = _140[1];
+    var _141 = (0, react_1.useState)({}), listCSVMapAttribute = _141[0], setListCSVMapAttribute = _141[1];
+    var _142 = (0, react_1.useState)({}), listCSVObjAttribute = _142[0], setListCSVObjAttribute = _142[1];
+    var _143 = (0, react_1.useState)([]), csvAPIAttribute = _143[0], setCSVAPIAttribute = _143[1];
+    var _144 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _144[0], setExportCSVEmail = _144[1];
+    var _145 = (0, react_1.useState)(((_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.defaultExportPDFName) || ""), exportPDFTitle = _145[0], setExportPDFTitle = _145[1];
+    var _146 = (0, react_1.useState)(false), exportPDFLoading = _146[0], setExportPDFLoading = _146[1];
+    var _147 = (0, react_1.useState)(false), exportReadPDFLoading = _147[0], setExportReadPDFLoading = _147[1];
+    var _148 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sumColumnId) !== null && _u !== void 0 ? _u : []), exportSumAttributeIds = _148[0], setExportSumAttributeIds = _148[1];
+    var _149 = (0, react_1.useState)((_x = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.exportSettings) === null || _w === void 0 ? void 0 : _w.hideSubItems) !== null && _x !== void 0 ? _x : false), hideSubItems = _149[0], setHideSubItems = _149[1];
+    var _150 = (0, react_1.useState)([]), importTableData = _150[0], setImportTableData = _150[1];
+    var _151 = (0, react_1.useState)([]), queryList = _151[0], setQueryList = _151[1];
+    var _152 = (0, react_1.useState)(undefined), allQueryList = _152[0], setAllQueryList = _152[1];
+    var _153 = (0, react_1.useState)(-1), queryIndex = _153[0], setQueryIndex = _153[1];
+    var _154 = (0, react_1.useState)((_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _154[0], setGroupId = _154[1];
+    var _155 = (0, react_1.useState)(""), readTabSection = _155[0], setReadTabSection = _155[1];
+    var _156 = (0, react_1.useState)(false), readFloatingNav = _156[0], setReadFloatingNav = _156[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _149 = (0, react_1.useState)(false), modalVisible = _149[0], setModalVisible = _149[1];
-    var _150 = (0, react_1.useState)(false), deleteModal = _150[0], setDeleteModal = _150[1];
-    var _151 = (0, react_1.useState)(false), excelModal = _151[0], setExcelModal = _151[1];
-    var _152 = (0, react_1.useState)(false), exportExcel = _152[0], setExportExcel = _152[1];
-    var _153 = (0, react_1.useState)(""), exportType = _153[0], setExportType = _153[1];
-    var _154 = (0, react_1.useState)(false), exportQR = _154[0], setExportQR = _154[1];
-    var _155 = (0, react_1.useState)(function () {
+    var _157 = (0, react_1.useState)(false), modalVisible = _157[0], setModalVisible = _157[1];
+    var _158 = (0, react_1.useState)(false), deleteModal = _158[0], setDeleteModal = _158[1];
+    var _159 = (0, react_1.useState)(false), excelModal = _159[0], setExcelModal = _159[1];
+    var _160 = (0, react_1.useState)(false), exportExcel = _160[0], setExportExcel = _160[1];
+    var _161 = (0, react_1.useState)(""), exportType = _161[0], setExportType = _161[1];
+    var _162 = (0, react_1.useState)(false), exportQR = _162[0], setExportQR = _162[1];
+    var _163 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _155[0], setActiveTab = _155[1];
-    var _156 = (0, react_1.useState)(false), signatureSigning = _156[0], setSignatureSigning = _156[1];
-    var _157 = (0, react_1.useState)({}), selectedData = _157[0], setSelectedData = _157[1];
-    var _158 = (0, react_1.useState)(""), selectedObjectStructureId = _158[0], setSelectedObjectStructureId = _158[1];
-    var _159 = (0, react_1.useState)(""), selectedObjectId = _159[0], setSelectedObjectId = _159[1];
-    var _160 = (0, react_1.useState)(""), selectedListAddressId = _160[0], setSelectedListAddressId = _160[1];
-    var _161 = (0, react_1.useState)(-1), selectedListAddressIndex = _161[0], setSelectedListAddressIndex = _161[1];
-    var _162 = (0, react_1.useState)({
+    }), activeTab = _163[0], setActiveTab = _163[1];
+    var _164 = (0, react_1.useState)(false), signatureSigning = _164[0], setSignatureSigning = _164[1];
+    var _165 = (0, react_1.useState)({}), selectedData = _165[0], setSelectedData = _165[1];
+    var _166 = (0, react_1.useState)(""), selectedObjectStructureId = _166[0], setSelectedObjectStructureId = _166[1];
+    var _167 = (0, react_1.useState)(""), selectedObjectId = _167[0], setSelectedObjectId = _167[1];
+    var _168 = (0, react_1.useState)(""), selectedListAddressId = _168[0], setSelectedListAddressId = _168[1];
+    var _169 = (0, react_1.useState)(-1), selectedListAddressIndex = _169[0], setSelectedListAddressIndex = _169[1];
+    var _170 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _162[0], setSelectedListAddress = _162[1];
-    var _163 = (0, react_1.useState)({}), selectedObjectData = _163[0], setSelectedObjectData = _163[1];
-    var _164 = (0, react_1.useState)(null), objectCellEdit = _164[0], setObjectCellEdit = _164[1];
-    var _165 = (0, react_1.useState)(false), referenceLoading = _165[0], setReferenceLoading = _165[1];
-    var _166 = (0, react_1.useState)({}), referencesOptions = _166[0], setReferencesOptions = _166[1];
-    var _167 = (0, react_1.useState)({}), referencesDetails = _167[0], setReferencesDetails = _167[1];
-    var _168 = (0, react_1.useState)({}), listReferencesOptions = _168[0], setListReferencesOptions = _168[1];
-    var _169 = (0, react_1.useState)({}), referenceDeleteTableData = _169[0], setReferenceDeleteTableData = _169[1];
-    var _170 = (0, react_1.useState)(0), referenceDeleteIndex = _170[0], setReferenceDeleteIndex = _170[1];
-    var _171 = (0, react_1.useState)({
+    }), selectedListAddress = _170[0], setSelectedListAddress = _170[1];
+    var _171 = (0, react_1.useState)({}), selectedObjectData = _171[0], setSelectedObjectData = _171[1];
+    var _172 = (0, react_1.useState)(null), objectCellEdit = _172[0], setObjectCellEdit = _172[1];
+    var _173 = (0, react_1.useState)(false), referenceLoading = _173[0], setReferenceLoading = _173[1];
+    var _174 = (0, react_1.useState)({}), referencesOptions = _174[0], setReferencesOptions = _174[1];
+    var _175 = (0, react_1.useState)({}), referencesDetails = _175[0], setReferencesDetails = _175[1];
+    var _176 = (0, react_1.useState)({}), listReferencesOptions = _176[0], setListReferencesOptions = _176[1];
+    var _177 = (0, react_1.useState)({}), referenceDeleteTableData = _177[0], setReferenceDeleteTableData = _177[1];
+    var _178 = (0, react_1.useState)(0), referenceDeleteIndex = _178[0], setReferenceDeleteIndex = _178[1];
+    var _179 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _171[0], setReferenceCreationModal = _171[1];
-    var _172 = (0, react_1.useState)({}), referenceModelSchema = _172[0], setReferenceSchema = _172[1];
-    var _173 = (0, react_1.useState)([]), kanbanChecked = _173[0], setKanbanChecked = _173[1];
+    }), referenceCreationModal = _179[0], setReferenceCreationModal = _179[1];
+    var _180 = (0, react_1.useState)({}), referenceModelSchema = _180[0], setReferenceSchema = _180[1];
+    var _181 = (0, react_1.useState)([]), kanbanChecked = _181[0], setKanbanChecked = _181[1];
     //INFO : Offline
-    var _174 = (0, react_1.useState)(0), offlineDataLength = _174[0], setOfflineDataLength = _174[1];
-    var _175 = (0, react_1.useState)(false), offlineModal = _175[0], setOfflineModal = _175[1];
+    var _182 = (0, react_1.useState)(0), offlineDataLength = _182[0], setOfflineDataLength = _182[1];
+    var _183 = (0, react_1.useState)(false), offlineModal = _183[0], setOfflineModal = _183[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _176 = (0, react_1.useState)(false), isLive = _176[0], setIsLive = _176[1];
-    var _177 = (0, react_1.useState)(false), isLiveOffline = _177[0], setIsLiveOffline = _177[1];
+    var _184 = (0, react_1.useState)(false), isLive = _184[0], setIsLive = _184[1];
+    var _185 = (0, react_1.useState)(false), isLiveOffline = _185[0], setIsLiveOffline = _185[1];
     // INFO: true when navigator is offline — used to switch ReadQueryHoc between
     // server reads (online, full pagination) and IndexedDB reads (offline, cached data).
     // Independent of SSE status so it works even when bareSocketName is not set.
-    var _178 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _178[0], setIsNetworkOffline = _178[1];
+    var _186 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _186[0], setIsNetworkOffline = _186[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
     var scrollSentinelDebounce = (0, react_1.useRef)(false);
+    // INFO: a ref, filled in the row click before navigating unmounts the list
+    var scrollCaptureRef = (0, react_1.useRef)({
+        scrollAnchorId: persistedState === null || persistedState === void 0 ? void 0 : persistedState.scrollAnchorId,
+        scrollOffset: persistedState === null || persistedState === void 0 ? void 0 : persistedState.scrollOffset,
+    });
+    // INFO: one restore per mount — polling and SSE refetches must not scroll the user back
+    var scrollRestoredRef = (0, react_1.useRef)(false);
+    // INFO: tells a mount apart from a tab switch on a mounted instance
+    var scrollIdentityRef = (0, react_1.useRef)(null);
+    var scrollScopeStartRef = (0, react_1.useRef)(null);
+    var scrollScopeEndRef = (0, react_1.useRef)(null);
     // INFO: captures the doc exactly as loaded from the server — used by
     // bareUpsertPartialUpdate to diff only the fields the user actually changed.
     // Intentionally separate from previousSelectedData, which advances on every
@@ -620,27 +639,30 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isSchemaHideMode = ((_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.onChangeHide) ? true : false;
     // INFO: rows per page is a view setting the user can change, so it starts from
     // the persisted value and falls back to the consumer's limit
-    var _179 = (0, react_1.useState)((_10 = (_9 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _9 !== void 0 ? _9 : props.limit) !== null && _10 !== void 0 ? _10 : 10), pageLimit = _179[0], setPageLimit = _179[1];
+    var _187 = (0, react_1.useState)((_10 = (_9 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _9 !== void 0 ? _9 : props.limit) !== null && _10 !== void 0 ? _10 : 10), pageLimit = _187[0], setPageLimit = _187[1];
     var limit = pageLimit;
-    var activeSortId = (isPersistEnabled && persistedSort) || ((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.sort);
+    var isSavedViewsEnabled = !!((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.savedViews) && resolvedType === "list";
+    // INFO: a saved view carries its sort, so the sort is held here as with persistViewState
+    var isInternalSort = isPersistEnabled || isSavedViewsEnabled;
+    var activeSortId = (isInternalSort && persistedSort) || ((_12 = props.organise) === null || _12 === void 0 ? void 0 : _12.sort);
     var handleSortColumn = function (value) {
         var _a, _b;
-        if (isPersistEnabled)
+        if (isInternalSort)
             setPersistedSort(value);
         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeSort) === null || _b === void 0 ? void 0 : _b.call(_a, value);
     };
-    var _180 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _180.canUpdateRecord, canInlineUpdate = _180.canInlineUpdate, canBatchUpdate = _180.canBatchUpdate, canDeleteRecord = _180.canDeleteRecord;
-    var isEditor = ((_12 = props.edit) === null || _12 === void 0 ? void 0 : _12.allEditable) ? true : false;
-    var isOffline = (_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareOffline;
+    var _188 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _188.canUpdateRecord, canInlineUpdate = _188.canInlineUpdate, canBatchUpdate = _188.canBatchUpdate, canDeleteRecord = _188.canDeleteRecord;
+    var isEditor = ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.allEditable) ? true : false;
+    var isOffline = (_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareOffline;
     // INFO: when bareOfflineNetworkAware is true, the save path is also gated on
     // the live network state — online saves go to the server even if bareOffline
     // is true, offline saves go to IDB as normal.
-    var isOfflineNetworkListener = isOffline && ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareOfflineNetworkListener);
-    var showId = (_15 = props.space) === null || _15 === void 0 ? void 0 : _15.showId;
+    var isOfflineNetworkListener = isOffline && ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareOfflineNetworkListener);
+    var showId = (_16 = props.space) === null || _16 === void 0 ? void 0 : _16.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    var idField = ((_16 = props.space) === null || _16 === void 0 ? void 0 : _16.idField) || ((_17 = props.organise) === null || _17 === void 0 ? void 0 : _17.idField);
-    var pipeline = (_18 = props === null || props === void 0 ? void 0 : props.space) === null || _18 === void 0 ? void 0 : _18.pipeline;
-    if ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareListPipeline) {
+    var idField = ((_17 = props.space) === null || _17 === void 0 ? void 0 : _17.idField) || ((_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.idField);
+    var pipeline = (_19 = props === null || props === void 0 ? void 0 : props.space) === null || _19 === void 0 ? void 0 : _19.pipeline;
+    if ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
@@ -653,24 +675,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
      * three records came back instead of five files, and each tile received the
      * whole array rather than one file, so every one of them read "Attachment".
      */
-    var fileViewColumnId = (_23 = (_22 = ((_21 = (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.extendedTabs) !== null && _21 !== void 0 ? _21 : []).find(function (eachTab) {
+    var fileViewColumnId = (_24 = (_23 = ((_22 = (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.extendedTabs) !== null && _22 !== void 0 ? _22 : []).find(function (eachTab) {
         return eachTab.viewType === "file" &&
             (0, utils_1.lowercaseTextToId)(eachTab.name) === viewType;
-    })) === null || _22 === void 0 ? void 0 : _22.fileSettings) === null || _23 === void 0 ? void 0 : _23.columnId;
-    var hasNavigation = ((_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.handleNavigate) ? true : false;
+    })) === null || _23 === void 0 ? void 0 : _23.fileSettings) === null || _24 === void 0 ? void 0 : _24.columnId;
+    var hasNavigation = ((_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.handleNavigate) ? true : false;
     var formColumn = "grid-cols-12";
-    var useMobileView = (_26 = (_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareUpdateMobileView) !== null && _26 !== void 0 ? _26 : false;
+    var useMobileView = (_27 = (_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareUpdateMobileView) !== null && _27 !== void 0 ? _27 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    var isActivityLog = (((_28 = (_27 = props.edit) === null || _27 === void 0 ? void 0 : _27.activityLog) === null || _28 === void 0 ? void 0 : _28.enableComments) &&
-        ((_29 = props.edit) === null || _29 === void 0 ? void 0 : _29.activityLog.commentCollectionId)) ||
-        (((_31 = (_30 = props.edit) === null || _30 === void 0 ? void 0 : _30.activityLog) === null || _31 === void 0 ? void 0 : _31.enableLogs) &&
-            ((_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.activityLog.logsCollectionId));
-    var customPaginationSize = ((_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.customPaginationCount)
+    var isActivityLog = (((_29 = (_28 = props.edit) === null || _28 === void 0 ? void 0 : _28.activityLog) === null || _29 === void 0 ? void 0 : _29.enableComments) &&
+        ((_30 = props.edit) === null || _30 === void 0 ? void 0 : _30.activityLog.commentCollectionId)) ||
+        (((_32 = (_31 = props.edit) === null || _31 === void 0 ? void 0 : _31.activityLog) === null || _32 === void 0 ? void 0 : _32.enableLogs) &&
+            ((_33 = props.edit) === null || _33 === void 0 ? void 0 : _33.activityLog.logsCollectionId));
+    var customPaginationSize = ((_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_34 = props.lib) === null || _34 === void 0 ? void 0 : _34.axios,
+        dbModule: (_35 = props.lib) === null || _35 === void 0 ? void 0 : _35.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -678,7 +700,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_35 = props.lib) === null || _35 === void 0 ? void 0 : _35.axios,
+        dbModule: (_36 = props.lib) === null || _36 === void 0 ? void 0 : _36.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -686,9 +708,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_36 = props.edit) === null || _36 === void 0 ? void 0 : _36.allEditable) &&
+        ((_37 = props.edit) === null || _37 === void 0 ? void 0 : _37.allEditable) &&
             !isFirebase &&
-            !((_38 = (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.exportSettings) === null || _38 === void 0 ? void 0 : _38.hideImportCSV)
+            !((_39 = (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.exportSettings) === null || _39 === void 0 ? void 0 : _39.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -697,7 +719,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_40 = (_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.exportSettings) === null || _40 === void 0 ? void 0 : _40.hideExportCSV)
+        !((_41 = (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.exportSettings) === null || _41 === void 0 ? void 0 : _41.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -707,7 +729,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_42 = (_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.exportSettings) === null || _42 === void 0 ? void 0 : _42.hideExportExcel)
+        !((_43 = (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.exportSettings) === null || _43 === void 0 ? void 0 : _43.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -717,7 +739,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_44 = (_43 = props.organise) === null || _43 === void 0 ? void 0 : _43.exportSettings) === null || _44 === void 0 ? void 0 : _44.hideExportPDF)
+        !((_45 = (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.exportSettings) === null || _45 === void 0 ? void 0 : _45.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -727,7 +749,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_46 = (_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.exportSettings) === null || _46 === void 0 ? void 0 : _46.hideExportQR)
+        !((_47 = (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.exportSettings) === null || _47 === void 0 ? void 0 : _47.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -737,7 +759,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_48 = (_47 = props.organise) === null || _47 === void 0 ? void 0 : _47.exportSettings) === null || _48 === void 0 ? void 0 : _48.hideExportQR)
+        !((_49 = (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.exportSettings) === null || _49 === void 0 ? void 0 : _49.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -747,7 +769,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_50 = (_49 = props.organise) === null || _49 === void 0 ? void 0 : _49.exportSettings) === null || _50 === void 0 ? void 0 : _50.hideExportPrint)
+        !((_51 = (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.exportSettings) === null || _51 === void 0 ? void 0 : _51.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -757,7 +779,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_52 = (_51 = props.organise) === null || _51 === void 0 ? void 0 : _51.exportSettings) === null || _52 === void 0 ? void 0 : _52.hideExportDraft)
+        !((_53 = (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.exportSettings) === null || _53 === void 0 ? void 0 : _53.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -766,7 +788,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_53 = props.organise) === null || _53 === void 0 ? void 0 : _53.moreSettings)
+    if ((_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: User Column Visibility Handlers
@@ -1024,6 +1046,173 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         isLive: isLive,
         isLiveOffline: isLiveOffline,
     }); });
+    // INFO: only a gridScroll grid scrolls horizontally
+    var handleResolveScrollScope = function () { return ({
+        start: scrollScopeStartRef.current,
+        end: scrollScopeEndRef.current,
+    }); };
+    var handleResolveScrollAxis = function () {
+        var isGridTab = (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.viewType) === "grid";
+        return isGridTab && renderCheckScrollMode() ? "horizontal" : "vertical";
+    };
+    // INFO: one payload builder for the save effect, the drill-in capture and the flush
+    var handleBuildViewSnapshot = function () {
+        var _a;
+        return (__assign({ filterSearchParams: filterSearchParams, filterSelection: filterSelection, filterReference: filterReference, filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(filterReferenceDate), flexFilters: flexFiltersDebounced.some(function (eachFilter) {
+                return (0, flexFilter_1.isFlexFilterActive)(eachFilter, structure);
+            })
+                ? flexFiltersDebounced.filter(function (eachFilter) {
+                    return (0, flexFilter_1.isFlexFilterActive)(eachFilter, structure);
+                })
+                : undefined, sort: persistedSort !== null && persistedSort !== void 0 ? persistedSort : (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort, pageLimit: pageLimit, 
+            // INFO: scroll mode reloads from page 0; the anchor restores the position
+            pageIndex: renderCheckScrollMode() ? 0 : pageIndex, hiddenColumnIds: structure.filter(function (col) { return col.hide; }).map(function (col) { return col.id; }), 
+            // INFO: raw, so switching bareViewSettings off does not wipe the user's choice
+            userHiddenColumnIds: userHiddenColumnIds, columnOrder: structure.map(function (col) { return col.id; }) }, scrollCaptureRef.current));
+    };
+    handleRegisterViewSnapshot(handleBuildViewSnapshot);
+    //=====================================================================================
+    //SECTION: Saved Views
+    //=====================================================================================
+    var savedViewsKey = (0, viewStatePersistence_1.buildSavedViewsKey)(props.collectionId, (_55 = props.organise) === null || _55 === void 0 ? void 0 : _55.persistKey, (_56 = devSettings.currentUser) === null || _56 === void 0 ? void 0 : _56.userEmail);
+    (0, react_1.useEffect)(function () {
+        if (isSavedViewsEnabled)
+            setSavedViews((0, viewStatePersistence_1.handleReadSavedViews)(savedViewsKey));
+    }, [isSavedViewsEnabled, savedViewsKey]);
+    // INFO: views belong to a tab, so another tab starts with none selected
+    (0, react_1.useEffect)(function () {
+        setActiveSavedViewId(null);
+        setSavedViewName(null);
+        setDeletingSavedViewId(null);
+    }, [viewType]);
+    var handleGetTabSavedViews = function () {
+        var _a, _b;
+        return __spreadArray(__spreadArray([], ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.defaultSavedViews) !== null && _b !== void 0 ? _b : [])
+            .filter(function (eachView) { return !eachView.tabId || eachView.tabId === viewType; })
+            .map(function (eachView, index) {
+            var _a, _b;
+            return ({
+                id: (_a = eachView.id) !== null && _a !== void 0 ? _a : "default-".concat(index),
+                name: eachView.name,
+                tabId: (_b = eachView.tabId) !== null && _b !== void 0 ? _b : viewType,
+                state: eachView.state,
+                locked: true,
+            });
+        }), true), savedViews.filter(function (eachView) { return eachView.tabId === viewType; }), true);
+    };
+    // INFO: a view is the defaults overridden by its own fields, so a field it
+    // leaves out is reset rather than carried over from whatever was on screen
+    var handleResolveViewState = function (state) {
+        var _a, _b, _c, _d;
+        var model = (_a = props.model) !== null && _a !== void 0 ? _a : [];
+        return ((_d = (0, viewStatePersistence_1.handlePruneStaleColumns)(__assign({ filterSearchParams: initialFilterSearchParams, filterSelection: initialFilterSelection, filterReference: initialFilterReference, filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(initialFilterReferenceDate), sort: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.sort, pageLimit: (_c = props.limit) !== null && _c !== void 0 ? _c : 10, userHiddenColumnIds: [], hiddenColumnIds: model
+                .filter(function (eachColumn) { return eachColumn.hide; })
+                .map(function (eachColumn) { return eachColumn.id; }), columnOrder: model.map(function (eachColumn) { return eachColumn.id; }) }, (state !== null && state !== void 0 ? state : {})), model)) !== null && _d !== void 0 ? _d : {});
+    };
+    var handleApplyViewColumns = function (columns, state) {
+        var _a;
+        var order = new Map(((_a = state.columnOrder) !== null && _a !== void 0 ? _a : []).map(function (eachId, index) { return [eachId, index]; }));
+        var ordered = __spreadArray([], columns, true).sort(function (a, b) { var _a, _b; return ((_a = order.get(a.id)) !== null && _a !== void 0 ? _a : order.size) - ((_b = order.get(b.id)) !== null && _b !== void 0 ? _b : order.size); });
+        // INFO: schema-level hides move only in schema-hide mode, and only on this
+        // screen — a personal view never writes back through onChangeHide
+        if (!isSchemaHideMode || !state.hiddenColumnIds)
+            return ordered;
+        return ordered.map(function (eachColumn) {
+            var _a, _b;
+            return (__assign(__assign({}, eachColumn), { hide: (_b = (_a = state.hiddenColumnIds) === null || _a === void 0 ? void 0 : _a.includes(eachColumn.id)) !== null && _b !== void 0 ? _b : false }));
+        });
+    };
+    var handleApplySavedView = function (view) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var next = handleResolveViewState((_a = view === null || view === void 0 ? void 0 : view.state) !== null && _a !== void 0 ? _a : null);
+        var isQueryChanged = !(0, viewStatePersistence_1.handleIsSameViewState)((0, viewStatePersistence_1.handlePickQueryState)(handleBuildViewSnapshot()), (0, viewStatePersistence_1.handlePickQueryState)(next));
+        handleClearFlexFilterTypingTimeout();
+        if (typingTimeout.current) {
+            clearTimeout(typingTimeout.current);
+            typingTimeout.current = null;
+        }
+        setFilterSearch((_b = next.filterSearchParams) !== null && _b !== void 0 ? _b : {});
+        setFilterSearchParams((_c = next.filterSearchParams) !== null && _c !== void 0 ? _c : {});
+        setFilterSelection(((_d = next.filterSelection) !== null && _d !== void 0 ? _d : {}));
+        setFilterReference(((_e = next.filterReference) !== null && _e !== void 0 ? _e : {}));
+        setFilterReferenceDate(next.filterReferenceDate
+            ? (0, viewStatePersistence_1.parseDateFilterState)(next.filterReferenceDate)
+            : initialFilterReferenceDate);
+        handleCommitFlexFilters(((_f = next.flexFilters) === null || _f === void 0 ? void 0 : _f.length) ? next.flexFilters : defaultFlexFilterRow);
+        setPersistedSort(next.sort);
+        if (next.pageLimit)
+            setPageLimit(next.pageLimit);
+        setUserHiddenColumnIds((_g = next.userHiddenColumnIds) !== null && _g !== void 0 ? _g : []);
+        setStructure(function (prev) { return handleApplyViewColumns(prev, next); });
+        // INFO: only a query change refetches — loading with no refetch never ends
+        if (isQueryChanged)
+            handleClearDataByFilter();
+        setActiveSavedViewId((_h = view === null || view === void 0 ? void 0 : view.id) !== null && _h !== void 0 ? _h : null);
+        setDeletingSavedViewId(null);
+    };
+    var handleStoreSavedViews = function (views) {
+        setSavedViews(views);
+        (0, viewStatePersistence_1.handleWriteSavedViews)(savedViewsKey, views);
+    };
+    // INFO: a name already used on this tab is overwritten
+    var handleSaveSavedView = function (name) {
+        var trimmed = name.trim();
+        if (!trimmed)
+            return;
+        var state = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
+        var existing = savedViews.find(function (eachView) { return eachView.tabId === viewType && eachView.name === trimmed; });
+        var saved = existing
+            ? __assign(__assign({}, existing), { state: state }) : { id: (0, uuid_1.v4)(), name: trimmed, tabId: viewType, state: state };
+        handleStoreSavedViews(existing
+            ? savedViews.map(function (eachView) {
+                return eachView.id === existing.id ? saved : eachView;
+            })
+            : __spreadArray(__spreadArray([], savedViews, true), [saved], false));
+        setActiveSavedViewId(saved.id);
+        setSavedViewName(null);
+    };
+    var handleUpdateSavedView = function (id) {
+        var state = (0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot());
+        handleStoreSavedViews(savedViews.map(function (eachView) {
+            return eachView.id === id ? __assign(__assign({}, eachView), { state: state }) : eachView;
+        }));
+    };
+    var handleDeleteSavedView = function (id) {
+        handleStoreSavedViews(savedViews.filter(function (eachView) { return eachView.id !== id; }));
+        if (activeSavedViewId === id)
+            setActiveSavedViewId(null);
+        setDeletingSavedViewId(null);
+    };
+    // INFO: called in the row click, while the list is still mounted and scrolled
+    var handleCaptureListScroll = function (recordId) {
+        var _a, _b;
+        if (!isPersistEnabled)
+            return;
+        scrollCaptureRef.current = (0, viewStatePersistence_1.handleCaptureScrollPosition)(recordId, handleResolveScrollAxis(), handleResolveScrollScope());
+        handleSaveView(handleBuildViewSnapshot());
+        (0, viewStatePersistence_1.handleMarkLastDrill)((_a = props.organise) === null || _a === void 0 ? void 0 : _a.persistViewState, props.collectionId, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.persistKey);
+    };
+    // INFO: a filter, sort or page change shows different rows, so the old position is dropped
+    var scrollCaptureResetInitialised = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        if (!isPersistEnabled)
+            return;
+        if (!scrollCaptureResetInitialised.current) {
+            scrollCaptureResetInitialised.current = true;
+            return;
+        }
+        scrollCaptureRef.current = {};
+        /* eslint-disable */
+    }, [
+        filterSearchParams,
+        filterSelection,
+        filterReference,
+        filterReferenceDate,
+        flexFiltersDebounced,
+        pageIndex,
+        persistedSort,
+    ]);
+    /* eslint-enable */
     // INFO: notify the consumer whenever the applied flex filters change, so a
     // parent can observe live filter state. Uses the debounced state so it fires
     // on committed changes, not every keystroke.
@@ -1035,7 +1224,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // or column visibility change. Active for both "persistent" and "session" modes.
     var persistSaveInitialised = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(function () {
-        var _a;
         if (!isPersistEnabled)
             return;
         // INFO: Skip the first invocation — deps have hydrated initial values from storage,
@@ -1044,26 +1232,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             persistSaveInitialised.current = true;
             return;
         }
-        var activeFlexFilters = flexFiltersDebounced.filter(function (eachFilter) {
-            return (0, flexFilter_1.isFlexFilterActive)(eachFilter, structure);
-        });
-        handleSaveView({
-            filterSearchParams: filterSearchParams,
-            filterSelection: filterSelection,
-            filterReference: filterReference,
-            filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(filterReferenceDate),
-            flexFilters: activeFlexFilters.length ? activeFlexFilters : undefined,
-            sort: persistedSort !== null && persistedSort !== void 0 ? persistedSort : (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort,
-            // INFO: scroll mode always starts from page 0 on reload — persisting
-            // a mid-scroll pageIndex would skip rows on next hydration.
-            pageIndex: renderCheckScrollMode() ? 0 : pageIndex,
-            hiddenColumnIds: structure.filter(function (col) { return col.hide; }).map(function (col) { return col.id; }),
-            // INFO: stored raw rather than through getActiveUserHiddenColumnIds so a
-            // consumer temporarily switching bareViewSettings off does not wipe the
-            // user's saved choice.
-            userHiddenColumnIds: userHiddenColumnIds,
-            columnOrder: structure.map(function (col) { return col.id; }),
-        });
+        handleSaveView(handleBuildViewSnapshot());
+        /* eslint-disable */
     }, [
         filterSearchParams,
         filterSelection,
@@ -1074,7 +1244,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         structure,
         persistedSort,
         userHiddenColumnIds,
+        pageLimit,
     ]);
+    /* eslint-enable */
+    // INFO: re-arm on leaving the list, so each return from a record restores once
+    (0, react_1.useEffect)(function () {
+        if (props.type !== "list")
+            scrollRestoredRef.current = false;
+    }, [props.type]);
+    // INFO: restore only on mount, and only for the list a record was last opened from —
+    // not on a tab switch, and not for the other lists on the page
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c;
+        var identity = "".concat(props.collectionId, "|").concat((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.persistKey) !== null && _b !== void 0 ? _b : "");
+        var isSwitch = scrollIdentityRef.current !== null &&
+            scrollIdentityRef.current !== identity;
+        scrollIdentityRef.current = identity;
+        scrollCaptureRef.current = {
+            scrollAnchorId: persistedState === null || persistedState === void 0 ? void 0 : persistedState.scrollAnchorId,
+            scrollOffset: persistedState === null || persistedState === void 0 ? void 0 : persistedState.scrollOffset,
+        };
+        var isOtherListReturn = !(0, viewStatePersistence_1.handleIsLastDrill)(props.collectionId, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.persistKey);
+        scrollRestoredRef.current = isSwitch || isOtherListReturn;
+        /* eslint-disable */
+    }, [props.collectionId, (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.persistKey]);
+    /* eslint-enable */
+    // INFO: wait a frame — rows land in state one tick before layout
+    (0, react_1.useEffect)(function () {
+        if (!isPersistEnabled)
+            return;
+        if (scrollRestoredRef.current)
+            return;
+        if (props.type !== "list")
+            return;
+        if (tableLoading || spaceTableData.length === 0)
+            return;
+        var frame = requestAnimationFrame(function () {
+            if (scrollRestoredRef.current)
+                return;
+            // INFO: done even if nothing applied, so later data changes do not scroll
+            scrollRestoredRef.current = true;
+            // INFO: the ref, not persistedState — returning from a record often does not remount
+            (0, viewStatePersistence_1.handleRestoreScrollPosition)(scrollCaptureRef.current, handleResolveScrollAxis(), handleResolveScrollScope());
+        });
+        return function () { return cancelAnimationFrame(frame); };
+        /* eslint-disable */
+    }, [isPersistEnabled, props.type, tableLoading, spaceTableData.length]);
+    /* eslint-enable */
     (0, react_1.useEffect)(function () {
         handleCheckOfflineDataLength();
         /* eslint-disable */
@@ -1086,7 +1302,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_54 = props.bareSettings) === null || _54 === void 0 ? void 0 : _54.bareOffline]);
+    }, [props.collectionId, (_58 = props.bareSettings) === null || _58 === void 0 ? void 0 : _58.bareOffline]);
     /* eslint-enable */
     // INFO: MRQ polling — calls handleRefresh every N ms (e.g. 1500) as a fallback.
     // Calls through handleRefreshRef so the interval always dispatches the latest
@@ -1106,7 +1322,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_55 = props.bareSettings) === null || _55 === void 0 ? void 0 : _55.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_59 = props.bareSettings) === null || _59 === void 0 ? void 0 : _59.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -1148,7 +1364,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_56 = props.bareSettings) === null || _56 === void 0 ? void 0 : _56.bareSocketName,
+        (_60 = props.bareSettings) === null || _60 === void 0 ? void 0 : _60.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -1393,10 +1609,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.extendedTabs,
-        (_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.viewId,
-        (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.additionalQuery,
-        (_60 = props.organise) === null || _60 === void 0 ? void 0 : _60.groupBy,
+        (_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.extendedTabs,
+        (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.viewId,
+        (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.additionalQuery,
+        (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.groupBy,
         resolvedType,
     ]);
     /**
@@ -1493,7 +1709,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     changedAttributeIds.forEach(function (id) { return dirtyFieldsRef.current.add(id); });
                 }
             }
-            props.bareSettings.bareUpdateHandleData(selectedData, changedAttributeIds);
+            props.bareSettings.bareUpdateHandleData(selectedData, changedAttributeIds, handleResolveRawData());
         }
         previousSelectedData.current = selectedData;
     }, [selectedData]);
@@ -1537,7 +1753,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.showReadFloatingNav, resolvedType, props.id, loading]);
+    }, [(_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.showReadFloatingNav, resolvedType, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (resolvedType !== "read")
             return;
@@ -2792,6 +3008,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         handlePopUpModal(false);
     };
     //TODO: Bug - try to solve clicking List Object too fast
+    // INFO: the stored document as loaded, only while it belongs to the current id —
+    // a switch to another record keeps the previous doc until the new fetch lands
+    var handleResolveRawData = function () {
+        var _a;
+        var raw = rawReadData.current;
+        if (!props.id || props.id === "new" || !raw)
+            return undefined;
+        return String((_a = raw._id) !== null && _a !== void 0 ? _a : raw.id) === String(props.id) ? raw : undefined;
+    };
     var handleSelectListObjectData = function (id, structureId, objectIndex) {
         var _a;
         var filterObjectModel = structure.find(function (eachModel) {
@@ -3704,7 +3929,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     if (deleteIds && deleteIds.length <= 0)
                         deletable = false;
                     if (!(deletable && ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateHandlePreComplete))) return [3 /*break*/, 3];
-                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePreComplete({})];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePreComplete({}, handleResolveRawData())];
                 case 2:
                     deletable = _k.sent();
                     _k.label = 3;
@@ -3763,7 +3988,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 case 9:
                     if (!res) return [3 /*break*/, 12];
                     if (!((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareUpdateHandlePostComplete)) return [3 /*break*/, 11];
-                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete({})];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete({}, handleResolveRawData())];
                 case 10:
                     _k.sent();
                     _k.label = 11;
@@ -4401,7 +4626,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                     uniqueColumnId = uniqueDataStructure.length > 0 ? uniqueDataStructure[0].id : undefined;
                     if ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareUpdatePrefill) {
-                        props.bareSettings.bareUpdatePrefill(selectedData).map(function (eachField) {
+                        props.bareSettings
+                            .bareUpdatePrefill(selectedData, handleResolveRawData())
+                            .map(function (eachField) {
                             var key = eachField.key, value = eachField.value;
                             createSelectedData_1[key] = value;
                             return null;
@@ -4750,7 +4977,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         !offlineId &&
                         (!isOffline || (isOfflineNetworkListener && !isNetworkOffline));
                     if (!(wentToServer && ((_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareUpdateHandlePostComplete))) return [3 /*break*/, 37];
-                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_e = {}, _e[serverId] = id, _e), createSelectedData_1))];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePostComplete(__assign((_e = {}, _e[serverId] = id, _e), createSelectedData_1), handleResolveRawData())];
                 case 36:
                     _y.sent();
                     _y.label = 37;
@@ -4914,16 +5141,15 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setModalVisible(true);
                     preComplete = true;
                     if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateHandlePreComplete)) return [3 /*break*/, 3];
-                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePreComplete(selectedData)];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandlePreComplete(selectedData, handleResolveRawData())];
                 case 2:
-                    preComplete =
-                        _m.sent();
+                    preComplete = _m.sent();
                     _m.label = 3;
                 case 3:
                     if (!preComplete)
                         throw "Error";
                     if (!((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareUpdateHandleComplete)) return [3 /*break*/, 5];
-                    return [4 /*yield*/, props.bareSettings.bareUpdateHandleComplete(selectedData)];
+                    return [4 /*yield*/, props.bareSettings.bareUpdateHandleComplete(selectedData, handleResolveRawData())];
                 case 4:
                     _m.sent();
                     return [3 /*break*/, 7];
@@ -5679,7 +5905,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     excelFormData.append("data[spaceId]", props.collectionId);
                     excelFormData.append("file", csvFile);
                     if ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareCSVImportSettings) {
-                        updateFields = (_l = (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdatePrefill) === null || _l === void 0 ? void 0 : _l.call(_k, selectedData);
+                        updateFields = (_l = (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdatePrefill) === null || _l === void 0 ? void 0 : _l.call(_k, selectedData, handleResolveRawData());
                         excelFormData.append("prefillValue", JSON.stringify(updateFields));
                     }
                     return [4 /*yield*/, ((_m = props.lib) === null || _m === void 0 ? void 0 : _m.axios({
@@ -6257,9 +6483,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     var handleDeleteModal = function () {
         if ((selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.viewType) !== "feeds") {
-            if (resolvedType === "read" &&
-                props.id &&
-                props.id !== "new") {
+            if (resolvedType === "read" && props.id && props.id !== "new") {
                 setDeleteModal(true);
             }
             else if (resolvedType === "update" && props.id) {
@@ -6710,7 +6934,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 if (((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdatePrefill) && type === "update") {
                     var present_1 = false;
                     props.bareSettings
-                        .bareUpdatePrefill(selectedData)
+                        .bareUpdatePrefill(selectedData, handleResolveRawData())
                         .map(function (eachField) {
                         if (eachField.key === eachAttribute.id)
                             present_1 = true;
@@ -6907,7 +7131,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
             });
         }); };
-        var bareActionComponent = (_e = (_d = (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareUpdateActionComponent) === null || _d === void 0 ? void 0 : _d.call(_c, selectedData, formRef)) !== null && _e !== void 0 ? _e : undefined;
+        var bareActionComponent = (_e = (_d = (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareUpdateActionComponent) === null || _d === void 0 ? void 0 : _d.call(_c, selectedData, formRef, handleResolveRawData())) !== null && _e !== void 0 ? _e : undefined;
         var hasCustomActions = !!bareActionComponent && !handleIsEmptyElement(bareActionComponent);
         var hasActions = bareActionComponent ? hasCustomActions : true;
         var showDelete = canDeleteRecord && props.id !== "new";
@@ -6975,7 +7199,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var _a, _b, _c, _d, _e;
         if (resolvedType !== "read")
             return null;
-        var bareActionComponent = (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionComponent) === null || _b === void 0 ? void 0 : _b.call(_a, selectedData, formRef)) !== null && _c !== void 0 ? _c : undefined;
+        var bareActionComponent = (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionComponent) === null || _b === void 0 ? void 0 : _b.call(_a, selectedData, formRef, handleResolveRawData())) !== null && _c !== void 0 ? _c : undefined;
         var hasCustomActions = !!bareActionComponent && !handleIsEmptyElement(bareActionComponent);
         var showUpdate = !bareActionComponent && canUpdateRecord;
         var showExport = !!((_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.exportSettings) === null || _e === void 0 ? void 0 : _e.enableExportReadPDF);
@@ -7013,7 +7237,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // should not sit at the end of a "continue, continue" flow.
     var renderActionButtons = function (type, _hasTabAlign, _uniqueTabIds) {
         var _a, _b, _c, _d, _e, _f;
-        var bareActionComponent = (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionComponent) === null || _b === void 0 ? void 0 : _b.call(_a, selectedData, formRef)) !== null && _c !== void 0 ? _c : undefined;
+        var bareActionComponent = (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionComponent) === null || _b === void 0 ? void 0 : _b.call(_a, selectedData, formRef, handleResolveRawData())) !== null && _c !== void 0 ? _c : undefined;
         // INFO: every update form carries Save / Submit in the floating bar, so
         // the header keeps only Delete
         var isTabbedUpdate = type === "update";
@@ -7290,7 +7514,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdatePrefill) {
                         props.bareSettings
-                            .bareUpdatePrefill(selectedData)
+                            .bareUpdatePrefill(selectedData, handleResolveRawData())
                             .map(function (eachField) {
                             if (eachField.key === eachModel.id)
                                 present = true;
@@ -7474,7 +7698,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 } })),
                             ((_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.bareUpdateComponentAbove) &&
                                 ((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareUpdateComponent) &&
-                                ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareUpdateComponent(selectedData)),
+                                ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareUpdateComponent(selectedData, handleResolveRawData())),
                             ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareUpdateActionTop) &&
                                 renderStepBar(uniqueTabIds_2),
                             react_1.default.createElement(form_1.Form, { className: "mt-6", ref: formRef, refList: __spreadArray(__spreadArray([], modalFormInputRefs, true), flexTableRefs, true), handleComplete: handleSubmit, disabledOnEnter: disabledOnEnter_1, handleOnFailValidation: handleOnFailValidation },
@@ -7505,7 +7729,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 // the grid, so a consumer's own col-span, a fragment of several cells,
                                 // or a null return all lay out exactly as before; only children with no
                                 // col-span of their own are given the full row.
-                                react_1.default.createElement("div", { className: "contents [&>*:not([class*=col-span])]:col-span-12" }, props.bareSettings.bareUpdateComponent(selectedData)))),
+                                react_1.default.createElement("div", { className: "contents [&>*:not([class*=col-span])]:col-span-12" }, props.bareSettings.bareUpdateComponent(selectedData, handleResolveRawData())))),
                             react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(resolvedType)),
                             react_1.default.createElement("div", { className: "mt-8" }, renderListObject(resolvedType)),
                             !((_17 = props.bareSettings) === null || _17 === void 0 ? void 0 : _17.bareUpdateActionTop) &&
@@ -7515,7 +7739,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 renderActionButtons(resolvedType, hasTabAlign_1, uniqueTabIds_2)))) : (react_1.default.createElement("div", null,
                         ((_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareUpdateComponentAbove) &&
                             ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareUpdateComponent) &&
-                            ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareUpdateComponent(selectedData)),
+                            ((_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareUpdateComponent(selectedData, handleResolveRawData())),
                         ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareUpdateActionTop) &&
                             renderStepBar(uniqueTabIds_2),
                         react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " mt-6"), ref: formRef, refList: __spreadArray(__spreadArray([], modalFormInputRefs, true), flexTableRefs, true), handleComplete: handleSubmit, disabledOnEnter: disabledOnEnter_1, handleOnFailValidation: handleOnFailValidation },
@@ -7528,7 +7752,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             // the grid, so a consumer's own col-span, a fragment of several cells,
                             // or a null return all lay out exactly as before; only children with no
                             // col-span of their own are given the full row.
-                            react_1.default.createElement("div", { className: "contents [&>*:not([class*=col-span])]:col-span-12" }, props.bareSettings.bareUpdateComponent(selectedData)))),
+                            react_1.default.createElement("div", { className: "contents [&>*:not([class*=col-span])]:col-span-12" }, props.bareSettings.bareUpdateComponent(selectedData, handleResolveRawData())))),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(resolvedType)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListObject(resolvedType)),
                         !((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareUpdateActionTop) &&
@@ -7536,7 +7760,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             case "list":
             case "union":
                 var filterComponent_1 = renderSearchContent();
-                var dataComponent = renderTabContent(tabs, resolvedType, viewType);
+                var dataComponent = renderScopedTabContent(tabs, resolvedType, viewType);
                 var actionComponent = renderActionButtons(resolvedType);
                 // INFO: active flex filter count for the icon badge + floating search.
                 // Counts query output so the badge matches what's actually filtered.
@@ -7787,7 +8011,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             renderListActionElements())),
                     renderListNewRowFilterElements(),
                     (schemaPresent || ((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.darkMode })),
-                    renderTabContent(tabs, resolvedType, viewType),
+                    renderScopedTabContent(tabs, resolvedType, viewType),
                     ((_37 = props.bareSettings) === null || _37 === void 0 ? void 0 : _37.bareListMobileFloatingSearch) && (react_1.default.createElement("div", { className: "h-28 md:hidden", "aria-hidden": "true" })),
                     ((_38 = props.bareSettings) === null || _38 === void 0 ? void 0 : _38.bareListMobileFloatingSearch) &&
                         (0, listModule_1.renderFloatingMobileSearch)({
@@ -7868,7 +8092,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             renderObjectTags: renderObjectTags,
             setSelectedData: setSelectedData,
             flexTableRefs: flexTableRefs,
-        }, { signing: signatureSigning, setSigning: setSignatureSigning }, props.onComplete ? true : false, (_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareOffline, (_l = (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdateColumnType) !== null && _l !== void 0 ? _l : "two", (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateIndividualComponent, (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareUpdateMobileView);
+        }, { signing: signatureSigning, setSigning: setSignatureSigning }, props.onComplete ? true : false, (_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareOffline, (_l = (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareUpdateColumnType) !== null && _l !== void 0 ? _l : "two", ((_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareUpdateIndividualComponent)
+            ? function (columnId, ref, data, setData) {
+                var _a, _b, _c;
+                return (_c = (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateIndividualComponent) === null || _b === void 0 ? void 0 : _b.call(_a, columnId, ref, data, setData, handleResolveRawData())) !== null && _c !== void 0 ? _c : null;
+            }
+            : undefined, (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareUpdateMobileView);
     };
     var renderGridAndListData = function (imageTag, type, kanbanGroupId, useColumnName) {
         var gridData = [];
@@ -7891,7 +8120,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 !eachModel.disabled;
         });
         spaceTableData.forEach(function (eachData, index) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             var clonedEachData = JSON.parse(JSON.stringify(eachData));
             var allValues = Object.values(clonedEachData);
             var title = "";
@@ -7977,9 +8206,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
                 return null;
             });
-            if (booleanModels.length &&
-                isKanban &&
-                isListEditable) {
+            if (booleanModels.length && isKanban && isListEditable) {
                 booleanModels.map(function (eachModel) {
                     return listDescArray.push(react_1.default.createElement("div", { className: "flex space-x-1 items-center", key: "kanban-checkbox-".concat(eachModel.id) },
                         react_1.default.createElement("p", null,
@@ -8012,12 +8239,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             if (type === "grid" || type === "kanban") {
                 if (kanbanGroupId)
                     data[kanbanGroupId] = selectedTData[kanbanGroupId];
-                if ((_c = (_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListGridComponent) === null || _c === void 0 ? void 0 : _c.call(_b, eachData)) {
-                    data[type === "grid" ? "extra" : "action"] =
-                        (_e = (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareListGridComponent) === null || _e === void 0 ? void 0 : _e.call(_d, eachData);
-                }
-                if ((_g = (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListGridTags) === null || _g === void 0 ? void 0 : _g.call(_f, eachData)) {
-                    var eachDataTags = (_j = (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareListGridTags) === null || _j === void 0 ? void 0 : _j.call(_h, eachData);
+                var gridComponent = (_c = (_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListGridComponent) === null || _c === void 0 ? void 0 : _c.call(_b, eachData, selectedTData);
+                if (gridComponent)
+                    data[type === "grid" ? "extra" : "action"] = gridComponent;
+                var eachDataTags = (_e = (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareListGridTags) === null || _e === void 0 ? void 0 : _e.call(_d, eachData, selectedTData);
+                if (eachDataTags) {
                     if (Array.isArray(eachDataTags)) {
                         var gridTagList_1 = [];
                         eachDataTags.forEach(function (eachTag) {
@@ -8029,14 +8255,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         data["tags"] = gridTagList_1;
                     }
                 }
-                if ((_l = (_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareListGridRibbonText) === null || _l === void 0 ? void 0 : _l.call(_k, eachData)) {
-                    data["ribbonText"] =
-                        props.bareSettings.bareListGridRibbonText(eachData);
-                }
+                var ribbonText = (_g = (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListGridRibbonText) === null || _g === void 0 ? void 0 : _g.call(_f, eachData, selectedTData);
+                if (ribbonText)
+                    data["ribbonText"] = ribbonText;
                 var eachDataGridImage = "";
-                var gridFallbackImg = (_o = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListGridFallbackImg) === null || _o === void 0 ? void 0 : _o.call(_m, eachData);
+                var gridFallbackImg = (_j = (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareListGridFallbackImg) === null || _j === void 0 ? void 0 : _j.call(_h, eachData, selectedTData);
                 if (clonedEachData[imageTag] && clonedEachData[imageTag] !== " - ") {
-                    eachDataGridImage = (_q = (_p = clonedEachData[imageTag]) === null || _p === void 0 ? void 0 : _p.props) === null || _q === void 0 ? void 0 : _q.src;
+                    eachDataGridImage = (_l = (_k = clonedEachData[imageTag]) === null || _k === void 0 ? void 0 : _k.props) === null || _l === void 0 ? void 0 : _l.src;
                 }
                 else if (gridFallbackImg) {
                     if (typeof gridFallbackImg === "string") {
@@ -8051,7 +8276,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else {
                 data["img"] = clonedEachData[imageTag]
-                    ? (_s = (_r = clonedEachData[imageTag]) === null || _r === void 0 ? void 0 : _r.props) === null || _s === void 0 ? void 0 : _s.src
+                    ? (_o = (_m = clonedEachData[imageTag]) === null || _m === void 0 ? void 0 : _m.props) === null || _o === void 0 ? void 0 : _o.src
                     : "";
             }
             gridData.push(data);
@@ -8327,6 +8552,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                             } }));
                                     }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), onClickRow: function (id) {
                                 var _a, _b;
+                                handleCaptureListScroll(id);
                                 (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                             }, linkType: props.linkType, custom: props.custom, newTabUrl: (_k = (_j = props.newTabUrl) === null || _j === void 0 ? void 0 : _j.default) !== null && _k !== void 0 ? _k : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_m = (_l = props.newTabUrl) === null || _l === void 0 ? void 0 : _l.addons) !== null && _m !== void 0 ? _m : "&type=read&collection=".concat(props.collectionId, "&view=general"), className: "mt-5", lib: { axios: (_o = props.lib) === null || _o === void 0 ? void 0 : _o.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.fixedPagination, advSettings: {
                                 addColumnEnabled: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.addColumnEnabled,
@@ -8446,6 +8672,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }); })
                         : []), true), multiActionFloatingOffset: (_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareListFloatingActionOffset, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
                         var _a, _b;
+                        handleCaptureListScroll(id);
                         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                     }, linkType: props.linkType, custom: props.custom, newTabUrl: (_o = (_m = props.newTabUrl) === null || _m === void 0 ? void 0 : _m.default) !== null && _o !== void 0 ? _o : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_q = (_p = props.newTabUrl) === null || _p === void 0 ? void 0 : _p.addons) !== null && _q !== void 0 ? _q : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                         handlePagination(value);
@@ -8559,6 +8786,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 } }));
                         }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
                     var _a, _b;
+                    handleCaptureListScroll(id);
                     (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                 }, linkType: props.linkType, custom: props.custom, newTabUrl: (_15 = (_14 = props.newTabUrl) === null || _14 === void 0 ? void 0 : _14.default) !== null && _15 !== void 0 ? _15 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.addons) !== null && _17 !== void 0 ? _17 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                     handlePagination(value);
@@ -8628,8 +8856,74 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }, darkMode: (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.darkMode, hidePagination: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.disableEllipsisOnLongWord }));
         }
     };
+    // INFO: `hidden` keeps the markers out of space-y spacing
+    var renderSavedViews = function () {
+        var _a;
+        if (!isSavedViewsEnabled)
+            return null;
+        var views = handleGetTabSavedViews();
+        var activeView = views.find(function (eachView) { return eachView.id === activeSavedViewId; });
+        var isModified = !!activeView &&
+            !(0, viewStatePersistence_1.handleIsSameViewState)((0, viewStatePersistence_1.handlePickViewState)(handleBuildViewSnapshot()), (0, viewStatePersistence_1.handlePickViewState)(handleResolveViewState(activeView.state)));
+        var darkMode = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode;
+        var renderChipClass = function (active) {
+            return "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium ".concat(active
+                ? "border-primary-500 bg-primary-50 text-primary-700"
+                : darkMode
+                    ? "border-gray-600 text-gray-200 hover:bg-gray-700"
+                    : "border-gray-300 text-gray-600 hover:bg-gray-50");
+        };
+        var actionClass = "text-xs font-medium ".concat(darkMode ? "text-primary-300" : "text-primary-600", " hover:underline");
+        return (react_1.default.createElement("div", { "data-testid": "dtw-saved-views", className: "mt-3 flex flex-wrap items-center gap-2" },
+            react_1.default.createElement("span", { className: "text-xs font-medium ".concat(darkMode ? "text-gray-400" : "text-gray-500") }, "Views"),
+            react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-all", className: renderChipClass(!activeView), onClick: function () { return handleApplySavedView(null); } }, "All"),
+            views.map(function (eachView) {
+                return deletingSavedViewId === eachView.id ? (react_1.default.createElement("span", { key: eachView.id, className: renderChipClass(false) },
+                    "Delete \u201C",
+                    eachView.name,
+                    "\u201D?",
+                    react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-confirm-delete-".concat(eachView.id), className: "font-semibold text-red-600", onClick: function () { return handleDeleteSavedView(eachView.id); } }, "Delete"),
+                    react_1.default.createElement("button", { type: "button", className: "text-gray-500", onClick: function () { return setDeletingSavedViewId(null); } }, "Keep"))) : (react_1.default.createElement("span", { key: eachView.id, className: renderChipClass(eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id)) },
+                    react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-".concat(eachView.id), title: eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id) && isModified
+                            ? "Changed since saved"
+                            : undefined, onClick: function () { return handleApplySavedView(eachView); } },
+                        eachView.name,
+                        eachView.id === (activeView === null || activeView === void 0 ? void 0 : activeView.id) && isModified ? " •" : ""),
+                    !eachView.locked && (react_1.default.createElement("button", { type: "button", "aria-label": "Delete ".concat(eachView.name), "data-testid": "dtw-saved-view-delete-".concat(eachView.id), onClick: function () { return setDeletingSavedViewId(eachView.id); } },
+                        react_1.default.createElement(outline_1.XMarkIcon, { className: "h-3.5 w-3.5" })))));
+            }),
+            activeView && isModified && !activeView.locked && (react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-update", className: actionClass, onClick: function () { return handleUpdateSavedView(activeView.id); } },
+                "Update \u201C",
+                activeView.name,
+                "\u201D")),
+            savedViewName === null ? (react_1.default.createElement("button", { type: "button", "data-testid": "dtw-saved-view-new", className: actionClass, onClick: function () { return setSavedViewName(""); } }, "+ Save view")) : (
+            // INFO: a form, so a mobile keyboard's Done saves the view; stopPropagation
+            // keeps the submit from reaching any form around the template
+            react_1.default.createElement("form", { "data-testid": "dtw-saved-view-form", className: "flex items-center gap-1", onSubmit: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleSaveSavedView(savedViewName);
+                } },
+                react_1.default.createElement(textInput_1.TextInput, { id: "dtw-saved-view-name", type: "text", label: "", size: "xs", autoFocus: true, enterKeyHint: "done", darkMode: darkMode, value: savedViewName, placeholder: "View name", containerClassName: "w-32 sm:w-44", onChange: function (event) { return setSavedViewName(event.target.value); }, onKeyDown: function (event) {
+                        if (event.key === "Escape")
+                            setSavedViewName(null);
+                        // INFO: some mobile keyboards send only the keyCode
+                        if (event.key === "Enter" || event.keyCode === 13) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            handleSaveSavedView(savedViewName);
+                        }
+                    } }),
+                react_1.default.createElement("button", { type: "submit", className: actionClass }, "Save"),
+                react_1.default.createElement("button", { type: "button", className: "text-xs text-gray-500", onClick: function () { return setSavedViewName(null); } }, "Cancel")))));
+    };
+    var renderScopedTabContent = function (tabs, dataType, requestedViewType) { return (react_1.default.createElement(react_1.default.Fragment, null,
+        renderSavedViews(),
+        react_1.default.createElement("span", { ref: scrollScopeStartRef, hidden: true, "aria-hidden": "true" }),
+        renderTabContent(tabs, dataType, requestedViewType),
+        react_1.default.createElement("span", { ref: scrollScopeEndRef, hidden: true, "aria-hidden": "true" }))); };
     var renderTabContent = function (tabs, dataType, requestedViewType) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57;
         var matchedTab = tabs.find(function (eachTab) { return eachTab.id === requestedViewType; });
         /**
          * INFO: a list tab must not supply the content of a read view. The selected
@@ -8836,6 +9130,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     setBatchUpdateModal(true);
                                 } }))), onClickRow: function (id) {
                             var _a, _b;
+                            handleCaptureListScroll(id);
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                         }, linkType: props.linkType, custom: props.custom, newTabUrl: (_z = (_y = props.newTabUrl) === null || _y === void 0 ? void 0 : _y.default) !== null && _z !== void 0 ? _z : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_1 = (_0 = props.newTabUrl) === null || _0 === void 0 ? void 0 : _0.addons) !== null && _1 !== void 0 ? _1 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
@@ -8858,6 +9153,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     setBatchUpdateModal(true);
                                 } }))), onClickRow: function (id) {
                             var _a, _b;
+                            handleCaptureListScroll(id);
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                         }, linkType: props.linkType, custom: props.custom, newTabUrl: (_9 = (_8 = props.newTabUrl) === null || _8 === void 0 ? void 0 : _8.default) !== null && _9 !== void 0 ? _9 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_11 = (_10 = props.newTabUrl) === null || _10 === void 0 ? void 0 : _10.addons) !== null && _11 !== void 0 ? _11 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
@@ -8956,22 +9252,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else if (selectedTabData.viewType === "grid") {
                 var isScrollMode = renderCheckScrollMode();
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(grid_1.Grid, { darkMode: (_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.darkMode, darkModeBg: (_19 = props.organise) === null || _19 === void 0 ? void 0 : _19.darkModeBg, paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
+                // INFO: when bareNewDTW is enabled, render NewGrid instead of legacy Grid
+                if ((_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareNewDTW) {
+                    return (react_1.default.createElement(newGrid_1.NewGrid, { darkMode: (_19 = props.organise) === null || _19 === void 0 ? void 0 : _19.darkMode, darkModeBg: (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.darkModeBg, paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
                             var _a, _b;
+                            // INFO: before handleNavigate, which unmounts the grid
+                            handleCaptureListScroll(id);
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_21 = (_20 = props.newTabUrl) === null || _20 === void 0 ? void 0 : _20.default) !== null && _21 !== void 0 ? _21 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_23 = (_22 = props.newTabUrl) === null || _22 === void 0 ? void 0 : _22.addons) !== null && _23 !== void 0 ? _23 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_22 = (_21 = props.newTabUrl) === null || _21 === void 0 ? void 0 : _21.default) !== null && _22 !== void 0 ? _22 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_24 = (_23 = props.newTabUrl) === null || _23 === void 0 ? void 0 : _23.addons) !== null && _24 !== void 0 ? _24 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareListGridColClassName, className: "mt-5", 
-                        // INFO: under the new DTW the grid keeps the same footer as the
-                        // table and list views instead of its own legacy page buttons
-                        hidePagination: ((_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.hidePagination) ||
-                            !!((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareNewDTW), customPaginationSize: customPaginationSize }),
-                    ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareNewDTW) &&
-                        !((_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.hidePagination) && (react_1.default.createElement(newPagination_1.NewPagination, { paginationType: renderResolvedPaginationType(), pageIndex: pageIndex, limit: limit, size: size, cursor: cursor, resultCount: renderGridAndListData(selectedTabData.viewImage, "grid")
-                            .length, customPaginationSize: customPaginationSize, darkMode: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.darkMode, darkModeBg: (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.darkModeBg, handleUpdatePageIndex: function (value) {
+                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareListGridColClassName, className: "mt-5", hidePagination: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.hidePagination, customPaginationSize: customPaginationSize }));
+                }
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(grid_1.Grid, { darkMode: (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.darkMode, darkModeBg: (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.darkModeBg, paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
+                            var _a, _b;
+                            // INFO: before handleNavigate, which unmounts the grid
+                            handleCaptureListScroll(id);
+                            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_30 = (_29 = props.newTabUrl) === null || _29 === void 0 ? void 0 : _29.default) !== null && _30 !== void 0 ? _30 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_32 = (_31 = props.newTabUrl) === null || _31 === void 0 ? void 0 : _31.addons) !== null && _32 !== void 0 ? _32 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        } }))));
+                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_33 = props.bareSettings) === null || _33 === void 0 ? void 0 : _33.bareListGridColClassName, className: "mt-5", hidePagination: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.hidePagination, customPaginationSize: customPaginationSize })));
             }
             else if (selectedTabData.viewType === "calendar") {
                 var calendarSettings_1 = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings;
@@ -9071,7 +9371,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return eventAvailabilities;
                 };
                 // INFO: when bareNewDTW is enabled, render NewCalendar instead of legacy Calendar
-                if ((_31 = props.bareSettings) === null || _31 === void 0 ? void 0 : _31.bareNewDTW) {
+                if ((_35 = props.bareSettings) === null || _35 === void 0 ? void 0 : _35.bareNewDTW) {
                     var newCalendarEvents = renderEventAvailabilities().map(function (ev) {
                         var _a, _b, _c, _d;
                         return ({
@@ -9091,13 +9391,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     // INFO: viewSwitch — optional Month/Week/Agenda toggle. The range
                     // query follows via calendarView ("dayGridMonth" ↔ "timeGridWeek");
                     // agenda lists the fetched month chronologically.
-                    var viewSwitchOptions = (_32 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.viewSwitch) !== null && _32 !== void 0 ? _32 : [];
+                    var viewSwitchOptions = (_36 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.viewSwitch) !== null && _36 !== void 0 ? _36 : [];
                     var VIEW_VARIANT_MAP = {
                         month: "fullMonth",
                         week: "weekTimeGrid",
                         agenda: "agenda",
                     };
-                    var activeVariant = (_33 = VIEW_VARIANT_MAP[newCalendarViewMode]) !== null && _33 !== void 0 ? _33 : "fullMonth";
+                    var activeVariant = (_37 = VIEW_VARIANT_MAP[newCalendarViewMode]) !== null && _37 !== void 0 ? _37 : "fullMonth";
                     return (react_1.default.createElement("div", { className: "mt-4" },
                         viewSwitchOptions.length > 1 && (react_1.default.createElement("div", { className: "mb-2 flex justify-end" },
                             react_1.default.createElement("div", { className: "inline-flex rounded-lg border border-gray-200 bg-white p-0.5" }, viewSwitchOptions.map(function (view) { return (react_1.default.createElement("button", { key: view, type: "button", onClick: function () {
@@ -9139,9 +9439,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 var _a, _b;
                                 if (event.id)
                                     (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", event.id, "general");
-                            }, darkMode: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.darkMode, className: "w-full" }))));
+                            }, darkMode: (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.darkMode, className: "w-full" }))));
                 }
-                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_35 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _35 !== void 0 ? _35 : calendarView, handleMonthChange: function (date) {
+                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_39 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _39 !== void 0 ? _39 : calendarView, handleMonthChange: function (date) {
                         var startOfMonth = (0, dayjs_1.default)(calendarTabMonth).startOf("month");
                         var endOfMonth = (0, dayjs_1.default)(calendarTabMonth).endOf("month");
                         if (!(0, dayjs_1.default)(date).isBetween(startOfMonth, endOfMonth)) {
@@ -9159,7 +9459,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             else if (selectedTabData.viewType === "feeds") {
                 var contentList_1 = [];
                 var feedsSettings_1 = selectedTabData.feedsSettings;
-                var customFeedsData = (_36 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _36 === void 0 ? void 0 : _36.call(feedsSettings_1, tableData, spaceTableData);
+                var customFeedsData = (_40 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _40 === void 0 ? void 0 : _40.call(feedsSettings_1, tableData, spaceTableData);
                 if (customFeedsData && customFeedsData.length > 0) {
                     customFeedsData.map(function (eachData) {
                         var _a, _b, _c, _d;
@@ -9204,21 +9504,25 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement("div", { 
                     // INFO: NewFeeds is already a card like the table and list, so the new
                     // DTW renders it bare; the legacy feed still needs its own surface
-                    className: ((_37 = props.bareSettings) === null || _37 === void 0 ? void 0 : _37.bareNewDTW)
+                    className: ((_41 = props.bareSettings) === null || _41 === void 0 ? void 0 : _41.bareNewDTW)
                         ? ""
-                        : "p-4 rounded-lg ".concat(((_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.darkMode) ? "bg-white/5" : "bg-white") },
-                    ((_39 = props.bareSettings) === null || _39 === void 0 ? void 0 : _39.bareNewDTW) ? (react_1.default.createElement(newFeeds_1.NewFeeds, { bold: true, content: contentList_1, darkMode: (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.darkMode, onClickItem: function (id) { var _a, _b; return (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general"); } })) : (react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_41 = props.organise) === null || _41 === void 0 ? void 0 : _41.darkMode })),
+                        : "p-4 rounded-lg ".concat(((_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.darkMode) ? "bg-white/5" : "bg-white") },
+                    ((_43 = props.bareSettings) === null || _43 === void 0 ? void 0 : _43.bareNewDTW) ? (react_1.default.createElement(newFeeds_1.NewFeeds, { bold: true, content: contentList_1, darkMode: (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.darkMode, onClickItem: function (id) {
+                            var _a, _b;
+                            handleCaptureListScroll(id);
+                            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                        } })) : (react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.darkMode })),
                     react_1.default.createElement("div", { className: "my-10" }),
                     contentList_1.length > 0 &&
-                        !((_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.hidePagination) &&
-                        ((_43 = props.bareSettings) === null || _43 === void 0 ? void 0 : _43.bareNewDTW) && (react_1.default.createElement(newPagination_1.NewPagination, { paginationType: renderResolvedPaginationType(), pageIndex: pageIndex, limit: limit, size: size, cursor: cursor, resultCount: tableData.length, customPaginationSize: customPaginationSize, darkMode: (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.darkMode, darkModeBg: (_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.darkModeBg, handleUpdatePageIndex: function (value) {
+                        !((_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.hidePagination) &&
+                        ((_47 = props.bareSettings) === null || _47 === void 0 ? void 0 : _47.bareNewDTW) && (react_1.default.createElement(newPagination_1.NewPagination, { paginationType: renderResolvedPaginationType(), pageIndex: pageIndex, limit: limit, size: size, cursor: cursor, resultCount: tableData.length, customPaginationSize: customPaginationSize, darkMode: (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.darkMode, darkModeBg: (_49 = props.organise) === null || _49 === void 0 ? void 0 : _49.darkModeBg, handleUpdatePageIndex: function (value) {
                             handlePagination(value);
                         } })),
                     contentList_1.length > 0 &&
-                        !((_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.hidePagination) &&
-                        !((_47 = props.bareSettings) === null || _47 === void 0 ? void 0 : _47.bareNewDTW) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
+                        !((_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.hidePagination) &&
+                        !((_51 = props.bareSettings) === null || _51 === void 0 ? void 0 : _51.bareNewDTW) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.darkMode, customPaginationSize: customPaginationSize }))))));
+                        }, darkMode: (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.darkMode, customPaginationSize: customPaginationSize }))))));
             }
             else if (selectedTabData.viewType === "map") {
                 var mapSettings_1 = selectedTabData.mapSettings;
@@ -9321,7 +9625,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else if (selectedTabData.viewType === "kanban") {
                 var kanbanSettings = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.kanbanSettings;
-                var kanbanTitle_2 = (_49 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _49 !== void 0 ? _49 : "";
+                var kanbanTitle_2 = (_53 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _53 !== void 0 ? _53 : "";
                 var nullColumn_1 = false;
                 var groupBy_1 = [];
                 var groupLabel_1 = [];
@@ -9342,34 +9646,40 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 });
                 var kanbanData = renderGridAndListData("", "kanban", kanbanTitle_2, kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.useColumnName);
                 // INFO: when bareNewDTW is enabled, render NewKanban instead of legacy Kanban
-                if ((_50 = props.bareSettings) === null || _50 === void 0 ? void 0 : _50.bareNewDTW) {
-                    return (react_1.default.createElement(newKanban_1.NewKanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
-                            ? "Data has exceeded limit, please apply filters"
-                            : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: canUpdateRecord, droppable: canUpdateRecord && kanbanDroppable, mobileView: (_51 = props.bareSettings) === null || _51 === void 0 ? void 0 : _51.bareListMobileView, onUpdateData: canUpdateRecord
-                            ? function (cardId, _fromCol, toCol) { return __awaiter(void 0, void 0, void 0, function () {
-                                var _a;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
-                                        case 0:
-                                            setKanbanDroppable(false);
-                                            _b.label = 1;
-                                        case 1:
-                                            _b.trys.push([1, , 3, 4]);
-                                            return [4 /*yield*/, handleSubmitData("update", cardId, kanbanTitle_2, (_a = {}, _a[kanbanTitle_2] = toCol, _a))];
-                                        case 2:
-                                            _b.sent();
-                                            return [3 /*break*/, 4];
-                                        case 3:
-                                            setKanbanDroppable(true);
-                                            return [7 /*endfinally*/];
-                                        case 4: return [2 /*return*/];
-                                    }
-                                });
-                            }); }
-                            : undefined, onClickData: function (id) {
-                            var _a, _b;
-                            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, darkMode: (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.darkMode }));
+                if ((_54 = props.bareSettings) === null || _54 === void 0 ? void 0 : _54.bareNewDTW) {
+                    return (
+                    // INFO: the same top spacing as the table, list and grid
+                    react_1.default.createElement("div", { className: "mt-5" },
+                        react_1.default.createElement(newKanban_1.NewKanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
+                                ? "Data has exceeded limit, please apply filters"
+                                : "", groupCluster: kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.groupCluster, draggable: canUpdateRecord, droppable: canUpdateRecord && kanbanDroppable, mobileView: (_55 = props.bareSettings) === null || _55 === void 0 ? void 0 : _55.bareListMobileView, onUpdateData: canUpdateRecord
+                                ? function (cardId, _fromCol, toCol) { return __awaiter(void 0, void 0, void 0, function () {
+                                    var _a;
+                                    return __generator(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                setKanbanDroppable(false);
+                                                _b.label = 1;
+                                            case 1:
+                                                _b.trys.push([1, , 3, 4]);
+                                                return [4 /*yield*/, handleSubmitData("update", cardId, kanbanTitle_2, (_a = {},
+                                                        _a[kanbanTitle_2] = toCol,
+                                                        _a))];
+                                            case 2:
+                                                _b.sent();
+                                                return [3 /*break*/, 4];
+                                            case 3:
+                                                setKanbanDroppable(true);
+                                                return [7 /*endfinally*/];
+                                            case 4: return [2 /*return*/];
+                                        }
+                                    });
+                                }); }
+                                : undefined, onClickData: function (id) {
+                                var _a, _b;
+                                handleCaptureListScroll(id);
+                                (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
+                            }, darkMode: (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.darkMode, darkModeBg: (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.darkModeBg })));
                 }
                 return (react_1.default.createElement(kanban_1.Kanban, { className: "inline-flex", data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
                         ? "Data has exceeded limit, please apply filters"
@@ -9398,6 +9708,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }); }
                         : undefined, onClickData: function (id) {
                         var _a, _b;
+                        handleCaptureListScroll(id);
                         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
                     } }));
             }
@@ -9436,7 +9747,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return null;
     };
     var renderModalContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
         if (loading) {
             return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
@@ -9668,10 +9979,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         : selectedObjectId
                             ? "update"
                             : "new";
-                    (_0 = (_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareListObjectHandleData) === null || _0 === void 0 ? void 0 : _0.call(_z, listObjectViewType, selectedObjectData);
+                    (_0 = (_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareListObjectHandleData) === null || _0 === void 0 ? void 0 : _0.call(_z, listObjectViewType, selectedObjectData, selectedObjectId
+                        ? (_3 = (_2 = (_1 = handleResolveRawData()) === null || _1 === void 0 ? void 0 : _1[selectedObjectStructureId]) === null || _2 === void 0 ? void 0 : _2.find) === null || _3 === void 0 ? void 0 : _3.call(_2, function (eachRow) { return (eachRow === null || eachRow === void 0 ? void 0 : eachRow.id) === selectedObjectId; })
+                        : undefined);
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_1 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _1 !== void 0 ? _1 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
+                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_4 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _4 !== void 0 ? _4 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
                         ? selectedData
                         : undefined)),
                     react_1.default.createElement("div", { className: "flex justify-end pt-8" },
@@ -9879,7 +10192,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_63 = (_62 = props.renderSettings) === null || _62 === void 0 ? void 0 : _62.renderLoadingUI) === null || _63 === void 0 ? void 0 : _63.call(_62)) && loading ? ((_64 = props.renderSettings) === null || _64 === void 0 ? void 0 : _64.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.darkMode, darkModeBg: (_66 = props.organise) === null || _66 === void 0 ? void 0 : _66.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_67 = (_66 = props.renderSettings) === null || _66 === void 0 ? void 0 : _66.renderLoadingUI) === null || _67 === void 0 ? void 0 : _67.call(_66)) && loading ? ((_68 = props.renderSettings) === null || _68 === void 0 ? void 0 : _68.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_69 = props.organise) === null || _69 === void 0 ? void 0 : _69.darkMode, darkModeBg: (_70 = props.organise) === null || _70 === void 0 ? void 0 : _70.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;
@@ -9890,7 +10203,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     setExportCSVEmail((_b = (_a = props.devSettings.currentUser) === null || _a === void 0 ? void 0 : _a.userEmail) !== null && _b !== void 0 ? _b : "");
                 }
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) })),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.darkMode, darkModeBg: (_68 = props.organise) === null || _68 === void 0 ? void 0 : _68.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_71 = props.organise) === null || _71 === void 0 ? void 0 : _71.darkMode, darkModeBg: (_72 = props.organise) === null || _72 === void 0 ? void 0 : _72.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
                 return (react_1.default.createElement(referenceModal_1.ReferenceModal, { referenceModelSchema: referenceModelSchema, referenceDataStructure: referenceCreationModal, devSettings: props.devSettings, handleCreateRefId: function (dataId) {
                         if (dataId) {
                             var currentValue = selectedData[referenceCreationModal.id];
@@ -9906,19 +10219,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setReferenceCreationModal({ id: "", name: "", type: "string" });
             } }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_69 = props.organise) === null || _69 === void 0 ? void 0 : _69.darkMode, darkModeBg: (_70 = props.organise) === null || _70 === void 0 ? void 0 : _70.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.darkMode, darkModeBg: (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
                 setReferenceDeleteTableData({});
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_71 = props.organise) === null || _71 === void 0 ? void 0 : _71.darkMode, darkModeBg: (_72 = props.organise) === null || _72 === void 0 ? void 0 : _72.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.darkMode, darkModeBg: (_76 = props.organise) === null || _76 === void 0 ? void 0 : _76.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
                 setDeletePasscodeInput("");
                 setDeleteModal(!deleteModal);
                 setDeleteFeedId("");
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.darkMode, darkModeBg: (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_77 = props.organise) === null || _77 === void 0 ? void 0 : _77.darkMode, darkModeBg: (_78 = props.organise) === null || _78 === void 0 ? void 0 : _78.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
                 setBatchUpdateData({ columnId: "", columnData: {} });
                 setBatchUpdateModal(false);
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.darkMode, darkModeBg: (_76 = props.organise) === null || _76 === void 0 ? void 0 : _76.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_79 = props.organise) === null || _79 === void 0 ? void 0 : _79.darkMode, darkModeBg: (_80 = props.organise) === null || _80 === void 0 ? void 0 : _80.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
                 var _a;
                 if (props.space)
                     return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
@@ -9926,7 +10239,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setSelectedAuthMethod("");
             } }),
-        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_77 = props.organise) === null || _77 === void 0 ? void 0 : _77.darkMode, darkModeBg: (_78 = props.organise) === null || _78 === void 0 ? void 0 : _78.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
+        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_81 = props.organise) === null || _81 === void 0 ? void 0 : _81.darkMode, darkModeBg: (_82 = props.organise) === null || _82 === void 0 ? void 0 : _82.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
                 var _a, _b;
                 return (react_1.default.createElement(activityModal_1.ActivityModal, { title: props.title && typeof props.title === "string"
                         ? props.title