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

package/dist/legacy/index.js

@@ -109,7 +109,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;
@@ -120,7 +120,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;
@@ -7881,7 +7881,7 @@ function __rest(s2, e2) {
   return t2;
 }
 
-// ../../node_modules/@procore/core-icons/dist/Icon.js
+// node_modules/@procore/core-icons/dist/Icon.js
 var React = __toESM(require("react"));
 function getSize(size) {
   if (size === "sm") {
@@ -7900,7 +7900,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
 var React2 = __toESM(require("react"));
 var Building = React2.forwardRef(function Building2(props, ref) {
   return React2.createElement(
@@ -7916,7 +7916,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
 var React3 = __toESM(require("react"));
 var ChevronDown = React3.forwardRef(function ChevronDown2(props, ref) {
   return React3.createElement(
@@ -7932,7 +7932,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
 var React4 = __toESM(require("react"));
 var ChevronRight = React4.forwardRef(function ChevronRight2(props, ref) {
   return React4.createElement(
@@ -7948,7 +7948,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
 var React5 = __toESM(require("react"));
 var Clear = React5.forwardRef(function Clear2(props, ref) {
   return React5.createElement(
@@ -7964,7 +7964,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
 var React6 = __toESM(require("react"));
 var Excavator = React6.forwardRef(function Excavator2(props, ref) {
   return React6.createElement(
@@ -7981,7 +7981,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
 var React7 = __toESM(require("react"));
 var ExpandSidebar = React7.forwardRef(function ExpandSidebar2(props, ref) {
   return React7.createElement(
@@ -7999,7 +7999,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
 var React8 = __toESM(require("react"));
 var Help = React8.forwardRef(function Help2(props, ref) {
   return React8.createElement(
@@ -8015,7 +8015,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
 var React9 = __toESM(require("react"));
 var Link = React9.forwardRef(function Link2(props, ref) {
   return React9.createElement(
@@ -8032,7 +8032,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
 var React10 = __toESM(require("react"));
 var Person = React10.forwardRef(function Person2(props, ref) {
   return React10.createElement(
@@ -8048,7 +8048,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
 var React11 = __toESM(require("react"));
 var Plus = React11.forwardRef(function Plus2(props, ref) {
   return React11.createElement(
@@ -8161,7 +8161,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:
@@ -8194,7 +8194,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:
@@ -8214,7 +8214,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;
@@ -8323,7 +8323,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) {
@@ -8500,7 +8500,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:
@@ -8544,11 +8544,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;
@@ -9356,8 +9356,8 @@ var useSavedViewsPanel = (domain, tableName) => {
     setIsOpen(!isOpen);
     localStorage.setItem(key(domain, tableName), JSON.stringify(!isOpen));
   };
-  const Button7 = () => /* @__PURE__ */ import_react5.default.createElement(SavedViewsButton, { handleClick, isOpen });
-  return { isOpen, SavedViewsButton: Button7 };
+  const Button8 = () => /* @__PURE__ */ import_react5.default.createElement(SavedViewsButton, { handleClick, isOpen });
+  return { isOpen, SavedViewsButton: Button8 };
 };
 var useSavedViewsPanel_default = useSavedViewsPanel;
 
@@ -9433,6 +9433,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,
     {
@@ -9442,7 +9453,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",
@@ -9452,7 +9464,7 @@ var SavedViewCollectionMenuItem = (props) => {
       },
       props.item.name
     ),
-    /* @__PURE__ */ React15.createElement(RowActionsBox, null, /* @__PURE__ */ React15.createElement(import_core_react3.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(import_core_react3.Box, { justifyContent: "space-between" }, hasUpdateButton && /* @__PURE__ */ React15.createElement(
       import_core_react3.Button,
       {
         onClick: updateItem,
@@ -9463,7 +9475,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(
       import_core_react3.Button,
       {
         onClick: copyShareLink,
@@ -9473,7 +9485,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(
       import_core_react3.Button,
       {
         onClick: (e2) => {
@@ -9488,7 +9500,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(import_core_react3.Box, null, props.item.view_level !== "default" && props.canEditOrDelete && /* @__PURE__ */ React15.createElement("div", { onClick: (e2) => e2.stopPropagation() }, /* @__PURE__ */ React15.createElement(
+    )), /* @__PURE__ */ React15.createElement(import_core_react3.Box, null, hasOverflowMenu && /* @__PURE__ */ React15.createElement(
       import_core_react3.DropdownFlyout,
       {
         "data-testid": "saved-view-overflow-button",
@@ -9499,7 +9511,7 @@ var SavedViewCollectionMenuItem = (props) => {
         variant: "tertiary",
         disabled: props.isUpdateProcessing
       }
-    ))))
+    )))
   );
 };
 
@@ -9899,27 +9911,31 @@ var groupIcon = (group) => {
       return /* @__PURE__ */ import_react7.default.createElement(Building_default, null);
   }
 };
-var Header = styled_components_esm_default(import_core_react6.Flex)`
-  width: 100%;
+var StyledButton2 = styled_components_esm_default(import_core_react6.Button)`
   &:hover {
     background-color: ${import_core_react6.colors.gray98};
   }
 `;
 var ViewLevelHeader = ({ expanded, toggleGroup, group }) => {
   const I18n = (0, import_core_react6.useI18nContext)();
-  return /* @__PURE__ */ import_react7.default.createElement(
-    Header,
+  return /* @__PURE__ */ import_react7.default.createElement(import_core_react6.Box, { style: { width: "100%" } }, /* @__PURE__ */ import_react7.default.createElement(
+    StyledButton2,
     {
-      alignItems: "center",
-      padding: `${import_core_react6.spacing.sm}px`,
-      gap: `${import_core_react6.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__ */ import_react7.default.createElement(ChevronDown_default, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(ChevronRight_default, { size: "sm" })
     },
-    expanded ? /* @__PURE__ */ import_react7.default.createElement(ChevronDown_default, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(ChevronRight_default, { size: "sm" }),
     groupIcon(group),
     /* @__PURE__ */ import_react7.default.createElement(import_core_react6.Typography, { weight: "semibold" }, I18n.t(`savedViews.viewLevel.${group}`))
-  );
+  ));
 };
 var ViewLevelHeader_default = ViewLevelHeader;
 
@@ -9937,7 +9953,7 @@ var useScrollToRef = (dependency) => {
 
 // src/components/panels/PanelContent.styles.ts
 var import_core_react7 = require("@procore/core-react");
-var Row = styled_components_esm_default(import_core_react7.UNSAFE_Menu.Item)`
+var Row = styled_components_esm_default(import_core_react7.MenuImperative.Item)`
   width: 100%;
   padding-left: 35px;
   padding-right: 4px;
@@ -9955,6 +9971,11 @@ var Panel2 = styled_components_esm_default(import_core_react7.DetailPage.Card)`
 `;
 
 // src/components/panels/PanelContent.tsx
+var StyledMenuImperative = styled_components_esm_default(import_core_react8.MenuImperative)`
+  div[role='listbox'] {
+    padding: 0;
+  }
+`;
 var PanelContent = (props) => {
   const { queryInput, selectedSavedView, tableConfig } = props;
   const { showToast } = (0, import_toast_alert2.useToastAlertContext)();
@@ -9995,40 +10016,52 @@ var PanelContent = (props) => {
       }
     });
   };
-  return /* @__PURE__ */ import_react9.default.createElement(Panel2, { "data-testid": "inner-panel" }, /* @__PURE__ */ import_react9.default.createElement(import_core_react8.Flex, { direction: "column", style: { height: "100%", width: "100%" } }, temporaryView && /* @__PURE__ */ import_react9.default.createElement(
-    Row,
+  return /* @__PURE__ */ import_react9.default.createElement(Panel2, { "data-testid": "inner-panel" }, /* @__PURE__ */ import_react9.default.createElement(import_core_react8.Flex, { direction: "column", style: { height: "100%", width: "100%" } }, (temporaryView || presetViews) && /* @__PURE__ */ import_react9.default.createElement(
+    StyledMenuImperative,
     {
-      selected: isTemporarySelected,
-      onClick: () => props.onSelect({ item: temporaryView }),
-      ref: isTemporarySelected ? selectedRowRef : null
+      role: "listbox",
+      onSelect: (selection) => {
+        if ((selectedSavedView == null ? void 0 : selectedSavedView.id) !== selection.item.id) {
+          props.onSelect({ item: selection.item });
+        }
+      }
     },
-    /* @__PURE__ */ import_react9.default.createElement(
-      SavedViewCollectionMenuItem,
+    /* @__PURE__ */ import_react9.default.createElement(import_core_react8.MenuImperative.Options, null, temporaryView && /* @__PURE__ */ import_react9.default.createElement(
+      Row,
       {
+        key: temporaryView.id,
         item: temporaryView,
         selected: isTemporarySelected,
-        onClearTemporary: props.onClearTemporary
-      }
-    )
-  ), presetViews.map((presetView) => {
-    const isSelected = (selectedSavedView == null ? void 0 : selectedSavedView.id) === presetView.id;
-    return /* @__PURE__ */ import_react9.default.createElement(
-      Row,
-      {
-        key: presetView.id,
-        selected: isSelected,
-        onClick: () => props.onSelect({ item: presetView }),
-        ref: isSelected ? selectedRowRef : null
+        ref: isTemporarySelected ? selectedRowRef : null
       },
       /* @__PURE__ */ import_react9.default.createElement(
         SavedViewCollectionMenuItem,
         {
-          item: presetView,
-          selected: isSelected
+          item: temporaryView,
+          selected: isTemporarySelected,
+          onClearTemporary: props.onClearTemporary
         }
       )
-    );
-  }), viewLevels.map((level) => {
+    ), presetViews.map((presetView) => {
+      const isSelected = (selectedSavedView == null ? void 0 : selectedSavedView.id) === presetView.id;
+      return /* @__PURE__ */ import_react9.default.createElement(
+        Row,
+        {
+          key: presetView.id,
+          item: presetView,
+          selected: isSelected,
+          ref: isSelected ? selectedRowRef : null
+        },
+        /* @__PURE__ */ import_react9.default.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"
@@ -10040,48 +10073,60 @@ var PanelContent = (props) => {
         toggleGroup,
         expanded: isExpanded
       }
-    ), views.map((view) => {
-      const isSelected = (selectedSavedView == null ? void 0 : 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__ */ import_react9.default.createElement(
-        Row,
-        {
-          key: view.id,
-          item: view,
-          selected: isSelected,
-          onClick: () => {
-            props.onSelect({ item: view });
-          },
-          ref: isSelected ? selectedRowRef : null
-        },
-        /* @__PURE__ */ import_react9.default.createElement(
-          SavedViewCollectionMenuItem,
+    ), isExpanded && views.length > 0 && /* @__PURE__ */ import_react9.default.createElement(
+      StyledMenuImperative,
+      {
+        id: `saved-views-collections-${level}`,
+        role: "listbox",
+        onSelect: (selection) => {
+          if ((selectedSavedView == null ? void 0 : selectedSavedView.id) !== selection.item.id) {
+            props.onSelect({ item: selection.item });
+          }
+        }
+      },
+      /* @__PURE__ */ import_react9.default.createElement(import_core_react8.MenuImperative.Options, null, views.map((view) => {
+        const isSelected = (selectedSavedView == null ? void 0 : 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__ */ import_react9.default.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__ */ import_react9.default.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
-var import_core_react14 = require("@procore/core-react");
+var import_core_react15 = require("@procore/core-react");
 var import_react13 = __toESM(require("react"));
 var import_react_query3 = require("@tanstack/react-query");
 var import_toast_alert3 = require("@procore/toast-alert");
@@ -10114,8 +10159,8 @@ var SavedViewsDeleteConfirmationModalShared = ({
 var import_react11 = __toESM(require("react"));
 
 // src/components/modals/form-modal/FormModalBase.tsx
-var import_core_react10 = require("@procore/core-react");
-var React19 = __toESM(require("react"));
+var import_core_react11 = require("@procore/core-react");
+var React20 = __toESM(require("react"));
 var yup = __toESM(require("yup"));
 
 // src/components/modals/form-modal/FormModalBaseUtils.ts
@@ -10152,6 +10197,37 @@ function extractMessage(error, I18n) {
   return { form: I18n.t("savedViews.modal.errors.unknown") };
 }
 
+// src/components/modals/form-modal/NameInputField.tsx
+var import_core_react10 = require("@procore/core-react");
+var React19 = __toESM(require("react"));
+var NAME_INPUT_ID = "saved-view-form-name-input";
+var NameInputField = ({
+  error,
+  onResetMutations
+}) => {
+  const I18n = (0, import_core_react10.useI18nContext)();
+  const label = I18n.t("savedViews.modal.fields.name");
+  const { errors: formErrors, submitCount } = (0, import_core_react10.useFormContext)();
+  React19.useEffect(() => {
+    var _a;
+    if (submitCount > 0 && (formErrors == null ? void 0 : formErrors.name)) {
+      (_a = document.getElementById(NAME_INPUT_ID)) == null ? void 0 : _a.focus();
+    }
+  }, [formErrors == null ? void 0 : formErrors.name, submitCount]);
+  return /* @__PURE__ */ React19.createElement(
+    import_core_react10.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;
@@ -10171,7 +10247,7 @@ var FormModalBase = ({
   setOpenEditCreateModal,
   onSelect
 }) => {
-  const I18n = (0, import_core_react10.useI18nContext)();
+  const I18n = (0, import_core_react11.useI18nContext)();
   const NAME_MAX_LENGTH = 150;
   const {
     mutate: createSavedView,
@@ -10230,24 +10306,17 @@ var FormModalBase = ({
     I18n,
     isProjectLevelTool
   );
-  return /* @__PURE__ */ React19.createElement(
-    import_core_react10.Modal,
+  return /* @__PURE__ */ React20.createElement(
+    import_core_react11.Modal,
     {
-      "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(
-      import_core_react10.Modal.Header,
-      {
-        onClose,
-        style: { borderBottom: `1px solid ${import_core_react10.colors.gray85}` }
-      },
-      /* @__PURE__ */ React19.createElement(import_core_react10.H2, null, header)
-    ), /* @__PURE__ */ React19.createElement(
-      import_core_react10.Form,
+    /* @__PURE__ */ React20.createElement(ScrollContainer, null, /* @__PURE__ */ React20.createElement(import_core_react11.Modal.Header, { style: { borderBottom: `1px solid ${import_core_react11.colors.gray85}` } }, /* @__PURE__ */ React20.createElement(import_core_react11.Modal.Heading, null, header)), /* @__PURE__ */ React20.createElement(
+      import_core_react11.Form,
       {
         initialValues: {
           name: initialName,
@@ -10272,30 +10341,26 @@ var FormModalBase = ({
         onReset: onCancel,
         validateOnChange: true
       },
-      /* @__PURE__ */ React19.createElement(import_core_react10.Form.Form, { name: header }, /* @__PURE__ */ React19.createElement(
-        import_core_react10.Modal.Body,
+      /* @__PURE__ */ React20.createElement(import_core_react11.Form.Form, { name: header }, /* @__PURE__ */ React20.createElement(
+        import_core_react11.Modal.Body,
         {
-          style: { paddingTop: 0, paddingBottom: 0, marginTop: import_core_react10.spacing.lg }
+          style: { paddingTop: 0, paddingBottom: 0, marginTop: import_core_react11.spacing.lg }
         },
-        errors && /* @__PURE__ */ React19.createElement(import_core_react10.ErrorBanner, { style: { marginBottom: import_core_react10.spacing.xl } }, /* @__PURE__ */ React19.createElement(import_core_react10.Banner.Content, null, /* @__PURE__ */ React19.createElement(import_core_react10.Banner.Title, null, I18n.t("savedViews.modal.errors.title", { mode })), /* @__PURE__ */ React19.createElement(import_core_react10.Banner.Body, null, (errors == null ? void 0 : errors.form) || I18n.t(`savedViews.modal.errors.description.${mode}`)))),
-        /* @__PURE__ */ React19.createElement(import_core_react10.Form.Row, null, /* @__PURE__ */ React19.createElement(
-          import_core_react10.Form.Text,
+        errors && /* @__PURE__ */ React20.createElement(import_core_react11.ErrorBanner, { style: { marginBottom: import_core_react11.spacing.xl } }, /* @__PURE__ */ React20.createElement(import_core_react11.Banner.Content, null, /* @__PURE__ */ React20.createElement(import_core_react11.Banner.Title, null, I18n.t("savedViews.modal.errors.title", { mode })), /* @__PURE__ */ React20.createElement(import_core_react11.Banner.Body, null, (errors == null ? void 0 : errors.form) || I18n.t(`savedViews.modal.errors.description.${mode}`)))),
+        /* @__PURE__ */ React20.createElement(import_core_react11.Form.Row, null, /* @__PURE__ */ React20.createElement(
+          NameInputField,
           {
-            name: "name",
             error: errors == null ? void 0 : 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(
-          import_core_react10.Form.Row,
+        /* @__PURE__ */ React20.createElement(
+          import_core_react11.Form.Row,
           {
-            style: { marginTop: (errors == null ? void 0 : errors.name) ? import_core_react10.spacing.xl : import_core_react10.spacing.none }
+            style: { marginTop: (errors == null ? void 0 : errors.name) ? import_core_react11.spacing.xl : import_core_react11.spacing.none }
           },
-          /* @__PURE__ */ React19.createElement(
-            import_core_react10.Form.TextArea,
+          /* @__PURE__ */ React20.createElement(
+            import_core_react11.Form.TextArea,
             {
               name: "description",
               placeholder: I18n.t("savedViews.modal.fields.description"),
@@ -10305,8 +10370,8 @@ var FormModalBase = ({
             }
           )
         ),
-        viewLevelOptions.length > 1 && mode === "create" /* CREATE */ ? /* @__PURE__ */ React19.createElement(import_core_react10.Form.Row, null, /* @__PURE__ */ React19.createElement(
-          import_core_react10.Form.Select,
+        viewLevelOptions.length > 1 && mode === "create" /* CREATE */ ? /* @__PURE__ */ React20.createElement(import_core_react11.Form.Row, null, /* @__PURE__ */ React20.createElement(
+          import_core_react11.Form.Select,
           {
             name: "view_level",
             options: viewLevelOptions,
@@ -10315,9 +10380,9 @@ var FormModalBase = ({
             onSearch: false,
             onClear: false
           }
-        )) : /* @__PURE__ */ React19.createElement(React19.Fragment, null)
-      ), /* @__PURE__ */ React19.createElement(import_core_react10.Modal.Footer, { style: { borderTop: `1px solid ${import_core_react10.colors.gray85}` } }, /* @__PURE__ */ React19.createElement(import_core_react10.Flex, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_core_react10.Typography, { color: "gray45", italic: true }, /* @__PURE__ */ React19.createElement(import_core_react10.Typography, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React19.createElement(import_core_react10.Modal.FooterButtons, null, /* @__PURE__ */ React19.createElement(import_core_react10.Button, { type: "reset", variant: "tertiary", disabled: isLoading }, I18n.t("savedViews.actions.cancel")), /* @__PURE__ */ React19.createElement(
-        import_core_react10.Button,
+        )) : /* @__PURE__ */ React20.createElement(React20.Fragment, null)
+      ), /* @__PURE__ */ React20.createElement(import_core_react11.Modal.Footer, { style: { borderTop: `1px solid ${import_core_react11.colors.gray85}` } }, /* @__PURE__ */ React20.createElement(import_core_react11.Flex, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React20.createElement(import_core_react11.Typography, { color: "gray45", italic: true }, /* @__PURE__ */ React20.createElement(import_core_react11.Typography, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React20.createElement(import_core_react11.Modal.FooterButtons, null, /* @__PURE__ */ React20.createElement(import_core_react11.Button, { type: "reset", variant: "tertiary", disabled: isLoading }, I18n.t("savedViews.actions.cancel")), /* @__PURE__ */ React20.createElement(
+        import_core_react11.Button,
         {
           "data-testid": "create-update-modal-button",
           type: "submit",
@@ -10332,7 +10397,7 @@ var FormModalBase = ({
 };
 
 // src/components/modals/form-modal/FormModal.tsx
-var import_core_react11 = require("@procore/core-react");
+var import_core_react12 = require("@procore/core-react");
 var FormModal = ({
   open,
   mode,
@@ -10345,7 +10410,7 @@ var FormModal = ({
   onSelect,
   defaultView
 }) => {
-  const i18n = (0, import_core_react11.useI18nContext)();
+  const i18n = (0, import_core_react12.useI18nContext)();
   return /* @__PURE__ */ import_react11.default.createElement(
     FormModalBase,
     {
@@ -10367,8 +10432,8 @@ var FormModal = ({
 };
 
 // src/components/modals/form-modal/SharedViewFormModal.tsx
-var import_core_react12 = require("@procore/core-react");
-var React21 = __toESM(require("react"));
+var import_core_react13 = require("@procore/core-react");
+var React22 = __toESM(require("react"));
 var yup2 = __toESM(require("yup"));
 var SharedViewFormModal = ({
   open,
@@ -10380,7 +10445,7 @@ var SharedViewFormModal = ({
   isCreating,
   resetCreateError
 }) => {
-  const I18n = (0, import_core_react12.useI18nContext)();
+  const I18n = (0, import_core_react13.useI18nContext)();
   const NAME_MAX_LENGTH = 150;
   const errors = extractMessage(createError, I18n);
   const handleNameChange = () => {
@@ -10391,44 +10456,45 @@ var SharedViewFormModal = ({
   const handleOnSubmit = (data) => {
     onCreateView(data.name, data.description);
   };
-  return /* @__PURE__ */ React21.createElement(
-    import_core_react12.Modal,
+  return /* @__PURE__ */ React22.createElement(
+    import_core_react13.Modal,
     {
       "data-testid": "shared-view-form-modal",
       open,
-      onClickOverlay: onClose,
+      howToClose: ["x", "scrim"],
+      onClose,
       style: { width: "540px" }
     },
-    /* @__PURE__ */ React21.createElement(
-      import_core_react12.Modal.Header,
+    /* @__PURE__ */ React22.createElement(
+      import_core_react13.Modal.Header,
       {
         onClose,
         style: {
-          paddingTop: import_core_react12.spacing.lg,
-          paddingBottom: import_core_react12.spacing.xs,
-          paddingLeft: import_core_react12.spacing.xl,
-          paddingRight: import_core_react12.spacing.xl
+          paddingTop: import_core_react13.spacing.lg,
+          paddingBottom: import_core_react13.spacing.xs,
+          paddingLeft: import_core_react13.spacing.xl,
+          paddingRight: import_core_react13.spacing.xl
         }
       },
-      I18n.t("savedViews.modal.create.title")
+      /* @__PURE__ */ React22.createElement(import_core_react13.Modal.Heading, null, I18n.t("savedViews.modal.create.title"))
     ),
-    /* @__PURE__ */ React21.createElement(
-      import_core_react12.P,
+    /* @__PURE__ */ React22.createElement(
+      import_core_react13.P,
       {
         style: {
-          paddingLeft: import_core_react12.spacing.xl,
-          paddingRight: import_core_react12.spacing.xl,
-          paddingBottom: import_core_react12.spacing.lg,
-          paddingTop: import_core_react12.spacing.none,
+          paddingLeft: import_core_react13.spacing.xl,
+          paddingRight: import_core_react13.spacing.xl,
+          paddingBottom: import_core_react13.spacing.lg,
+          paddingTop: import_core_react13.spacing.none,
           margin: 0,
-          color: import_core_react12.colors.gray45,
+          color: import_core_react13.colors.gray45,
           whiteSpace: "pre-line"
         }
       },
       I18n.t("savedViews.modal.copyConfirmation.description")
     ),
-    /* @__PURE__ */ React21.createElement(
-      import_core_react12.Form,
+    /* @__PURE__ */ React22.createElement(
+      import_core_react13.Form,
       {
         initialValues: {
           name: fetchedView.name,
@@ -10446,36 +10512,32 @@ var SharedViewFormModal = ({
         onSubmit: handleOnSubmit,
         validateOnChange: true
       },
-      /* @__PURE__ */ React21.createElement(import_core_react12.Form.Form, { name: "share-view-form" }, /* @__PURE__ */ React21.createElement(
-        import_core_react12.Modal.Body,
+      /* @__PURE__ */ React22.createElement(import_core_react13.Form.Form, { name: "share-view-form" }, /* @__PURE__ */ React22.createElement(
+        import_core_react13.Modal.Body,
         {
           style: {
-            paddingTop: import_core_react12.spacing.lg,
+            paddingTop: import_core_react13.spacing.lg,
             paddingBottom: 0,
-            borderTop: `1px solid ${import_core_react12.colors.gray85}`
+            borderTop: `1px solid ${import_core_react13.colors.gray85}`
           }
         },
-        errors && /* @__PURE__ */ React21.createElement(import_core_react12.ErrorBanner, { style: { marginBottom: import_core_react12.spacing.xl } }, /* @__PURE__ */ React21.createElement(import_core_react12.Banner.Content, null, /* @__PURE__ */ React21.createElement(import_core_react12.Banner.Title, null, I18n.t("savedViews.modal.errors.title", {
+        errors && /* @__PURE__ */ React22.createElement(import_core_react13.ErrorBanner, { style: { marginBottom: import_core_react13.spacing.xl } }, /* @__PURE__ */ React22.createElement(import_core_react13.Banner.Content, null, /* @__PURE__ */ React22.createElement(import_core_react13.Banner.Title, null, I18n.t("savedViews.modal.errors.title", {
           mode: "create"
-        })), /* @__PURE__ */ React21.createElement(import_core_react12.Banner.Body, null, (errors == null ? void 0 : errors.form) || I18n.t("savedViews.modal.errors.description.create")))),
-        /* @__PURE__ */ React21.createElement(import_core_react12.Form.Row, null, /* @__PURE__ */ React21.createElement(
-          import_core_react12.Form.Text,
+        })), /* @__PURE__ */ React22.createElement(import_core_react13.Banner.Body, null, (errors == null ? void 0 : errors.form) || I18n.t("savedViews.modal.errors.description.create")))),
+        /* @__PURE__ */ React22.createElement(import_core_react13.Form.Row, null, /* @__PURE__ */ React22.createElement(
+          NameInputField,
           {
-            name: "name",
             error: errors == null ? void 0 : 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(
-          import_core_react12.Form.Row,
+        /* @__PURE__ */ React22.createElement(
+          import_core_react13.Form.Row,
           {
-            style: { marginTop: (errors == null ? void 0 : errors.name) ? import_core_react12.spacing.xl : import_core_react12.spacing.none }
+            style: { marginTop: (errors == null ? void 0 : errors.name) ? import_core_react13.spacing.xl : import_core_react13.spacing.none }
           },
-          /* @__PURE__ */ React21.createElement(
-            import_core_react12.Form.TextArea,
+          /* @__PURE__ */ React22.createElement(
+            import_core_react13.Form.TextArea,
             {
               name: "description",
               placeholder: I18n.t("savedViews.modal.fields.description"),
@@ -10485,8 +10547,8 @@ var SharedViewFormModal = ({
             }
           )
         )
-      ), /* @__PURE__ */ React21.createElement(import_core_react12.Modal.Footer, { style: { borderTop: `1px solid ${import_core_react12.colors.gray85}` } }, /* @__PURE__ */ React21.createElement(import_core_react12.Flex, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(import_core_react12.Typography, { color: "gray45", italic: true }, /* @__PURE__ */ React21.createElement(import_core_react12.Typography, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React21.createElement(import_core_react12.Modal.FooterButtons, null, /* @__PURE__ */ React21.createElement(
-        import_core_react12.Button,
+      ), /* @__PURE__ */ React22.createElement(import_core_react13.Modal.Footer, { style: { borderTop: `1px solid ${import_core_react13.colors.gray85}` } }, /* @__PURE__ */ React22.createElement(import_core_react13.Flex, { grow: "1", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_core_react13.Typography, { color: "gray45", italic: true }, /* @__PURE__ */ React22.createElement(import_core_react13.Typography, { color: "red45" }, "*"), " ", I18n.t("savedViews.modal.info.required_fields")), /* @__PURE__ */ React22.createElement(import_core_react13.Modal.FooterButtons, null, /* @__PURE__ */ React22.createElement(
+        import_core_react13.Button,
         {
           variant: "secondary",
           onClick: onCreateTemporaryView,
@@ -10494,8 +10556,8 @@ var SharedViewFormModal = ({
           disabled: isCreating
         },
         I18n.t("savedViews.actions.viewTemporarily")
-      ), /* @__PURE__ */ React21.createElement(
-        import_core_react12.Button,
+      ), /* @__PURE__ */ React22.createElement(
+        import_core_react13.Button,
         {
           type: "submit",
           variant: "primary",
@@ -10512,7 +10574,7 @@ var SharedViewFormModal = ({
 // src/utils/hooks/useViewSelection.ts
 var import_react12 = require("react");
 var import_react_router_dom = require("react-router-dom");
-var import_core_react13 = require("@procore/core-react");
+var import_core_react14 = require("@procore/core-react");
 
 // src/utils/viewStorage.ts
 var ViewStorage = {
@@ -10575,7 +10637,7 @@ var restoreUrlParameter = (currentParam, previousParam, setSearchParams) => {
   }
 };
 var useViewSelection = (config, savedViews, presetViews, openSharedViewModal) => {
-  const I18n = (0, import_core_react13.useI18nContext)();
+  const I18n = (0, import_core_react14.useI18nContext)();
   const projectIdSegment = config.projectId ?? "company";
   const storageKey = `savedView_${config.domain}_${config.tableName}_${config.companyId}_${projectIdSegment}_${config.userId}`;
   const temporaryStorageKey = `${storageKey}-temporary`;
@@ -10691,7 +10753,7 @@ var SavedViewsContent = (props) => {
   const { data: savedViews } = useSavedViewsQuery(queryInput);
   const { mutate: deleteSavedView } = useDeleteSavedView(queryInput);
   const { showToast } = (0, import_toast_alert3.useToastAlertContext)();
-  const i18n = (0, import_core_react14.useI18nContext)();
+  const i18n = (0, import_core_react15.useI18nContext)();
   const [activeModal, setActiveModal] = (0, import_react13.useState)(null);
   const [modalData, setModalData] = (0, import_react13.useState)(null);
   const openModal = (type, data) => {
@@ -10791,14 +10853,28 @@ var SavedViewsContent = (props) => {
       "data-testid": "saved-view-expanded-panel",
       provider: props.provider
     },
-    /* @__PURE__ */ import_react13.default.createElement(import_core_react14.Panel.Header, { id: "saved-views-collections-panel-header" }, /* @__PURE__ */ import_react13.default.createElement(import_core_react14.Panel.Title, null, /* @__PURE__ */ import_react13.default.createElement(import_core_react14.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react13.default.createElement(import_core_react14.Box, { paddingRight: "sm" }, i18n.t("savedViews.title")), /* @__PURE__ */ import_react13.default.createElement(import_core_react14.Tooltip, { showDelay: 200, overlay: i18n.t("savedViews.tooltip") }, /* @__PURE__ */ import_react13.default.createElement(Help_default, { size: "sm" })))), /* @__PURE__ */ import_react13.default.createElement(
-      import_core_react14.Tooltip,
+    /* @__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(
+      import_core_react15.Tooltip,
+      {
+        showDelay: 200,
+        overlay: /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Tooltip.Content, null, i18n.t("savedViews.tooltip"))
+      },
+      /* @__PURE__ */ import_react13.default.createElement(
+        Help_default,
+        {
+          tabIndex: 0,
+          size: "sm",
+          "aria-label": i18n.t("savedViews.tooltip")
+        }
+      )
+    ))), /* @__PURE__ */ import_react13.default.createElement(
+      import_core_react15.Tooltip,
       {
         overlay: i18n.t("savedViews.actions.create"),
         showDelay: 1e3
       },
-      /* @__PURE__ */ import_react13.default.createElement("span", null, /* @__PURE__ */ import_react13.default.createElement(
-        import_core_react14.Button,
+      /* @__PURE__ */ import_react13.default.createElement(
+        import_core_react15.Button,
         {
           icon: /* @__PURE__ */ import_react13.default.createElement(Plus_default, null),
           variant: "secondary",
@@ -10807,9 +10883,9 @@ var SavedViewsContent = (props) => {
           "aria-label": i18n.t("savedViews.actions.create")
         },
         i18n.t("savedViews.actions.create")
-      ))
+      )
     )),
-    /* @__PURE__ */ import_react13.default.createElement(import_core_react14.Panel.Body, { style: { display: "flex", flexFlow: "column" } }, /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react13.default.createElement(import_core_react15.Panel.Body, { style: { display: "flex", flexFlow: "column" } }, /* @__PURE__ */ import_react13.default.createElement(
       PanelContent,
       {
         onSelect: ({ item }) => selectView(item),