@procore/saved-views 6.0.0 → 6.0.2

package/dist/legacy/index.d.mts

@@ -73,10 +73,11 @@ interface ISavedViewsProps extends Omit<IBaseSavedViewsProps, 'stickyViewsKey'>
     }) => ISavedView;
     tableConfig: ISmartGridConfig | DataTableConfig;
     provider: TableProvider;
+    isPanelOpen?: boolean;
 }
 
 interface IDataTableSavedViewsExternalConsumerProps extends IBaseSavedViewsProps {
-    tableApi: TableApi;
+    tableApi?: TableApi;
     defaultViews: IDataTableDefaultViewConfig[];
     columnDefinitions: ColumnDefinition[];
 }

package/dist/legacy/index.d.ts

@@ -73,10 +73,11 @@ interface ISavedViewsProps extends Omit<IBaseSavedViewsProps, 'stickyViewsKey'>
     }) => ISavedView;
     tableConfig: ISmartGridConfig | DataTableConfig;
     provider: TableProvider;
+    isPanelOpen?: boolean;
 }
 
 interface IDataTableSavedViewsExternalConsumerProps extends IBaseSavedViewsProps {
-    tableApi: TableApi;
+    tableApi?: TableApi;
     defaultViews: IDataTableDefaultViewConfig[];
     columnDefinitions: ColumnDefinition[];
 }

package/dist/legacy/index.js

@@ -8774,9 +8774,36 @@ var bt = "__sc-".concat(a, "__");
 // src/components/EnvironmentI18nProvider.tsx
 var import_react2 = __toESM(require("react"));
 var import_core_react = require("@procore/core-react");
