@procore/saved-views 6.0.0 → 6.0.1

package/dist/modern/index.mjs

@@ -8758,11 +8758,38 @@ var bt = "__sc-".concat(a, "__");
 "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[bt] || (window[bt] = 0), 1 === window[bt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."), window[bt] += 1);
 
 // src/components/EnvironmentI18nProvider.tsx
-import React12 from "react";
+import React12, { useEffect, useMemo } from "react";
 import { I18nContext, useI18n, useI18nContext } from "@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
 import { useRequestTranslations } from "@procore/cdn-translations";
 var useCDNTranslations = () => {
   const i18n = useI18nContext();
+  const cachedTranslations = useMemo(
+    () => readCache(i18n.locale),
+    [i18n.locale]
+  );
   const cdnTranslations = useRequestTranslations(
     {
       type: "file",
@@ -8777,8 +8804,17 @@ var useCDNTranslations = () => {
       enableCDN: i18n.enableCDN
     }
   );
+  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 useI18n({
-    translations: cdnTranslations.translations,
+    translations: translationsToUse,
     locale: i18n.locale
   });
 };
@@ -9172,7 +9208,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);
   }
@@ -9225,11 +9260,21 @@ var updateTableConfig = (view, tableApi, provider) => {
     const dataTableApi = tableApi;
     const tableConfig = view.table_config;
     if (tableConfig) {
-      const rowHeight = tableConfig?.rowHeight ?? dataTableApi?.getTableConfiguration().rowHeight;
+      const currentTableConfig = dataTableApi?.getTableConfiguration?.();
+      const rowHeight = tableConfig?.rowHeight ?? currentTableConfig?.rowHeight;
+      const hasServerFilters = Boolean(currentTableConfig?.serverFilters?.length) || Boolean(tableConfig?.serverFilters?.length);
+      const usesServerSideFiltering = hasServerFilters;
       if (rowHeight !== void 0) {
         dataTableApi?.setRowHeight(rowHeight);
       }
-      dataTableApi?.setTableConfiguration(tableConfig);
+      if (usesServerSideFiltering) {
+        dataTableApi?.setTableConfiguration({
+          ...tableConfig,
+          filters: void 0
+        });
+      } else {
+        dataTableApi?.setTableConfiguration(tableConfig);
+      }
     }
   }
 };
