@uniformdev/mesh-sdk-react 19.80.0 → 19.80.1-alpha.149

package/dist/index.js

@@ -5292,7 +5292,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;
@@ -5402,7 +5401,7 @@ function VariablesList() {
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -6279,9 +6278,9 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react65 = require("@emotion/react");
+var import_react66 = require("@emotion/react");
 var import_canvas8 = require("@uniformdev/canvas");
-var import_design_system33 = require("@uniformdev/design-system");
+var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas7 = require("@uniformdev/canvas");
@@ -6299,9 +6298,14 @@ var ObjectSearchContext = (0, import_react64.createContext)({
   },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
-  }
+  },
+  isMulti: false
 });
-var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
+var ObjectSearchProvider = ({
+  currentlySelectedItems,
+  isMulti = false,
+  children
+}) => {
   const [query, setQuery] = (0, import_react64.useState)({
     contentType: "",
     keyword: ""
@@ -6355,6 +6359,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedListItems: selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     }),
     [
@@ -6365,6 +6370,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     ]
   );
@@ -6385,8 +6391,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,
@@ -6398,19 +6544,20 @@ 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)(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,
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_design_system35.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
+        css: import_react66.css`
+          > div {
+            transition: max-height var(--duration-slow) var(--timing-ease-out);
+            max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+          }
+        `,
+        children: listItems
       }
     )
   ] });
@@ -6441,8 +6588,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,
@@ -6460,14 +6607,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);
@@ -6475,18 +6633,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",
@@ -6496,7 +6654,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react67.useState)({
+  const [searchState, setSearchState] = (0, import_react68.useState)({
     contentType: "",
     keyword: ""
   });
@@ -6506,7 +6664,7 @@ 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 [];
     }
@@ -6519,7 +6677,7 @@ var ObjectSearchFilter = ({
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "fieldset",
     {
       css: [
@@ -6527,8 +6685,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,
@@ -6537,8 +6695,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,
@@ -6554,154 +6712,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");