@uniformdev/mesh-sdk-react 18.2.2 → 18.3.1-alpha.22

package/dist/index.d.ts

@@ -531,12 +531,12 @@ type DataSourceEditorProps = PropsWithChildren<{
      * by `createLocationValidator`.
      */
     onChange: SetLocationValueDispatch<DataSourceLocationValue>;
-}>;
+} & Pick<VariablesProviderProps, 'editVariableComponent'>>;
 /**
  * Wrapper for editing a data source using Uniform Mesh SDK components that rely on `useRequest()`
  * or `useVariables()`, or custom components that use the same hooks.
  */
-declare function DataSourceEditor({ onChange, children }: DataSourceEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function DataSourceEditor({ onChange, children, editVariableComponent }: DataSourceEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type DataTypeEditorProps = PropsWithChildren<{
     /**
@@ -545,12 +545,12 @@ type DataTypeEditorProps = PropsWithChildren<{
      * by `createLocationValidator`.
      */
     onChange: SetLocationValueDispatch<DataTypeLocationValue>;
-}>;
+} & Pick<VariablesProviderProps, 'editVariableComponent'>>;
 /**
  * Wrapper for editing a data type using Uniform Mesh SDK components that rely on `useRequest()`
  * or `useVariables()`, or custom components that use the same hooks.
  */
-declare function DataTypeEditor({ onChange, children }: DataTypeEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function DataTypeEditor({ onChange, children, editVariableComponent }: DataTypeEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type MeshAppProps = {
     loadingComponent?: React__default.ComponentType;
@@ -560,13 +560,17 @@ type MeshAppProps = {
 };
 declare const MeshApp: React__default.FC<React__default.PropsWithChildren<MeshAppProps>>;
 
+/** Editor component to let you write a request body for POST requests */
 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;
 
+/** 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;
 
 type RequestParameter = {
@@ -619,6 +623,7 @@ type RequestContext = {
     dispatch: (event: RequestAction) => void;
     request: Readonly<RequestData>;
 };
+/** Provides a mutable HTTP request object context. Components such as RequestBody and RequestUrl use this context to render. */
 declare function RequestProvider({ value, onChange, children }: RequestProviderProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare function useRequest(): RequestContext;
 
@@ -637,13 +642,44 @@ type RequestTypeContainerProps = React.HTMLAttributes<HTMLDivElement> & {
  * </div> */
 declare const RequestTypeContainer: ({ bgColor, children, ...props }: RequestTypeContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/**
+ * Displays the current full URL of the request, including the base URL if one is set
+ */
 declare function RequestUrl(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+/**
+ * Editor to modify the current URL of the request
+ * Note: entering query string parameters automatically converts them and syncs the request state with them
+ */
 declare function RequestUrlInput(props: Omit<InputVariablesProps, 'value' | 'onChange'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function urlEncodeRequestUrl(url: string, varValues?: Record<string, DataVariableDefinition>): string;
 declare function urlEncodeRequestParameter(parameter: RequestParameter, varValues?: Record<string, DataVariableDefinition>): RequestParameter;
 
+/**
+ * Hook to make it simple to read and write a specific request header by name,
+ * instead of supporting multiple values in an array like native dispatch.
+ *
+ * NOTE: if multiple values are added for the named header, this hook will bind to the FIRST
+ * instance of the header and leave the other values alone.
+ */
+declare function useRequestHeader(headerName: string): {
+    value: string;
+    update: (value: string) => void;
+};
+
+/**
+ * Hook to make it simple to read and write a specific request query string parameter by name,
+ * instead of supporting multiple values in an array like native dispatch.
+ *
+ * NOTE: if multiple values are added for the named parameter, this hook will bind to the FIRST
+ * instance of the parameter and leave the other values alone.
+ */
+declare function useRequestParameter(paramName: string): {
+    value: string;
+    update: (value: string) => void;
+};
+
 /** @deprecated */
 interface UniformMeshLocationContextValue<TLocationValue = unknown, TLocationSetValue = TLocationValue> {
     location: MeshLocation<TLocationValue, TLocationSetValue>;
@@ -709,4 +745,4 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
  */
 declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
 
-export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, MeshApp, MeshAppProps, NoResultsProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, UniformMeshLocationContext, UniformMeshLocationContextProvider, UniformMeshLocationContextValue, UniformMeshSdkContext, UniformMeshSdkContextProvider, UniformMeshSdkContextValue, UseUniformMeshSdkOptions, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useInitializeUniformMeshSdk, useMeshLocation, useProductQueryContext, useProductSearchContext, useRequest, useUniformMeshLocation, useUniformMeshLocationContext, useUniformMeshSdk, useUniformMeshSdkContext, useVariables, variablesToList };
+export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, MeshApp, MeshAppProps, NoResultsProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, UniformMeshLocationContext, UniformMeshLocationContextProvider, UniformMeshLocationContextValue, UniformMeshSdkContext, UniformMeshSdkContextProvider, UniformMeshSdkContextValue, UseUniformMeshSdkOptions, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useInitializeUniformMeshSdk, useMeshLocation, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshLocation, useUniformMeshLocationContext, useUniformMeshSdk, useUniformMeshSdkContext, useVariables, variablesToList };

package/dist/index.esm.js

@@ -2688,8 +2688,11 @@ function DefaultDamItemRenderer({ item }) {
 // src/components/DataResourceVariablesList.tsx
 import { Callout as Callout3, Input as Input3 } from "@uniformdev/design-system";
 
+// src/hooks/useMeshLocation.ts
+import { useMemo as useMemo4, useRef as useRef7 } from "react";
+
 // src/components/UniformMeshLocationContext.tsx
-import { createContext as createContext2, useContext as useContext4, useEffect as useEffect6, useState as useState6 } from "react";
+import { createContext as createContext2, useContext as useContext4, useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/components/UniformMeshSdkContext.tsx
 import { Theme } from "@uniformdev/design-system";
@@ -2735,7 +2738,7 @@ var UniformMeshLocationContextProvider = ({
   const valueChangeListener = (event) => {
     setLocation((old) => ({ ...old, value: event.newValue }));
   };
-  useEffect6(() => {
+  useMemo3(() => {
     sdk.events.on("onValueChanged", valueChangeListener);
     return () => {
       sdk.events.off("onValueChanged", valueChangeListener);
@@ -2768,12 +2771,18 @@ function useMeshLocation(expectedLocation) {
   if (effectiveExpected && location.type !== effectiveExpected) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
+  const backdoorLocation = useRef7(location);
+  backdoorLocation.current = location;
+  const stabilizedSetValueProxy = useMemo4(
+    () => (dispatch) => {
+      const { newValue, options } = dispatch(backdoorLocation.current.value);
+      backdoorLocation.current.setValue(newValue, options);
+    },
+    []
+  );
   const proxyLocation = {
     ...location,
-    setValue: (dispatch) => {
-      const { newValue, options } = dispatch(location.value);
-      location.setValue(newValue, options);
-    }
+    setValue: stabilizedSetValueProxy
   };
   return proxyLocation;
 }
@@ -3345,8 +3354,8 @@ function VariableEditor({ variable, onSubmit, onCancel }) {
           ),
           /* @__PURE__ */ jsx28(Input2, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
           /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "Save" }),
-            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "cancel" })
+            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "OK" }),
+            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
           ] })
         ] });
       }
@@ -4121,7 +4130,7 @@ function RequestParameters({ disableVariables }) {
 
 // src/components/Request/RequestUrl.tsx
 import { css as css23 } from "@emotion/react";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -4147,7 +4156,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = useMemo4(() => {
+  const mergedParameters = useMemo6(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -4221,9 +4230,43 @@ function RequestUrlInput(props) {
   );
 }
 
+// src/components/Request/useRequestHeader.ts
+function useRequestHeader(headerName) {
+  var _a, _b;
+  const { request, dispatch } = useRequest();
+  const headerIndex = request.headers.findIndex((f) => f.key === headerName);
+  return {
+    value: (_b = (_a = request.headers[headerIndex]) == null ? void 0 : _a.value) != null ? _b : "",
+    update: (value) => {
+      dispatch({
+        type: "updateHeader",
+        header: { key: headerName, value },
+        index: headerIndex >= 0 ? headerIndex : void 0
+      });
+    }
+  };
+}
+
+// src/components/Request/useRequestParameter.ts
+function useRequestParameter(paramName) {
+  var _a, _b;
+  const { request, dispatch } = useRequest();
+  const paramIndex = request.parameters.findIndex((f) => f.key === paramName);
+  return {
+    value: (_b = (_a = request.parameters[paramIndex]) == null ? void 0 : _a.value) != null ? _b : "",
+    update: (value) => {
+      dispatch({
+        type: "updateParameter",
+        parameter: { key: paramName, value },
+        index: paramIndex >= 0 ? paramIndex : void 0
+      });
+    }
+  };
+}
+
 // src/components/DataSourceEditor.tsx
 import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
-function DataSourceEditor({ onChange, children }) {
+function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
@@ -4232,6 +4275,7 @@ function DataSourceEditor({ onChange, children }) {
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
+      editVariableComponent,
       children: /* @__PURE__ */ jsx41(
         RequestProvider,
         {
@@ -4270,7 +4314,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 
 // src/components/DataTypeEditor.tsx
 import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
-function DataTypeEditor({ onChange, children }) {
+function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
     value,
@@ -4282,6 +4326,7 @@ function DataTypeEditor({ onChange, children }) {
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
+      editVariableComponent,
       children: /* @__PURE__ */ jsx42(
         RequestProvider,
         {
@@ -4332,12 +4377,12 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef9, useState as useState9 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState9();
   const [sdk, setSdk] = useState9();
-  const initializationInProgress = useRef8(false);
-  useEffect8(
+  const initializationInProgress = useRef9(false);
+  useEffect7(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4553,6 +4598,8 @@ export {
   useProductQueryContext,
   useProductSearchContext,
   useRequest,
+  useRequestHeader,
+  useRequestParameter,
   useUniformMeshLocation,
   useUniformMeshLocationContext,
   useUniformMeshSdk,

package/dist/index.js

@@ -152,6 +152,8 @@ __export(src_exports, {
   useProductQueryContext: () => useProductQueryContext,
   useProductSearchContext: () => useProductSearchContext,
   useRequest: () => useRequest,
+  useRequestHeader: () => useRequestHeader,
+  useRequestParameter: () => useRequestParameter,
   useUniformMeshLocation: () => useUniformMeshLocation,
   useUniformMeshLocationContext: () => useUniformMeshLocationContext,
   useUniformMeshSdk: () => useUniformMeshSdk,
@@ -2835,6 +2837,9 @@ function DefaultDamItemRenderer({ item }) {
 // src/components/DataResourceVariablesList.tsx
 var import_design_system15 = require("@uniformdev/design-system");
 
+// src/hooks/useMeshLocation.ts
+var import_react27 = require("react");
+
 // src/components/UniformMeshLocationContext.tsx
 var import_react26 = require("react");
 
@@ -2882,7 +2887,7 @@ var UniformMeshLocationContextProvider = ({
   const valueChangeListener = (event) => {
     setLocation((old) => ({ ...old, value: event.newValue }));
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react26.useMemo)(() => {
     sdk.events.on("onValueChanged", valueChangeListener);
     return () => {
       sdk.events.off("onValueChanged", valueChangeListener);
@@ -2915,33 +2920,39 @@ function useMeshLocation(expectedLocation) {
   if (effectiveExpected && location.type !== effectiveExpected) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
+  const backdoorLocation = (0, import_react27.useRef)(location);
+  backdoorLocation.current = location;
+  const stabilizedSetValueProxy = (0, import_react27.useMemo)(
+    () => (dispatch) => {
+      const { newValue, options } = dispatch(backdoorLocation.current.value);
+      backdoorLocation.current.setValue(newValue, options);
+    },
+    []
+  );
   const proxyLocation = {
     ...location,
-    setValue: (dispatch) => {
-      const { newValue, options } = dispatch(location.value);
-      location.setValue(newValue, options);
-    }
+    setValue: stabilizedSetValueProxy
   };
   return proxyLocation;
 }
 
 // src/components/Variables/InputVariables.tsx
-var import_react28 = require("@emotion/react");
-var import_react29 = __toESM(require("@yaireo/tagify/dist/react.tagify"));
+var import_react29 = require("@emotion/react");
+var import_react30 = __toESM(require("@yaireo/tagify/dist/react.tagify"));
 var React11 = __toESM(require("react"));
 
 // src/components/Variables/InputVariables.styles.ts
-var import_react27 = require("@emotion/react");
-var variablesFormContainer = import_react27.css`
+var import_react28 = require("@emotion/react");
+var variablesFormContainer = import_react28.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = import_react27.css`
+var variablesFormBtnGroup = import_react28.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var tagifyStyles = import_react27.css`
+var tagifyStyles = import_react28.css`
   :root {
     --tagify-dd-color-primary: rgb(53, 149, 246);
     --tagify-dd-bg-color: var(--white);
@@ -3492,8 +3503,8 @@ function VariableEditor({ variable, onSubmit, onCancel }) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system13.Input, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system13.Button, { type: "submit", children: "Save" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system13.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "cancel" })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system13.Button, { type: "submit", children: "OK" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system13.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
           ] })
         ] });
       }
@@ -3613,9 +3624,9 @@ function InputVariables({
     }
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react28.Global, { styles: tagifyStyles }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react29.Global, { styles: tagifyStyles }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_react29.default,
+      import_react30.default,
       {
         tagifyRef,
         "aria-label": ariaLabel,
@@ -3663,13 +3674,13 @@ function InputVariables({
 }
 
 // src/components/Variables/VariablesList.tsx
-var import_react31 = require("@emotion/react");
+var import_react32 = require("@emotion/react");
 var import_design_system14 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
-var import_react30 = require("@emotion/react");
-var tableRow = (isDragging) => import_react30.css`
+var import_react31 = require("@emotion/react");
+var tableRow = (isDragging) => import_react31.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -3677,7 +3688,7 @@ var tableRow = (isDragging) => import_react30.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react30.css`
+var tableCellDragIcon = import_react31.css`
   &::after {
     content: '';
     display: block;
@@ -3695,7 +3706,7 @@ var tableCellDragIcon = import_react30.css`
     opacity: 1;
   }
 `;
-var variableName = import_react30.css`
+var variableName = import_react31.css`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -3706,7 +3717,7 @@ var variableName = import_react30.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react30.css`
+var variableValue = import_react31.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3800,7 +3811,7 @@ function VariablesList() {
                         title: `delete ${text}`,
                         css: [
                           import_design_system14.button,
-                          import_react31.css`
+                          import_react32.css`
                                   background: transparent;
                                 `
                         ],
@@ -3895,10 +3906,10 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react33 = require("@emotion/react");
-var import_react34 = __toESM(require("@monaco-editor/react"));
+var import_react34 = require("@emotion/react");
+var import_react35 = __toESM(require("@monaco-editor/react"));
 var import_design_system16 = require("@uniformdev/design-system");
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React12 = __toESM(require("react"));
@@ -3982,11 +3993,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react32 = require("@emotion/react");
-var innerContentStyles = import_react32.css`
+var import_react33 = require("@emotion/react");
+var innerContentStyles = import_react33.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react32.css`
+var requestTypeContainer = (bgColor) => import_react33.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -4024,11 +4035,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react35.useState)("json");
+  const [language, setLanguage] = (0, import_react36.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
-      css: import_react33.css`
+      css: import_react34.css`
         background: var(--white);
       `,
       children: [
@@ -4036,7 +4047,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react33.css`
+            css: import_react34.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -4063,7 +4074,7 @@ function RequestBody() {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          import_react34.default,
+          import_react35.default,
           {
             height: 200,
             value: request.body,
@@ -4239,8 +4250,8 @@ function RequestParameters({ disableVariables }) {
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react36 = require("@emotion/react");
-var import_react37 = require("react");
+var import_react37 = require("@emotion/react");
+var import_react38 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -4266,7 +4277,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react37.useMemo)(() => {
+  const mergedParameters = (0, import_react38.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -4276,7 +4287,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "small",
     {
-      css: import_react36.css`
+      css: import_react37.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -4340,9 +4351,43 @@ function RequestUrlInput(props) {
   );
 }
 
+// src/components/Request/useRequestHeader.ts
+function useRequestHeader(headerName) {
+  var _a, _b;
+  const { request, dispatch } = useRequest();
+  const headerIndex = request.headers.findIndex((f) => f.key === headerName);
+  return {
+    value: (_b = (_a = request.headers[headerIndex]) == null ? void 0 : _a.value) != null ? _b : "",
+    update: (value) => {
+      dispatch({
+        type: "updateHeader",
+        header: { key: headerName, value },
+        index: headerIndex >= 0 ? headerIndex : void 0
+      });
+    }
+  };
+}
+
+// src/components/Request/useRequestParameter.ts
+function useRequestParameter(paramName) {
+  var _a, _b;
+  const { request, dispatch } = useRequest();
+  const paramIndex = request.parameters.findIndex((f) => f.key === paramName);
+  return {
+    value: (_b = (_a = request.parameters[paramIndex]) == null ? void 0 : _a.value) != null ? _b : "",
+    update: (value) => {
+      dispatch({
+        type: "updateParameter",
+        parameter: { key: paramName, value },
+        index: paramIndex >= 0 ? paramIndex : void 0
+      });
+    }
+  };
+}
+
 // src/components/DataSourceEditor.tsx
 var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
-function DataSourceEditor({ onChange, children }) {
+function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
@@ -4351,6 +4396,7 @@ function DataSourceEditor({ onChange, children }) {
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
+      editVariableComponent,
       children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         RequestProvider,
         {
@@ -4389,7 +4435,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 
 // src/components/DataTypeEditor.tsx
 var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
-function DataTypeEditor({ onChange, children }) {
+function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
     value,
@@ -4401,6 +4447,7 @@ function DataTypeEditor({ onChange, children }) {
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
+      editVariableComponent,
       children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         RequestProvider,
         {
@@ -4451,12 +4498,12 @@ var import_design_system20 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react38.useState)();
-  const [sdk, setSdk] = (0, import_react38.useState)();
-  const initializationInProgress = (0, import_react38.useRef)(false);
-  (0, import_react38.useEffect)(
+  const [error, setError] = (0, import_react39.useState)();
+  const [sdk, setSdk] = (0, import_react39.useState)();
+  const initializationInProgress = (0, import_react39.useRef)(false);
+  (0, import_react39.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4652,6 +4699,8 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useProductQueryContext,
   useProductSearchContext,
   useRequest,
+  useRequestHeader,
+  useRequestParameter,
   useUniformMeshLocation,
   useUniformMeshLocationContext,
   useUniformMeshSdk,

package/dist/index.mjs

@@ -2688,8 +2688,11 @@ function DefaultDamItemRenderer({ item }) {
 // src/components/DataResourceVariablesList.tsx
 import { Callout as Callout3, Input as Input3 } from "@uniformdev/design-system";
 
+// src/hooks/useMeshLocation.ts
+import { useMemo as useMemo4, useRef as useRef7 } from "react";
+
 // src/components/UniformMeshLocationContext.tsx
-import { createContext as createContext2, useContext as useContext4, useEffect as useEffect6, useState as useState6 } from "react";
+import { createContext as createContext2, useContext as useContext4, useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/components/UniformMeshSdkContext.tsx
 import { Theme } from "@uniformdev/design-system";
@@ -2735,7 +2738,7 @@ var UniformMeshLocationContextProvider = ({
   const valueChangeListener = (event) => {
     setLocation((old) => ({ ...old, value: event.newValue }));
   };
-  useEffect6(() => {
+  useMemo3(() => {
     sdk.events.on("onValueChanged", valueChangeListener);
     return () => {
       sdk.events.off("onValueChanged", valueChangeListener);
@@ -2768,12 +2771,18 @@ function useMeshLocation(expectedLocation) {
   if (effectiveExpected && location.type !== effectiveExpected) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
+  const backdoorLocation = useRef7(location);
+  backdoorLocation.current = location;
+  const stabilizedSetValueProxy = useMemo4(
+    () => (dispatch) => {
+      const { newValue, options } = dispatch(backdoorLocation.current.value);
+      backdoorLocation.current.setValue(newValue, options);
+    },
+    []
+  );
   const proxyLocation = {
     ...location,
-    setValue: (dispatch) => {
-      const { newValue, options } = dispatch(location.value);
-      location.setValue(newValue, options);
-    }
+    setValue: stabilizedSetValueProxy
   };
   return proxyLocation;
 }
@@ -3345,8 +3354,8 @@ function VariableEditor({ variable, onSubmit, onCancel }) {
           ),
           /* @__PURE__ */ jsx28(Input2, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
           /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "Save" }),
-            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "cancel" })
+            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "OK" }),
+            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
           ] })
         ] });
       }
@@ -4121,7 +4130,7 @@ function RequestParameters({ disableVariables }) {
 
 // src/components/Request/RequestUrl.tsx
 import { css as css23 } from "@emotion/react";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -4147,7 +4156,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = useMemo4(() => {
+  const mergedParameters = useMemo6(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -4221,9 +4230,43 @@ function RequestUrlInput(props) {
   );
 }
 
+// src/components/Request/useRequestHeader.ts
+function useRequestHeader(headerName) {
+  var _a, _b;
+  const { request, dispatch } = useRequest();
+  const headerIndex = request.headers.findIndex((f) => f.key === headerName);
+  return {
+    value: (_b = (_a = request.headers[headerIndex]) == null ? void 0 : _a.value) != null ? _b : "",
+    update: (value) => {
+      dispatch({
+        type: "updateHeader",
+        header: { key: headerName, value },
+        index: headerIndex >= 0 ? headerIndex : void 0
+      });
+    }
+  };
+}
+
+// src/components/Request/useRequestParameter.ts
+function useRequestParameter(paramName) {
+  var _a, _b;
+  const { request, dispatch } = useRequest();
+  const paramIndex = request.parameters.findIndex((f) => f.key === paramName);
+  return {
+    value: (_b = (_a = request.parameters[paramIndex]) == null ? void 0 : _a.value) != null ? _b : "",
+    update: (value) => {
+      dispatch({
+        type: "updateParameter",
+        parameter: { key: paramName, value },
+        index: paramIndex >= 0 ? paramIndex : void 0
+      });
+    }
+  };
+}
+
 // src/components/DataSourceEditor.tsx
 import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
-function DataSourceEditor({ onChange, children }) {
+function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
@@ -4232,6 +4275,7 @@ function DataSourceEditor({ onChange, children }) {
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
+      editVariableComponent,
       children: /* @__PURE__ */ jsx41(
         RequestProvider,
         {
@@ -4270,7 +4314,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 
 // src/components/DataTypeEditor.tsx
 import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
-function DataTypeEditor({ onChange, children }) {
+function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
     value,
@@ -4282,6 +4326,7 @@ function DataTypeEditor({ onChange, children }) {
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
+      editVariableComponent,
       children: /* @__PURE__ */ jsx42(
         RequestProvider,
         {
@@ -4332,12 +4377,12 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef9, useState as useState9 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
   const [error, setError] = useState9();
   const [sdk, setSdk] = useState9();
-  const initializationInProgress = useRef8(false);
-  useEffect8(
+  const initializationInProgress = useRef9(false);
+  useEffect7(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4553,6 +4598,8 @@ export {
   useProductQueryContext,
   useProductSearchContext,
   useRequest,
+  useRequestHeader,
+  useRequestParameter,
   useUniformMeshLocation,
   useUniformMeshLocationContext,
   useUniformMeshSdk,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "18.2.2",
+  "version": "18.3.1-alpha.22+61a3fbd5a",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@monaco-editor/react": "4.4.6",
-    "@uniformdev/design-system": "18.2.2",
-    "@uniformdev/mesh-sdk": "18.2.2",
+    "@uniformdev/design-system": "18.3.1-alpha.22+61a3fbd5a",
+    "@uniformdev/mesh-sdk": "18.3.1-alpha.22+61a3fbd5a",
     "@yaireo/tagify": "4.16.4",
     "formik": "^2.2.9",
     "monaco-editor": "0.34.1",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb69f934f799579fdd71d5dc7dba0375bbb5c265"
+  "gitHead": "61a3fbd5aadff46369076445db0ede53fc229d34"
 }