@uniformdev/mesh-sdk-react 20.50.2-alpha.39 → 20.50.2-alpha.77

package/dist/index.esm.js

@@ -2316,7 +2316,7 @@ function VariablesComposer(props) {
       nodes: [VariableNode],
       editorState: deserializeVariablesEditorState(props.value)
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react/exhaustive-deps
     []
   );
   const editorState = useRef5(void 0);
@@ -3904,7 +3904,36 @@ function convertRequestDataToDataType(dataType, requestData) {
 }
 
 // src/components/Delegation/DelegationGate.tsx
-import { Fragment as Fragment10, jsx as jsx46 } from "@emotion/react/jsx-runtime";
+import { Callout as Callout3, LoadingOverlay } from "@uniformdev/design-system";
+import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+var defaultLoadingWrapperStyle = {
+  position: "relative",
+  minHeight: "12rem",
+  width: "100%"
+};
+function DefaultDelegationLoading() {
+  return /* @__PURE__ */ jsx46("div", { style: defaultLoadingWrapperStyle, children: /* @__PURE__ */ jsx46(LoadingOverlay, { isActive: true, statusMessage: "Connecting to Uniform..." }) });
+}
+function DefaultDelegationDisabled() {
+  return /* @__PURE__ */ jsx46(Callout3, { type: "caution", title: "Feature unavailable", children: "This app requires permissions that are not currently enabled. Please contact your Uniform administrator to enable identity delegation for this integration." });
+}
+function DefaultDelegationError({ error }) {
+  return /* @__PURE__ */ jsxs21(Callout3, { type: "error", title: "Connection error", children: [
+    /* @__PURE__ */ jsx46("p", { children: "Failed to establish a secure connection with Uniform." }),
+    /* @__PURE__ */ jsx46(
+      "pre",
+      {
+        style: {
+          marginTop: 8,
+          marginBottom: 0,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word"
+        },
+        children: error.message
+      }
+    )
+  ] });
+}
 function DelegationGate({
   children,
   loadingComponent,
@@ -3916,17 +3945,20 @@ function DelegationGate({
     return /* @__PURE__ */ jsx46(Fragment10, { children });
   }
   if (status === "idle" || status === "acquiring") {
-    return /* @__PURE__ */ jsx46(Fragment10, { children: loadingComponent != null ? loadingComponent : null });
+    return /* @__PURE__ */ jsx46(Fragment10, { children: loadingComponent !== void 0 ? loadingComponent : /* @__PURE__ */ jsx46(DefaultDelegationLoading, {}) });
   }
   if (status === "disabled") {
-    return /* @__PURE__ */ jsx46(Fragment10, { children: disabledComponent != null ? disabledComponent : null });
+    return /* @__PURE__ */ jsx46(Fragment10, { children: disabledComponent !== void 0 ? disabledComponent : /* @__PURE__ */ jsx46(DefaultDelegationDisabled, {}) });
   }
   if (status === "error") {
     const resolvedError = error != null ? error : new Error("Unknown delegation error");
-    if (typeof errorComponent === "function") {
-      return /* @__PURE__ */ jsx46(Fragment10, { children: errorComponent({ error: resolvedError }) });
+    if (errorComponent !== void 0) {
+      if (typeof errorComponent === "function") {
+        return /* @__PURE__ */ jsx46(Fragment10, { children: errorComponent({ error: resolvedError }) });
+      }
+      return /* @__PURE__ */ jsx46(Fragment10, { children: errorComponent });
     }
-    return /* @__PURE__ */ jsx46(Fragment10, { children: errorComponent != null ? errorComponent : null });
+    return /* @__PURE__ */ jsx46(DefaultDelegationError, { error: resolvedError });
   }
   return null;
 }
@@ -3934,11 +3966,21 @@ function DelegationGate({
 // src/components/Delegation/DelegationProvider.tsx
 import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo12, useRef as useRef7, useState as useState11 } from "react";
 import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
-function DelegationProvider({ sdk, onSessionToken, checkActive, children }) {
+var DEFAULT_REVALIDATE_AFTER_MS = 5 * 60 * 1e3;
+function DelegationProvider({
+  sdk,
+  onSessionToken,
+  checkActive,
+  revalidateOnFocus = true,
+  revalidateAfterMs = DEFAULT_REVALIDATE_AFTER_MS,
+  children
+}) {
   const [status, setStatus] = useState11("idle");
   const [error, setError] = useState11(null);
   const acquiringRef = useRef7(false);
   const mountedRef = useRef7(true);
+  const statusRef = useRef7("idle");
+  statusRef.current = status;
   const acquire = useCallback5(async () => {
     if (acquiringRef.current) {
       return;
@@ -3985,6 +4027,50 @@ function DelegationProvider({ sdk, onSessionToken, checkActive, children }) {
       mountedRef.current = false;
     };
   }, [acquire]);
+  const revalidate = useCallback5(async () => {
+    if (acquiringRef.current) {
+      return;
+    }
+    if (statusRef.current !== "active") {
+      return;
+    }
+    try {
+      const isActive = await checkActive();
+      if (!mountedRef.current) {
+        return;
+      }
+      if (!isActive) {
+        void acquire();
+      }
+    } catch (e) {
+    }
+  }, [checkActive, acquire]);
+  useEffect12(() => {
+    if (!revalidateOnFocus) {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    let hiddenAt = document.visibilityState === "hidden" ? Date.now() : null;
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden") {
+        hiddenAt = Date.now();
+        return;
+      }
+      if (document.visibilityState === "visible") {
+        const elapsed = hiddenAt === null ? 0 : Date.now() - hiddenAt;
+        hiddenAt = null;
+        if (elapsed >= revalidateAfterMs) {
+          void revalidate();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [revalidateOnFocus, revalidateAfterMs, revalidate]);
   const reacquire = useCallback5(() => {
     void acquire();
   }, [acquire]);
@@ -3993,7 +4079,7 @@ function DelegationProvider({ sdk, onSessionToken, checkActive, children }) {
 }
 
 // src/components/MeshApp.tsx
-import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniformdev/design-system";
+import { IconsProvider, LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniformdev/design-system";
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
@@ -4020,7 +4106,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
         setSdk(window.UniformMeshSDK);
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react/exhaustive-deps
     [autoResizingDisabled]
   );
   return {
@@ -4035,7 +4121,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-import { jsx as jsx48, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var MeshApp = ({
   children,
   loadingComponent,
@@ -4053,23 +4139,23 @@ var MeshApp = ({
     }
     throw error;
   }
-  return /* @__PURE__ */ jsxs21(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+  return /* @__PURE__ */ jsxs22(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
     /* @__PURE__ */ jsx48(Theme2, {}),
-    /* @__PURE__ */ jsx48(UniformMeshLocationContextProvider, { children })
+    /* @__PURE__ */ jsx48(IconsProvider, { children: /* @__PURE__ */ jsx48(UniformMeshLocationContextProvider, { children }) })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 import { css as css14 } from "@emotion/react";
 import { Button as Button2, LoadingIndicator as LoadingIndicator3 } from "@uniformdev/design-system";
-import { jsx as jsx49, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var DataRefreshButton = ({
   buttonText,
   isLoading,
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs22(Button2, { buttonType: "ghost", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+  return /* @__PURE__ */ jsxs23(Button2, { buttonType: "ghost", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ jsx49(
       LoadingIndicator3,
       {
@@ -4085,7 +4171,7 @@ var DataRefreshButton = ({
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 import { css as css16 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Callout as Callout3, Container, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+import { Callout as Callout4, Container, ScrollableList, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -4284,7 +4370,7 @@ var ObjectListItemUnControlledContent = css15`
 `;
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx51, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var ObjectSearchListItem = ({
   id,
   title,
@@ -4309,7 +4395,7 @@ var ObjectSearchListItem = ({
     return onSelectItem([selectedItem]);
   };
   const selected = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       role: "listitem",
@@ -4317,7 +4403,7 @@ var ObjectSearchListItem = ({
       "data-testid": "list-item",
       ...props,
       children: [
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(
           "div",
           {
             role: "button",
@@ -4334,14 +4420,14 @@ var ObjectSearchListItem = ({
                   loading: "lazy"
                 }
               ) : null,
-              /* @__PURE__ */ jsxs23("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+              /* @__PURE__ */ jsxs24("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
                 !contentType ? null : /* @__PURE__ */ jsx51("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
                 /* @__PURE__ */ jsx51("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { css: ObjectListItemInfoContainer, children: [
+        /* @__PURE__ */ jsxs24("div", { css: ObjectListItemInfoContainer, children: [
           selected ? /* @__PURE__ */ jsx51(Chip, { text: "selected", size: "xs" }) : null,
           !popoverData ? null : /* @__PURE__ */ jsx51(Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
@@ -4355,7 +4441,7 @@ var ObjectSearchListItemLoadingSkeleton = () => {
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { jsx as jsx52, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -4379,7 +4465,7 @@ var ObjectSearchContainer = ({
       children: /* @__PURE__ */ jsx52(DefaultResultList, {})
     }
   );
-  const body = /* @__PURE__ */ jsxs24(VerticalRhythm3, { children: [
+  const body = /* @__PURE__ */ jsxs25(VerticalRhythm3, { children: [
     searchFilters,
     listItems
   ] });
@@ -4410,7 +4496,7 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsxs24(VerticalRhythm3, { children: [
+  return /* @__PURE__ */ jsxs25(VerticalRhythm3, { children: [
     /* @__PURE__ */ jsx52(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx52(
       InputVariables,
       {
@@ -4436,7 +4522,7 @@ var DefaultResultList = () => {
     return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx52(ObjectSearchListItemLoadingSkeleton, {}, i));
   }
   if (list.items.length === 0) {
-    return /* @__PURE__ */ jsx52(Callout3, { type: "info", children: "No results were found" });
+    return /* @__PURE__ */ jsx52(Callout4, { type: "info", children: "No results were found" });
   }
   return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx52(ObjectSearchListItem, { ...item }, item.id));
 };
@@ -4466,7 +4552,7 @@ var ObjectSearchFilterGrid = (gridColumns) => css17`
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx53, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -4497,7 +4583,7 @@ var ObjectSearchFilter = ({
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "fieldset",
     {
       css: [
@@ -4585,13 +4671,13 @@ var ButtonIcon = css18`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-import { jsx as jsx56, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26("button", { type: "button", css: ButtonStyles, ...props, children: [
+  return /* @__PURE__ */ jsxs27("button", { type: "button", css: ButtonStyles, ...props, children: [
     !icon ? null : /* @__PURE__ */ jsx56(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
@@ -4601,7 +4687,7 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+  return /* @__PURE__ */ jsxs27("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
     !icon ? null : /* @__PURE__ */ jsx56(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
@@ -4674,7 +4760,7 @@ var ObjectSearchImage = css19`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-import { jsx as jsx57, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -4698,9 +4784,9 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ jsxs27("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
+  return /* @__PURE__ */ jsxs28("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
     disableDnD ? null : /* @__PURE__ */ jsx57("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsxs27("div", { css: ObjectSearchContentContainer, children: [
+    /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsxs28("div", { css: ObjectSearchContentContainer, children: [
       !imageUrl ? null : /* @__PURE__ */ jsx57(
         "img",
         {
@@ -4710,9 +4796,9 @@ var ObjectSearchResultItem = ({
           loading: "lazy"
         }
       ),
-      /* @__PURE__ */ jsxs27("div", { children: [
+      /* @__PURE__ */ jsxs28("div", { children: [
         /* @__PURE__ */ jsx57("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
-        /* @__PURE__ */ jsxs27("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
+        /* @__PURE__ */ jsxs28("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
           onClick ? /* @__PURE__ */ jsx57(
             Link,
             {
@@ -4728,14 +4814,14 @@ var ObjectSearchResultItem = ({
           ) : /* @__PURE__ */ jsx57("span", { children: title != null ? title : name }),
           !popoverData ? null : /* @__PURE__ */ jsx57(Popover2, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs27("div", { css: ObjectSearchAuthorStateGroup, children: [
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs28("div", { css: ObjectSearchAuthorStateGroup, children: [
           !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx57(Chip2, { theme: legacyThemeMapper(publishStatus.theme), text: publishStatus.text, size: "xs" }),
-          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs27("div", { css: ObjectSearchUpdateGroup, children: [
-            !createdAt ? null : /* @__PURE__ */ jsxs27("small", { css: ObjectSearchResultItemTimeStamp, children: [
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs28("div", { css: ObjectSearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ jsxs28("small", { css: ObjectSearchResultItemTimeStamp, children: [
               /* @__PURE__ */ jsx57("strong", { children: "Last updated: " }),
               timeagoFormat(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ jsxs27("small", { css: ObjectSearchResultItemTimeStamp, children: [
+            !publishedAt ? null : /* @__PURE__ */ jsxs28("small", { css: ObjectSearchResultItemTimeStamp, children: [
               /* @__PURE__ */ jsx57("strong", { children: "Last published: " }),
               timeagoFormat(publishedAt)
             ] })
@@ -4744,7 +4830,7 @@ var ObjectSearchResultItem = ({
         /* @__PURE__ */ jsx57("div", { children })
       ] })
     ] }) }),
-    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs27("div", { css: ObjectSearchAuthorStateGroup, children: [
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs28("div", { css: ObjectSearchAuthorStateGroup, children: [
       !editLink ? null : /* @__PURE__ */ jsx57(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
       hideRemoveButton ? null : /* @__PURE__ */ jsx57(Button3, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
@@ -4798,7 +4884,7 @@ var ObjectSearchResultListTitle = css20`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var DroppableHack2 = Droppable2;
 var DraggableHack2 = Draggable2;
 function ObjectSearchResultList({
@@ -4850,14 +4936,14 @@ function ObjectSearchResultList({
       }
     );
   };
-  return /* @__PURE__ */ jsxs28(Fragment11, { children: [
-    /* @__PURE__ */ jsxs28("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      !resultLabelOverride ? /* @__PURE__ */ jsxs28("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+  return /* @__PURE__ */ jsxs29(Fragment11, { children: [
+    /* @__PURE__ */ jsxs29("div", { role: "group", css: ObjectSearchResultListContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ jsxs29("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ jsx58("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ jsx58(Counter, { count: selectedListItems.length })
       ] }) : resultLabelOverride,
-      /* @__PURE__ */ jsxs28("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ jsxs29("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ jsx58(
           Button4,
@@ -4877,7 +4963,7 @@ function ObjectSearchResultList({
         droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
         renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
         getContainerForClone: getContainerForDnDReparenting,
-        children: (provided) => /* @__PURE__ */ jsxs28("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+        children: (provided) => /* @__PURE__ */ jsxs29("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
           selectedListItems.map((item, i) => {
             return /* @__PURE__ */ jsx58(
               DraggableHack2,
@@ -4900,7 +4986,7 @@ function ObjectSearchResultList({
 // src/components/ObjectSearch/QueryFilter.tsx
 import { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input4, InputSelect as InputSelect4, VerticalRhythm as VerticalRhythm4 } from "@uniformdev/design-system";
 import { useEffect as useEffect14, useState as useState15 } from "react";
-import { jsx as jsx59, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -4942,9 +5028,9 @@ var QueryFilter = ({
   useEffect14(() => {
     onSetQuery(queryState);
   }, []);
-  return /* @__PURE__ */ jsxs29("fieldset", { children: [
+  return /* @__PURE__ */ jsxs30("fieldset", { children: [
     /* @__PURE__ */ jsx59("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ jsx59("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs29(VerticalRhythm4, { children: [
+    /* @__PURE__ */ jsx59("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs30(VerticalRhythm4, { children: [
       /* @__PURE__ */ jsx59(
         InputVariables,
         {
@@ -4967,7 +5053,7 @@ var QueryFilter = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs29("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
+      /* @__PURE__ */ jsxs30("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
         /* @__PURE__ */ jsx59(
           InputVariables,
           {
@@ -5014,7 +5100,7 @@ var QueryFilter = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs29("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
+      /* @__PURE__ */ jsxs30("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
         /* @__PURE__ */ jsx59(
           InputVariables,
           {
@@ -5616,7 +5702,7 @@ var twoColumnGrid = {
 };
 
 // src/components/SearchAndFilter/editors/DateRangeEditor.tsx
-import { Fragment as Fragment12, jsx as jsx63, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx63, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var DateRangeEditor = ({
   ariaLabel,
   onChange,
@@ -5674,8 +5760,8 @@ var DateRangeEditor = ({
       setMaxDateValue("");
     }
   }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ jsxs30(Fragment12, { children: [
-    /* @__PURE__ */ jsxs30("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+  return /* @__PURE__ */ jsxs31(Fragment12, { children: [
+    /* @__PURE__ */ jsxs31("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
       /* @__PURE__ */ jsx63(
         Input6,
         {
@@ -5855,7 +5941,7 @@ var NumberEditor = ({
 import { Input as Input8 } from "@uniformdev/design-system";
 import { useEffect as useEffect17, useState as useState19 } from "react";
 import { useDebounce as useDebounce5 } from "react-use";
-import { Fragment as Fragment13, jsx as jsx67, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx67, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var NumberRangeEditor = ({
   onChange,
   disabled,
@@ -5900,8 +5986,8 @@ var NumberRangeEditor = ({
       setMaxValue(maxValue);
     }
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ jsxs31(Fragment13, { children: [
-    /* @__PURE__ */ jsxs31("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+  return /* @__PURE__ */ jsxs32(Fragment13, { children: [
+    /* @__PURE__ */ jsxs32("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
       /* @__PURE__ */ jsx67(
         Input8,
         {
@@ -6394,7 +6480,7 @@ var SearchAndFilterAdditionalContainer = css21`
 `;
 
 // src/components/SearchAndFilter/FilterButton.tsx
-import { jsx as jsx73, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var FilterButton2 = ({
   text = "Filters",
   icon = customIcons["filter-add"],
@@ -6404,7 +6490,7 @@ var FilterButton2 = ({
   showDropdownIcon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "button",
     {
       type: "button",
@@ -6644,7 +6730,7 @@ var useSearchAndFilter = () => {
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
-import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var FilterControls = ({
   children,
   hideSearchInput
@@ -6674,7 +6760,7 @@ var FilterControls = ({
       setIdToResetInputVariables(`data-resource-search-term-input-${v42()}`);
     }
   }, [searchTerm]);
-  return /* @__PURE__ */ jsxs33(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment14, { children: [
     /* @__PURE__ */ jsx76(
       FilterButton2,
       {
@@ -6688,7 +6774,7 @@ var FilterControls = ({
         dataTestId: "filters-button"
       }
     ),
-    hideSearchInput ? null : /* @__PURE__ */ jsxs33("div", { css: BindableKeywordSearchInputStyles, "data-testid": "search-container", children: [
+    hideSearchInput ? null : /* @__PURE__ */ jsxs34("div", { css: BindableKeywordSearchInputStyles, "data-testid": "search-container", children: [
       /* @__PURE__ */ jsx76(
         InputVariables,
         {
@@ -6752,7 +6838,7 @@ function isFilterBindable(filter, operator) {
 }
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { jsx as jsx77, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var FilterItem = ({
   index,
   operatorOptions,
@@ -6800,9 +6886,9 @@ var FilterItem = ({
   } : {};
   const CustomLeftHandComponent = selectedFieldValue == null ? void 0 : selectedFieldValue.leftHandSideComponentWhenSelected;
   const isEmptyOperator = metaDataPossibleOptions === "empty";
-  return /* @__PURE__ */ jsxs34("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+  return /* @__PURE__ */ jsxs35("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
     /* @__PURE__ */ jsx77("span", { children: index === 0 ? initialCriteriaTitle : criteriaGroupOperator }),
-    /* @__PURE__ */ jsxs34("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
+    /* @__PURE__ */ jsxs35("div", { css: [ConditionalInputRow, isEmptyOperator ? ConditionalInputRowEmpty : null], children: [
       CustomLeftHandComponent ? /* @__PURE__ */ jsx77(
         CustomLeftHandComponent,
         {
@@ -6902,13 +6988,13 @@ import { Icon as Icon5 } from "@uniformdev/design-system";
 // src/components/SearchAndFilter/FilterMenu.tsx
 import { HorizontalRhythm as HorizontalRhythm8, VerticalRhythm as VerticalRhythm6 } from "@uniformdev/design-system";
 import React7, { useEffect as useEffect20 } from "react";
-import { jsx as jsx78, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   additionalFiltersContainer,
   children
 }) => {
-  return /* @__PURE__ */ jsxs35("div", { css: SearchAndFilterOptionsContainer, children: [
+  return /* @__PURE__ */ jsxs36("div", { css: SearchAndFilterOptionsContainer, children: [
     /* @__PURE__ */ jsx78("div", { css: SearchAndFilterOptionsInnerContainer, children }),
     buttonRow ? /* @__PURE__ */ jsx78(
       HorizontalRhythm8,
@@ -6940,13 +7026,13 @@ var FilterMenu = ({
       (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ jsx78(VerticalRhythm6, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsx78(VerticalRhythm6, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs36(
     SearchAndFilterOptionsContainer2,
     {
       buttonRow: menuControls,
       additionalFiltersContainer,
       children: [
-        /* @__PURE__ */ jsxs35(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ jsxs36(HorizontalRhythm8, { gap: "sm", align: "center", justify: "space-between", children: [
           filterTitle ? /* @__PURE__ */ jsx78("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }) : null,
           (filters == null ? void 0 : filters.length) && resetButtonText ? /* @__PURE__ */ jsx78(
             "button",
@@ -7059,7 +7145,7 @@ function hasBindings(currentValue) {
 }
 
 // src/components/SearchAndFilter/FilterItems.tsx
-import { jsx as jsx79, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var FilterItems = ({
   addButtonText = "add condition",
   additionalFiltersContainer,
@@ -7075,7 +7161,7 @@ var FilterItems = ({
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
       const newOperatorId = value;
-      const currentFilter = next[index];
+      const currentFilter = filters[index];
       if (!newOperatorId) {
         throw new Error("you bad");
       }
@@ -7101,7 +7187,7 @@ var FilterItems = ({
     {
       id: "search-and-filter-options",
       dataTestId: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ jsxs36(
+      menuControls: /* @__PURE__ */ jsxs37(
         "button",
         {
           type: "button",
@@ -7149,8 +7235,8 @@ var FilterItems = ({
 import { VerticalRhythm as VerticalRhythm7 } from "@uniformdev/design-system";
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
-import { Button as Button5, Callout as Callout4, HorizontalRhythm as HorizontalRhythm9, Paragraph } from "@uniformdev/design-system";
-import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { Button as Button5, Callout as Callout5, HorizontalRhythm as HorizontalRhythm9, Paragraph } from "@uniformdev/design-system";
+import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -7201,16 +7287,16 @@ var SearchAndFilterResultContainer = ({
       handleResetFilters();
     }
   };
-  return /* @__PURE__ */ jsxs37(Fragment15, { children: [
-    /* @__PURE__ */ jsxs37(HorizontalRhythm9, { children: [
-      /* @__PURE__ */ jsxs37("span", { children: [
+  return /* @__PURE__ */ jsxs38(Fragment15, { children: [
+    /* @__PURE__ */ jsxs38(HorizontalRhythm9, { children: [
+      /* @__PURE__ */ jsxs38("span", { children: [
         totalResults,
         " results ",
         searchTerm ? `for "${searchTerm}"` : null
       ] }),
       !searchTerm || hideClearButton ? null : /* @__PURE__ */ jsx80(Button5, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ jsxs37(Callout4, { title: automateCalloutTitle, type: "note", children: [
+    totalResults === 0 ? /* @__PURE__ */ jsxs38(Callout5, { title: automateCalloutTitle, type: "note", children: [
       calloutText ? /* @__PURE__ */ jsx80(Paragraph, { children: calloutText }) : null,
       hideClearButton ? null : /* @__PURE__ */ jsx80(
         Button5,
@@ -7227,7 +7313,7 @@ var SearchAndFilterResultContainer = ({
 };
 
 // src/components/SearchAndFilter/SearchAndFilter.tsx
-import { jsx as jsx81, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var SearchAndFilter = ({
   filters,
   filterOptions,
@@ -7261,8 +7347,8 @@ var SearchAndFilter = ({
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
       onResetFilterValues,
-      children: /* @__PURE__ */ jsxs38(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
-        /* @__PURE__ */ jsxs38("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+      children: /* @__PURE__ */ jsxs39(VerticalRhythm7, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ jsxs39("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
           /* @__PURE__ */ jsx81(
             "div",
             {
@@ -7557,7 +7643,7 @@ var InputVariableWrapper = css22`
 `;
 
 // src/components/SearchAndFilter/SortItems.tsx
-import { jsx as jsx83, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 var SortItems = ({
   sortByLabel = "Sort by",
   localeLabel = "Show locale",
@@ -7579,10 +7665,10 @@ var SortItems = ({
     return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
   })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
   const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
-  return /* @__PURE__ */ jsxs39("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
-    /* @__PURE__ */ jsxs39(VerticalRhythm8, { gap: "xs", children: [
+  return /* @__PURE__ */ jsxs40("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ jsxs40(VerticalRhythm8, { gap: "xs", children: [
       /* @__PURE__ */ jsx83("span", { css: Title2, children: sortByLabel }),
-      /* @__PURE__ */ jsxs39("div", { css: SortFilterInputRow, children: [
+      /* @__PURE__ */ jsxs40("div", { css: SortFilterInputRow, children: [
         /* @__PURE__ */ jsx83(
           InputVariables,
           {
@@ -7717,7 +7803,7 @@ function useContentDataResourceLocaleInfo({
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout5,
+  Callout as Callout6,
   DrawerContent,
   Heading,
   Input as Input10,
@@ -7727,7 +7813,7 @@ import {
   InputToggle as InputToggle3,
   Label,
   LoadingIndicator as LoadingIndicator4,
-  LoadingOverlay,
+  LoadingOverlay as LoadingOverlay2,
   Menu as Menu3,
   MenuItem as MenuItem2,
   ParameterGroup,
@@ -7758,7 +7844,7 @@ export {
   AddListButton2 as AddListButton,
   Button6 as Button,
   CHECKBOX_OPERATORS,
-  Callout5 as Callout,
+  Callout6 as Callout,
   ControlledValuePlugin,
   DATE_OPERATORS,
   DATE_TIME_OPERATORS,
@@ -7796,7 +7882,7 @@ export {
   Label,
   LinkButton,
   LoadingIndicator4 as LoadingIndicator,
-  LoadingOverlay,
+  LoadingOverlay2 as LoadingOverlay,
   MULTI_SELECT_OPERATORS,
   Menu3 as Menu,
   MenuItem2 as MenuItem,