@uniformdev/mesh-sdk-react 19.86.1-alpha.15 → 19.88.0

package/dist/index.d.mts

@@ -1309,12 +1309,15 @@ type ObjectSearchContextProps<TExtraFilters = unknown, TExtraItemProps = unknown
     list: ItemListProps<TExtraItemProps>;
     /** function that sets the list of items to state */
     onSetList: (value: ItemListProps) => void;
+    /** is multi items selection allowed or not */
+    isMulti: boolean;
 };
 type ObjectSearchProviderProps = {
     children: ReactNode;
     currentlySelectedItems?: Array<SelectedItemProps>;
+    isMulti?: boolean;
 };
-declare const ObjectSearchProvider: ({ currentlySelectedItems, children }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchProvider: ({ currentlySelectedItems, isMulti, children, }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraItemProps = unknown>(): ObjectSearchContextProps<TExtraSearchFilters, TExtraItemProps>;
 
 type ObjectSearchListItemProps = SelectedItemProps & {
@@ -1323,7 +1326,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     /** sets image parameters
      * @deprecated Please use imageUrl to make it compatible with  */
     image?: {
-        /** sets the src valuue */
+        /** sets the src value */
         src: string;
         /** sets the alt text value */
         alt: string;
@@ -1345,6 +1348,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     children?: React$1.ReactNode;
     /** sets whether multiple entries can be added to the results list context
      * @default false
+     * @deprecated Please use isMulti property in <ObjectSearchProvider />
      */
     isMulti?: boolean;
     /** sets disabled state to the interactive element */

package/dist/index.d.ts

@@ -1309,12 +1309,15 @@ type ObjectSearchContextProps<TExtraFilters = unknown, TExtraItemProps = unknown
     list: ItemListProps<TExtraItemProps>;
     /** function that sets the list of items to state */
     onSetList: (value: ItemListProps) => void;
+    /** is multi items selection allowed or not */
+    isMulti: boolean;
 };
 type ObjectSearchProviderProps = {
     children: ReactNode;
     currentlySelectedItems?: Array<SelectedItemProps>;
+    isMulti?: boolean;
 };
-declare const ObjectSearchProvider: ({ currentlySelectedItems, children }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchProvider: ({ currentlySelectedItems, isMulti, children, }: ObjectSearchProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraItemProps = unknown>(): ObjectSearchContextProps<TExtraSearchFilters, TExtraItemProps>;
 
 type ObjectSearchListItemProps = SelectedItemProps & {
@@ -1323,7 +1326,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     /** sets image parameters
      * @deprecated Please use imageUrl to make it compatible with  */
     image?: {
-        /** sets the src valuue */
+        /** sets the src value */
         src: string;
         /** sets the alt text value */
         alt: string;
@@ -1345,6 +1348,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
     children?: React$1.ReactNode;
     /** sets whether multiple entries can be added to the results list context
      * @default false
+     * @deprecated Please use isMulti property in <ObjectSearchProvider />
      */
     isMulti?: boolean;
     /** sets disabled state to the interactive element */

package/dist/index.esm.js

@@ -6140,9 +6140,9 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { css as css31 } from "@emotion/react";
+import { css as css32 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6167,9 +6167,14 @@ var ObjectSearchContext = createContext5({
   },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
-  }
+  },
+  isMulti: false
 });
-var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
+var ObjectSearchProvider = ({
+  currentlySelectedItems,
+  isMulti = false,
+  children
+}) => {
   const [query, setQuery] = useState15({
     contentType: "",
     keyword: ""
@@ -6223,6 +6228,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedListItems: selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     }),
     [
@@ -6233,6 +6239,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     ]
   );
@@ -6253,8 +6260,148 @@ function bindQuery(query, inputs) {
   return result;
 }
 
-// src/components/ObjectSearch/ObjectSearchContainer.tsx
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+import { Chip, Popover } from "@uniformdev/design-system";
+
+// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
+import { css as css31 } from "@emotion/react";
+import { skeletonLoading } from "@uniformdev/design-system";
+var ObjectListItemContainer = css31`
+  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 = css31`
+  opacity: var(--opacity-50);
+  pointer-events: none;
+`;
+var ObjectListItemLoading = css31`
+  animation: ${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 = css31`
+  align-items: center;
+  display: grid;
+`;
+var ObjectListItemThumbnail = css31`
+  width: 30px;
+  object-fit: contain;
+`;
+var ObjectListItemTitle = css31`
+  color: var(--brand-secondary-1);
+  display: block;
+  font-size: var(--fs-sm);
+`;
+var ObjectListItemSubtitle = css31`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var ObjectListItemInfoContainer = css31`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+`;
+var ObjectListItemControlledContent = css31`
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ObjectListItemUnControlledContent = css31`
+  margin-top: var(--spacing-sm);
+  grid-column: 1 / -1;
+`;
+
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
 import { jsx as jsx59, jsxs as jsxs34 } from "@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__ */ jsxs34(
+    "div",
+    {
+      role: "listitem",
+      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
+      children: [
+        /* @__PURE__ */ jsxs34(
+          "div",
+          {
+            role: "button",
+            onClick: handleSelectItem,
+            css: ObjectListItemControlledContent,
+            "aria-disabled": disabled,
+            children: [
+              !imageUrl ? null : /* @__PURE__ */ jsx59("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
+              !image || imageUrl ? null : /* @__PURE__ */ jsx59("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              /* @__PURE__ */ jsxs34("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+                !contentType ? null : /* @__PURE__ */ jsx59("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+                /* @__PURE__ */ jsx59("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs34("div", { css: ObjectListItemInfoContainer, children: [
+          selected ? /* @__PURE__ */ jsx59(Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ jsx59(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+        ] }),
+        !children ? null : /* @__PURE__ */ jsx59("div", { css: ObjectListItemUnControlledContent, children })
+      ]
+    }
+  );
+};
+var ObjectSearchListItemLoadingSkeleton = () => {
+  return /* @__PURE__ */ jsx59("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+};
+
+// src/components/ObjectSearch/ObjectSearchContainer.tsx
+import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6266,19 +6413,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__ */ jsxs34(VerticalRhythm2, { children: [
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(DefaultResultList, {});
+  const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx60(
       ScrollableList,
       {
         role: "list",
-        css: css31`
-            > div {
-              transition: max-height var(--duration-slow) var(--timing-ease-out);
-              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-            }
-          `,
-        children: resultList
+        css: css32`
+          > div {
+            transition: max-height var(--duration-slow) var(--timing-ease-out);
+            max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+          }
+        `,
+        children: listItems
       }
     )
   ] });
@@ -6309,8 +6457,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx59(IconsProvider, { children: /* @__PURE__ */ jsxs34(VerticalRhythm2, { children: [
-    /* @__PURE__ */ jsx59(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
+    /* @__PURE__ */ jsx60(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx60(
       InputVariables,
       {
         label,
@@ -6328,14 +6476,25 @@ var ObjectSearchContainer = ({
     children
   ] }) });
 };
+var DefaultResultList = () => {
+  var _a;
+  const { list } = useObjectSearchContext();
+  if (!list.items) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx60(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (list.items.length === 0) {
+    return /* @__PURE__ */ jsx60(Callout5, { type: "info", children: "No results were found" });
+  }
+  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx60(ObjectSearchListItem, { ...item }, item.id));
+};
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
 import { useMemo as useMemo15, useState as useState16 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-import { css as css32 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css32`
+import { css as css33 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css33`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6343,18 +6502,18 @@ var ObjectSearchFilterContainerLabel = css32`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css32`
+var ObjectSearchFilterContainer = css33`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css32`
+var ObjectSearchFilterGrid = (gridColumns) => css33`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6387,7 +6546,7 @@ var ObjectSearchFilter = ({
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "fieldset",
     {
       css: [
@@ -6395,7 +6554,7 @@ var ObjectSearchFilter = ({
         ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
       ],
       children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
+        memoizedSelectOptions.length ? /* @__PURE__ */ jsx61(
           InputSelect6,
           {
             label: selectLabel,
@@ -6405,7 +6564,7 @@ var ObjectSearchFilter = ({
             value: query.contentType
           }
         ) : null,
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           InputKeywordSearch2,
           {
             inputFieldName: searchInputName,
@@ -6422,154 +6581,14 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs36("div", { children: [
-    label ? /* @__PURE__ */ jsx61("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ jsx61("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ jsxs37("div", { children: [
+    label ? /* @__PURE__ */ jsx62("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ jsx62("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { Chip, Popover } from "@uniformdev/design-system";
-
-// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-import { css as css33 } from "@emotion/react";
-import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css33`
-  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 = css33`
-  opacity: var(--opacity-50);
-  pointer-events: none;
-`;
-var ObjectListItemLoading = css33`
-  animation: ${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 = css33`
-  align-items: center;
-  display: grid;
-`;
-var ObjectListItemThumbnail = css33`
-  width: 30px;
-  object-fit: contain;
-`;
-var ObjectListItemTitle = css33`
-  color: var(--brand-secondary-1);
-  display: block;
-  font-size: var(--fs-sm);
-`;
-var ObjectListItemSubtitle = css33`
-  color: var(--gray-500);
-  display: block;
-  font-size: var(--fs-xs);
-  line-height: 1;
-`;
-var ObjectListItemInfoContainer = css33`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-`;
-var ObjectListItemControlledContent = css33`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
-var ObjectListItemUnControlledContent = css33`
-  margin-top: var(--spacing-sm);
-  grid-column: 1 / -1;
-`;
-
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx62, jsxs as jsxs37 } from "@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__ */ jsxs37(
-    "div",
-    {
-      role: "listitem",
-      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
-      "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ jsxs37(
-          "div",
-          {
-            role: "button",
-            onClick: handleSelectItem,
-            css: ObjectListItemControlledContent,
-            "aria-disabled": disabled,
-            children: [
-              !imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
-              !image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-              /* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-                !contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-                /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs37("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ jsx62(Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ jsx62(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
-        ] }),
-        !children ? null : /* @__PURE__ */ jsx62("div", { css: ObjectListItemUnControlledContent, children })
-      ]
-    }
-  );
-};
-var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ jsx62("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
-};
-
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
 import { format as timeagoFormat } from "timeago.js";
@@ -7113,7 +7132,7 @@ function createLocationValidator(setValue, validate) {
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout5,
+  Callout as Callout6,
   DrawerContent,
   Heading,
   Input as Input6,
@@ -7152,7 +7171,7 @@ export {
   $isVariableNode,
   AddListButton2 as AddListButton,
   Button6 as Button,
-  Callout5 as Callout,
+  Callout6 as Callout,
   ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,