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

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as React$1 from 'react';
 import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
 import { TDate } from 'timeago.js';
 import * as _emotion_react from '@emotion/react';
-import { Interpolation, Theme } from '@emotion/react';
+import { Interpolation, Theme, SerializedStyles } from '@emotion/react';
 import * as _uniformdev_mesh_sdk from '@uniformdev/mesh-sdk';
 import { DynamicInput, MeshLocation, SetValueOptions, EditConnectedDataResponseCancellationContext, DynamicInputs, DataSourceLocationValue, DataTypeLocationValue, BindableTypes } from '@uniformdev/mesh-sdk';
 export * from '@uniformdev/mesh-sdk';
@@ -441,6 +441,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
+    type: TLocationType;
 }>, "setValue"> & {
     setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
@@ -454,6 +456,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
+        type: TLocationType;
     }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
@@ -466,6 +470,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
+        type: TLocationType;
     }>)["setValue"]>[0]>;
 };
 type SetLocationValueDispatch<TValue, TSetValue = TValue> = (dispatch: SetLocationValueFunction<TValue, TSetValue>) => Promise<void> | void;
@@ -772,7 +778,7 @@ type InputVariablesProps<TEditorContext = unknown> = {
     /** Enables mutliple lines in the input (\n in the value) */
     multiLine?: boolean;
     /** Disables the inline variable selection menu when rendering a variables input */
-    disableInlineMenu?: boolean;
+    disableInlineMenu?: boolean | 'by-label' | 'by-input';
     /**
      * Enables clicking a variable reference to edit the variable
      * Note: automatically disabled if `disabled` or `disableVariables` is set
@@ -803,6 +809,8 @@ type InputVariablesProps<TEditorContext = unknown> = {
      * * Performing other custom mutations to the variables editor, such as inserting text from a button click.
      */
     editorRef?: MutableRefObject<LexicalEditor | null>;
+    /** The compact style is similar to the parameters panel */
+    styleVariant?: 'default' | 'compact';
 } & PasteTransformerPluginProps & UseInputVariablesStateProps<TEditorContext>;
 /**
  * An input box that enables insertion of 'variables', provided by VariablesProvider,
@@ -870,6 +878,7 @@ type ParameterVariablesProps<TEditorContext = unknown> = {
     editorRef?: MutableRefObject<LexicalEditor | null>;
     /** If set the editor will auto-focus on mount */
     autoFocus?: boolean;
+    inputCss?: SerializedStyles;
 } & UseInputVariablesStateProps<TEditorContext>;
 /**
  * An input box that enables insertion of 'variables', provided by VariablesProvider,
@@ -1178,8 +1187,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 +1204,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 +1309,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 +1325,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 +1342,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

@@ -3,7 +3,7 @@ import * as React$1 from 'react';
 import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
 import { TDate } from 'timeago.js';
 import * as _emotion_react from '@emotion/react';
-import { Interpolation, Theme } from '@emotion/react';
+import { Interpolation, Theme, SerializedStyles } from '@emotion/react';
 import * as _uniformdev_mesh_sdk from '@uniformdev/mesh-sdk';
 import { DynamicInput, MeshLocation, SetValueOptions, EditConnectedDataResponseCancellationContext, DynamicInputs, DataSourceLocationValue, DataTypeLocationValue, BindableTypes } from '@uniformdev/mesh-sdk';
 export * from '@uniformdev/mesh-sdk';
@@ -441,6 +441,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
+    type: TLocationType;
 }>, "setValue"> & {
     setValue: SetLocationValueDispatch<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
@@ -454,6 +456,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
+        type: TLocationType;
     }>)["value"], Parameters<(Extract<_uniformdev_mesh_sdk.DataSourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
@@ -466,6 +470,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.SettingsLocation<TLocationValue>, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.AIGenerateLocation<TLocationValue>, {
+        type: TLocationType;
     }>)["setValue"]>[0]>;
 };
 type SetLocationValueDispatch<TValue, TSetValue = TValue> = (dispatch: SetLocationValueFunction<TValue, TSetValue>) => Promise<void> | void;
@@ -772,7 +778,7 @@ type InputVariablesProps<TEditorContext = unknown> = {
     /** Enables mutliple lines in the input (\n in the value) */
     multiLine?: boolean;
     /** Disables the inline variable selection menu when rendering a variables input */
-    disableInlineMenu?: boolean;
+    disableInlineMenu?: boolean | 'by-label' | 'by-input';
     /**
      * Enables clicking a variable reference to edit the variable
      * Note: automatically disabled if `disabled` or `disableVariables` is set
@@ -803,6 +809,8 @@ type InputVariablesProps<TEditorContext = unknown> = {
      * * Performing other custom mutations to the variables editor, such as inserting text from a button click.
      */
     editorRef?: MutableRefObject<LexicalEditor | null>;