@@ -9410,10 +9455,10 @@ var ViewLevelHeader = ({ expanded, toggleGroup, group }) => {
 var ViewLevelHeader_default = ViewLevelHeader;
 
 // src/utils/hooks/useScrollToRef.ts
-import { useEffect, useRef } from "react";
+import { useEffect as useEffect2, useRef } from "react";
 var useScrollToRef = (dependency) => {
   const ref = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     if (ref.current) {
       ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
@@ -9612,7 +9657,7 @@ import {
   Tooltip,
   useI18nContext as useI18nContext12
 } from "@procore/core-react";
-import React23, { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import React23, { useState as useState4, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useToastAlertContext as useToastAlertContext3, ToastAlertProvider } from "@procore/toast-alert";
 
@@ -10083,7 +10128,7 @@ var SharedViewFormModal = ({
 };
 
 // src/utils/hooks/useViewSelection.ts
-import { useState as useState3, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useMemo } from "react";
+import { useState as useState3, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useMemo as useMemo2 } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useI18nContext as useI18nContext11 } from "@procore/core-react";
 
@@ -10109,6 +10154,16 @@ var ViewStorage = {
   }
 };
 
+// src/utils/hooks/useLatest.ts
+import { useCallback as useCallback2, useLayoutEffect, useRef as useRef2 } from "react";
+var useLatest = (callback) => {
+  const ref = useRef2(callback);
+  useLayoutEffect(() => {
+    ref.current = callback;
+  });
+  return useCallback2((...args) => ref.current(...args), []);
+};
+
 // src/utils/hooks/useViewSelection.ts
 var isSmartGridConfig = (config) => {
   return config != null && "rowGroupState" in config;
@@ -10160,7 +10215,7 @@ 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] = useSearchParams();
-  const previousSavedViewParamRef = useRef2(null);
+  const previousSavedViewParamRef = useRef3(null);
   const [selectedSavedView, setSelectedSavedView] = useState3(() => {
     const stored = ViewStorage.load(storageKey, config.defaultView);
     return stored ?? config.defaultView;
@@ -10169,22 +10224,22 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
     const loaded = ViewStorage.load(temporaryStorageKey, config.defaultView);
     return loaded && (loaded.id === "temporary" || loaded.view_level === "temporary") ? loaded : null;
   });
-  const persistViewToStorageAndUrl = useCallback2(
+  const persistViewToStorageAndUrl = useCallback3(
     (view) => {
       ViewStorage.save(storageKey, view);
       setViewInUrl(view, setSearchParams);
     },
     [storageKey, setSearchParams]
   );
-  const baseViews = useMemo(
+  const baseViews = useMemo2(
     () => [...savedViews ?? [], ...presetViews ?? []],
     [savedViews, presetViews]
   );
-  const allViews = useMemo(
+  const allViews = useMemo2(
     () => temporaryView ? [...baseViews, temporaryView] : baseViews,
     [baseViews, temporaryView]
   );
-  const selectView = useCallback2(
+  const selectView = useCallback3(
     (view) => {
       const viewToSelect = config.onSelect({ item: view });
       setSelectedSavedView(viewToSelect);
@@ -10193,7 +10248,7 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
     },
     [config, persistViewToStorageAndUrl]
   );
-  const createTemporaryView = useCallback2(
+  const createTemporaryView = useCallback3(
     (fetchedView) => {
       const tempView = {
         ...fetchedView,
@@ -10208,30 +10263,27 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
     },
     [temporaryStorageKey, selectView]
   );
-  const clearTemporaryView = useCallback2(() => {
+  const clearTemporaryView = useCallback3(() => {
     ViewStorage.remove(temporaryStorageKey);
     setTemporaryView(null);
     selectView(config.defaultView);
   }, [temporaryStorageKey, config.defaultView, selectView]);
-  const isViewAlreadySelected = useCallback2(
+  const isViewAlreadySelected = useCallback3(
     (viewId) => checkIsViewSelected(selectedSavedView, viewId),
     [selectedSavedView]
   );
-  const handleSavedViewFromUrl = useCallback2(
-    (viewId) => {
-      if (isViewAlreadySelected(viewId)) {
-        return;
-      }
-      const viewInList = findViewByToken(allViews, viewId);
-      if (viewInList) {
-        selectView(viewInList);
-      } else {
-        openSharedViewModal(viewId);
-      }
-    },
-    [isViewAlreadySelected, openSharedViewModal, allViews, selectView]
-  );
-  useEffect3(() => {
+  const handleSavedViewFromUrl = useLatest((viewId) => {
+    if (isViewAlreadySelected(viewId)) {
+      return;
+    }
+    const viewInList = findViewByToken(allViews, viewId);
+    if (viewInList) {
+      selectView(viewInList);
+    } else {
+      openSharedViewModal(viewId);
+    }
+  });
+  useEffect4(() => {
     const savedViewId = searchParams.get("saved-view");
     restoreUrlParameter(
       savedViewId,
@@ -10245,14 +10297,14 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
       handleSavedViewFromUrl(savedViewId);
     }
   }, [searchParams, handleSavedViewFromUrl, allViews.length]);
-  const previousRowGroupStateRef = useRef2(
+  const previousRowGroupStateRef = useRef3(
     isSmartGridConfig(tableConfig) ? tableConfig.rowGroupState : void 0
   );
-  const selectedViewRef = useRef2(selectedSavedView);
+  const selectedViewRef = useRef3(selectedSavedView);
   selectedViewRef.current = selectedSavedView;
-  const defaultViewRef = useRef2(config.defaultView);
+  const defaultViewRef = useRef3(config.defaultView);
   defaultViewRef.current = config.defaultView;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isSmartGridConfig(tableConfig) || !presetViews?.length) return;
     const currentView = selectedViewRef.current;
     const isPresetSelected = !currentView || currentView.view_level === "default";
@@ -10291,7 +10343,54 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal, ta
   };
 };
 
+// src/components/saved-views/FocusScopeToggle.tsx
+import { useFocusManager } from "@react-aria/focus";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+var useFocusScopeToggle = (isOpen) => {
+  const focusManager = useFocusManager();
+  const triggerRef = useRef4(null);
+  const firstFocusedElementRef = useRef4(null);
+  useEffect5(() => {
+    const handleKeyDown = (event) => {
+      if (!event.shiftKey || event.key !== "Tab") {
+        return;
+      }
+      if (document.activeElement !== firstFocusedElementRef.current) {
+        return;
+      }
+      event.preventDefault();
+      triggerRef.current?.focus();
+    };
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+      focusManager?.focusFirst({ tabbable: true });
+      firstFocusedElementRef.current = document.activeElement;
+      firstFocusedElementRef.current?.addEventListener(
+        "keydown",
+        handleKeyDown
+      );
+    } else {
+      firstFocusedElementRef.current = null;
+      const activeElement = document.activeElement;
+      if (!activeElement || activeElement === document.body) {
+        triggerRef.current?.focus();
+      }
+    }
+    return () => {
+      firstFocusedElementRef.current?.removeEventListener(
+        "keydown",
+        handleKeyDown
+      );
+    };
+  }, [isOpen, focusManager]);
+};
+var FocusScopeToggle = ({ isOpen }) => {
+  useFocusScopeToggle(isOpen);
+  return null;
+};
+
 // src/components/saved-views/SavedViews.tsx
+import { FocusScope } from "@react-aria/focus";
 var StyledPanel = pt.div`
   border: ${({ provider }) => provider === "data-table" ? "1px solid #d6dadc" : "none"};
 `;
@@ -10314,7 +10413,7 @@ var SavedViewsContent = (props) => {
     setActiveModal(type);
     setModalData(data ?? null);
   };
-  const closeModal = useCallback3(() => {
+  const closeModal = useCallback4(() => {
     setActiveModal(null);
     setModalData(null);
   }, []);
@@ -10354,7 +10453,7 @@ var SavedViewsContent = (props) => {
     error: createError,
     reset: resetCreateError
   } = useCreateSavedView(queryInput);
-  useEffect4(() => {
+  useEffect6(() => {
     if (fetchError) {
       showToast.error(i18n.t("savedViews.errors.notFound"));
       selectView(selectedView ?? props.defaultView);
@@ -10402,7 +10501,7 @@ var SavedViewsContent = (props) => {
     deleteSelectedView();
     closeModal();
   };
-  return /* @__PURE__ */ React23.createElement(StyledPanel, { id: "saved-views-panel", provider: props.provider }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement(FocusScope, { contain: false }, /* @__PURE__ */ React23.createElement(StyledPanel, { id: "saved-views-panel", provider: props.provider }, /* @__PURE__ */ React23.createElement(FocusScopeToggle, { isOpen: props.isPanelOpen ?? true }), /* @__PURE__ */ React23.createElement(
     ExpandedPanel,
     {
       "data-testid": "saved-view-expanded-panel",
@@ -10490,17 +10589,17 @@ var SavedViewsContent = (props) => {
       isCreating,
       resetCreateError
     }
-  ));
+  )));
 };
 var SavedViews = (props) => {
   return /* @__PURE__ */ React23.createElement(EnvironmentI18nProvider, null, /* @__PURE__ */ React23.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React23.createElement(ToastAlertProvider, null, /* @__PURE__ */ React23.createElement(SavedViewsContent, { ...props }))));
 };
 
 // src/components/adapters/smart-grid/SmartGridSavedViews.tsx
-import React24, { useCallback as useCallback4 } from "react";
+import React24, { useCallback as useCallback5 } from "react";
 
 // src/components/adapters/smart-grid/SmartGridDefaultSavedView.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var DEFAULT_COLUMN_STATE = {
   hide: false,
   pinned: null,
@@ -10547,7 +10646,7 @@ var extractDefaultView = (gridApi, receivedConfig) => {
   return result;
 };
 var useNormalizedDefaultViews = (defaultViews, gridApi) => {
-  return useMemo2(() => {
+  return useMemo3(() => {
     if (!gridApi)
       return defaultViews.map((view) => ({ ...view, share_token: view.id }));
     return defaultViews.map((view) => ({
@@ -10559,7 +10658,7 @@ var useNormalizedDefaultViews = (defaultViews, gridApi) => {
 };
 
 // src/components/adapters/smart-grid/useSmartGridConfig.ts
-import { useState as useState5, useEffect as useEffect5 } from "react";
+import { useState as useState5, useEffect as useEffect7 } from "react";
 var GRID_STATE_EVENTS = [
   "sortChanged",
   "filterOpened",
@@ -10578,7 +10677,7 @@ var useSmartGridConfig = (gridApi) => {
   const [config, setConfig] = useState5(
     () => getSmartGridConfig(gridApi)
   );
-  useEffect5(() => {
+  useEffect7(() => {
     if (!gridApi) return;
     const updateConfig = () => {
       setConfig(getSmartGridConfig(gridApi));
@@ -10595,19 +10694,43 @@ var useSmartGridConfig = (gridApi) => {
   return { config, setConfig };
 };
 
+// src/components/adapters/smart-grid/useSavedViewsPanelOpen.ts
+import { useEffect as useEffect8, useState as useState6 } from "react";
+var SAVED_VIEWS_PANEL_ID = "savedViews";
+var useSavedViewsPanelOpen = (gridApi) => {
+  const [isOpen, setIsOpen] = useState6(
+    gridApi.getOpenedToolPanel?.() === SAVED_VIEWS_PANEL_ID
+  );
+  useEffect8(() => {
+    const syncOpenState = () => {
+      setIsOpen(gridApi.getOpenedToolPanel?.() === SAVED_VIEWS_PANEL_ID);
+    };
+    syncOpenState();
+    gridApi.addEventListener?.("toolPanelVisibleChanged", syncOpenState);
+    return () => {
+      gridApi.removeEventListener?.("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 = useCallback4(
+  const onSelect = useCallback5(
     ({ item }) => {
       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: gridApi.getFilterModel?.() ?? {}
+        });
         return item;
       }
       const updatedView = {
@@ -10618,7 +10741,9 @@ 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]
@@ -10635,7 +10760,8 @@ var SmartGridSavedViews = (props) => {
       defaultView,
       presetViews,
       tableName: props.tableName,
-      tableConfig
+      tableConfig,
+      isPanelOpen
     }
   );
 };
@@ -10644,12 +10770,12 @@ var SmartGridSavedViews = (props) => {
 import React25, {
   forwardRef as forwardRef11,
   useImperativeHandle,
-  useState as useState6,
-  useCallback as useCallback5
+  useState as useState7,
+  useCallback as useCallback6
 } from "react";
 
 // src/components/adapters/data-table/DataTableDefaultSavedView.tsx
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 var DEFAULT_COLUMN_STATE2 = {
   hidden: false,
   pinned: null,
@@ -10696,7 +10822,7 @@ var extractDefaultView2 = (columnDefinitions, receivedConfigFromTool) => {
   return result;
 };
 var useNormalizedDefaultViews2 = (defaultViews, columnDefinitions) => {
-  return useMemo3(
+  return useMemo4(
     () => defaultViews.map((view) => ({
       ...view,
       share_token: view.id,
@@ -10714,7 +10840,7 @@ var DataTableSavedViews = forwardRef11((props, ref) => {
     props.columnDefinitions
   );
   const defaultView = presetViews.find((view) => view.id === "default") ?? presetViews[0];
-  const [internalTableConfig, setInternalTableConfig] = useState6(
+  const [internalTableConfig, setInternalTableConfig] = useState7(
     ViewStorage.load(props.stickyViewsKey, defaultView).table_config
   );
   useImperativeHandle(ref, () => ({
@@ -10722,17 +10848,21 @@ var DataTableSavedViews = forwardRef11((props, ref) => {
       setInternalTableConfig(newConfig);
     }
   }));
-  const onSelect = useCallback5(
+  const onSelect = useCallback6(
     ({ item }) => {
       const isPresetView = item.view_level === "default";
+      const syncReferenceConfig = tableApi?.getTableConfiguration?.() ?? 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;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/saved-views",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Saved Views Component for Data Table",
   "author": "Procore Technologies, Inc",
   "repository": {
@@ -112,6 +112,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "@react-aria/focus": "3.21.2",
     "@tanstack/react-query": "^5.83.0",
     "yup": "^1.6.1"
   }