@uniformdev/mesh-sdk-react 19.42.1-alpha.6 → 19.45.0

package/dist/index.d.mts

@@ -59,6 +59,7 @@ declare namespace index {
   };
 }
 
+/** @deprecated please use ObjectSearchListItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-list-item */
 interface EntrySearchSelectedItemProps<TResult extends EntrySearchResult = EntrySearchResult> {
     selectedItem: TResult;
     logoIcon: string | React__default.ComponentType<{
@@ -67,14 +68,17 @@ interface EntrySearchSelectedItemProps<TResult extends EntrySearchResult = Entry
     onDeselect: (item: TResult) => void;
     onEditClosed?: (item: TResult) => void;
 }
+/** @deprecated please use ObjectSearchListItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-list-item */
 declare const DefaultSelectedItem: React__default.FC<EntrySearchSelectedItemProps>;
 
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 type EntrySearchQueryOptions = {
     count: number;
     offset: number;
     contentType?: string;
     cursor?: string;
 };
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 type EntrySearchProps<TResult extends EntrySearchResult = EntrySearchResult> = {
     search: (text: string, options: EntrySearchQueryOptions) => void;
     results: TResult[] | undefined;
@@ -108,6 +112,7 @@ type EntrySearchProps<TResult extends EntrySearchResult = EntrySearchResult> = {
      */
     loadingIndicatorDelay?: number;
 };
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 interface EntrySearchResult {
     id: string;
     title: string | JSX.Element;
@@ -116,21 +121,26 @@ interface EntrySearchResult {
     metadata?: Record<string, string | JSX.Element>;
     popoverData?: Record<string, string | JSX.Element>;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 interface EntrySearchContentType {
     id: string;
     name: string;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 interface NoResultsProps {
     searchText: string | undefined;
     selectedContentType: string | undefined;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 declare const EntrySearch: <TResult extends EntrySearchResult>({ search, results, contentTypes, selectedItems, logoIcon, select, multiSelect, multiSelectId, rowComponent, selectedItemComponent, totalResults, cursor, resultsLoading, requireContentType, onAddNew, onEditClosed, onCancel, noResultsComponent, helpComponent, onSort, typeSelectorLabel, typeSelectorAllTypesOptionText, loadingIndicatorDelay, }: EntrySearchProps<TResult>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 interface EntrySearchRowProps<TResult extends EntrySearchResult = EntrySearchResult> {
     result: TResult;
     isSelected: boolean;
     triggerSelection: () => void;
 }
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 declare const DefaultSearchRow: React__default.FC<EntrySearchRowProps>;
 
 declare const searchRowContainer: _emotion_react.SerializedStyles;
@@ -198,10 +208,12 @@ interface ProductCategory {
     children?: ProductCategory[];
 }
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const ProductPreviewList: ({ products, }: {
     products: ProductSearchResults['products'] | undefined;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductDynamicSelectorValue {
     count: number;
     categories?: string[];
@@ -210,6 +222,7 @@ interface ProductDynamicSelectorValue {
     sort?: string;
     sortOrder?: string;
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductQueryProps<TValue extends ProductDynamicSelectorValue = ProductDynamicSelectorValue> {
     value: TValue | undefined;
     setValue: (value: TValue) => Promise<void>;
@@ -235,21 +248,27 @@ interface ProductQueryProps<TValue extends ProductDynamicSelectorValue = Product
     disableBrands?: boolean;
     restrictToSingleCategory?: boolean;
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductQueryCategory {
     id: string;
     name: string;
     children?: ProductQueryCategory[];
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface Brand {
     id: string;
     name: string;
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const ProductQuery: ({ value, setValue, brands, categories, loading, categoriesLoading, brandsLoading, logoIcon, onGetProducts, sortOptions, sortOrderOptions, categoryLabel, brandLabel, disableBrands, restrictToSingleCategory, }: ProductQueryProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductQueryContextValue {
     categories: ProductQueryProps['categories'];
     logoIcon: ProductQueryProps['logoIcon'];
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const ProductQueryContext: React__default.Context<ProductQueryContextValue | undefined>;
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const useProductQueryContext: () => ProductQueryContextValue;
 
 type ProductSearchProps<TResult extends ProductSearchResult = ProductSearchResult> = Pick<EntrySearchProps<TResult>, 'multiSelect' | 'multiSelectId' | 'logoIcon' | 'rowComponent' | 'selectedItemComponent' | 'helpComponent' | 'noResultsComponent' | 'onSort' | 'typeSelectorAllTypesOptionText' | 'typeSelectorLabel'> & {
@@ -269,12 +288,14 @@ type ProductSearchProps<TResult extends ProductSearchResult = ProductSearchResul
         searchError?: Error;
     }>;
 };
+/** @deprecated */
 interface GetProductOptions {
     limit?: number;
     offset?: number;
     categoryId?: string;
     cursor?: string;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs for implementation details */
 declare function ProductSearch({ selectedProducts, setSelectedProducts, onGetCategories, onSearchProducts, logoIcon, multiSelect, multiSelectId, selectedItemComponent, rowComponent, errorComponent, helpComponent, noResultsComponent, onSort, typeSelectorAllTypesOptionText, typeSelectorLabel, }: ProductSearchProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 interface ProductSearchContextValue {
     logoIcon: ProductSearchProps['logoIcon'];
@@ -283,20 +304,25 @@ interface ProductSearchContextValue {
 declare const ProductSearchContext: React__default.Context<ProductSearchContextValue | undefined>;
 declare const useProductSearchContext: () => ProductSearchContextValue;
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare function ProductSearchRow({ result, isSelected, triggerSelection, }: EntrySearchRowProps<ProductSearchResult>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item*/
 declare function ProductSelectedItem({ selectedItem, onDeselect, }: EntrySearchSelectedItemProps<ProductSearchResult>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use DataRefreshButtonProps - https://mesh-design-system.netlify.app/?path=/story/object-search--data-refresh-button */
 declare const ResolvableLoadingValue: ({ value, text, loading, }: {
     value: string;
     text: string | undefined;
     loading: boolean;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 type SelectionFieldValue = {
     id: string;
     name: string;
 };
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const SelectionField: ({ id, label, loading, selectedValues, values, onAdd, onRemove, }: {
     id: string;
     label: string;
@@ -335,6 +361,7 @@ interface DamItem {
     type: 'image' | 'video' | 'file' | 'other';
 }
 
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 interface DamSelectedItemProps<TResult extends DamItem = DamItem> {
     /** The item used for rendering this component. */
     selectedItem: TResult;
@@ -354,6 +381,7 @@ interface DamSelectedItemProps<TResult extends DamItem = DamItem> {
         item: TResult;
     }>;
 }
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 declare function DamSelectedItem({ selectedItem, onDeselect, onEditClosed, logoIcon, itemDetailsRendererComponent, }: DamSelectedItemProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare const damSelectedItemContainer: _emotion_react.SerializedStyles;
@@ -740,6 +768,10 @@ type InputVariablesProps<TEditorContext = unknown> = {
      * Note: automatically disabled if `disabled` or `disableVariables` is set
      */
     enableEditingVariables?: boolean;
+    /**
+     * Adds an additional option to omit the variable if it's empty from requests
+     */
+    addOmitIfEmpty?: boolean;
     /** (optional) sets and shows the the error message value */
     errorMessage?: string;
     /** (optional) sets and shows the the warning message value */
@@ -1433,18 +1465,19 @@ declare function ParamTypeDynamicDataProvider(props: ParamTypeDynamicDataProvide
 declare function RequestBody(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Editor component to manage HTTP headers on a request */
-declare function RequestHeaders({ disableVariables }: Pick<InputVariablesProps, 'disableVariables'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function RequestHeaders({ disableVariables, addOmitIfEmpty, }: Pick<InputVariablesProps, 'disableVariables' | 'addOmitIfEmpty'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Dropdown to pick a HTTP method for a request */
 declare function RequestMethodSelect(props: Omit<InputSelectProps, 'value' | 'onChange' | 'options'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type RequestParametersProps = Pick<InputVariablesProps, 'disableVariables'>;
 /** Component to manage query parameters on a request */
-declare function RequestParameters({ disableVariables }: Pick<InputVariablesProps, 'disableVariables'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function RequestParameters({ disableVariables, addOmitIfEmpty, }: Pick<InputVariablesProps, 'disableVariables' | 'addOmitIfEmpty'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type RequestParameter = {
     key: string;
     value: string;
+    omitIfEmpty?: boolean;
 };
 type BaseRequestData = {
     baseUrl: string;

package/dist/index.d.ts

@@ -59,6 +59,7 @@ declare namespace index {
   };
 }
 
+/** @deprecated please use ObjectSearchListItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-list-item */
 interface EntrySearchSelectedItemProps<TResult extends EntrySearchResult = EntrySearchResult> {
     selectedItem: TResult;
     logoIcon: string | React__default.ComponentType<{
@@ -67,14 +68,17 @@ interface EntrySearchSelectedItemProps<TResult extends EntrySearchResult = Entry
     onDeselect: (item: TResult) => void;
     onEditClosed?: (item: TResult) => void;
 }
+/** @deprecated please use ObjectSearchListItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-list-item */
 declare const DefaultSelectedItem: React__default.FC<EntrySearchSelectedItemProps>;
 
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 type EntrySearchQueryOptions = {
     count: number;
     offset: number;
     contentType?: string;
     cursor?: string;
 };
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 type EntrySearchProps<TResult extends EntrySearchResult = EntrySearchResult> = {
     search: (text: string, options: EntrySearchQueryOptions) => void;
     results: TResult[] | undefined;
@@ -108,6 +112,7 @@ type EntrySearchProps<TResult extends EntrySearchResult = EntrySearchResult> = {
      */
     loadingIndicatorDelay?: number;
 };
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 interface EntrySearchResult {
     id: string;
     title: string | JSX.Element;
@@ -116,21 +121,26 @@ interface EntrySearchResult {
     metadata?: Record<string, string | JSX.Element>;
     popoverData?: Record<string, string | JSX.Element>;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 interface EntrySearchContentType {
     id: string;
     name: string;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 interface NoResultsProps {
     searchText: string | undefined;
     selectedContentType: string | undefined;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-container-with-inputs for implementation details */
 declare const EntrySearch: <TResult extends EntrySearchResult>({ search, results, contentTypes, selectedItems, logoIcon, select, multiSelect, multiSelectId, rowComponent, selectedItemComponent, totalResults, cursor, resultsLoading, requireContentType, onAddNew, onEditClosed, onCancel, noResultsComponent, helpComponent, onSort, typeSelectorLabel, typeSelectorAllTypesOptionText, loadingIndicatorDelay, }: EntrySearchProps<TResult>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 interface EntrySearchRowProps<TResult extends EntrySearchResult = EntrySearchResult> {
     result: TResult;
     isSelected: boolean;
     triggerSelection: () => void;
 }
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 declare const DefaultSearchRow: React__default.FC<EntrySearchRowProps>;
 
 declare const searchRowContainer: _emotion_react.SerializedStyles;
@@ -198,10 +208,12 @@ interface ProductCategory {
     children?: ProductCategory[];
 }
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const ProductPreviewList: ({ products, }: {
     products: ProductSearchResults['products'] | undefined;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductDynamicSelectorValue {
     count: number;
     categories?: string[];
@@ -210,6 +222,7 @@ interface ProductDynamicSelectorValue {
     sort?: string;
     sortOrder?: string;
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductQueryProps<TValue extends ProductDynamicSelectorValue = ProductDynamicSelectorValue> {
     value: TValue | undefined;
     setValue: (value: TValue) => Promise<void>;
@@ -235,21 +248,27 @@ interface ProductQueryProps<TValue extends ProductDynamicSelectorValue = Product
     disableBrands?: boolean;
     restrictToSingleCategory?: boolean;
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductQueryCategory {
     id: string;
     name: string;
     children?: ProductQueryCategory[];
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface Brand {
     id: string;
     name: string;
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const ProductQuery: ({ value, setValue, brands, categories, loading, categoriesLoading, brandsLoading, logoIcon, onGetProducts, sortOptions, sortOrderOptions, categoryLabel, brandLabel, disableBrands, restrictToSingleCategory, }: ProductQueryProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 interface ProductQueryContextValue {
     categories: ProductQueryProps['categories'];
     logoIcon: ProductQueryProps['logoIcon'];
 }
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const ProductQueryContext: React__default.Context<ProductQueryContextValue | undefined>;
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const useProductQueryContext: () => ProductQueryContextValue;
 
 type ProductSearchProps<TResult extends ProductSearchResult = ProductSearchResult> = Pick<EntrySearchProps<TResult>, 'multiSelect' | 'multiSelectId' | 'logoIcon' | 'rowComponent' | 'selectedItemComponent' | 'helpComponent' | 'noResultsComponent' | 'onSort' | 'typeSelectorAllTypesOptionText' | 'typeSelectorLabel'> & {
@@ -269,12 +288,14 @@ type ProductSearchProps<TResult extends ProductSearchResult = ProductSearchResul
         searchError?: Error;
     }>;
 };
+/** @deprecated */
 interface GetProductOptions {
     limit?: number;
     offset?: number;
     categoryId?: string;
     cursor?: string;
 }
+/** @deprecated in favour of ObjectSearchContainer, see https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs for implementation details */
 declare function ProductSearch({ selectedProducts, setSelectedProducts, onGetCategories, onSearchProducts, logoIcon, multiSelect, multiSelectId, selectedItemComponent, rowComponent, errorComponent, helpComponent, noResultsComponent, onSort, typeSelectorAllTypesOptionText, typeSelectorLabel, }: ProductSearchProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 interface ProductSearchContextValue {
     logoIcon: ProductSearchProps['logoIcon'];
@@ -283,20 +304,25 @@ interface ProductSearchContextValue {
 declare const ProductSearchContext: React__default.Context<ProductSearchContextValue | undefined>;
 declare const useProductSearchContext: () => ProductSearchContextValue;
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare function ProductSearchRow({ result, isSelected, triggerSelection, }: EntrySearchRowProps<ProductSearchResult>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item*/
 declare function ProductSelectedItem({ selectedItem, onDeselect, }: EntrySearchSelectedItemProps<ProductSearchResult>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use DataRefreshButtonProps - https://mesh-design-system.netlify.app/?path=/story/object-search--data-refresh-button */
 declare const ResolvableLoadingValue: ({ value, text, loading, }: {
     value: string;
     text: string | undefined;
     loading: boolean;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 type SelectionFieldValue = {
     id: string;
     name: string;
 };
+/** @deprecated please use ObjectSearchContainer - https://mesh-design-system.netlify.app/?path=/story/object-search--query-filter-with-inputs*/
 declare const SelectionField: ({ id, label, loading, selectedValues, values, onAdd, onRemove, }: {
     id: string;
     label: string;
@@ -335,6 +361,7 @@ interface DamItem {
     type: 'image' | 'video' | 'file' | 'other';
 }
 
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 interface DamSelectedItemProps<TResult extends DamItem = DamItem> {
     /** The item used for rendering this component. */
     selectedItem: TResult;
@@ -354,6 +381,7 @@ interface DamSelectedItemProps<TResult extends DamItem = DamItem> {
         item: TResult;
     }>;
 }
+/** @deprecated please use ObjectSearchResultItem - https://mesh-design-system.netlify.app/?path=/story/object-search--object-search-result-item */
 declare function DamSelectedItem({ selectedItem, onDeselect, onEditClosed, logoIcon, itemDetailsRendererComponent, }: DamSelectedItemProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare const damSelectedItemContainer: _emotion_react.SerializedStyles;
@@ -740,6 +768,10 @@ type InputVariablesProps<TEditorContext = unknown> = {
      * Note: automatically disabled if `disabled` or `disableVariables` is set
      */
     enableEditingVariables?: boolean;
+    /**
+     * Adds an additional option to omit the variable if it's empty from requests
+     */
+    addOmitIfEmpty?: boolean;
     /** (optional) sets and shows the the error message value */
     errorMessage?: string;
     /** (optional) sets and shows the the warning message value */
@@ -1433,18 +1465,19 @@ declare function ParamTypeDynamicDataProvider(props: ParamTypeDynamicDataProvide
 declare function RequestBody(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Editor component to manage HTTP headers on a request */
-declare function RequestHeaders({ disableVariables }: Pick<InputVariablesProps, 'disableVariables'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function RequestHeaders({ disableVariables, addOmitIfEmpty, }: Pick<InputVariablesProps, 'disableVariables' | 'addOmitIfEmpty'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Dropdown to pick a HTTP method for a request */
 declare function RequestMethodSelect(props: Omit<InputSelectProps, 'value' | 'onChange' | 'options'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type RequestParametersProps = Pick<InputVariablesProps, 'disableVariables'>;
 /** Component to manage query parameters on a request */
-declare function RequestParameters({ disableVariables }: Pick<InputVariablesProps, 'disableVariables'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function RequestParameters({ disableVariables, addOmitIfEmpty, }: Pick<InputVariablesProps, 'disableVariables' | 'addOmitIfEmpty'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type RequestParameter = {
     key: string;
     value: string;
+    omitIfEmpty?: boolean;
 };
 type BaseRequestData = {
     baseUrl: string;

package/dist/index.esm.js

@@ -267,8 +267,8 @@ import { useAsyncFn, useDebounce } from "react-use";
 
 // src/components/commerce/SelectionField.tsx
 import { css as css2 } from "@emotion/react";
+import { CgClose } from "@react-icons/all-files/cg/CgClose";
 import { Icon, InputSelect } from "@uniformdev/design-system";
-import { CgClose } from "react-icons/cg";
 
 // src/components/commerce/ResolvableLoadingValue.tsx
 import { Fragment, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
@@ -1077,9 +1077,10 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
 
 // src/components/legacy/EntrySearch/DefaultSelectedItem.tsx
 import { css as css9 } from "@emotion/react";
+import { CgClose as CgClose2 } from "@react-icons/all-files/cg/CgClose";
+import { CgInfo } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon2, useOutsideClick as useOutsideClick2 } from "@uniformdev/design-system";
 import { useEffect, useRef as useRef2, useState as useState2 } from "react";
-import { CgClose as CgClose2, CgInfo } from "react-icons/cg";
 import { format as timeAgo } from "timeago.js";
 
 // src/utils/openWindowWithCloseCallback.ts
@@ -2037,8 +2038,8 @@ function ProductSearchRow({
 
 // src/components/commerce/ProductSelectedItem.tsx
 import { css as css15 } from "@emotion/react";
+import { CgClose as CgClose3 } from "@react-icons/all-files/cg/CgClose";
 import { Icon as Icon3, mq as mq4 } from "@uniformdev/design-system";
-import { CgClose as CgClose3 } from "react-icons/cg";
 
 // src/components/commerce/styles/ProductSelectedItem.styles.ts
 import { css as css14 } from "@emotion/react";
@@ -2349,9 +2350,10 @@ var useProductSearchContext = () => {
 
 // src/components/dam/DamSelectedItem.tsx
 import { css as css17 } from "@emotion/react";
+import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
+import { CgInfo as CgInfo2 } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon4 } from "@uniformdev/design-system";
 import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
-import { CgClose as CgClose4, CgInfo as CgInfo2 } from "react-icons/cg";
 import { format as timeAgo2 } from "timeago.js";
 
 // src/components/dam/DamSelectedItem.styles.ts
@@ -2988,6 +2990,7 @@ import {
   LexicalTypeaheadMenuPlugin,
   MenuOption
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
 import { createVariableReference } from "@uniformdev/canvas";
 import { HorizontalRhythm, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
 import { dequal } from "dequal/lite";
@@ -3000,7 +3003,6 @@ import {
 } from "lexical";
 import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef8, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
-import { AiFillPlusCircle } from "react-icons/ai";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
 import { css as css18 } from "@emotion/react";
@@ -4033,10 +4035,10 @@ import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexica
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
+import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
+import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
 import { HorizontalRhythm as HorizontalRhythm2, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useEffect as useEffect11, useRef as useRef9, useState as useState10 } from "react";
-import { BsFillPlusCircleFill } from "react-icons/bs";
-import { CgUsbC } from "react-icons/cg";
 import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
   onSelectVariable,
@@ -4070,11 +4072,12 @@ function SelectVariableMenu({
     Menu2,
     {
       placement: "bottom-start",
+      withoutPortal: true,
       menuTrigger: /* @__PURE__ */ jsx34(
         "button",
         {
-          title: menuTooltip,
           ...buttonProps,
+          title: menuTooltip,
           ref: btnRef,
           css: [menuBtn, buttonCss],
           type: "button",
@@ -4541,10 +4544,10 @@ function InputVariablesOverlayMenu({
 }
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
+import { CgUsbC as CgUsbC2 } from "@react-icons/all-files/cg/CgUsbC";
 import { bindVariablesToObject } from "@uniformdev/canvas";
 import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu3 } from "@uniformdev/design-system";
 import { useMemo as useMemo11 } from "react";
-import { CgUsbC as CgUsbC2 } from "react-icons/cg";
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 import { css as css23 } from "@emotion/react";
@@ -4570,6 +4573,12 @@ var variableBindButton2 = css23`
     background: none;
     color: currentColor;
   }
+
+  // fixes menu resizing issue within iframes
+  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
+  + [role='menu'] {
+    max-height: unset;
+  }
 `;
 var input2 = css23`
   display: block;
@@ -4610,8 +4619,7 @@ var input2 = css23`
     color: var(--gray-400);
   }
 
-  &[readonly],
-  &[contenteditable='false'] {
+  &[readonly] {
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -4653,6 +4661,7 @@ function ParameterConnectionIndicator({
       Menu3,
       {
         placement: "bottom-start",
+        withoutPortal: true,
         menuTrigger: /* @__PURE__ */ jsx40(
           "button",
           {
@@ -5287,7 +5296,10 @@ import {
   WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
 import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
-function RequestHeaders({ disableVariables }) {
+function RequestHeaders({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
@@ -5305,7 +5317,8 @@ function RequestHeaders({ disableVariables }) {
   return /* @__PURE__ */ jsx49("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs29(Table2, { children: [
     /* @__PURE__ */ jsx49(TableHead2, { children: /* @__PURE__ */ jsxs29(TableRow2, { children: [
       /* @__PURE__ */ jsx49(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" })
+      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellHead2, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs29(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
@@ -5353,7 +5366,24 @@ function RequestHeaders({ disableVariables }) {
               enableEditingVariables: true,
               "data-testid": "header-value"
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx49(
+            Input3,
+            {
+              type: "checkbox",
+              checked: header.omitIfEmpty,
+              "data-testid": "header-omitifempty",
+              onChange: (e) => dispatch({
+                type: "updateHeader",
+                header: {
+                  key: header.key,
+                  value: header.value,
+                  omitIfEmpty: e.currentTarget.checked
+                },
+                index
+              })
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })
@@ -5393,25 +5423,30 @@ import {
   WarningMessage as WarningMessage3
 } from "@uniformdev/design-system";
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-function RequestParameters({ disableVariables }) {
+function RequestParameters({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
   const handleUpdateParamFromMenu = ({
     key,
     value,
+    omitIfEmpty,
     index
   }) => {
     dispatch({
       type: "updateParameter",
-      parameter: { key, value },
+      parameter: { key, value, omitIfEmpty },
       index
     });
   };
   return /* @__PURE__ */ jsx51("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs30(Table3, { children: [
     /* @__PURE__ */ jsx51(TableHead3, { children: /* @__PURE__ */ jsxs30(TableRow3, { children: [
       /* @__PURE__ */ jsx51(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" })
+      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellHead3, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs30(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
@@ -5439,7 +5474,11 @@ function RequestParameters({ disableVariables }) {
                 if (e.currentTarget.value) {
                   dispatch({
                     type: "updateParameter",
-                    parameter: { key: e.currentTarget.value, value: parameter.value },
+                    parameter: {
+                      key: e.currentTarget.value,
+                      value: parameter.value,
+                      omitIfEmpty: parameter.omitIfEmpty
+                    },
                     index
                   });
                 } else {
@@ -5456,6 +5495,7 @@ function RequestParameters({ disableVariables }) {
               onChange: (selectedVariable) => handleUpdateParamFromMenu({
                 key: parameter.key,
                 value: selectedVariable != null ? selectedVariable : "",
+                omitIfEmpty: parameter.omitIfEmpty,
                 index
               }),
               disableVariables,
@@ -5463,7 +5503,26 @@ function RequestParameters({ disableVariables }) {
               showAddVariableMenuOption: "Add variable...",
               enableEditingVariables: true
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx51(
+            Input4,
+            {
+              type: "checkbox",
+              checked: parameter.omitIfEmpty,
+              "data-testid": "parameter-omitifempty",
+              onChange: (e) => {
+                dispatch({
+                  type: "updateParameter",
+                  parameter: {
+                    key: parameter.key,
+                    value: parameter.value,
+                    omitIfEmpty: e.currentTarget.checked
+                  },
+                  index
+                });
+              }
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })

package/dist/index.js

@@ -478,8 +478,8 @@ var import_react_use = require("react-use");
 
 // src/components/commerce/SelectionField.tsx
 var import_react3 = require("@emotion/react");
+var import_CgClose = require("@react-icons/all-files/cg/CgClose");
 var import_design_system = require("@uniformdev/design-system");
-var import_cg = require("react-icons/cg");
 
 // src/components/commerce/ResolvableLoadingValue.tsx
 var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
@@ -578,7 +578,7 @@ var SelectionField = ({
             css: selectionFieldBtn,
             title: "remove",
             onClick: (e) => handleRemoveClick(e, selectedValue),
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system.Icon, { icon: import_cg.CgClose, iconColor: "currentColor", size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system.Icon, { icon: import_CgClose.CgClose, iconColor: "currentColor", size: 20 })
           }
         )
       ] }, selectedValue);
@@ -1288,9 +1288,10 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
 
 // src/components/legacy/EntrySearch/DefaultSelectedItem.tsx
 var import_react12 = require("@emotion/react");
+var import_CgClose2 = require("@react-icons/all-files/cg/CgClose");
+var import_CgInfo = require("@react-icons/all-files/cg/CgInfo");
 var import_design_system6 = require("@uniformdev/design-system");
 var import_react13 = require("react");
-var import_cg2 = require("react-icons/cg");
 var import_timeago = require("timeago.js");
 
 // src/utils/openWindowWithCloseCallback.ts
@@ -1440,7 +1441,7 @@ var DefaultSelectedItem = ({
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 import_design_system6.Icon,
                 {
-                  icon: import_cg2.CgInfo,
+                  icon: import_CgInfo.CgInfo,
                   iconColor: "gray",
                   size: 24,
                   css: import_react12.css`
@@ -1563,7 +1564,7 @@ var DefaultSelectedItem = ({
           css: selectItemLinkBtn,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { css: selectItemSmallText, children: "Unlink" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_design_system6.Icon, { icon: import_cg2.CgClose, iconColor: "red", size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_design_system6.Icon, { icon: import_CgClose2.CgClose, iconColor: "red", size: 16 })
           ]
         }
       )
@@ -2238,8 +2239,8 @@ function ProductSearchRow({
 
 // src/components/commerce/ProductSelectedItem.tsx
 var import_react20 = require("@emotion/react");
+var import_CgClose3 = require("@react-icons/all-files/cg/CgClose");
 var import_design_system9 = require("@uniformdev/design-system");
-var import_cg3 = require("react-icons/cg");
 
 // src/components/commerce/styles/ProductSelectedItem.styles.ts
 var import_react19 = require("@emotion/react");
@@ -2433,7 +2434,7 @@ function ProductSelectedItem({
           css: productedSelectedItemLinkBtn,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: productedSelectedItemSmallText, children: "Unlink" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_design_system9.Icon, { icon: import_cg3.CgClose, iconColor: "red", size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_design_system9.Icon, { icon: import_CgClose3.CgClose, iconColor: "red", size: 16 })
           ]
         }
       )
@@ -2550,9 +2551,10 @@ var useProductSearchContext = () => {
 
 // src/components/dam/DamSelectedItem.tsx
 var import_react23 = require("@emotion/react");
+var import_CgClose4 = require("@react-icons/all-files/cg/CgClose");
+var import_CgInfo2 = require("@react-icons/all-files/cg/CgInfo");
 var import_design_system12 = require("@uniformdev/design-system");
 var import_react24 = require("react");
-var import_cg4 = require("react-icons/cg");
 var import_timeago2 = require("timeago.js");
 
 // src/components/dam/DamSelectedItem.styles.ts
@@ -2703,7 +2705,7 @@ function DamSelectedItem({
                   children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     import_design_system12.Icon,
                     {
-                      icon: import_cg4.CgInfo,
+                      icon: import_CgInfo2.CgInfo,
                       iconColor: "gray",
                       size: 24,
                       css: import_react23.css`
@@ -2770,7 +2772,7 @@ function DamSelectedItem({
               css: damSelectedItemLinkBtn,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { css: damSelectedItemSmallText, children: "Unlink" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_design_system12.Icon, { icon: import_cg4.CgClose, iconColor: "red", size: 16 })
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_design_system12.Icon, { icon: import_CgClose4.CgClose, iconColor: "red", size: 16 })
               ]
             }
           )
@@ -3172,13 +3174,13 @@ function InfoVariableReference({ children }) {
 var import_react35 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
+var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
 var import_canvas2 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_lite = require("dequal/lite");
 var import_lexical3 = require("lexical");
 var import_react36 = require("react");
 var import_react_dom = require("react-dom");
-var import_ai = require("react-icons/ai");
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
 var import_react32 = require("@emotion/react");
@@ -3803,7 +3805,7 @@ function VariablesPlugin({
                         },
                         css: menuItemTextGroup,
                         children: variable.name === ADD_VARIABLE_OPTION ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system17.HorizontalRhythm, { gap: "sm", align: "center", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ai.AiFillPlusCircle, { fill: "var(--gray-500)" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_AiFillPlusCircle.AiFillPlusCircle, { fill: "var(--gray-500)" }),
                           " ",
                           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: variable.displayName })
                         ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
@@ -4211,10 +4213,10 @@ var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerCont
 var import_lexical6 = require("lexical");
 
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
+var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
+var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
 var import_design_system18 = require("@uniformdev/design-system");
 var import_react42 = require("react");
-var import_bs = require("react-icons/bs");
-var import_cg5 = require("react-icons/cg");
 var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 function SelectVariableMenu({
   onSelectVariable,
@@ -4248,16 +4250,17 @@ function SelectVariableMenu({
     import_design_system18.Menu,
     {
       placement: "bottom-start",
+      withoutPortal: true,
       menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
-          title: menuTooltip,
           ...buttonProps,
+          title: menuTooltip,
           ref: btnRef,
           css: [menuBtn, buttonCss],
           type: "button",
           "data-testid": "insert-variable",
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_cg5.CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_CgUsbC.CgUsbC, { size: "1.4rem" })
         }
       ),
       menuLabel: menuTooltip,
@@ -4271,7 +4274,7 @@ function SelectVariableMenu({
             },
             "data-testid": "add-variable-button",
             children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_design_system18.HorizontalRhythm, { gap: "sm", align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_bs.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_BsFillPlusCircleFill.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: "Add\u2026" }) })
             ] })
           }
@@ -4707,10 +4710,10 @@ function InputVariablesOverlayMenu({
 }
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
+var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
 var import_canvas6 = require("@uniformdev/canvas");
 var import_design_system20 = require("@uniformdev/design-system");
 var import_react49 = require("react");
-var import_cg6 = require("react-icons/cg");
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 var import_react48 = require("@emotion/react");
@@ -4736,6 +4739,12 @@ var variableBindButton2 = import_react48.css`
     background: none;
     color: currentColor;
   }
+
+  // fixes menu resizing issue within iframes
+  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
+  + [role='menu'] {
+    max-height: unset;
+  }
 `;
 var input2 = import_react48.css`
   display: block;
@@ -4776,8 +4785,7 @@ var input2 = import_react48.css`
     color: var(--gray-400);
   }
 
-  &[readonly],
-  &[contenteditable='false'] {
+  &[readonly] {
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -4819,6 +4827,7 @@ function ParameterConnectionIndicator({
       import_design_system20.Menu,
       {
         placement: "bottom-start",
+        withoutPortal: true,
         menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "button",
           {
@@ -4826,7 +4835,7 @@ function ParameterConnectionIndicator({
             "aria-pressed": hasVariablesInValue,
             css: [menuBtn, variableBindButton2],
             type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_cg6.CgUsbC, { size: "1.4rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
           }
         ),
         menuLabel: menuTooltip,
@@ -5434,7 +5443,10 @@ function RequestBody() {
 // src/components/Request/RequestHeaders.tsx
 var import_design_system26 = require("@uniformdev/design-system");
 var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
-function RequestHeaders({ disableVariables }) {
+function RequestHeaders({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
@@ -5452,7 +5464,8 @@ function RequestHeaders({ disableVariables }) {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.Table, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableRow, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Value" })
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
@@ -5500,7 +5513,24 @@ function RequestHeaders({ disableVariables }) {
               enableEditingVariables: true,
               "data-testid": "header-value"
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_design_system26.Input,
+            {
+              type: "checkbox",
+              checked: header.omitIfEmpty,
+              "data-testid": "header-omitifempty",
+              onChange: (e) => dispatch({
+                type: "updateHeader",
+                header: {
+                  key: header.key,
+                  value: header.value,
+                  omitIfEmpty: e.currentTarget.checked
+                },
+                index
+              })
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })
@@ -5531,25 +5561,30 @@ function RequestMethodSelect(props) {
 // src/components/Request/RequestParameters.tsx
 var import_design_system28 = require("@uniformdev/design-system");
 var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
-function RequestParameters({ disableVariables }) {
+function RequestParameters({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
   const handleUpdateParamFromMenu = ({
     key,
     value,
+    omitIfEmpty,
     index
   }) => {
     dispatch({
       type: "updateParameter",
-      parameter: { key, value },
+      parameter: { key, value, omitIfEmpty },
       index
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.Table, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableRow, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Value" })
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
@@ -5577,7 +5612,11 @@ function RequestParameters({ disableVariables }) {
                 if (e.currentTarget.value) {
                   dispatch({
                     type: "updateParameter",
-                    parameter: { key: e.currentTarget.value, value: parameter.value },
+                    parameter: {
+                      key: e.currentTarget.value,
+                      value: parameter.value,
+                      omitIfEmpty: parameter.omitIfEmpty
+                    },
                     index
                   });
                 } else {
@@ -5594,6 +5633,7 @@ function RequestParameters({ disableVariables }) {
               onChange: (selectedVariable) => handleUpdateParamFromMenu({
                 key: parameter.key,
                 value: selectedVariable != null ? selectedVariable : "",
+                omitIfEmpty: parameter.omitIfEmpty,
                 index
               }),
               disableVariables,
@@ -5601,7 +5641,26 @@ function RequestParameters({ disableVariables }) {
               showAddVariableMenuOption: "Add variable...",
               enableEditingVariables: true
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_design_system28.Input,
+            {
+              type: "checkbox",
+              checked: parameter.omitIfEmpty,
+              "data-testid": "parameter-omitifempty",
+              onChange: (e) => {
+                dispatch({
+                  type: "updateParameter",
+                  parameter: {
+                    key: parameter.key,
+                    value: parameter.value,
+                    omitIfEmpty: e.currentTarget.checked
+                  },
+                  index
+                });
+              }
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })

package/dist/index.mjs

@@ -267,8 +267,8 @@ import { useAsyncFn, useDebounce } from "react-use";
 
 // src/components/commerce/SelectionField.tsx
 import { css as css2 } from "@emotion/react";
+import { CgClose } from "@react-icons/all-files/cg/CgClose";
 import { Icon, InputSelect } from "@uniformdev/design-system";
-import { CgClose } from "react-icons/cg";
 
 // src/components/commerce/ResolvableLoadingValue.tsx
 import { Fragment, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
@@ -1077,9 +1077,10 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
 
 // src/components/legacy/EntrySearch/DefaultSelectedItem.tsx
 import { css as css9 } from "@emotion/react";
+import { CgClose as CgClose2 } from "@react-icons/all-files/cg/CgClose";
+import { CgInfo } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon2, useOutsideClick as useOutsideClick2 } from "@uniformdev/design-system";
 import { useEffect, useRef as useRef2, useState as useState2 } from "react";
-import { CgClose as CgClose2, CgInfo } from "react-icons/cg";
 import { format as timeAgo } from "timeago.js";
 
 // src/utils/openWindowWithCloseCallback.ts
@@ -2037,8 +2038,8 @@ function ProductSearchRow({
 
 // src/components/commerce/ProductSelectedItem.tsx
 import { css as css15 } from "@emotion/react";
+import { CgClose as CgClose3 } from "@react-icons/all-files/cg/CgClose";
 import { Icon as Icon3, mq as mq4 } from "@uniformdev/design-system";
-import { CgClose as CgClose3 } from "react-icons/cg";
 
 // src/components/commerce/styles/ProductSelectedItem.styles.ts
 import { css as css14 } from "@emotion/react";
@@ -2349,9 +2350,10 @@ var useProductSearchContext = () => {
 
 // src/components/dam/DamSelectedItem.tsx
 import { css as css17 } from "@emotion/react";
+import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
+import { CgInfo as CgInfo2 } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon4 } from "@uniformdev/design-system";
 import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
-import { CgClose as CgClose4, CgInfo as CgInfo2 } from "react-icons/cg";
 import { format as timeAgo2 } from "timeago.js";
 
 // src/components/dam/DamSelectedItem.styles.ts
@@ -2988,6 +2990,7 @@ import {
   LexicalTypeaheadMenuPlugin,
   MenuOption
 } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { AiFillPlusCircle } from "@react-icons/all-files/ai/AiFillPlusCircle";
 import { createVariableReference } from "@uniformdev/canvas";
 import { HorizontalRhythm, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
 import { dequal } from "dequal/lite";
@@ -3000,7 +3003,6 @@ import {
 } from "lexical";
 import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef8, useState as useState8 } from "react";
 import { createPortal } from "react-dom";
-import { AiFillPlusCircle } from "react-icons/ai";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
 import { css as css18 } from "@emotion/react";
@@ -4033,10 +4035,10 @@ import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexica
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
+import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircleFill";
+import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
 import { HorizontalRhythm as HorizontalRhythm2, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useEffect as useEffect11, useRef as useRef9, useState as useState10 } from "react";
-import { BsFillPlusCircleFill } from "react-icons/bs";
-import { CgUsbC } from "react-icons/cg";
 import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
   onSelectVariable,
@@ -4070,11 +4072,12 @@ function SelectVariableMenu({
     Menu2,
     {
       placement: "bottom-start",
+      withoutPortal: true,
       menuTrigger: /* @__PURE__ */ jsx34(
         "button",
         {
-          title: menuTooltip,
           ...buttonProps,
+          title: menuTooltip,
           ref: btnRef,
           css: [menuBtn, buttonCss],
           type: "button",
@@ -4541,10 +4544,10 @@ function InputVariablesOverlayMenu({
 }
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
+import { CgUsbC as CgUsbC2 } from "@react-icons/all-files/cg/CgUsbC";
 import { bindVariablesToObject } from "@uniformdev/canvas";
 import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu3 } from "@uniformdev/design-system";
 import { useMemo as useMemo11 } from "react";
-import { CgUsbC as CgUsbC2 } from "react-icons/cg";
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
 import { css as css23 } from "@emotion/react";
@@ -4570,6 +4573,12 @@ var variableBindButton2 = css23`
     background: none;
     color: currentColor;
   }
+
+  // fixes menu resizing issue within iframes
+  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
+  + [role='menu'] {
+    max-height: unset;
+  }
 `;
 var input2 = css23`
   display: block;
@@ -4610,8 +4619,7 @@ var input2 = css23`
     color: var(--gray-400);
   }
 
-  &[readonly],
-  &[contenteditable='false'] {
+  &[readonly] {
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -4653,6 +4661,7 @@ function ParameterConnectionIndicator({
       Menu3,
       {
         placement: "bottom-start",
+        withoutPortal: true,
         menuTrigger: /* @__PURE__ */ jsx40(
           "button",
           {
@@ -5287,7 +5296,10 @@ import {
   WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
 import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
-function RequestHeaders({ disableVariables }) {
+function RequestHeaders({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
@@ -5305,7 +5317,8 @@ function RequestHeaders({ disableVariables }) {
   return /* @__PURE__ */ jsx49("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs29(Table2, { children: [
     /* @__PURE__ */ jsx49(TableHead2, { children: /* @__PURE__ */ jsxs29(TableRow2, { children: [
       /* @__PURE__ */ jsx49(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" })
+      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellHead2, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs29(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
@@ -5353,7 +5366,24 @@ function RequestHeaders({ disableVariables }) {
               enableEditingVariables: true,
               "data-testid": "header-value"
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx49(
+            Input3,
+            {
+              type: "checkbox",
+              checked: header.omitIfEmpty,
+              "data-testid": "header-omitifempty",
+              onChange: (e) => dispatch({
+                type: "updateHeader",
+                header: {
+                  key: header.key,
+                  value: header.value,
+                  omitIfEmpty: e.currentTarget.checked
+                },
+                index
+              })
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })
@@ -5393,25 +5423,30 @@ import {
   WarningMessage as WarningMessage3
 } from "@uniformdev/design-system";
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-function RequestParameters({ disableVariables }) {
+function RequestParameters({
+  disableVariables,
+  addOmitIfEmpty
+}) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
   const handleUpdateParamFromMenu = ({
     key,
     value,
+    omitIfEmpty,
     index
   }) => {
     dispatch({
       type: "updateParameter",
-      parameter: { key, value },
+      parameter: { key, value, omitIfEmpty },
       index
     });
   };
   return /* @__PURE__ */ jsx51("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs30(Table3, { children: [
     /* @__PURE__ */ jsx51(TableHead3, { children: /* @__PURE__ */ jsxs30(TableRow3, { children: [
       /* @__PURE__ */ jsx51(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" })
+      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellHead3, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs30(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
@@ -5439,7 +5474,11 @@ function RequestParameters({ disableVariables }) {
                 if (e.currentTarget.value) {
                   dispatch({
                     type: "updateParameter",
-                    parameter: { key: e.currentTarget.value, value: parameter.value },
+                    parameter: {
+                      key: e.currentTarget.value,
+                      value: parameter.value,
+                      omitIfEmpty: parameter.omitIfEmpty
+                    },
                     index
                   });
                 } else {
@@ -5456,6 +5495,7 @@ function RequestParameters({ disableVariables }) {
               onChange: (selectedVariable) => handleUpdateParamFromMenu({
                 key: parameter.key,
                 value: selectedVariable != null ? selectedVariable : "",
+                omitIfEmpty: parameter.omitIfEmpty,
                 index
               }),
               disableVariables,
@@ -5463,7 +5503,26 @@ function RequestParameters({ disableVariables }) {
               showAddVariableMenuOption: "Add variable...",
               enableEditingVariables: true
             }
-          ) : null })
+          ) : null }),
+          addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx51(
+            Input4,
+            {
+              type: "checkbox",
+              checked: parameter.omitIfEmpty,
+              "data-testid": "parameter-omitifempty",
+              onChange: (e) => {
+                dispatch({
+                  type: "updateParameter",
+                  parameter: {
+                    key: parameter.key,
+                    value: parameter.value,
+                    omitIfEmpty: e.currentTarget.checked
+                  },
+                  index
+                });
+              }
+            }
+          ) : null }) : null
         ] }, index);
       })
     ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "19.42.1-alpha.6+8511a0877",
+  "version": "19.45.0",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -44,19 +44,19 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.0.1",
-    "@lexical/clipboard": "^0.11.3",
-    "@lexical/react": "^0.11.3",
-    "@lexical/selection": "^0.11.3",
-    "@lexical/utils": "^0.11.3",
-    "@uniformdev/canvas": "19.42.1-alpha.6+8511a0877",
-    "@uniformdev/design-system": "19.42.1-alpha.6+8511a0877",
-    "@uniformdev/mesh-sdk": "19.42.1-alpha.6+8511a0877",
+    "@lexical/clipboard": "^0.12.0",
+    "@lexical/react": "^0.12.0",
+    "@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.45.0",
+    "@uniformdev/design-system": "19.45.0",
+    "@uniformdev/mesh-sdk": "19.45.0",
     "dequal": "^2.0.3",
-    "lexical": "^0.11.3",
+    "lexical": "^0.12.0",
     "mitt": "^3.0.0",
     "react-beautiful-dnd": "13.1.1",
     "react-hook-form": "^7.43.9",
-    "react-icons": "4.10.1",
     "react-use": "17.4.0",
     "timeago.js": "4.0.2",
     "uuid": "9.0.0",
@@ -72,7 +72,7 @@
     "@emotion/react": "11.11.1",
     "@storybook/react": "6.5.16",
     "@svgr/cli": "6.5.1",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.20",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "9.0.2",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8511a0877200b169973a40ab7c7684e6744f3d2f"
+  "gitHead": "ff90cd6bd6d9db14f0d3a2ba8bd4db538b66548c"
 }