@procore/saved-views 1.1.0-alpha.3 → 1.1.0-alpha.5

package/dist/modern/index.mjs

@@ -110,7 +110,7 @@ var require_react_is_production_min = __commonJS({
     var E2 = n2;
     var F2 = c2;
     var G2 = f2;
-    var H3 = e2;
+    var H2 = e2;
     var I = l2;
     exports.ContextConsumer = h;
     exports.ContextProvider = z2;
@@ -121,7 +121,7 @@ var require_react_is_production_min = __commonJS({
     exports.Memo = E2;
     exports.Portal = F2;
     exports.Profiler = G2;
-    exports.StrictMode = H3;
+    exports.StrictMode = H2;
     exports.Suspense = I;
     exports.isAsyncMode = function() {
       return false;
@@ -7868,7 +7868,7 @@ function __rest(s2, e2) {
   return t2;
 }
 
-// ../../node_modules/@procore/core-icons/dist/Icon.js
+// node_modules/@procore/core-icons/dist/Icon.js
 import * as React from "react";
 function getSize(size) {
   if (size === "sm") {
@@ -7887,7 +7887,7 @@ function Icon(_a) {
   return React.isValidElement(children) ? React.cloneElement(children, __assign(__assign({ "aria-hidden": true, "data-qa": "ci-".concat(props.name) }, props), { width: getSize(props.size), height: getSize(props.size), focusable: false, style: __assign(__assign({}, props.style), { flex: "0 0 auto" }) })) : null;
 }
 
-// ../../node_modules/@procore/core-icons/dist/icons/Building.js
+// node_modules/@procore/core-icons/dist/icons/Building.js
 import * as React2 from "react";
 var Building = React2.forwardRef(function Building2(props, ref) {
   return React2.createElement(
@@ -7903,7 +7903,7 @@ var Building = React2.forwardRef(function Building2(props, ref) {
 Building.displayName = "Building";
 var Building_default = Building;
 
-// ../../node_modules/@procore/core-icons/dist/icons/ChevronDown.js
+// node_modules/@procore/core-icons/dist/icons/ChevronDown.js
 import * as React3 from "react";
 var ChevronDown = React3.forwardRef(function ChevronDown2(props, ref) {
   return React3.createElement(
@@ -7919,7 +7919,7 @@ var ChevronDown = React3.forwardRef(function ChevronDown2(props, ref) {
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
-// ../../node_modules/@procore/core-icons/dist/icons/ChevronRight.js
+// node_modules/@procore/core-icons/dist/icons/ChevronRight.js
 import * as React4 from "react";
 var ChevronRight = React4.forwardRef(function ChevronRight2(props, ref) {
   return React4.createElement(
@@ -7935,7 +7935,7 @@ var ChevronRight = React4.forwardRef(function ChevronRight2(props, ref) {
 ChevronRight.displayName = "ChevronRight";
 var ChevronRight_default = ChevronRight;
 
-// ../../node_modules/@procore/core-icons/dist/icons/Clear.js
+// node_modules/@procore/core-icons/dist/icons/Clear.js
 import * as React5 from "react";
 var Clear = React5.forwardRef(function Clear2(props, ref) {
   return React5.createElement(
@@ -7951,7 +7951,7 @@ var Clear = React5.forwardRef(function Clear2(props, ref) {
 Clear.displayName = "Clear";
 var Clear_default = Clear;
 
-// ../../node_modules/@procore/core-icons/dist/icons/Excavator.js
+// node_modules/@procore/core-icons/dist/icons/Excavator.js
 import * as React6 from "react";
 var Excavator = React6.forwardRef(function Excavator2(props, ref) {
   return React6.createElement(
@@ -7968,7 +7968,7 @@ var Excavator = React6.forwardRef(function Excavator2(props, ref) {
 Excavator.displayName = "Excavator";
 var Excavator_default = Excavator;
 
-// ../../node_modules/@procore/core-icons/dist/icons/ExpandSidebar.js
+// node_modules/@procore/core-icons/dist/icons/ExpandSidebar.js
 import * as React7 from "react";
 var ExpandSidebar = React7.forwardRef(function ExpandSidebar2(props, ref) {
   return React7.createElement(
@@ -7986,7 +7986,7 @@ var ExpandSidebar = React7.forwardRef(function ExpandSidebar2(props, ref) {
 ExpandSidebar.displayName = "ExpandSidebar";
 var ExpandSidebar_default = ExpandSidebar;
 
-// ../../node_modules/@procore/core-icons/dist/icons/Help.js
+// node_modules/@procore/core-icons/dist/icons/Help.js
 import * as React8 from "react";
 var Help = React8.forwardRef(function Help2(props, ref) {
   return React8.createElement(
@@ -8002,7 +8002,7 @@ var Help = React8.forwardRef(function Help2(props, ref) {
 Help.displayName = "Help";
 var Help_default = Help;
 
-// ../../node_modules/@procore/core-icons/dist/icons/Link.js
+// node_modules/@procore/core-icons/dist/icons/Link.js
 import * as React9 from "react";
 var Link = React9.forwardRef(function Link2(props, ref) {
   return React9.createElement(
@@ -8019,7 +8019,7 @@ var Link = React9.forwardRef(function Link2(props, ref) {
 Link.displayName = "Link";
 var Link_default = Link;
 
-// ../../node_modules/@procore/core-icons/dist/icons/Person.js
+// node_modules/@procore/core-icons/dist/icons/Person.js
 import * as React10 from "react";
 var Person = React10.forwardRef(function Person2(props, ref) {
   return React10.createElement(
@@ -8035,7 +8035,7 @@ var Person = React10.forwardRef(function Person2(props, ref) {
 Person.displayName = "Person";
 var Person_default = Person;
 
-// ../../node_modules/@procore/core-icons/dist/icons/Plus.js
+// node_modules/@procore/core-icons/dist/icons/Plus.js
 import * as React11 from "react";
 var Plus = React11.forwardRef(function Plus2(props, ref) {
   return React11.createElement(
@@ -8148,7 +8148,7 @@ function stylis_min(W2) {
                 }
                 k2 = M2(c2, r2, k2, g2, a2 + 1);
                 t2 = k2.length;
-                0 < A2 && (r2 = X2(O2, f2, I), C2 = H3(3, k2, r2, c2, D2, z2, t2, g2, a2, h), f2 = r2.join(""), void 0 !== C2 && 0 === (t2 = (k2 = C2.trim()).length) && (g2 = 0, k2 = ""));
+                0 < A2 && (r2 = X2(O2, f2, I), C2 = H2(3, k2, r2, c2, D2, z2, t2, g2, a2, h), f2 = r2.join(""), void 0 !== C2 && 0 === (t2 = (k2 = C2.trim()).length) && (g2 = 0, k2 = ""));
                 if (0 < t2)
                   switch (g2) {
                     case 115:
@@ -8181,7 +8181,7 @@ function stylis_min(W2) {
           case 59:
             f2 = (0 < r2 ? f2.replace(N, "") : f2).trim();
             if (1 < (t2 = f2.length))
-              switch (0 === u2 && (q2 = f2.charCodeAt(0), 45 === q2 || 96 < q2 && 123 > q2) && (t2 = (f2 = f2.replace(" ", ":")).length), 0 < A2 && void 0 !== (C2 = H3(1, f2, c2, d, D2, z2, p.length, h, a2, h)) && 0 === (t2 = (f2 = C2.trim()).length) && (f2 = "\0\0"), q2 = f2.charCodeAt(0), g2 = f2.charCodeAt(1), q2) {
+              switch (0 === u2 && (q2 = f2.charCodeAt(0), 45 === q2 || 96 < q2 && 123 > q2) && (t2 = (f2 = f2.replace(" ", ":")).length), 0 < A2 && void 0 !== (C2 = H2(1, f2, c2, d, D2, z2, p.length, h, a2, h)) && 0 === (t2 = (f2 = C2.trim()).length) && (f2 = "\0\0"), q2 = f2.charCodeAt(0), g2 = f2.charCodeAt(1), q2) {
                 case 0:
                   break;
                 case 64:
@@ -8201,7 +8201,7 @@ function stylis_min(W2) {
         case 13:
         case 10:
           47 === b2 ? b2 = 0 : 0 === 1 + q2 && 107 !== h && 0 < f2.length && (r2 = 1, f2 += "\0");
-          0 < A2 * Y2 && H3(0, f2, c2, d, D2, z2, p.length, h, a2, h);
+          0 < A2 * Y2 && H2(0, f2, c2, d, D2, z2, p.length, h, a2, h);
           z2 = 1;
           D2++;
           break;
@@ -8310,7 +8310,7 @@ function stylis_min(W2) {
     t2 = p.length;
     if (0 < t2) {
       r2 = c2;
-      if (0 < A2 && (C2 = H3(2, p, r2, d, D2, z2, t2, h, a2, h), void 0 !== C2 && 0 === (p = C2).length))
+      if (0 < A2 && (C2 = H2(2, p, r2, d, D2, z2, t2, h, a2, h), void 0 !== C2 && 0 === (p = C2).length))
         return G3 + p + F3;
       p = r2.join(",") + "{" + p + "}";
       if (0 !== w2 * E2) {
@@ -8487,7 +8487,7 @@ function stylis_min(W2) {
     var e2 = P4(c2, c2.charCodeAt(0), c2.charCodeAt(1), c2.charCodeAt(2));
     return e2 !== c2 + ";" ? e2.replace(oa, " or ($1)").substring(4) : "(" + c2 + ")";
   }
-  function H3(d, c2, e2, h, a2, m2, b2, v2, n2, q2) {
+  function H2(d, c2, e2, h, a2, m2, b2, v2, n2, q2) {
     for (var g2 = 0, x2 = c2, w3; g2 < A2; ++g2) {
       switch (w3 = S2[g2].call(B2, d, x2, e2, h, a2, m2, b2, v2, n2, q2)) {
         case void 0:
@@ -8531,11 +8531,11 @@ function stylis_min(W2) {
     V2 = e2;
     e2 = [V2];
     if (0 < A2) {
-      var h = H3(-1, c2, e2, e2, D2, z2, 0, 0, 0, 0);
+      var h = H2(-1, c2, e2, e2, D2, z2, 0, 0, 0, 0);
       void 0 !== h && "string" === typeof h && (c2 = h);
     }
     var a2 = M2(O2, e2, c2, 0, 0);
-    0 < A2 && (h = H3(-2, a2, e2, e2, D2, z2, a2.length, 0, 0, 0), void 0 !== h && (a2 = h));
+    0 < A2 && (h = H2(-2, a2, e2, e2, D2, z2, a2.length, 0, 0, 0), void 0 !== h && (a2 = h));
     V2 = "";
     E2 = 0;
     z2 = D2 = 1;
@@ -9343,8 +9343,8 @@ var useSavedViewsPanel = (domain, tableName) => {
     setIsOpen(!isOpen);
     localStorage.setItem(key(domain, tableName), JSON.stringify(!isOpen));
   };
-  const Button7 = () => /* @__PURE__ */ React14.createElement(SavedViewsButton, { handleClick, isOpen });
-  return { isOpen, SavedViewsButton: Button7 };
+  const Button8 = () => /* @__PURE__ */ React14.createElement(SavedViewsButton, { handleClick, isOpen });
+  return { isOpen, SavedViewsButton: Button8 };
 };
 var useSavedViewsPanel_default = useSavedViewsPanel;
 
@@ -9424,6 +9424,17 @@ var SavedViewCollectionMenuItem = (props) => {
       label: i18n.t("savedViews.actions.delete")
     }
   ];
+  const preventEventBubbleToNotTriggerViewSelectEvent = React15.useCallback(
+    (e2) => {
+      e2.stopPropagation();
+    },
+    []
+  );
+  const hasUpdateButton = props.item.view_level !== "default" && props.canUpdate;
+  const hasCopyShareLinkButton = props.item.view_level !== "default" && props.selected && !props.canUpdate && props.item.id !== "temporary";
+  const hasClearTemporaryButton = props.item.id === "temporary";
+  const hasOverflowMenu = props.item.view_level !== "default" && props.canEditOrDelete;
+  const hasActions = hasUpdateButton || hasCopyShareLinkButton || hasClearTemporaryButton || hasOverflowMenu;
   return /* @__PURE__ */ React15.createElement(
     Container2,
     {
@@ -9433,7 +9444,8 @@ var SavedViewCollectionMenuItem = (props) => {
       "aria-label": i18n.t("savedViews.ariaLabels.menuItem", {
         name: props.item.name
       }),
-      "data-testid": "saved-view-collection-menu-item"
+      "data-testid": "saved-view-collection-menu-item",
+      onKeyDown: preventEventBubbleToNotTriggerViewSelectEvent
     },
     /* @__PURE__ */ React15.createElement(
       "span",
@@ -9443,7 +9455,7 @@ var SavedViewCollectionMenuItem = (props) => {
       },
       props.item.name
     ),
-    /* @__PURE__ */ React15.createElement(RowActionsBox, null, /* @__PURE__ */ React15.createElement(Box, { justifyContent: "space-between" }, props.item.view_level !== "default" && props.canUpdate && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
+    hasActions && /* @__PURE__ */ React15.createElement(RowActionsBox, null, /* @__PURE__ */ React15.createElement(Box, { justifyContent: "space-between" }, hasUpdateButton && /* @__PURE__ */ React15.createElement(
       Button2,
       {
         onClick: updateItem,
@@ -9454,7 +9466,7 @@ var SavedViewCollectionMenuItem = (props) => {
         loading: props.isUpdateProcessing
       },
       i18n.t("savedViews.actions.update")
-    )), props.item.view_level !== "default" && props.selected && !props.canUpdate && props.item.id !== "temporary" && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
+    ), hasCopyShareLinkButton && /* @__PURE__ */ React15.createElement(
       Button2,
       {
         onClick: copyShareLink,
@@ -9464,7 +9476,7 @@ var SavedViewCollectionMenuItem = (props) => {
         "data-testid": "copy-share-link-button"
       },
       /* @__PURE__ */ React15.createElement(IconWrapper, null, /* @__PURE__ */ React15.createElement(Link_default, { size: "sm" }))
-    )), props.item.id === "temporary" && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
+    ), hasClearTemporaryButton && /* @__PURE__ */ React15.createElement(
       Button2,
       {
         onClick: (e2) => {
@@ -9478,7 +9490,7 @@ var SavedViewCollectionMenuItem = (props) => {
         "data-testid": "clear-temporary-view-button"
       },
       /* @__PURE__ */ React15.createElement(IconWrapper, null, /* @__PURE__ */ React15.createElement(Clear_default, { size: "sm" }))
-    ))), /* @__PURE__ */ React15.createElement(Box, null, props.item.view_level !== "default" && props.canEditOrDelete && /* @__PURE__ */ React15.createElement("div", { onClick: (e2) => e2.stopPropagation() }, /* @__PURE__ */ React15.createElement(
+    )), /* @__PURE__ */ React15.createElement(Box, null, hasOverflowMenu && /* @__PURE__ */ React15.createElement(
       DropdownFlyout,
       {
         "data-testid": "saved-view-overflow-button",
@@ -9489,7 +9501,7 @@ var SavedViewCollectionMenuItem = (props) => {
         variant: "tertiary",
         disabled: props.isUpdateProcessing
       }
-    ))))
+    )))
   );
 };
 
@@ -9502,7 +9514,7 @@ var ExpandedPanel = styled_components_esm_default(Panel)`
 `;
 
 // src/components/panels/PanelContent.tsx
-import { Flex as Flex3, useI18nContext as useI18nContext5 } from "@procore/core-react";
+import { Flex as Flex2, MenuImperative as MenuImperative2, useI18nContext as useI18nContext5 } from "@procore/core-react";
 import { useToastAlertContext as useToastAlertContext2 } from "@procore/toast-alert";
 import React17 from "react";
 
@@ -9769,18 +9781,40 @@ var getOrderedVisibleColumns = (columns, idKey) => {
   });
   return [leftAction, ...middleColumns, rightAction].filter(Boolean);
 };
+var SMART_GRID_COLUMN_COMPARE_KEYS = [
+  "colId",
+  "hide",
+  "width",
+  "sort",
+  "sortIndex",
+  "pinned",
+  "rowGroup",
+  "rowGroupIndex",
+  "pivot",
+  "pivotIndex"
+];
+var DATA_TABLE_COLUMN_COMPARE_KEYS = [
+  "field",
+  "hidden",
+  "width",
+  "sort",
+  "sortIndex",
+  "pinned",
+  "rowGroup",
+  "rowGroupIndex"
+];
 var cleanObject = (table_config, provider) => {
   if (provider === "smart-grid") {
     const smartGridConfig = table_config;
-    if (!smartGridConfig.filterState)
-      return table_config;
     const orderedColumns = getOrderedVisibleColumns(
       smartGridConfig.columnState,
       "colId"
     );
     return {
       ...smartGridConfig,
-      columnState: orderedColumns
+      columnState: orderedColumns.map(
+        (col) => import_lodash.default.pick(col, SMART_GRID_COLUMN_COMPARE_KEYS)
+      )
     };
   } else {
     const dataTableConfig = table_config;
@@ -9792,7 +9826,9 @@ var cleanObject = (table_config, provider) => {
     );
     return {
       ...dataTableConfig,
-      columnState: orderedColumns,
+      columnState: orderedColumns.map(
+        (col) => import_lodash.default.pick(col, DATA_TABLE_COLUMN_COMPARE_KEYS)
+      ),
       serverFilters: dataTableConfig.serverFilters.map(
         (filter) => import_lodash.default.omit(filter, "filterRenderer")
       )
@@ -9854,9 +9890,9 @@ var useGroups = (isProjectLevelTool) => {
 
 // src/components/panels/ViewLevelHeader.tsx
 import {
+  Box as Box2,
+  Button as Button3,
   colors,
-  Flex as Flex2,
-  spacing,
   Typography,
   useI18nContext as useI18nContext4
 } from "@procore/core-react";
@@ -9871,27 +9907,31 @@ var groupIcon = (group) => {
       return /* @__PURE__ */ React16.createElement(Building_default, null);
   }
 };
-var Header = styled_components_esm_default(Flex2)`
-  width: 100%;
+var StyledButton2 = styled_components_esm_default(Button3)`
   &:hover {
     background-color: ${colors.gray98};
   }
 `;
 var ViewLevelHeader = ({ expanded, toggleGroup, group }) => {
   const I18n = useI18nContext4();
-  return /* @__PURE__ */ React16.createElement(
-    Header,
+  return /* @__PURE__ */ React16.createElement(Box2, { style: { width: "100%" } }, /* @__PURE__ */ React16.createElement(
+    StyledButton2,
     {
-      alignItems: "center",
-      padding: `${spacing.sm}px`,
-      gap: `${spacing.sm}px`,
-      style: { cursor: "pointer" },
-      onClick: () => toggleGroup(group)
+      block: true,
+      style: {
+        justifyContent: "start",
+        height: "40px"
+      },
+      variant: "tertiary",
+      size: "sm",
+      onClick: () => toggleGroup(group),
+      "aria-controls": `saved-views-collections-${group}`,
+      "aria-expanded": expanded,
+      icon: expanded ? /* @__PURE__ */ React16.createElement(ChevronDown_default, { size: "sm" }) : /* @__PURE__ */ React16.createElement(ChevronRight_default, { size: "sm" })
     },
-    expanded ? /* @__PURE__ */ React16.createElement(ChevronDown_default, { size: "sm" }) : /* @__PURE__ */ React16.createElement(ChevronRight_default, { size: "sm" }),
     groupIcon(group),
     /* @__PURE__ */ React16.createElement(Typography, { weight: "semibold" }, I18n.t(`savedViews.viewLevel.${group}`))
-  );
+  ));
 };
 var ViewLevelHeader_default = ViewLevelHeader;
 
@@ -9911,8 +9951,8 @@ var useScrollToRef = (dependency) => {
 import {
   colors as colors2,
   DetailPage,
-  UNSAFE_Menu as MenuImperative,
-  spacing as spacing2
+  MenuImperative,
+  spacing
 } from "@procore/core-react";
 var Row = styled_components_esm_default(MenuImperative.Item)`
   width: 100%;
@@ -9927,11 +9967,16 @@ var Row = styled_components_esm_default(MenuImperative.Item)`
 var Panel2 = styled_components_esm_default(DetailPage.Card)`
   margin: 0;
   height: 100%;
-  padding-top: ${spacing2.sm}px;
+  padding-top: ${spacing.sm}px;
   box-shadow: none;
 `;
 
 // src/components/panels/PanelContent.tsx
+var StyledMenuImperative = styled_components_esm_default(MenuImperative2)`
+  div[role='listbox'] {
+    padding: 0;
+  }
+`;
 var PanelContent = (props) => {
   const { queryInput, selectedSavedView, tableConfig } = props;
   const { showToast } = useToastAlertContext2();
@@ -9972,40 +10017,52 @@ var PanelContent = (props) => {
       }
     });
   };
-  return /* @__PURE__ */ React17.createElement(Panel2, { "data-testid": "inner-panel" }, /* @__PURE__ */ React17.createElement(Flex3, { direction: "column", style: { height: "100%", width: "100%" } }, temporaryView && /* @__PURE__ */ React17.createElement(
-    Row,
+  return /* @__PURE__ */ React17.createElement(Panel2, { "data-testid": "inner-panel" }, /* @__PURE__ */ React17.createElement(Flex2, { direction: "column", style: { height: "100%", width: "100%" } }, (temporaryView || presetViews) && /* @__PURE__ */ React17.createElement(
+    StyledMenuImperative,
     {
-      selected: isTemporarySelected,
-      onClick: () => props.onSelect({ item: temporaryView }),
-      ref: isTemporarySelected ? selectedRowRef : null
+      role: "listbox",
+      onSelect: (selection) => {
+        if (selectedSavedView?.id !== selection.item.id) {
+          props.onSelect({ item: selection.item });
+        }
+      }
     },
-    /* @__PURE__ */ React17.createElement(
-      SavedViewCollectionMenuItem,
+    /* @__PURE__ */ React17.createElement(MenuImperative2.Options, null, temporaryView && /* @__PURE__ */ React17.createElement(
+      Row,
       {
+        key: temporaryView.id,
         item: temporaryView,
         selected: isTemporarySelected,
-        onClearTemporary: props.onClearTemporary
-      }
-    )
-  ), presetViews.map((presetView) => {
-    const isSelected = selectedSavedView?.id === presetView.id;
-    return /* @__PURE__ */ React17.createElement(
-      Row,
-      {
-        key: presetView.id,
-        selected: isSelected,
-        onClick: () => props.onSelect({ item: presetView }),
-        ref: isSelected ? selectedRowRef : null
+        ref: isTemporarySelected ? selectedRowRef : null
       },
       /* @__PURE__ */ React17.createElement(
         SavedViewCollectionMenuItem,
         {
-          item: presetView,
-          selected: isSelected
+          item: temporaryView,
+          selected: isTemporarySelected,
+          onClearTemporary: props.onClearTemporary
         }
       )
-    );
-  }), viewLevels.map((level) => {
+    ), presetViews.map((presetView) => {
+      const isSelected = selectedSavedView?.id === presetView.id;
+      return /* @__PURE__ */ React17.createElement(
+        Row,
+        {
+          key: presetView.id,
+          item: presetView,
+          selected: isSelected,
+          ref: isSelected ? selectedRowRef : null
+        },
+        /* @__PURE__ */ React17.createElement(
+          SavedViewCollectionMenuItem,
+          {
+            item: presetView,
+            selected: isSelected
+          }
+        )
+      );
+    }))
+  ), viewLevels.map((level) => {
     const isExpanded = groups[level];
     const views = isExpanded && savedViews ? savedViews.filter(
       (view) => view.view_level === level && view.id !== "temporary"
@@ -10017,62 +10074,74 @@ var PanelContent = (props) => {
         toggleGroup,
         expanded: isExpanded
       }
-    ), views.map((view) => {
-      const isSelected = selectedSavedView?.id === view.id;
-      const canUpdate = isSelected && hasPermissionForViewLevel(view.view_level, permissions) && !isEqual(
-        view.table_config,
-        tableConfig,
-        props.defaultView.table_config,
-        props.provider
-      );
-      const canEditOrDelete = isSelected && hasPermissionForViewLevel(view.view_level, permissions);
-      return /* @__PURE__ */ React17.createElement(
-        Row,
-        {
-          key: view.id,
-          item: view,
-          selected: isSelected,
-          onClick: () => {
-            props.onSelect({ item: view });
-          },
-          ref: isSelected ? selectedRowRef : null
-        },
-        /* @__PURE__ */ React17.createElement(
-          SavedViewCollectionMenuItem,
+    ), isExpanded && views.length > 0 && /* @__PURE__ */ React17.createElement(
+      StyledMenuImperative,
+      {
+        id: `saved-views-collections-${level}`,
+        role: "listbox",
+        onSelect: (selection) => {
+          if (selectedSavedView?.id !== selection.item.id) {
+            props.onSelect({ item: selection.item });
+          }
+        }
+      },
+      /* @__PURE__ */ React17.createElement(MenuImperative2.Options, null, views.map((view) => {
+        const isSelected = selectedSavedView?.id === view.id;
+        const canUpdate = isSelected && hasPermissionForViewLevel(
+          view.view_level,
+          permissions
+        ) && !isEqual(
+          view.table_config,
+          tableConfig,
+          props.defaultView.table_config,
+          props.provider
+        );
+        const canEditOrDelete = isSelected && hasPermissionForViewLevel(view.view_level, permissions);
+        return /* @__PURE__ */ React17.createElement(
+          Row,
           {
-            item: view,
             key: view.id,
+            item: view,
             selected: isSelected,
-            canUpdate,
-            canEditOrDelete,
-            onUpdate: (data) => onUpdate(data),
-            isUpdateProcessing: isUpdateLoading,
-            onEdit: () => props.openModal("update" /* UPDATE */),
-            onDelete: props.onDelete,
-            permissions
-          }
-        )
-      );
-    }));
+            ref: isSelected ? selectedRowRef : null
+          },
+          /* @__PURE__ */ React17.createElement(
+            SavedViewCollectionMenuItem,
+            {
+              item: view,
+              key: view.id,
+              selected: isSelected,
+              canUpdate,
+              canEditOrDelete,
+              onUpdate: (data) => onUpdate(data),
+              isUpdateProcessing: isUpdateLoading,
+              onEdit: () => props.openModal("update" /* UPDATE */),
+              onDelete: props.onDelete,
+              permissions
+            }
+          )
+        );
+      }))
+    ));
   })));
 };
 
 // src/components/saved-views/SavedViews.tsx
 import {
-  Box as Box2,
-  Button as Button6,
-  Flex as Flex6,
+  Box as Box3,
+  Button as Button7,
+  Flex as Flex5,
   Panel as Panel3,
   Tooltip,
-  useI18nContext as useI18nContext11
+  useI18nContext as useI18nContext12
 } from "@procore/core-react";
-import React22, { useState as useState4, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+import React23, { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useToastAlertContext as useToastAlertContext3, ToastAlertProvider } from "@procore/toast-alert";
 
 // src/components/modals/DeleteConfirmationModal.tsx
 import {
-  Button as Button3,
+  Button as Button4,
   ConfirmModal,
   Modal,
   P as P2,
@@ -10096,28 +10165,27 @@ var SavedViewsDeleteConfirmationModalShared = ({
       style: { overflowWrap: "anywhere" }
     },
     /* @__PURE__ */ React18.createElement(Modal.Body, null, /* @__PURE__ */ React18.createElement(P2, null, i18n.t("savedViews.modal.delete.description"))),
-    /* @__PURE__ */ React18.createElement(Modal.Footer, null, /* @__PURE__ */ React18.createElement(Modal.FooterButtons, null, /* @__PURE__ */ React18.createElement(Button3, { variant: "secondary", onClick: onCancel }, i18n.t("savedViews.actions.cancel")), /* @__PURE__ */ React18.createElement(Button3, { variant: "primary", onClick: onDelete }, i18n.t("savedViews.actions.delete"))))
+    /* @__PURE__ */ React18.createElement(Modal.Footer, null, /* @__PURE__ */ React18.createElement(Modal.FooterButtons, null, /* @__PURE__ */ React18.createElement(Button4, { variant: "secondary", onClick: onCancel }, i18n.t("savedViews.actions.cancel")), /* @__PURE__ */ React18.createElement(Button4, { variant: "primary", onClick: onDelete }, i18n.t("savedViews.actions.delete"))))
   );
 };
 
 // src/components/modals/form-modal/FormModal.tsx
-import React20 from "react";
+import React21 from "react";
 
 // src/components/modals/form-modal/FormModalBase.tsx
 import {
   Banner,
-  Button as Button4,
+  Button as Button5,
   colors as colors3,
   ErrorBanner,
-  Flex as Flex4,
-  Form,
-  H2,
+  Flex as Flex3,
+  Form as Form2,
   Modal as Modal2,
-  spacing as spacing3,
+  spacing as spacing2,
   Typography as Typography2,
-  useI18nContext as useI18nContext7
+  useI18nContext as useI18nContext8
 } from "@procore/core-react";
-import * as React19 from "react";
+import * as React20 from "react";
 import * as yup from "yup";
 
 // src/components/modals/form-modal/FormModalBaseUtils.ts
@@ -10154,6 +10222,36 @@ function extractMessage(error, I18n) {
   return { form: I18n.t("savedViews.modal.errors.unknown") };
 }
 
+// src/components/modals/form-modal/NameInputField.tsx
+import { Form, useFormContext, useI18nContext as useI18nContext7 } from "@procore/core-react";
+import * as React19 from "react";
+var NAME_INPUT_ID = "saved-view-form-name-input";
+var NameInputField = ({
+  error,
+  onResetMutations
+}) => {
+  const I18n = useI18nContext7();
+  const label = I18n.t("savedViews.modal.fields.name");
+  const { errors: formErrors, submitCount } = useFormContext();
+  React19.useEffect(() => {
+    if (submitCount > 0 && formErrors?.name) {
+      document.getElementById(NAME_INPUT_ID)?.focus();
+    }
+  }, [formErrors?.name, submitCount]);
+  return /* @__PURE__ */ React19.createElement(
+    Form.Text,
+    {
+      id: NAME_INPUT_ID,
+      name: "name",
+      error,
+      placeholder: label,
+      label,
+      colWidth: 12,
+      onChange: onResetMutations
+    }
+  );
+};
+
 // src/components/modals/form-modal/FormModalBase.tsx
 var ScrollContainer = styled_components_esm_default("div")`
   overflow: auto;
@@ -10173,7 +10271,7 @@ var FormModalBase = ({
   setOpenEditCreateModal,
   onSelect
 }) => {
-  const I18n = useI18nContext7();
+  const I18n = useI18nContext8();
   const NAME_MAX_LENGTH = 150;
   const {
     mutate: createSavedView,
@@ -10232,24 +10330,17 @@ var FormModalBase = ({
     I18n,
     isProjectLevelTool
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Modal2,
     {
-      "aria-label": I18n.t("savedViews.ariaLabels.modal"),
-      onClickOverlay: onClose,
+      howToClose: ["x", "scrim"],
+      onClose,
       open,
-      style: { width: "540px" },
+      width: "md",
       "data-testid": "create-update-modal"
     },
-    /* @__PURE__ */ React19.createElement(ScrollContainer, null, /* @__PURE__ */ React19.createElement(
-      Modal2.Header,
-      {
-        onClose,
-        style: { borderBottom: `1px solid ${colors3.gray85}` }
-      },
-      /* @__PURE__ */ React19.createElement(H2, null, header)
-    ), /* @__PURE__ */ React19.createElement(
-      Form,
+    /* @__PURE__ */ React20.createElement(ScrollContainer, null, /* @__PURE__ */ React20.createElement(Modal2.Header, { style: { borderBottom: `1px solid ${colors3.gray85}` } }, /* @__PURE__ */ React20.createElement(Modal2.Heading, null, header)), /* @__PURE__ */ React20.createElement(
+      Form2,
       {
         initialValues: {
           name: initialName,
@@ -10274,30 +10365,26 @@ var FormModalBase = ({
         onReset: onCancel,
         validateOnChange: true
       },
-      /* @__PURE__ */ React19.createElement(Form.Form, { name: header }, /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React20.createElement(Form2.Form, { name: header }, /* @__PURE__ */ React20.createElement(
         Modal2.Body,
         {
-          style: { paddingTop: 0, paddingBottom: 0, marginTop: spacing3.lg }
+          style: { paddingTop: 0, paddingBottom: 0, marginTop: spacing2.lg }
         },
-        errors && /* @__PURE__ */ React19.createElement(ErrorBanner, { style: { marginBottom: spacing3.xl } }, /* @__PURE__ */ React19.createElement(Banner.Content, null, /* @__PURE__ */ React19.createElement(Banner.Title, null, I18n.t("savedViews.modal.errors.title", { mode })), /* @__PURE__ */ React19.createElement(Banner.Body, null, errors?.form || I18n.t(`savedViews.modal.errors.description.${mode}`)))),
-        /* @__PURE__ */ React19.createElement(Form.Row, null, /* @__PURE__ */ React19.createElement(
-          Form.Text,
+        errors && /* @__PURE__ */ React20.createElement(ErrorBanner, { style: { marginBottom: spacing2.xl } }, /* @__PURE__ */ React20.createElement(Banner.Content, null, /* @__PURE__ */ React20.createElement(Banner.Title, null, I18n.t("savedViews.modal.errors.title", { mode })), /* @__PURE__ */ React20.createElement(Banner.Body, null, errors?.form || I18n.t(`savedViews.modal.errors.description.${mode}`)))),
+        /* @__PURE__ */ React20.createElement(Form2.Row, null, /* @__PURE__ */ React20.createElement(
+          NameInputField,
           {
-            name: "name",
             error: errors?.name,
-            placeholder: I18n.t("savedViews.modal.fields.name"),
-            label: I18n.t("savedViews.modal.fields.name"),
-            colWidth: 12,
-            onChange: () => resetMutations()
+            onResetMutations: resetMutations
           }
         )),
-        /* @__PURE__ */ React19.createElement(
-          Form.Row,
+        /* @__PURE__ */ React20.createElement(
+          Form2.Row,
           {
-            style: { marginTop: errors?.name ? spacing3.xl : spacing3.none }
+            style: { marginTop: errors?.name ? spacing2.xl : spacing2.none }
           },
-          /* @__PURE__ */ React19.createElement(
-            Form.TextArea,
+          /* @__PURE__ */ React20.createElement(
+            Form2.TextArea,
             {
               name: "description",
               placeholder: I18n.t("savedViews.modal.fields.description"),
@@ -10307,8 +10394,8 @@ var FormModalBase = ({
             }
           )
         ),
-        viewLevelOptions.length > 1 && mode === "create" /* CREATE */ ? /* @__PURE__ */ React19.createElement(Form.Row, null, /* @__PURE__ */ React19.createElement(
-          Form.Select,
+        viewLevelOptions.length > 1 && mode === "create" /* CREATE */ ? /* @__PURE__ */ React20.createElement(Form2.Row, null, /* @__PURE__ */ React20.createElement(
+          Form2.Select,
           {
             name: "view_level",
             options: viewLevelOptions,
@@ -10317,9 +10404,9 @@ var FormModalBase = ({
             onSearch: false,
             onClear: false
           }
-        )) : /* @__PURE__ */ React19.createElement(React19.Fragment, null)
-      ), /* @__PURE__ */ React19.createElement(Modal2.Footer, { style: { borderTop: `1px solid ${colors3.gray85}` } }, /* @__PURE__ */ React19.createElement(Flex4, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React19.createElement(Typography2, { color: "gray45", italic: true }, /* @__PURE__ */ React19.createElement(Typography2, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React19.createElement(Modal2.FooterButtons, null, /* @__PURE__ */ React19.createElement(Button4, { type: "reset", variant: "tertiary", disabled: isLoading }, I18n.t("savedViews.actions.cancel")), /* @__PURE__ */ React19.createElement(
-        Button4,
+        )) : /* @__PURE__ */ React20.createElement(React20.Fragment, null)
+      ), /* @__PURE__ */ React20.createElement(Modal2.Footer, { style: { borderTop: `1px solid ${colors3.gray85}` } }, /* @__PURE__ */ React20.createElement(Flex3, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React20.createElement(Typography2, { color: "gray45", italic: true }, /* @__PURE__ */ React20.createElement(Typography2, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React20.createElement(Modal2.FooterButtons, null, /* @__PURE__ */ React20.createElement(Button5, { type: "reset", variant: "tertiary", disabled: isLoading }, I18n.t("savedViews.actions.cancel")), /* @__PURE__ */ React20.createElement(
+        Button5,
         {
           "data-testid": "create-update-modal-button",
           type: "submit",
@@ -10334,7 +10421,7 @@ var FormModalBase = ({
 };
 
 // src/components/modals/form-modal/FormModal.tsx
-import { useI18nContext as useI18nContext8 } from "@procore/core-react";
+import { useI18nContext as useI18nContext9 } from "@procore/core-react";
 var FormModal = ({
   open,
   mode,
@@ -10347,8 +10434,8 @@ var FormModal = ({
   onSelect,
   defaultView
 }) => {
-  const i18n = useI18nContext8();
-  return /* @__PURE__ */ React20.createElement(
+  const i18n = useI18nContext9();
+  return /* @__PURE__ */ React21.createElement(
     FormModalBase,
     {
       open,
@@ -10371,18 +10458,18 @@ var FormModal = ({
 // src/components/modals/form-modal/SharedViewFormModal.tsx
 import {
   Banner as Banner2,
-  Button as Button5,
+  Button as Button6,
   colors as colors4,
   ErrorBanner as ErrorBanner2,
-  Flex as Flex5,
-  Form as Form2,
+  Flex as Flex4,
+  Form as Form3,
   Modal as Modal3,
   P as P3,
-  spacing as spacing4,
+  spacing as spacing3,
   Typography as Typography3,
-  useI18nContext as useI18nContext9
+  useI18nContext as useI18nContext10
 } from "@procore/core-react";
-import * as React21 from "react";
+import * as React22 from "react";
 import * as yup2 from "yup";
 var SharedViewFormModal = ({
   open,
@@ -10394,7 +10481,7 @@ var SharedViewFormModal = ({
   isCreating,
   resetCreateError
 }) => {
-  const I18n = useI18nContext9();
+  const I18n = useI18nContext10();
   const NAME_MAX_LENGTH = 150;
   const errors = extractMessage(createError, I18n);
   const handleNameChange = () => {
@@ -10405,35 +10492,36 @@ var SharedViewFormModal = ({
   const handleOnSubmit = (data) => {
     onCreateView(data.name, data.description);
   };
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     Modal3,
     {
       "data-testid": "shared-view-form-modal",
       open,
-      onClickOverlay: onClose,
+      howToClose: ["x", "scrim"],
+      onClose,
       style: { width: "540px" }
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(
       Modal3.Header,
       {
         onClose,
         style: {
-          paddingTop: spacing4.lg,
-          paddingBottom: spacing4.xs,
-          paddingLeft: spacing4.xl,
-          paddingRight: spacing4.xl
+          paddingTop: spacing3.lg,
+          paddingBottom: spacing3.xs,
+          paddingLeft: spacing3.xl,
+          paddingRight: spacing3.xl
         }
       },
-      I18n.t("savedViews.modal.create.title")
+      /* @__PURE__ */ React22.createElement(Modal3.Heading, null, I18n.t("savedViews.modal.create.title"))
     ),
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(
       P3,
       {
         style: {
-          paddingLeft: spacing4.xl,
-          paddingRight: spacing4.xl,
-          paddingBottom: spacing4.lg,
-          paddingTop: spacing4.none,
+          paddingLeft: spacing3.xl,
+          paddingRight: spacing3.xl,
+          paddingBottom: spacing3.lg,
+          paddingTop: spacing3.none,
           margin: 0,
           color: colors4.gray45,
           whiteSpace: "pre-line"
@@ -10441,8 +10529,8 @@ var SharedViewFormModal = ({
       },
       I18n.t("savedViews.modal.copyConfirmation.description")
     ),
-    /* @__PURE__ */ React21.createElement(
-      Form2,
+    /* @__PURE__ */ React22.createElement(
+      Form3,
       {
         initialValues: {
           name: fetchedView.name,
@@ -10460,36 +10548,32 @@ var SharedViewFormModal = ({
         onSubmit: handleOnSubmit,
         validateOnChange: true
       },
-      /* @__PURE__ */ React21.createElement(Form2.Form, { name: "share-view-form" }, /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React22.createElement(Form3.Form, { name: "share-view-form" }, /* @__PURE__ */ React22.createElement(
         Modal3.Body,
         {
           style: {
-            paddingTop: spacing4.lg,
+            paddingTop: spacing3.lg,
             paddingBottom: 0,
             borderTop: `1px solid ${colors4.gray85}`
           }
         },
-        errors && /* @__PURE__ */ React21.createElement(ErrorBanner2, { style: { marginBottom: spacing4.xl } }, /* @__PURE__ */ React21.createElement(Banner2.Content, null, /* @__PURE__ */ React21.createElement(Banner2.Title, null, I18n.t("savedViews.modal.errors.title", {
+        errors && /* @__PURE__ */ React22.createElement(ErrorBanner2, { style: { marginBottom: spacing3.xl } }, /* @__PURE__ */ React22.createElement(Banner2.Content, null, /* @__PURE__ */ React22.createElement(Banner2.Title, null, I18n.t("savedViews.modal.errors.title", {
           mode: "create"
-        })), /* @__PURE__ */ React21.createElement(Banner2.Body, null, errors?.form || I18n.t("savedViews.modal.errors.description.create")))),
-        /* @__PURE__ */ React21.createElement(Form2.Row, null, /* @__PURE__ */ React21.createElement(
-          Form2.Text,
+        })), /* @__PURE__ */ React22.createElement(Banner2.Body, null, errors?.form || I18n.t("savedViews.modal.errors.description.create")))),
+        /* @__PURE__ */ React22.createElement(Form3.Row, null, /* @__PURE__ */ React22.createElement(
+          NameInputField,
           {
-            name: "name",
             error: errors?.name,
-            placeholder: I18n.t("savedViews.modal.fields.name"),
-            label: I18n.t("savedViews.modal.fields.name"),
-            colWidth: 12,
-            onChange: handleNameChange
+            onResetMutations: handleNameChange
           }
         )),
-        /* @__PURE__ */ React21.createElement(
-          Form2.Row,
+        /* @__PURE__ */ React22.createElement(
+          Form3.Row,
           {
-            style: { marginTop: errors?.name ? spacing4.xl : spacing4.none }
+            style: { marginTop: errors?.name ? spacing3.xl : spacing3.none }
           },
-          /* @__PURE__ */ React21.createElement(
-            Form2.TextArea,
+          /* @__PURE__ */ React22.createElement(
+            Form3.TextArea,
             {
               name: "description",
               placeholder: I18n.t("savedViews.modal.fields.description"),
@@ -10499,8 +10583,8 @@ var SharedViewFormModal = ({
             }
           )
         )
-      ), /* @__PURE__ */ React21.createElement(Modal3.Footer, { style: { borderTop: `1px solid ${colors4.gray85}` } }, /* @__PURE__ */ React21.createElement(Flex5, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(Typography3, { color: "gray45", italic: true }, /* @__PURE__ */ React21.createElement(Typography3, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React21.createElement(Modal3.FooterButtons, null, /* @__PURE__ */ React21.createElement(
-        Button5,
+      ), /* @__PURE__ */ React22.createElement(Modal3.Footer, { style: { borderTop: `1px solid ${colors4.gray85}` } }, /* @__PURE__ */ React22.createElement(Flex4, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React22.createElement(Typography3, { color: "gray45", italic: true }, /* @__PURE__ */ React22.createElement(Typography3, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React22.createElement(Modal3.FooterButtons, null, /* @__PURE__ */ React22.createElement(
+        Button6,
         {
           variant: "secondary",
           onClick: onCreateTemporaryView,
@@ -10508,8 +10592,8 @@ var SharedViewFormModal = ({
           disabled: isCreating
         },
         I18n.t("savedViews.actions.viewTemporarily")
-      ), /* @__PURE__ */ React21.createElement(
-        Button5,
+      ), /* @__PURE__ */ React22.createElement(
+        Button6,
         {
           type: "submit",
           variant: "primary",
@@ -10524,9 +10608,9 @@ var SharedViewFormModal = ({
 };
 
 // src/utils/hooks/useViewSelection.ts
-import { useState as useState3, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useMemo } from "react";
+import { useState as useState3, useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import { useI18nContext as useI18nContext10 } from "@procore/core-react";
+import { useI18nContext as useI18nContext11 } from "@procore/core-react";
 
 // src/utils/viewStorage.ts
 var ViewStorage = {
@@ -10589,7 +10673,7 @@ var restoreUrlParameter = (currentParam, previousParam, setSearchParams) => {
   }
 };
 var useViewSelection = (config, savedViews, presetViews, openSharedViewModal) => {
-  const I18n = useI18nContext10();
+  const I18n = useI18nContext11();
   const projectIdSegment = config.projectId ?? "company";
   const storageKey = `savedView_${config.domain}_${config.tableName}_${config.companyId}_${projectIdSegment}_${config.userId}`;
   const temporaryStorageKey = `${storageKey}-temporary`;
@@ -10665,7 +10749,7 @@ var useViewSelection = (config, savedViews, presetViews, openSharedViewModal) =>
     },
     [isViewAlreadySelected, openSharedViewModal, allViews, selectView]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const savedViewId = searchParams.get("saved-view");
     restoreUrlParameter(
       savedViewId,
@@ -10705,7 +10789,7 @@ var SavedViewsContent = (props) => {
   const { data: savedViews } = useSavedViewsQuery(queryInput);
   const { mutate: deleteSavedView } = useDeleteSavedView(queryInput);
   const { showToast } = useToastAlertContext3();
-  const i18n = useI18nContext11();
+  const i18n = useI18nContext12();
   const [activeModal, setActiveModal] = useState4(null);
   const [modalData, setModalData] = useState4(null);
   const openModal = (type, data) => {
@@ -10751,7 +10835,7 @@ var SavedViewsContent = (props) => {
     error: createError,
     reset: resetCreateError
   } = useCreateSavedView(queryInput);
-  useEffect3(() => {
+  useEffect4(() => {
     if (fetchError) {
       showToast.error(i18n.t("savedViews.errors.notFound"));
       selectView(selectedView ?? props.defaultView);
@@ -10799,31 +10883,45 @@ var SavedViewsContent = (props) => {
     deleteSelectedView();
     closeModal();
   };
-  return /* @__PURE__ */ React22.createElement(StyledPanel, { provider: props.provider }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(StyledPanel, { provider: props.provider }, /* @__PURE__ */ React23.createElement(
     ExpandedPanel,
     {
       "data-testid": "saved-view-expanded-panel",
       provider: props.provider
     },
-    /* @__PURE__ */ React22.createElement(Panel3.Header, { id: "saved-views-collections-panel-header" }, /* @__PURE__ */ React22.createElement(Panel3.Title, null, /* @__PURE__ */ React22.createElement(Flex6, { alignItems: "center" }, /* @__PURE__ */ React22.createElement(Box2, { paddingRight: "sm" }, i18n.t("savedViews.title")), /* @__PURE__ */ React22.createElement(Tooltip, { showDelay: 200, overlay: i18n.t("savedViews.tooltip") }, /* @__PURE__ */ React22.createElement(Help_default, { size: "sm" })))), /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(Panel3.Header, { id: "saved-views-collections-panel-header" }, /* @__PURE__ */ React23.createElement(Panel3.Title, null, /* @__PURE__ */ React23.createElement(Flex5, { alignItems: "center" }, /* @__PURE__ */ React23.createElement(Box3, { paddingRight: "sm" }, i18n.t("savedViews.title")), /* @__PURE__ */ React23.createElement(
+      Tooltip,
+      {
+        showDelay: 200,
+        overlay: /* @__PURE__ */ React23.createElement(Tooltip.Content, null, i18n.t("savedViews.tooltip"))
+      },
+      /* @__PURE__ */ React23.createElement(
+        Help_default,
+        {
+          tabIndex: 0,
+          size: "sm",
+          "aria-label": i18n.t("savedViews.tooltip")
+        }
+      )
+    ))), /* @__PURE__ */ React23.createElement(
       Tooltip,
       {
         overlay: i18n.t("savedViews.actions.create"),
         showDelay: 1e3
       },
-      /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
-        Button6,
+      /* @__PURE__ */ React23.createElement(
+        Button7,
         {
-          icon: /* @__PURE__ */ React22.createElement(Plus_default, null),
+          icon: /* @__PURE__ */ React23.createElement(Plus_default, null),
           variant: "secondary",
           "data-testid": "expanded-panel-create-button",
           onClick: () => openModal("create" /* CREATE */),
           "aria-label": i18n.t("savedViews.actions.create")
         },
         i18n.t("savedViews.actions.create")
-      ))
+      )
     )),
-    /* @__PURE__ */ React22.createElement(Panel3.Body, { style: { display: "flex", flexFlow: "column" } }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(Panel3.Body, { style: { display: "flex", flexFlow: "column" } }, /* @__PURE__ */ React23.createElement(
       PanelContent,
       {
         onSelect: ({ item }) => selectView(item),
@@ -10840,7 +10938,7 @@ var SavedViewsContent = (props) => {
         onClearTemporary: clearTemporaryView
       }
     ))
-  ), (isModalOpen("create" /* CREATE */) || isModalOpen("update" /* UPDATE */)) && /* @__PURE__ */ React22.createElement(
+  ), (isModalOpen("create" /* CREATE */) || isModalOpen("update" /* UPDATE */)) && /* @__PURE__ */ React23.createElement(
     FormModal,
     {
       open: true,
@@ -10854,14 +10952,14 @@ var SavedViewsContent = (props) => {
       setOpenEditCreateModal: closeModal,
       defaultView: props.defaultView
     }
-  ), selectedView && isModalOpen("delete" /* DELETE */) && /* @__PURE__ */ React22.createElement(
+  ), selectedView && isModalOpen("delete" /* DELETE */) && /* @__PURE__ */ React23.createElement(
     SavedViewsDeleteConfirmationModalShared,
     {
       open: true,
       onDelete: confirmDeleteAndCloseModal,
       onCancel: closeModal
     }
-  ), fetchedView && isModalOpen("sharedView" /* SHARED_VIEW */) && /* @__PURE__ */ React22.createElement(
+  ), fetchedView && isModalOpen("sharedView" /* SHARED_VIEW */) && /* @__PURE__ */ React23.createElement(
     SharedViewFormModal,
     {
       open: true,
@@ -10876,11 +10974,11 @@ var SavedViewsContent = (props) => {
   ));
 };
 var SavedViews = (props) => {
-  return /* @__PURE__ */ React22.createElement(EnvironmentI18nProvider, null, /* @__PURE__ */ React22.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React22.createElement(ToastAlertProvider, null, /* @__PURE__ */ React22.createElement(SavedViewsContent, { ...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 React23, { useCallback as useCallback4 } from "react";
+import React24, { useCallback as useCallback4 } from "react";
 
 // src/components/adapters/smart-grid/SmartGridDefaultSavedView.tsx
 import { useMemo as useMemo2 } from "react";
@@ -10943,7 +11041,7 @@ var useNormalizedDefaultViews = (defaultViews, gridApi) => {
 };
 
 // src/components/adapters/smart-grid/useSmartGridConfig.ts
-import { useState as useState5, useEffect as useEffect4 } from "react";
+import { useState as useState5, useEffect as useEffect5 } from "react";
 var GRID_STATE_EVENTS = [
   "sortChanged",
   "filterOpened",
@@ -10962,7 +11060,7 @@ var useSmartGridConfig = (gridApi) => {
   const [config, setConfig] = useState5(
     () => getSmartGridConfig(gridApi)
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!gridApi)
       return;
     const updateConfig = () => {
@@ -11009,7 +11107,7 @@ var SmartGridSavedViews = (props) => {
     },
     [gridApi, tableConfig, setTableConfig]
   );
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     SavedViews,
     {
       onSelect,
@@ -11027,7 +11125,7 @@ var SmartGridSavedViews = (props) => {
 };
 
 // src/components/adapters/data-table/DataTableSavedViews.tsx
-import React24, {
+import React25, {
   forwardRef as forwardRef11,
   useImperativeHandle,
   useState as useState6,
@@ -11127,7 +11225,7 @@ var DataTableSavedViews = forwardRef11((props, ref) => {
   if (!internalTableConfig) {
     return null;
   }
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     SavedViews,
     {
       onSelect,