+
+// src/utils/translations/translationCache.ts
+var CACHE_KEY_PREFIX = "sg-saved-views-translations";
+function cacheKey(locale) {
+  return `${CACHE_KEY_PREFIX}-${locale}`;
+}
+function readCache(locale) {
+  try {
+    const raw = localStorage.getItem(cacheKey(locale));
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function writeCache(locale, translations) {
+  try {
+    localStorage.setItem(cacheKey(locale), JSON.stringify(translations));
+  } catch {
+  }
+}
+
+// src/components/EnvironmentI18nProvider.tsx
 var import_cdn_translations = require("@procore/cdn-translations");
 var useCDNTranslations = () => {
   const i18n = (0, import_core_react.useI18nContext)();
+  const cachedTranslations = (0, import_react2.useMemo)(
+    () => readCache(i18n.locale),
+    [i18n.locale]
+  );
   const cdnTranslations = (0, import_cdn_translations.useRequestTranslations)(
     {
       type: "file",
@@ -8791,8 +8818,17 @@ var useCDNTranslations = () => {
       enableCDN: i18n.enableCDN
     }
   );
+  (0, import_react2.useEffect)(() => {
+    if (cdnTranslations.status === "resolved" && cdnTranslations.translations) {
+      writeCache(
+        i18n.locale,
+        cdnTranslations.translations
+      );
+    }
+  }, [cdnTranslations.status, cdnTranslations.translations, i18n.locale]);
+  const translationsToUse = cdnTranslations.status === "resolved" ? cdnTranslations.translations : cachedTranslations ?? getTranslations(i18n.locale);
   return (0, import_core_react.useI18n)({
-    translations: cdnTranslations.translations,
+    translations: translationsToUse,
     locale: i18n.locale
   });
 };
@@ -9183,7 +9219,6 @@ function setSmartGridConfig(api, config) {
   });
   api.setColumnGroupState(config.columnGroupState);
   api.setRowGroupColumns(config.rowGroupState);
-  api.setFilterModel(config.filterState);
   if (config.rowHeight) {
     api.setGridOption("rowHeight", config.rowHeight);
   }
@@ -9227,6 +9262,7 @@ var getColumnIdentifier = (col) => {
   return "";
 };
 var updateTableConfig = (view, tableApi, provider) => {
+  var _a, _b, _c;
   if (provider === "smart-grid") {
     setSmartGridConfig(
       tableApi,
@@ -9236,11 +9272,21 @@ var updateTableConfig = (view, tableApi, provider) => {
     const dataTableApi = tableApi;
     const tableConfig = view.table_config;
     if (tableConfig) {
-      const rowHeight = (tableConfig == null ? void 0 : tableConfig.rowHeight) ?? (dataTableApi == null ? void 0 : dataTableApi.getTableConfiguration().rowHeight);
+      const currentTableConfig = (_a = dataTableApi == null ? void 0 : dataTableApi.getTableConfiguration) == null ? void 0 : _a.call(dataTableApi);
+      const rowHeight = (tableConfig == null ? void 0 : tableConfig.rowHeight) ?? (currentTableConfig == null ? void 0 : currentTableConfig.rowHeight);
+      const hasServerFilters = Boolean((_b = currentTableConfig == null ? void 0 : currentTableConfig.serverFilters) == null ? void 0 : _b.length) || Boolean((_c = tableConfig == null ? void 0 : tableConfig.serverFilters) == null ? void 0 : _c.length);
+      const usesServerSideFiltering = hasServerFilters;
       if (rowHeight !== void 0) {
         dataTableApi == null ? void 0 : dataTableApi.setRowHeight(rowHeight);
       }
-      dataTableApi == null ? void 0 : dataTableApi.setTableConfiguration(tableConfig);
+      if (usesServerSideFiltering) {
+        dataTableApi == null ? void 0 : dataTableApi.setTableConfiguration({
+          ...tableConfig,
+          filters: void 0
+        });
+      } else {
+        dataTableApi == null ? void 0 : dataTableApi.setTableConfiguration(tableConfig);
+      }
     }
   }
 };
@@ -9605,7 +9651,7 @@ var PanelContent = (props) => {
 
 // src/components/saved-views/SavedViews.tsx
 var import_core_react15 = require("@procore/core-react");
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_react_query3 = require("@tanstack/react-query");
 var import_toast_alert3 = require("@procore/toast-alert");
 
@@ -10048,7 +10094,7 @@ var SharedViewFormModal = ({
 };
 
 // src/utils/hooks/useViewSelection.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_router_dom = require("react-router-dom");
 var import_core_react14 = require("@procore/core-react");
 
@@ -10074,6 +10120,16 @@ var ViewStorage = {
   }
 };
 
+// src/utils/hooks/useLatest.ts
+var import_react12 = require("react");
+var useLatest = (callback) => {
+  const ref = (0, import_react12.useRef)(callback);
+  (0, import_react12.useLayoutEffect)(() => {
+    ref.current = callback;
+  });
+  return (0, import_react12.useCallback)((...args) => ref.current(...args), []);
+};
+
 // src/utils/hooks/useViewSelection.ts
 var isSmartGridConfig = (config) => {
   return config != null && "rowGroupState" in config;
@@ -10125,31 +10181,31 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
   const storageKey = `savedView_${config.domain}_${config.tableName}_${config.companyId}_${projectIdSegment}_${config.userId}`;
   const temporaryStorageKey = `${storageKey}-temporary`;
   const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
-  const previousSavedViewParamRef = (0, import_react12.useRef)(null);
-  const [selectedSavedView, setSelectedSavedView] = (0, import_react12.useState)(() => {
+  const previousSavedViewParamRef = (0, import_react13.useRef)(null);
+  const [selectedSavedView, setSelectedSavedView] = (0, import_react13.useState)(() => {
     const stored = ViewStorage.load(storageKey, config.defaultView);
     return stored ?? config.defaultView;
   });
-  const [temporaryView, setTemporaryView] = (0, import_react12.useState)(() => {
+  const [temporaryView, setTemporaryView] = (0, import_react13.useState)(() => {
     const loaded = ViewStorage.load(temporaryStorageKey, config.defaultView);
     return loaded && (loaded.id === "temporary" || loaded.view_level === "temporary") ? loaded : null;
   });
-  const persistViewToStorageAndUrl = (0, import_react12.useCallback)(
+  const persistViewToStorageAndUrl = (0, import_react13.useCallback)(
     (view) => {
       ViewStorage.save(storageKey, view);
       setViewInUrl(view, setSearchParams);
     },
     [storageKey, setSearchParams]
   );
-  const baseViews = (0, import_react12.useMemo)(
+  const baseViews = (0, import_react13.useMemo)(
     () => [...savedViews ?? [], ...presetViews ?? []],
     [savedViews, presetViews]
   );
-  const allViews = (0, import_react12.useMemo)(
+  const allViews = (0, import_react13.useMemo)(
     () => temporaryView ? [...baseViews, temporaryView] : baseViews,
     [baseViews, temporaryView]
   );
-  const selectView = (0, import_react12.useCallback)(
+  const selectView = (0, import_react13.useCallback)(
     (view) => {
       const viewToSelect = config.onSelect({ item: view });
       setSelectedSavedView(viewToSelect);
@@ -10158,7 +10214,7 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
     },
     [config, persistViewToStorageAndUrl]
   );
-  const createTemporaryView = (0, import_react12.useCallback)(
+  const createTemporaryView = (0, import_react13.useCallback)(
     (fetchedView) => {
       const tempView = {
         ...fetchedView,
@@ -10173,30 +10229,27 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
     },
     [temporaryStorageKey, selectView]
   );
-  const clearTemporaryView = (0, import_react12.useCallback)(() => {
+  const clearTemporaryView = (0, import_react13.useCallback)(() => {
     ViewStorage.remove(temporaryStorageKey);
     setTemporaryView(null);
     selectView(config.defaultView);
   }, [temporaryStorageKey, config.defaultView, selectView]);
-  const isViewAlreadySelected = (0, import_react12.useCallback)(
+  const isViewAlreadySelected = (0, import_react13.useCallback)(
     (viewId) => checkIsViewSelected(selectedSavedView, viewId),
     [selectedSavedView]
   );
-  const handleSavedViewFromUrl = (0, import_react12.useCallback)(
-    (viewId) => {
-      if (isViewAlreadySelected(viewId)) {
-        return;
-      }
-      const viewInList = findViewByToken(allViews, viewId);
-      if (viewInList) {
-        selectView(viewInList);
-      } else {
-        openSharedViewModal(viewId);
-      }
-    },
-    [isViewAlreadySelected, openSharedViewModal, allViews, selectView]
-  );
-  (0, import_react12.useEffect)(() => {
+  const handleSavedViewFromUrl = useLatest((viewId) => {
+    if (isViewAlreadySelected(viewId)) {
+      return;
+    }
+    const viewInList = findViewByToken(allViews, viewId);
+    if (viewInList) {
+      selectView(viewInList);
+    } else {
+      openSharedViewModal(viewId);
+    }
+  });
+  (0, import_react13.useEffect)(() => {
     const savedViewId = searchParams.get("saved-view");
     restoreUrlParameter(
       savedViewId,
@@ -10210,14 +10263,14 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
       handleSavedViewFromUrl(savedViewId);
     }
   }, [searchParams, handleSavedViewFromUrl, allViews.length]);
-  const previousRowGroupStateRef = (0, import_react12.useRef)(
+  const previousRowGroupStateRef = (0, import_react13.useRef)(
     isSmartGridConfig(tableConfig) ? tableConfig.rowGroupState : void 0
   );
-  const selectedViewRef = (0, import_react12.useRef)(selectedSavedView);
+  const selectedViewRef = (0, import_react13.useRef)(selectedSavedView);
   selectedViewRef.current = selectedSavedView;
-  const defaultViewRef = (0, import_react12.useRef)(config.defaultView);
+  const defaultViewRef = (0, import_react13.useRef)(config.defaultView);
   defaultViewRef.current = config.defaultView;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     var _a;
     if (!isSmartGridConfig(tableConfig) || !(presetViews == null ? void 0 : presetViews.length)) return;
     const currentView = selectedViewRef.current;
@@ -10257,7 +10310,57 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
   };
 };
 
+// src/components/saved-views/FocusScopeToggle.tsx
+var import_focus = require("@react-aria/focus");
+var import_react14 = require("react");
+var useFocusScopeToggle = (isOpen) => {
+  const focusManager = (0, import_focus.useFocusManager)();
+  const triggerRef = (0, import_react14.useRef)(null);
+  const firstFocusedElementRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
+    var _a, _b;
+    const handleKeyDown = (event) => {
+      var _a2;
+      if (!event.shiftKey || event.key !== "Tab") {
+        return;
+      }
+      if (document.activeElement !== firstFocusedElementRef.current) {
+        return;
+      }
+      event.preventDefault();
+      (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+    };
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+      focusManager == null ? void 0 : focusManager.focusFirst({ tabbable: true });
+      firstFocusedElementRef.current = document.activeElement;
+      (_a = firstFocusedElementRef.current) == null ? void 0 : _a.addEventListener(
+        "keydown",
+        handleKeyDown
+      );
+    } else {
+      firstFocusedElementRef.current = null;
+      const activeElement = document.activeElement;
+      if (!activeElement || activeElement === document.body) {
+        (_b = triggerRef.current) == null ? void 0 : _b.focus();
+      }
+    }
+    return () => {
+      var _a2;
+      (_a2 = firstFocusedElementRef.current) == null ? void 0 : _a2.removeEventListener(
+        "keydown",
+        handleKeyDown
+      );
+    };
+  }, [isOpen, focusManager]);
+};
+var FocusScopeToggle = ({ isOpen }) => {
+  useFocusScopeToggle(isOpen);
+  return null;
+};
+
 // src/components/saved-views/SavedViews.tsx
+var import_focus2 = require("@react-aria/focus");
 var StyledPanel = pt.div`
   border: ${({ provider }) => provider === "data-table" ? "1px solid #d6dadc" : "none"};
 `;
@@ -10274,13 +10377,13 @@ var SavedViewsContent = (props) => {
   const { mutate: deleteSavedView } = useDeleteSavedView(queryInput);
   const { showToast } = (0, import_toast_alert3.useToastAlertContext)();
   const i18n = (0, import_core_react15.useI18nContext)();
-  const [activeModal, setActiveModal] = (0, import_react13.useState)(null);
-  const [modalData, setModalData] = (0, import_react13.useState)(null);
+  const [activeModal, setActiveModal] = (0, import_react15.useState)(null);
+  const [modalData, setModalData] = (0, import_react15.useState)(null);
   const openModal = (type, data) => {
     setActiveModal(type);
     setModalData(data ?? null);
   };
-  const closeModal = (0, import_react13.useCallback)(() => {
+  const closeModal = (0, import_react15.useCallback)(() => {
     setActiveModal(null);
     setModalData(null);
   }, []);
@@ -10320,7 +10423,7 @@ var SavedViewsContent = (props) => {
     error: createError,
     reset: resetCreateError
   } = useCreateSavedView(queryInput);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (fetchError) {
       showToast.error(i18n.t("savedViews.errors.notFound"));
       selectView(selectedView ?? props.defaultView);
@@ -10368,19 +10471,19 @@ var SavedViewsContent = (props) => {
     deleteSelectedView();
     closeModal();
   };
-  return /* @__PURE__ */ import_react13.default.createElement(StyledPanel, { id: "saved-views-panel", provider: props.provider }, /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(import_focus2.FocusScope, { contain: false }, /* @__PURE__ */ import_react15.default.createElement(StyledPanel, { id: "saved-views-panel", provider: props.provider }, /* @__PURE__ */ import_react15.default.createElement(FocusScopeToggle, { isOpen: props.isPanelOpen ?? true }), /* @__PURE__ */ import_react15.default.createElement(
     ExpandedPanel,
     {
       "data-testid": "saved-view-expanded-panel",
       provider: props.provider
     },
-    /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Panel.Header, { id: "saved-views-collections-panel-header" }, /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Panel.Title, null, /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Box, { paddingRight: "sm" }, i18n.t("savedViews.title")), /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react15.default.createElement(import_core_react15.Panel.Header, { id: "saved-views-collections-panel-header" }, /* @__PURE__ */ import_react15.default.createElement(import_core_react15.Panel.Title, null, /* @__PURE__ */ import_react15.default.createElement(import_core_react15.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react15.default.createElement(import_core_react15.Box, { paddingRight: "sm" }, i18n.t("savedViews.title")), /* @__PURE__ */ import_react15.default.createElement(
       import_core_react15.Tooltip,
       {
         showDelay: 200,
-        overlay: /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Tooltip.Content, null, i18n.t("savedViews.tooltip"))
+        overlay: /* @__PURE__ */ import_react15.default.createElement(import_core_react15.Tooltip.Content, null, i18n.t("savedViews.tooltip"))
       },
-      /* @__PURE__ */ import_react13.default.createElement(
+      /* @__PURE__ */ import_react15.default.createElement(
         Help_default,
         {
           tabIndex: 0,
@@ -10388,16 +10491,16 @@ var SavedViewsContent = (props) => {
           "aria-label": i18n.t("savedViews.tooltip")
         }
       )
-    ))), /* @__PURE__ */ import_react13.default.createElement(
+    ))), /* @__PURE__ */ import_react15.default.createElement(
       import_core_react15.Tooltip,
       {
         overlay: i18n.t("savedViews.actions.create"),
         showDelay: 1e3
       },
-      /* @__PURE__ */ import_react13.default.createElement(
+      /* @__PURE__ */ import_react15.default.createElement(
         import_core_react15.Button,
         {
-          icon: /* @__PURE__ */ import_react13.default.createElement(Plus_default, null),
+          icon: /* @__PURE__ */ import_react15.default.createElement(Plus_default, null),
           variant: "secondary",
           "data-testid": "expanded-panel-create-button",
           onClick: () => openModal("create" /* CREATE */),
@@ -10406,7 +10509,7 @@ var SavedViewsContent = (props) => {
         i18n.t("savedViews.actions.create")
       )
     )),
-    /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Panel.Body, { style: { display: "flex", flexFlow: "column" } }, /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react15.default.createElement(import_core_react15.Panel.Body, { style: { display: "flex", flexFlow: "column" } }, /* @__PURE__ */ import_react15.default.createElement(
       PanelContent,
       {
         onSelect: ({ item }) => selectView(item),
@@ -10423,7 +10526,7 @@ var SavedViewsContent = (props) => {
         onClearTemporary: clearTemporaryView
       }
     ))
-  ), (isModalOpen("create" /* CREATE */) || isModalOpen("update" /* UPDATE */)) && /* @__PURE__ */ import_react13.default.createElement(
+  ), (isModalOpen("create" /* CREATE */) || isModalOpen("update" /* UPDATE */)) && /* @__PURE__ */ import_react15.default.createElement(
     FormModal,
     {
       open: true,
@@ -10437,14 +10540,14 @@ var SavedViewsContent = (props) => {
       setOpenEditCreateModal: closeModal,
       defaultView: props.defaultView
     }
-  ), selectedView && isModalOpen("delete" /* DELETE */) && /* @__PURE__ */ import_react13.default.createElement(
+  ), selectedView && isModalOpen("delete" /* DELETE */) && /* @__PURE__ */ import_react15.default.createElement(
     SavedViewsDeleteConfirmationModalShared,
     {
       open: true,
       onDelete: confirmDeleteAndCloseModal,
       onCancel: closeModal
     }
-  ), fetchedView && isModalOpen("sharedView" /* SHARED_VIEW */) && /* @__PURE__ */ import_react13.default.createElement(
+  ), fetchedView && isModalOpen("sharedView" /* SHARED_VIEW */) && /* @__PURE__ */ import_react15.default.createElement(
     SharedViewFormModal,
     {
       open: true,
@@ -10456,17 +10559,17 @@ var SavedViewsContent = (props) => {
       isCreating,
       resetCreateError
     }
-  ));
+  )));
 };
 var SavedViews = (props) => {
-  return /* @__PURE__ */ import_react13.default.createElement(EnvironmentI18nProvider, null, /* @__PURE__ */ import_react13.default.createElement(import_react_query3.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ import_react13.default.createElement(import_toast_alert3.ToastAlertProvider, null, /* @__PURE__ */ import_react13.default.createElement(SavedViewsContent, { ...props }))));
+  return /* @__PURE__ */ import_react15.default.createElement(EnvironmentI18nProvider, null, /* @__PURE__ */ import_react15.default.createElement(import_react_query3.QueryClientProvider, { client: queryClient }, /* @__PURE__ */ import_react15.default.createElement(import_toast_alert3.ToastAlertProvider, null, /* @__PURE__ */ import_react15.default.createElement(SavedViewsContent, { ...props }))));
 };
 
 // src/components/adapters/smart-grid/SmartGridSavedViews.tsx
-var import_react16 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/components/adapters/smart-grid/SmartGridDefaultSavedView.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var DEFAULT_COLUMN_STATE = {
   hide: false,
   pinned: null,
@@ -10514,7 +10617,7 @@ var extractDefaultView = (gridApi, receivedConfig) => {
   return result;
 };
 var useNormalizedDefaultViews = (defaultViews, gridApi) => {
-  return (0, import_react14.useMemo)(() => {
+  return (0, import_react16.useMemo)(() => {
     if (!gridApi)
       return defaultViews.map((view) => ({ ...view, share_token: view.id }));
     return defaultViews.map((view) => ({
@@ -10526,7 +10629,7 @@ var useNormalizedDefaultViews = (defaultViews, gridApi) => {
 };
 
 // src/components/adapters/smart-grid/useSmartGridConfig.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 var GRID_STATE_EVENTS = [
   "sortChanged",
   "filterOpened",
@@ -10542,10 +10645,10 @@ var GRID_STATE_EVENTS = [
   "gridReady"
 ];
 var useSmartGridConfig = (gridApi) => {
-  const [config, setConfig] = (0, import_react15.useState)(
+  const [config, setConfig] = (0, import_react17.useState)(
     () => getSmartGridConfig(gridApi)
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!gridApi) return;
     const updateConfig = () => {
       setConfig(getSmartGridConfig(gridApi));
@@ -10562,19 +10665,48 @@ var useSmartGridConfig = (gridApi) => {
   return { config, setConfig };
 };
 
+// src/components/adapters/smart-grid/useSavedViewsPanelOpen.ts
+var import_react18 = require("react");
+var SAVED_VIEWS_PANEL_ID = "savedViews";
+var useSavedViewsPanelOpen = (gridApi) => {
+  var _a;
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(
+    ((_a = gridApi.getOpenedToolPanel) == null ? void 0 : _a.call(gridApi)) === SAVED_VIEWS_PANEL_ID
+  );
+  (0, import_react18.useEffect)(() => {
+    var _a2;
+    const syncOpenState = () => {
+      var _a3;
+      setIsOpen(((_a3 = gridApi.getOpenedToolPanel) == null ? void 0 : _a3.call(gridApi)) === SAVED_VIEWS_PANEL_ID);
+    };
+    syncOpenState();
+    (_a2 = gridApi.addEventListener) == null ? void 0 : _a2.call(gridApi, "toolPanelVisibleChanged", syncOpenState);
+    return () => {
+      var _a3;
+      (_a3 = gridApi.removeEventListener) == null ? void 0 : _a3.call(gridApi, "toolPanelVisibleChanged", syncOpenState);
+    };
+  }, [gridApi]);
+  return isOpen;
+};
+
 // src/components/adapters/smart-grid/SmartGridSavedViews.tsx
 var SmartGridSavedViews = (props) => {
   const { gridApi, userId, projectId, companyId } = props;
   const { config: tableConfig, setConfig: setTableConfig } = useSmartGridConfig(gridApi);
+  const isPanelOpen = useSavedViewsPanelOpen(gridApi);
   const presetViews = useNormalizedDefaultViews(props.defaultViews, gridApi);
   const defaultView = presetViews.find((view) => view.id === "default") ?? presetViews[0];
-  const onSelect = (0, import_react16.useCallback)(
+  const onSelect = (0, import_react19.useCallback)(
     ({ item }) => {
+      var _a;
       if (!gridApi) return item;
       const isPresetView = item.view_level === "default";
       if (isPresetView) {
         updateTableConfig(item, gridApi, "smart-grid");
-        setTableConfig(item.table_config);
+        setTableConfig({
+          ...item.table_config,
+          filterState: ((_a = gridApi.getFilterModel) == null ? void 0 : _a.call(gridApi)) ?? {}
+        });
         return item;
       }
       const updatedView = {
@@ -10585,12 +10717,14 @@ var SmartGridSavedViews = (props) => {
         )
       };
       updateTableConfig(updatedView, gridApi, "smart-grid");
-      setTableConfig(updatedView.table_config);
+      const updatedConfig = updatedView.table_config;
+      gridApi.setFilterModel(updatedConfig.filterState ?? {});
+      setTableConfig(updatedConfig);
       return updatedView;
     },
     [gridApi, tableConfig, setTableConfig]
   );
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     SavedViews,
     {
       onSelect,
@@ -10602,16 +10736,17 @@ var SmartGridSavedViews = (props) => {
       defaultView,
       presetViews,
       tableName: props.tableName,
-      tableConfig
+      tableConfig,
+      isPanelOpen
     }
   );
 };
 
 // src/components/adapters/data-table/DataTableSavedViews.tsx
-var import_react18 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 
 // src/components/adapters/data-table/DataTableDefaultSavedView.tsx
-var import_react17 = require("react");
+var import_react20 = require("react");
 var DEFAULT_COLUMN_STATE2 = {
   hidden: false,
   pinned: null,
@@ -10659,7 +10794,7 @@ var extractDefaultView2 = (columnDefinitions, receivedConfigFromTool) => {
   return result;
 };
 var useNormalizedDefaultViews2 = (defaultViews, columnDefinitions) => {
-  return (0, import_react17.useMemo)(
+  return (0, import_react20.useMemo)(
     () => defaultViews.map((view) => ({
       ...view,
       share_token: view.id,
@@ -10670,32 +10805,37 @@ var useNormalizedDefaultViews2 = (defaultViews, columnDefinitions) => {
 };
 
 // src/components/adapters/data-table/DataTableSavedViews.tsx
-var DataTableSavedViews = (0, import_react18.forwardRef)((props, ref) => {
+var DataTableSavedViews = (0, import_react21.forwardRef)((props, ref) => {
   const { tableApi, userId, projectId, companyId } = props;
   const presetViews = useNormalizedDefaultViews2(
     props.defaultViews,
     props.columnDefinitions
   );
   const defaultView = presetViews.find((view) => view.id === "default") ?? presetViews[0];
-  const [internalTableConfig, setInternalTableConfig] = (0, import_react18.useState)(
+  const [internalTableConfig, setInternalTableConfig] = (0, import_react21.useState)(
     ViewStorage.load(props.stickyViewsKey, defaultView).table_config
   );
-  (0, import_react18.useImperativeHandle)(ref, () => ({
+  (0, import_react21.useImperativeHandle)(ref, () => ({
     setTableConfig: (newConfig) => {
       setInternalTableConfig(newConfig);
     }
   }));
-  const onSelect = (0, import_react18.useCallback)(
+  const onSelect = (0, import_react21.useCallback)(
     ({ item }) => {
+      var _a;
       const isPresetView = item.view_level === "default";
+      const syncReferenceConfig = ((_a = tableApi == null ? void 0 : tableApi.getTableConfiguration) == null ? void 0 : _a.call(tableApi)) ?? defaultView.table_config;
+      const syncedConfig = isPresetView ? item.table_config : customAndConfigSync(
+        item.table_config,
+        syncReferenceConfig
+      );
       const updatedView = isPresetView ? item : {
         ...item,
-        table_config: customAndConfigSync(
-          item.table_config,
-          defaultView.table_config
-        )
+        table_config: syncedConfig
       };
-      updateTableConfig(updatedView, tableApi, "data-table");
+      if (tableApi) {
+        updateTableConfig(updatedView, tableApi, "data-table");
+      }
       setInternalTableConfig(updatedView.table_config);
       return updatedView;
     },
@@ -10704,7 +10844,7 @@ var DataTableSavedViews = (0, import_react18.forwardRef)((props, ref) => {
   if (!internalTableConfig) {
     return null;
   }
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     SavedViews,
     {
       onSelect,