+    /** The compact style is similar to the parameters panel */
+    styleVariant?: 'default' | 'compact';
 } & PasteTransformerPluginProps & UseInputVariablesStateProps<TEditorContext>;
 /**
  * An input box that enables insertion of 'variables', provided by VariablesProvider,
@@ -870,6 +878,7 @@ type ParameterVariablesProps<TEditorContext = unknown> = {
     editorRef?: MutableRefObject<LexicalEditor | null>;
     /** If set the editor will auto-focus on mount */
     autoFocus?: boolean;
+    inputCss?: SerializedStyles;
 } & UseInputVariablesStateProps<TEditorContext>;
 /**
  * An input box that enables insertion of 'variables', provided by VariablesProvider,
@@ -1178,8 +1187,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 +1204,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 +1309,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 +1325,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 +1342,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

@@ -3740,6 +3740,7 @@ function VariablesPlugin({
           /* @__PURE__ */ jsx32(
             "div",
             {
+              "data-auto-resize-opt-in": true,
               css: css20`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
@@ -4075,6 +4076,11 @@ var input = css21`
     margin: 0;
   }
 `;
+var inputCompact = css21`
+  border: 1px solid var(--white);
+  padding-block: var(--spacing-sm);
+  font-size: var(--fs-sm);
+`;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import * as React10 from "react";
@@ -4598,12 +4604,12 @@ function InputVariables(props) {
     getEditorContext,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    styleVariant = "default"
   } = props;
   const [finalId] = useState12(id != null ? id : () => v42());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
-  const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
   const input3 = /* @__PURE__ */ jsxs23(
     "div",
@@ -4618,7 +4624,7 @@ function InputVariables(props) {
           InputVariablesOverlayMenu,
           {
             ...sharedMenuProps,
-            disabled: disableInlineVariablesForReals,
+            disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
             replaceValueOnVariableInsert: useInputWithNoVariables,
             useInputWhenNoVariables: useInputWithNoVariables,
             children: /* @__PURE__ */ jsx39(
@@ -4628,7 +4634,7 @@ function InputVariables(props) {
                 "aria-label": ariaLabel,
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
-                css: input
+                css: [input, styleVariant === "compact" ? inputCompact : null]
               }
             )
           }
@@ -4652,7 +4658,7 @@ function InputVariables(props) {
         },
         id: finalId,
         isActive: hadVariablesInValue,
-        disableVariables: disableVariablesForReals,
+        disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
         children: input3
       }
     );
@@ -4969,7 +4975,8 @@ function ParameterVariables(props) {
     getEditorContext,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    inputCss
   } = props;
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps, hasVariablesInValue } = useInputVariablesState(props);
@@ -5011,7 +5018,8 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : css24``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : css24``,
+                    inputCss != null ? inputCss : css24``
                   ]
                 }
               ) }),
@@ -6287,7 +6295,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 +6311,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 +6338,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 +6441,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 +6478,7 @@ var ObjectSearchListItem = ({
   title,
   contentType,
   image,
+  imageUrl,
   popoverData,
   onSelect,
   isMulti = false,
@@ -6464,7 +6490,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);
     }
@@ -6476,6 +6502,7 @@ var ObjectSearchListItem = ({
     {
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
       children: [
         /* @__PURE__ */ jsxs37(
           "div",
@@ -6485,10 +6512,11 @@ 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 })
+                /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
               ] })
             ]
           }
@@ -6985,7 +7013,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 +7022,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

@@ -3918,6 +3918,7 @@ function VariablesPlugin({
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
+              "data-auto-resize-opt-in": true,
               css: import_react37.css`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
@@ -4253,6 +4254,11 @@ var input = import_react41.css`
     margin: 0;
   }
 `;
+var inputCompact = import_react41.css`
+  border: 1px solid var(--white);
+  padding-block: var(--spacing-sm);
+  font-size: var(--fs-sm);
+`;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var React10 = __toESM(require("react"));
@@ -4764,12 +4770,12 @@ function InputVariables(props) {
     getEditorContext,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    styleVariant = "default"
   } = props;
   const [finalId] = (0, import_react49.useState)(id != null ? id : () => (0, import_uuid2.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
-  const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
   const input3 = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
@@ -4784,7 +4790,7 @@ function InputVariables(props) {
           InputVariablesOverlayMenu,
           {
             ...sharedMenuProps,
-            disabled: disableInlineVariablesForReals,
+            disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
             replaceValueOnVariableInsert: useInputWithNoVariables,
             useInputWhenNoVariables: useInputWithNoVariables,
             children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -4794,7 +4800,7 @@ function InputVariables(props) {
                 "aria-label": ariaLabel,
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
-                css: input
+                css: [input, styleVariant === "compact" ? inputCompact : null]
               }
             )
           }
@@ -4818,7 +4824,7 @@ function InputVariables(props) {
         },
         id: finalId,
         isActive: hadVariablesInValue,
-        disableVariables: disableVariablesForReals,
+        disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
         children: input3
       }
     );
@@ -5135,7 +5141,8 @@ function ParameterVariables(props) {
     getEditorContext,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    inputCss
   } = props;
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps, hasVariablesInValue } = useInputVariablesState(props);
@@ -5177,7 +5184,8 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react54.css``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react54.css``,
+                    inputCss != null ? inputCss : import_react54.css``
                   ]
                 }
               ) }),
