@uniformdev/mesh-sdk-react 19.51.1-alpha.10 → 19.53.1-alpha.41

package/dist/index.d.mts

@@ -441,6 +441,13 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.MeshLocationCore<TLocationValue, {
+    settings: unknown;
+    projectId: string;
+    prompt: string;
+    promptMetadata: unknown;
+}, TLocationValue, "unstable_ai">, {
+    type: TLocationType;
 }>, "setValue"> & {
     setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
@@ -454,6 +461,13 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.MeshLocationCore<TLocationValue, {
+        settings: unknown;
+        projectId: string;
+        prompt: string;
+        promptMetadata: unknown;
+    }, TLocationValue, "unstable_ai">, {
+        type: TLocationType;
     }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
@@ -466,6 +480,13 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.MeshLocationCore<TLocationValue, {
+        settings: unknown;
+        projectId: string;
+        prompt: string;
+        promptMetadata: unknown;
+    }, TLocationValue, "unstable_ai">, {
+        type: TLocationType;
     }>)["setValue"]>[0]>;
 };
 type SetLocationValueDispatch<TValue, TSetValue = TValue> = (dispatch: SetLocationValueFunction<TValue, TSetValue>) => Promise<void> | void;
@@ -1178,8 +1199,8 @@ type ObjectSearchFilterProps = {
      * @default 'Content Type Select'
      */
     selectLabel?: string;
-    /** sets the select input options */
-    selectOptions: Array<{
+    /** sets the select input options, if empty - only keyword search field will be rendered */
+    selectOptions?: Array<{
         id: string;
         name?: string;
         label: string;
@@ -1195,7 +1216,7 @@ type ObjectSearchFilterProps = {
 };
 /**
  * @description Object search filter is an opinionated filter that has pre-defined query and setQuery functions
- * that can be extended with custom fuctions
+ * that can be extended with custom functions
  * @example  <ObjectSearchFilter selectOptions={[{ id: 'id value', name: 'name value'}]} /> */
 declare const ObjectSearchFilter: ({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }: ObjectSearchFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -1300,7 +1321,8 @@ declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraIte
 type ObjectSearchListItemProps = SelectedItemProps & {
     /** sets the content type value, this is normally used for subtitles e.g. Kitchens  */
     contentType?: string | string[];
-    /** sets image parameters */
+    /** sets image parameters
+     * @deprecated Please use imageUrl to make it compatible with  */
     image?: {
         /** sets the src valuue */
         src: string;
@@ -1315,6 +1337,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
          */
         height?: number;
     };
+    imageUrl?: string;
     /** sets the function call on the role="button" wrapping element */
     onSelect?: (data?: Record<string, unknown>) => void;
     /** allows child components within the popover data  */
@@ -1331,7 +1354,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
 /**
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
  * @example <ObjectSearchListItem  id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
-declare const ObjectSearchListItem: ({ id, title, contentType, image, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /**
  * An opinionated loading skeleton component best used with ObjectSearchListItem
  * @example <ObjectSearchListItemLoadingSkeleton />

package/dist/index.d.ts

@@ -441,6 +441,13 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.MeshLocationCore<TLocationValue, {
+    settings: unknown;
+    projectId: string;
+    prompt: string;
+    promptMetadata: unknown;
+}, TLocationValue, "unstable_ai">, {
+    type: TLocationType;
 }>, "setValue"> & {
     setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
@@ -454,6 +461,13 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.MeshLocationCore<TLocationValue, {
+        settings: unknown;
+        projectId: string;
+        prompt: string;
+        promptMetadata: unknown;
+    }, TLocationValue, "unstable_ai">, {
+        type: TLocationType;
     }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
@@ -466,6 +480,13 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.MeshLocationCore<TLocationValue, {
+        settings: unknown;
+        projectId: string;
+        prompt: string;
+        promptMetadata: unknown;
+    }, TLocationValue, "unstable_ai">, {
+        type: TLocationType;
     }>)["setValue"]>[0]>;
 };
 type SetLocationValueDispatch<TValue, TSetValue = TValue> = (dispatch: SetLocationValueFunction<TValue, TSetValue>) => Promise<void> | void;
@@ -1178,8 +1199,8 @@ type ObjectSearchFilterProps = {
      * @default 'Content Type Select'
      */
     selectLabel?: string;
-    /** sets the select input options */
-    selectOptions: Array<{
+    /** sets the select input options, if empty - only keyword search field will be rendered */
+    selectOptions?: Array<{
         id: string;
         name?: string;
         label: string;
@@ -1195,7 +1216,7 @@ type ObjectSearchFilterProps = {
 };
 /**
  * @description Object search filter is an opinionated filter that has pre-defined query and setQuery functions
- * that can be extended with custom fuctions
+ * that can be extended with custom functions
  * @example  <ObjectSearchFilter selectOptions={[{ id: 'id value', name: 'name value'}]} /> */
 declare const ObjectSearchFilter: ({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }: ObjectSearchFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -1300,7 +1321,8 @@ declare function useObjectSearchContext<TExtraSearchFilters = unknown, TExtraIte
 type ObjectSearchListItemProps = SelectedItemProps & {
     /** sets the content type value, this is normally used for subtitles e.g. Kitchens  */
     contentType?: string | string[];
-    /** sets image parameters */
+    /** sets image parameters
+     * @deprecated Please use imageUrl to make it compatible with  */
     image?: {
         /** sets the src valuue */
         src: string;
@@ -1315,6 +1337,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
          */
         height?: number;
     };
+    imageUrl?: string;
     /** sets the function call on the role="button" wrapping element */
     onSelect?: (data?: Record<string, unknown>) => void;
     /** allows child components within the popover data  */
@@ -1331,7 +1354,7 @@ type ObjectSearchListItemProps = SelectedItemProps & {
 /**
  * @description entry search list item is an opinionated UI component best used for initial retrieved results
  * @example <ObjectSearchListItem  id="my-result-item" title="title" popoverData={<p>some data info</p>}><div>example of uncontrolled content</div></ObjectSearchListItem> */
-declare const ObjectSearchListItem: ({ id, title, contentType, image, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectSearchListItem: ({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, }: ObjectSearchListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /**
  * An opinionated loading skeleton component best used with ObjectSearchListItem
  * @example <ObjectSearchListItemLoadingSkeleton />

package/dist/index.esm.js

@@ -6287,7 +6287,7 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
-import { useState as useState16 } from "react";
+import { useMemo as useMemo15, useState as useState16 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 import { css as css32 } from "@emotion/react";
@@ -6303,9 +6303,6 @@ var ObjectSearchFilterContainer = css32`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = css32`
-  grid-template-columns: 0.5fr 1fr;
-`;
 var ObjectSearchFilterGrid = (gridColumns) => css32`
   display: grid;
   grid-template-columns: ${gridColumns};
@@ -6333,35 +6330,51 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ jsxs35("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ jsx60(
-      InputSelect6,
-      {
-        label: selectLabel,
-        showLabel: false,
-        onChange: (e) => handleFilterChange({ contentType: e.target.value }),
-        options: [
-          ...!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 };
-          }) : []
-        ],
-        value: query.contentType
-      }
-    ),
-    /* @__PURE__ */ jsx60(
-      InputKeywordSearch2,
-      {
-        inputFieldName: searchInputName,
-        placeholder: searchInputPlaceholderText,
-        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
-        disabledFieldSubmission: true,
-        onClear: () => handleFilterChange({ keyword: "" }),
-        value: searchState.keyword
-      }
-    )
-  ] });
+  const memoizedSelectOptions = useMemo15(() => {
+    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 };
+      }) : []
+    ];
+  }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
+  const shouldRenderSelect = memoizedSelectOptions.length > 0;
+  return /* @__PURE__ */ jsxs35(
+    "fieldset",
+    {
+      css: [
+        ObjectSearchFilterContainer,
+        ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
+      ],
+      children: [
+        memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
+          InputSelect6,
+          {
+            label: selectLabel,
+            showLabel: false,
+            onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+            options: memoizedSelectOptions,
+            value: query.contentType
+          }
+        ) : null,
+        /* @__PURE__ */ jsx60(
+          InputKeywordSearch2,
+          {
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: searchState.keyword
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
@@ -6420,6 +6433,10 @@ 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;
@@ -6453,6 +6470,7 @@ var ObjectSearchListItem = ({
   title,
   contentType,
   image,
+  imageUrl,
   popoverData,
   onSelect,
   isMulti = false,
@@ -6464,7 +6482,7 @@ var ObjectSearchListItem = ({
   const handleSelectItem = () => {
     var _a;
     const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
-    const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
+    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
     if (isMulti) {
       return onSelectItem(selectedItem);
     }
@@ -6485,7 +6503,8 @@ var ObjectSearchListItem = ({
             css: ObjectListItemControlledContent,
             "aria-disabled": disabled,
             children: [
-              !image ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              !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, children: title })
@@ -6985,7 +7004,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef15 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo16, useRef as useRef15 } from "react";
 import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -6994,7 +7013,7 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = useMemo15(
+  const variables = useMemo16(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );

package/dist/index.js

@@ -6434,9 +6434,6 @@ var ObjectSearchFilterContainer = import_react66.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react66.css`
-  grid-template-columns: 0.5fr 1fr;
-`;
 var ObjectSearchFilterGrid = (gridColumns) => import_react66.css`
   display: grid;
   grid-template-columns: ${gridColumns};
@@ -6464,35 +6461,51 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_design_system33.InputSelect,
-      {
-        label: selectLabel,
-        showLabel: false,
-        onChange: (e) => handleFilterChange({ contentType: e.target.value }),
-        options: [
-          ...!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 };
-          }) : []
-        ],
-        value: query.contentType
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_design_system33.InputKeywordSearch,
-      {
-        inputFieldName: searchInputName,
-        placeholder: searchInputPlaceholderText,
-        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
-        disabledFieldSubmission: true,
-        onClear: () => handleFilterChange({ keyword: "" }),
-        value: searchState.keyword
-      }
-    )
-  ] });
+  const memoizedSelectOptions = (0, import_react67.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 };
+      }) : []
+    ];
+  }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
+  const shouldRenderSelect = memoizedSelectOptions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    "fieldset",
+    {
+      css: [
+        ObjectSearchFilterContainer,
+        ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
+      ],
+      children: [
+        memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_design_system33.InputSelect,
+          {
+            label: selectLabel,
+            showLabel: false,
+            onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+            options: memoizedSelectOptions,
+            value: query.contentType
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_design_system33.InputKeywordSearch,
+          {
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: searchState.keyword
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
@@ -6551,6 +6564,10 @@ 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;
@@ -6584,6 +6601,7 @@ var ObjectSearchListItem = ({
   title,
   contentType,
   image,
+  imageUrl,
   popoverData,
   onSelect,
   isMulti = false,
@@ -6595,7 +6613,7 @@ var ObjectSearchListItem = ({
   const handleSelectItem = () => {
     var _a;
     const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
-    const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
+    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
     if (isMulti) {
       return onSelectItem(selectedItem);
     }
@@ -6616,7 +6634,8 @@ var ObjectSearchListItem = ({
             css: ObjectListItemControlledContent,
             "aria-disabled": disabled,
             children: [
-              !image ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              !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, children: title })

package/dist/index.mjs

@@ -6287,7 +6287,7 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
-import { useState as useState16 } from "react";
+import { useMemo as useMemo15, useState as useState16 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 import { css as css32 } from "@emotion/react";
@@ -6303,9 +6303,6 @@ var ObjectSearchFilterContainer = css32`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = css32`
-  grid-template-columns: 0.5fr 1fr;
-`;
 var ObjectSearchFilterGrid = (gridColumns) => css32`
   display: grid;
   grid-template-columns: ${gridColumns};
@@ -6333,35 +6330,51 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ jsxs35("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ jsx60(
-      InputSelect6,
-      {
-        label: selectLabel,
-        showLabel: false,
-        onChange: (e) => handleFilterChange({ contentType: e.target.value }),
-        options: [
-          ...!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 };
-          }) : []
-        ],
-        value: query.contentType
-      }
-    ),
-    /* @__PURE__ */ jsx60(
-      InputKeywordSearch2,
-      {
-        inputFieldName: searchInputName,
-        placeholder: searchInputPlaceholderText,
-        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
-        disabledFieldSubmission: true,
-        onClear: () => handleFilterChange({ keyword: "" }),
-        value: searchState.keyword
-      }
-    )
-  ] });
+  const memoizedSelectOptions = useMemo15(() => {
+    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 };
+      }) : []
+    ];
+  }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
+  const shouldRenderSelect = memoizedSelectOptions.length > 0;
+  return /* @__PURE__ */ jsxs35(
+    "fieldset",
+    {
+      css: [
+        ObjectSearchFilterContainer,
+        ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
+      ],
+      children: [
+        memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
+          InputSelect6,
+          {
+            label: selectLabel,
+            showLabel: false,
+            onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+            options: memoizedSelectOptions,
+            value: query.contentType
+          }
+        ) : null,
+        /* @__PURE__ */ jsx60(
+          InputKeywordSearch2,
+          {
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: searchState.keyword
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
@@ -6420,6 +6433,10 @@ 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;
@@ -6453,6 +6470,7 @@ var ObjectSearchListItem = ({
   title,
   contentType,
   image,
+  imageUrl,
   popoverData,
   onSelect,
   isMulti = false,
@@ -6464,7 +6482,7 @@ var ObjectSearchListItem = ({
   const handleSelectItem = () => {
     var _a;
     const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
-    const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
+    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
     if (isMulti) {
       return onSelectItem(selectedItem);
     }
@@ -6485,7 +6503,8 @@ var ObjectSearchListItem = ({
             css: ObjectListItemControlledContent,
             "aria-disabled": disabled,
             children: [
-              !image ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              !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, children: title })
@@ -6985,7 +7004,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-import { useEffect as useEffect17, useMemo as useMemo15, useRef as useRef15 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo16, useRef as useRef15 } from "react";
 import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -6994,7 +7013,7 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = useMemo15(
+  const variables = useMemo16(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.51.1-alpha.10+ee32ab8b6",
+  "version": "19.53.1-alpha.41+27cb9eb2d",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,9 +50,9 @@
     "@lexical/selection": "^0.12.0",
     "@lexical/utils": "^0.12.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
-    "@uniformdev/canvas": "19.51.1-alpha.10+ee32ab8b6",
-    "@uniformdev/design-system": "19.51.1-alpha.10+ee32ab8b6",
-    "@uniformdev/mesh-sdk": "19.51.1-alpha.10+ee32ab8b6",
+    "@uniformdev/canvas": "19.53.1-alpha.41+27cb9eb2d",
+    "@uniformdev/design-system": "19.53.1-alpha.41+27cb9eb2d",
+    "@uniformdev/mesh-sdk": "19.53.1-alpha.41+27cb9eb2d",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ee32ab8b66da53e39f0714b708d5cd2ec49592bd"
+  "gitHead": "27cb9eb2ddaae3cdb18163df96cf6e58440b700d"
 }