@uniformdev/mesh-sdk-react 19.79.0 → 19.79.1-alpha.7

package/dist/index.js

@@ -2856,13 +2856,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
+var import_canvas = require("@uniformdev/canvas");
 var import_react26 = require("react");
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function useDynamicInputsAsVariables(dynamicInputs) {
   return (0, import_react26.useMemo)(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === import_canvas.LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2981,11 +2982,11 @@ var import_lite = require("dequal/lite");
 var import_react30 = require("react");
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var import_lexical = require("lexical");
 function deserializeVariablesEditorState(serialized) {
   const result = [];
-  (0, import_canvas.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
+  (0, import_canvas2.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
     if (type === "text") {
       const node = {
         type: import_lexical.TextNode.getType(),
@@ -3112,7 +3113,7 @@ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerCont
 var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
 var import_selection = require("@lexical/selection");
 var import_utils2 = require("@lexical/utils");
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_design_system18 = require("@uniformdev/design-system");
 var import_lexical4 = require("lexical");
 var import_react39 = require("react");
@@ -3132,6 +3133,7 @@ function VariableChip({
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -3139,7 +3141,7 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react31.Fragment : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_design_system15.MultilineChip,
     {
@@ -3186,7 +3188,7 @@ var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerCont
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_utils = require("@lexical/utils");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
-var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_lite2 = require("dequal/lite");
 var import_lexical3 = require("lexical");
@@ -3660,7 +3662,7 @@ function useVariablesMenu({
           var _a;
           const targetVariable = variables[value];
           if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(value));
+            setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(value));
             return true;
           }
           const variableNode = $createVariableNode(value, {
@@ -3830,7 +3832,7 @@ function VariablesPlugin({
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
             if (overwriteExistingValue) {
-              setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(reference));
+              setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(reference));
               return true;
             }
             const variableNode = $createVariableNode(reference, {
@@ -4030,7 +4032,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
    * (albeit it won't get the fancy chip-node)
    */
   getTextContent() {
-    return (0, import_canvas3.createVariableReference)(this.reference);
+    return (0, import_canvas4.createVariableReference)(this.reference);
   }
   /** Creates the DOM wrapper that hosts the node */
   createDOM() {
@@ -4146,6 +4148,7 @@ function VariableNodeComponent({
       displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4261,6 +4264,10 @@ var inputCompact = import_react41.css`
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
+var inputDisabled = import_react41.css`
+  cursor: not-allowed;
+  opacity: var(--opacity-50);
+`;
 var placeholderCaption = import_react41.css`
   position: absolute;
   color: var(--gray-400);
@@ -4279,10 +4286,10 @@ var React10 = __toESM(require("react"));
 var import_react42 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
-var import_canvas4 = require("@uniformdev/canvas");
+var import_canvas5 = require("@uniformdev/canvas");
 function hasReferencedVariables(value) {
   let result = false;
-  (0, import_canvas4.parseVariableExpression)(value, (token, type) => {
+  (0, import_canvas5.parseVariableExpression)(value, (token, type) => {
     if (type === "variable") {
       result = true;
       return false;
@@ -4526,8 +4533,8 @@ function VariableField({
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { htmlFor: id, css: labelText, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { "data-testid": "variable-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { htmlFor: id, css: labelText, "data-testid": "field-name", children: [
       variableSelector,
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: label })
     ] }),
@@ -4568,7 +4575,7 @@ function SingleLineTextPlugin() {
 }
 
 // src/components/Variables/util/serializeVariablesEditorState.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas6 = require("@uniformdev/canvas");
 var import_lexical8 = require("lexical");
 
 // src/components/Variables/util/variableExpression.ts
@@ -4587,7 +4594,7 @@ function serializeRecursive(node, buffer) {
     buffer.push(node.text.replace(variablePrefix, "\\${"));
   }
   if (node.type === VariableNode.getType()) {
-    buffer.push((0, import_canvas5.createVariableReference)(node.reference));
+    buffer.push((0, import_canvas6.createVariableReference)(node.reference));
   }
   if (node.type === import_lexical8.LineBreakNode.getType()) {
     buffer.push("\n");
@@ -4633,6 +4640,7 @@ function VariablesComposer(props) {
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_LexicalOnChangePlugin.OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4804,6 +4812,7 @@ function InputVariables(props) {
           dispatch({ type: "cancelEdit" });
         }
       },
+      css: disabled ? inputDisabled : "",
       children: [
         useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           InputVariablesOverlayMenu,
@@ -4905,7 +4914,7 @@ function InputVariablesOverlayMenu({
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
-var import_canvas6 = require("@uniformdev/canvas");
+var import_canvas7 = require("@uniformdev/canvas");
 var import_design_system22 = require("@uniformdev/design-system");
 var import_react51 = require("react");
 
@@ -5010,7 +5019,7 @@ function ParameterConnectionIndicator({
 }) {
   const hasVariablesInValue = (0, import_react51.useMemo)(() => {
     let result = false;
-    (0, import_canvas6.bindVariablesToObject)({
+    (0, import_canvas7.bindVariablesToObject)({
       value,
       variables: {},
       handleBinding: () => {
@@ -5287,7 +5296,6 @@ var tableCellDragIcon = import_react55.css`
 `;
 var variableName = import_react55.css`
   border: none;
-  color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
   padding: 0;
   background: none;
@@ -5306,7 +5314,7 @@ var variableValue = import_react55.css`
 // src/components/Variables/VariablesList.tsx
 var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
-  const { variables, dispatch } = useVariables();
+  const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
   const onDragEnd = (res) => {
     var _a, _b;
@@ -5333,7 +5341,7 @@ function VariablesList() {
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, {})
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.TableBody, { children: [
-        sorted.map(({ name, displayName, default: defaultValue, readOnly }, index) => {
+        sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -5352,7 +5360,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableName, children: text }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -5392,12 +5400,12 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       import_design_system25.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -6274,12 +6282,12 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react65 = require("@emotion/react");
-var import_canvas8 = require("@uniformdev/canvas");
-var import_design_system33 = require("@uniformdev/design-system");
+var import_react66 = require("@emotion/react");
+var import_canvas9 = require("@uniformdev/canvas");
+var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-var import_canvas7 = require("@uniformdev/canvas");
+var import_canvas8 = require("@uniformdev/canvas");
 var import_react64 = require("react");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContext = (0, import_react64.createContext)({
@@ -6294,12 +6302,19 @@ var ObjectSearchContext = (0, import_react64.createContext)({
   },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
-  }
+  },
+  isMulti: false
 });
-var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
+var ObjectSearchProvider = ({
+  currentlySelectedItems,
+  isMulti = false,
+  children,
+  defaultQuery
+}) => {
   const [query, setQuery] = (0, import_react64.useState)({
     contentType: "",
-    keyword: ""
+    keyword: "",
+    ...defaultQuery
   });
   const { flatVariables } = useVariables(true);
   const querySearchDeferred = (0, import_react64.useDeferredValue)(query);
@@ -6350,6 +6365,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedListItems: selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     }),
     [
@@ -6360,6 +6376,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     ]
   );
@@ -6369,7 +6386,7 @@ function useObjectSearchContext() {
   return (0, import_react64.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
-  const { result, errors } = (0, import_canvas7.bindVariablesToObject)({
+  const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
     value: query,
     variables: inputs,
     errorPrefix: "Dynamic input"
@@ -6380,8 +6397,148 @@ function bindQuery(query, inputs) {
   return result;
 }
 
-// src/components/ObjectSearch/ObjectSearchContainer.tsx
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+var import_design_system34 = require("@uniformdev/design-system");
+
+// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
+var import_react65 = require("@emotion/react");
+var import_design_system33 = require("@uniformdev/design-system");
+var ObjectListItemContainer = import_react65.css`
+  align-items: center;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  background: var(--white);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding: var(--spacing-sm);
+`;
+var ObjectListItemContainerDisabled = import_react65.css`
+  opacity: var(--opacity-50);
+  pointer-events: none;
+`;
+var ObjectListItemLoading = import_react65.css`
+  animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
+  border-color: transparent;
+  min-height: 42px;
+  position: relative;
+
+  &:before,
+  &:after {
+    background: var(--gray-200);
+    content: '';
+    display: block;
+    height: 1rem;
+  }
+
+  &:before {
+    border-radius: var(--rounded-base);
+    width: 10rem;
+  }
+
+  &:after {
+    border-radius: var(--rounded-full);
+    width: 1rem;
+  }
+`;
+var ObjectListItemHeadingGroup = import_react65.css`
+  align-items: center;
+  display: grid;
+`;
+var ObjectListItemThumbnail = import_react65.css`
+  width: 30px;
+  object-fit: contain;
+`;
+var ObjectListItemTitle = import_react65.css`
+  color: var(--brand-secondary-1);
+  display: block;
+  font-size: var(--fs-sm);
+`;
+var ObjectListItemSubtitle = import_react65.css`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var ObjectListItemInfoContainer = import_react65.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+`;
+var ObjectListItemControlledContent = import_react65.css`
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ObjectListItemUnControlledContent = import_react65.css`
+  margin-top: var(--spacing-sm);
+  grid-column: 1 / -1;
+`;
+
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
 var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
+var ObjectSearchListItem = ({
+  id,
+  title,
+  contentType,
+  image,
+  imageUrl,
+  popoverData,
+  onSelect,
+  isMulti,
+  disabled,
+  children
+}) => {
+  const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
+  const handleSelectItem = () => {
+    var _a;
+    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
+    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
+    if (isMulti === true || globalIsMulti) {
+      return onSelectItem(selectedItem);
+    }
+    return onSelectItem([selectedItem]);
+  };
+  const selected = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "div",
+    {
+      role: "listitem",
+      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+          "div",
+          {
+            role: "button",
+            onClick: handleSelectItem,
+            css: ObjectListItemControlledContent,
+            "aria-disabled": disabled,
+            children: [
+              !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
+              !image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+                !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system34.Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system34.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+        ] }),
+        !children ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { css: ObjectListItemUnControlledContent, children })
+      ]
+    }
+  );
+};
+var ObjectSearchListItemLoadingSkeleton = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+};
+
+// src/components/ObjectSearch/ObjectSearchContainer.tsx
+var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6393,21 +6550,22 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_design_system35.ScrollableList,
+    {
+      role: "list",
+      css: import_react66.css`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DefaultResultList, {})
+    }
+  );
+  const body = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-      import_design_system33.ScrollableList,
-      {
-        role: "list",
-        css: import_react65.css`
-            > div {
-              transition: max-height var(--duration-slow) var(--timing-ease-out);
-              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-            }
-          `,
-        children: resultList
-      }
-    )
+    listItems
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6415,7 +6573,7 @@ var ObjectSearchContainer = ({
       onSelectItem([]);
       return;
     }
-    const { result, errors } = (0, import_canvas8.bindVariables)({
+    const { result, errors } = (0, import_canvas9.bindVariables)({
       value: selectedValue,
       variables: flatVariables,
       errorPrefix: "Dynamic input"
@@ -6436,8 +6594,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system35.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       InputVariables,
       {
         label,
@@ -6455,14 +6613,25 @@ var ObjectSearchContainer = ({
     children
   ] }) });
 };
+var DefaultResultList = () => {
+  var _a;
+  const { list } = useObjectSearchContext();
+  if (!list.items) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (list.items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
+  }
+  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ObjectSearchListItem, { ...item }, item.id));
+};
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_design_system34 = require("@uniformdev/design-system");
-var import_react67 = require("react");
+var import_design_system36 = require("@uniformdev/design-system");
+var import_react68 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react66 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react66.css`
+var import_react67 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react67.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6470,18 +6639,18 @@ var ObjectSearchFilterContainerLabel = import_react66.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react66.css`
+var ObjectSearchFilterContainer = import_react67.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react66.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react67.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6490,10 +6659,11 @@ var ObjectSearchFilter = ({
   selectLabel = "Content Type Select",
   selectOptions
 }) => {
+  var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react67.useState)({
-    contentType: "",
-    keyword: ""
+  const [searchState, setSearchState] = (0, import_react68.useState)({
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.keyword) != null ? _b : ""
   });
   const handleFilterChange = (value) => {
     setSearchState((prev) => {
@@ -6501,20 +6671,20 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  const memoizedSelectOptions = (0, import_react67.useMemo)(() => {
+  const memoizedSelectOptions = (0, import_react68.useMemo)(() => {
     if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
       return [];
     }
     return [
       ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
       ...selectOptions ? selectOptions.map((option) => {
-        var _a;
-        return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
+        var _a2;
+        return { name: option == null ? void 0 : option.name, label: (_a2 = option.label) != null ? _a2 : option == null ? void 0 : option.name, id: option.id };
       }) : []
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "fieldset",
     {
       css: [
@@ -6522,8 +6692,8 @@ var ObjectSearchFilter = ({
         ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
       ],
       children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_design_system34.InputSelect,
+        memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          import_design_system36.InputSelect,
           {
             label: selectLabel,
             showLabel: false,
@@ -6532,8 +6702,8 @@ var ObjectSearchFilter = ({
             value: query.contentType
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_design_system34.InputKeywordSearch,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          import_design_system36.InputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
@@ -6549,154 +6719,14 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_design_system36 = require("@uniformdev/design-system");
-
-// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react68 = require("@emotion/react");
-var import_design_system35 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react68.css`
-  align-items: center;
-  border: 1px solid var(--gray-300);
-  border-radius: var(--rounded-base);
-  background: var(--white);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  padding: var(--spacing-sm);
-`;
-var ObjectListItemContainerDisabled = import_react68.css`
-  opacity: var(--opacity-50);
-  pointer-events: none;
-`;
-var ObjectListItemLoading = import_react68.css`
-  animation: ${import_design_system35.skeletonLoading} 1s linear infinite alternate;
-  border-color: transparent;
-  min-height: 42px;
-  position: relative;
-
-  &:before,
-  &:after {
-    background: var(--gray-200);
-    content: '';
-    display: block;
-    height: 1rem;
-  }
-
-  &:before {
-    border-radius: var(--rounded-base);
-    width: 10rem;
-  }
-
-  &:after {
-    border-radius: var(--rounded-full);
-    width: 1rem;
-  }
-`;
-var ObjectListItemHeadingGroup = import_react68.css`
-  align-items: center;
-  display: grid;
-`;
-var ObjectListItemThumbnail = import_react68.css`
-  width: 30px;
-  object-fit: contain;
-`;
-var ObjectListItemTitle = import_react68.css`
-  color: var(--brand-secondary-1);
-  display: block;
-  font-size: var(--fs-sm);
-`;
-var ObjectListItemSubtitle = import_react68.css`
-  color: var(--gray-500);
-  display: block;
-  font-size: var(--fs-xs);
-  line-height: 1;
-`;
-var ObjectListItemInfoContainer = import_react68.css`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-`;
-var ObjectListItemControlledContent = import_react68.css`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
-var ObjectListItemUnControlledContent = import_react68.css`
-  margin-top: var(--spacing-sm);
-  grid-column: 1 / -1;
-`;
-
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
-var ObjectSearchListItem = ({
-  id,
-  title,
-  contentType,
-  image,
-  imageUrl,
-  popoverData,
-  onSelect,
-  isMulti = false,
-  disabled,
-  children
-}) => {
-  const { onSelectItem, selectedListItems } = useObjectSearchContext();
-  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
-  const handleSelectItem = () => {
-    var _a;
-    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
-    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
-    if (isMulti) {
-      return onSelectItem(selectedItem);
-    }
-    return onSelectItem([selectedItem]);
-  };
-  const selected = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-    "div",
-    {
-      role: "listitem",
-      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
-      "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-          "div",
-          {
-            role: "button",
-            onClick: handleSelectItem,
-            css: ObjectListItemControlledContent,
-            "aria-disabled": disabled,
-            children: [
-              !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
-              !image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-                !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
-        ] }),
-        !children ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectListItemUnControlledContent, children })
-      ]
-    }
-  );
-};
-var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
-};
-
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 var import_design_system38 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
@@ -6844,13 +6874,13 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchResultItemContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
     disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
     /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchContentContainer, children: [
       !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
       /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
           title != null ? title : name,
           !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
@@ -7020,14 +7050,14 @@ var QueryFilter = ({
   ],
   children
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const { query, onSetQuery } = useObjectSearchContext();
   const [queryState, setQueryState] = (0, import_react72.useState)({
-    contentType: "",
-    keyword: "",
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.contentType) != null ? _b : "",
     count: countValue != null ? countValue : 5,
-    sortBy: (_a = sortOptions[0].id) != null ? _a : "",
-    sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
+    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
+    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -7043,7 +7073,7 @@ var QueryFilter = ({
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_c = queryState.keyword) != null ? _c : "",
+          value: (_e = queryState.keyword) != null ? _e : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
@@ -7067,7 +7097,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_d = queryState.contentType) != null ? _d : "",
+            value: (_f = queryState.contentType) != null ? _f : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(