@@ -6434,9 +6442,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 +6469,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 +6572,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 +6609,7 @@ var ObjectSearchListItem = ({
   title,
   contentType,
   image,
+  imageUrl,
   popoverData,
   onSelect,
   isMulti = false,
@@ -6595,7 +6621,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);
     }
@@ -6607,6 +6633,7 @@ var ObjectSearchListItem = ({
     {
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
           "div",
@@ -6616,10 +6643,11 @@ 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 })
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
               ] })
             ]
           }

package/dist/index.mjs

@@ -3740,6 +3740,7 @@ function VariablesPlugin({
           /* @__PURE__ */ jsx32(
             "div",
             {
+              "data-auto-resize-opt-in": true,
               css: css20`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
@@ -4075,6 +4076,11 @@ var input = css21`
     margin: 0;
   }
 `;
+var inputCompact = css21`
+  border: 1px solid var(--white);
+  padding-block: var(--spacing-sm);
+  font-size: var(--fs-sm);
+`;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 import * as React10 from "react";
@@ -4598,12 +4604,12 @@ function InputVariables(props) {
     getEditorContext,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    styleVariant = "default"
   } = props;
   const [finalId] = useState12(id != null ? id : () => v42());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
-  const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
   const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
   const input3 = /* @__PURE__ */ jsxs23(
     "div",
@@ -4618,7 +4624,7 @@ function InputVariables(props) {
           InputVariablesOverlayMenu,
           {
             ...sharedMenuProps,
-            disabled: disableInlineVariablesForReals,
+            disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
             replaceValueOnVariableInsert: useInputWithNoVariables,
             useInputWhenNoVariables: useInputWithNoVariables,
             children: /* @__PURE__ */ jsx39(
@@ -4628,7 +4634,7 @@ function InputVariables(props) {
                 "aria-label": ariaLabel,
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
-                css: input
+                css: [input, styleVariant === "compact" ? inputCompact : null]
               }
             )
           }
@@ -4652,7 +4658,7 @@ function InputVariables(props) {
         },
         id: finalId,
         isActive: hadVariablesInValue,
-        disableVariables: disableVariablesForReals,
+        disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
         children: input3
       }
     );
@@ -4969,7 +4975,8 @@ function ParameterVariables(props) {
     getEditorContext,
     disabled,
     editorRef,
-    filterVariable
+    filterVariable,
+    inputCss
   } = props;
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps, hasVariablesInValue } = useInputVariablesState(props);
@@ -5011,7 +5018,8 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : css24``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : css24``,
+                    inputCss != null ? inputCss : css24``
                   ]
                 }
               ) }),
@@ -6287,7 +6295,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 +6311,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 +6338,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 +6441,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 +6478,7 @@ var ObjectSearchListItem = ({
   title,
   contentType,
   image,
+  imageUrl,
   popoverData,
   onSelect,
   isMulti = false,
@@ -6464,7 +6490,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);
     }
@@ -6476,6 +6502,7 @@ var ObjectSearchListItem = ({
     {
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
       children: [
         /* @__PURE__ */ jsxs37(
           "div",
@@ -6485,10 +6512,11 @@ 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 })
+                /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
               ] })
             ]
           }
@@ -6985,7 +7013,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 +7022,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.51.1-alpha.26+87b6d6f43",
   "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.51.1-alpha.26+87b6d6f43",
+    "@uniformdev/design-system": "19.51.1-alpha.26+87b6d6f43",
+    "@uniformdev/mesh-sdk": "19.51.1-alpha.26+87b6d6f43",
     "dequal": "^2.0.3",
     "lexical": "^0.12.0",
     "mitt": "^3.0.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ee32ab8b66da53e39f0714b708d5cd2ec49592bd"
+  "gitHead": "87b6d6f43ac5ed3bf05fbdba51dc239e04601dd1"
 }