@uniformdev/mesh-sdk-react 18.35.1-alpha.27 → 18.38.2-alpha.6

package/dist/index.d.ts

@@ -5,11 +5,11 @@ import { TDate } from 'timeago.js';
 import * as _emotion_react from '@emotion/react';
 import { DataVariableDefinition, DataResourceVariables } from '@uniformdev/canvas';
 import * as _uniformdev_mesh_sdk from '@uniformdev/mesh-sdk';
-import { MeshLocation, SetValueOptions, DataSourceLocationValue, DataTypeLocationValue } from '@uniformdev/mesh-sdk';
+import { MeshLocation, SetValueOptions, DataSourceLocationValue, DataTypeLocationValue, UniformMeshSDK, MeshLocationCore } from '@uniformdev/mesh-sdk';
 export * from '@uniformdev/mesh-sdk';
 import { Emitter } from 'mitt';
 import { BadgeThemeProps, InputSelectProps } from '@uniformdev/design-system';
-export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell } from '@uniformdev/design-system';
+export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, InputKeywordSearch as KeywordSearchInput, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell } from '@uniformdev/design-system';
 
 declare const SvgCaution: (props: SVGProps<SVGSVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -183,6 +183,10 @@ type ProductSearchResult = EntrySearchResult & {
         id: string;
         name: string;
     }>;
+    /** @deprecated Use `editLink` instead. */
+    url?: string;
+    /** @deprecated Use `title` instead. */
+    name?: string;
 };
 interface ProductSearchResults {
     total: number;
@@ -386,6 +390,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
     type: TLocationType;
+}> | Extract<_uniformdev_mesh_sdk.DataTypeInstanceLocation, {
+    type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
     type: TLocationType;
 }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
@@ -399,6 +405,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataTypeInstanceLocation, {
+        type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
@@ -411,6 +419,8 @@ declare function useMeshLocation<TLocationType extends MeshLocation['type'], TLo
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataTypeLocation, {
         type: TLocationType;
+    }> | Extract<_uniformdev_mesh_sdk.DataTypeInstanceLocation, {
+        type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.DataResourceLocation, {
         type: TLocationType;
     }> | Extract<_uniformdev_mesh_sdk.ParamTypeLocation<TLocationValue, unknown, TLocationSetValue, unknown>, {
@@ -460,9 +470,11 @@ declare function variablesToList(variables: Record<string, DataVariableDefinitio
 type VariableEditorProps = {
     variable: string;
     onSubmit: (values: DataVariableDefinitionWithName) => void | Promise<void>;
+    /** Disables the tip about Mesh integrations. Intended for use when this is placed on a custom Mesh integration to edit variables. */
+    disableMeshTip?: boolean;
     onCancel: () => void;
 };
-declare function VariableEditor({ variable, onSubmit, onCancel }: VariableEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }: VariableEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function VariablesList(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -1026,6 +1038,56 @@ declare function useRequestParameter(paramName: string): {
     update: (value: string) => void;
 };
 
+/** @deprecated */
+interface UniformMeshLocationContextValue<TLocationValue = unknown, TLocationSetValue = TLocationValue> {
+    location: MeshLocation<TLocationValue, TLocationSetValue>;
+}
+/** @deprecated not intended for public usage */
+declare const UniformMeshLocationContext: React__default.Context<UniformMeshLocationContextValue<unknown, unknown> | undefined>;
+/** @deprecated not intended for public usage. Use <MeshApp /> instead. */
+declare const UniformMeshLocationContextProvider: React__default.FC<React__default.PropsWithChildren<unknown>>;
+/**
+ * Provides access to the current UniformMeshLocationContext value.
+ * @deprecated Not intended for public use. Use `useUniformMeshLocation` instead.
+ */
+declare const useUniformMeshLocationContext: <TLocationValue = unknown, TLocationSetValue = TLocationValue>() => UniformMeshLocationContextValue<TLocationValue, TLocationSetValue>;
+
+interface UniformMeshSdkContextValue {
+    sdk: UniformMeshSDK;
+}
+/** @deprecated not intended for public usage */
+declare const UniformMeshSdkContext: React__default.Context<UniformMeshSdkContextValue | undefined>;
+/** @deprecated not intended for public usage; use <MeshApp /> instead */
+declare const UniformMeshSdkContextProvider: React__default.FC<React__default.PropsWithChildren<unknown>>;
+/**
+ * Provides access to the current (initialized) Uniform Mesh SDK context value.
+ * @deprecated Not intended for public use. Use `useUniformMeshLocation` or `useUniformMeshSdk` instead.
+ */
+declare const useUniformMeshSdkContext: () => UniformMeshSdkContextValue;
+
+interface UseUniformMeshSdkOptions {
+    autoResizingDisabled?: boolean;
+}
+/**
+ * Provides a React-hook wrapper around Uniform Mesh SDK initialization.
+ * NOTE: initialization is an async operation and should be handled as such.
+ *
+ * @deprecated prefer <MeshApp /> to initialize and provide in a single component
+ */
+declare const useInitializeUniformMeshSdk: ({ autoResizingDisabled }?: UseUniformMeshSdkOptions) => {
+    initializing: boolean;
+    error: Error | undefined;
+    sdk: UniformMeshSDK | undefined;
+};
+
+/**
+ * Provides convenient access to the current Uniform Mesh location via React hook.
+ * Intended to be used within <MeshApp />.
+ *
+ * @deprecated prefer useMeshLocation which has much more accurate type safety
+ */
+declare function useUniformMeshLocation<TLocationValue = unknown, TLocationMetadata = never, TLocationSetValue = TLocationValue>(): MeshLocationCore<TLocationValue, TLocationMetadata, TLocationSetValue>;
+
 /**
  * Provides convenient access to the current Uniform Mesh SDK instance via React hook.
  * Intended to be used within <MeshApp />.
@@ -1041,4 +1103,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, DataRefreshButton, DataRefreshButtonProps, 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, ItemListProps, LinkButton, MeshApp, MeshAppProps, NoResultsProps, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesEvents, 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, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariables, variablesToList };
+export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, 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, ItemListProps, LinkButton, MeshApp, MeshAppProps, NoResultsProps, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, UniformMeshLocationContext, UniformMeshLocationContextProvider, UniformMeshLocationContextValue, UniformMeshSdkContext, UniformMeshSdkContextProvider, UniformMeshSdkContextValue, UseUniformMeshSdkOptions, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesEvents, 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, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshLocation, useUniformMeshLocationContext, useUniformMeshSdk, useUniformMeshSdkContext, useVariables, variablesToList };

package/dist/index.esm.js

@@ -893,7 +893,7 @@ var ProductPreviewList = ({
           scrollbarStyles
         ],
         children: products == null ? void 0 : products.map((product, index) => {
-          var _a;
+          var _a, _b;
           const [category] = (product == null ? void 0 : product.categories) || [];
           const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
           return /* @__PURE__ */ jsx18("li", { css: productPreviewListItem, children: /* @__PURE__ */ jsxs7(
@@ -906,13 +906,13 @@ var ProductPreviewList = ({
                   "img",
                   {
                     src: product.thumbnailUrl,
-                    alt: typeof product.title === "string" ? product.title : `Product ${index}`,
+                    alt: typeof product.title === "string" ? product.title : product.name || `Product ${index}`,
                     css: productPreviewListImage,
                     "data-test-id": "product-image"
                   }
                 ) : /* @__PURE__ */ jsx18("div", { css: productPreviewListImageDefault }),
                 /* @__PURE__ */ jsxs7("h4", { css: productPreviewListTitle, "data-test-id": "product-name", children: [
-                  product.title,
+                  product.title || product.name,
                   categoryName && /* @__PURE__ */ jsx18("span", { css: productPreviewListCategoryText, children: categoryName })
                 ] }),
                 product && /* @__PURE__ */ jsxs7(Fragment2, { children: [
@@ -925,12 +925,12 @@ var ProductPreviewList = ({
                     "Price: ",
                     product.price
                   ] }) : null,
-                  product.editLink ? /* @__PURE__ */ jsxs7(
+                  product.editLink || product.url ? /* @__PURE__ */ jsxs7(
                     "a",
                     {
                       css: productPreviewListLinkBtn,
-                      href: product.editLink,
-                      title: `Go to ${product.title}`,
+                      href: (_b = product.editLink) != null ? _b : product.url,
+                      title: `Go to ${product.title || product.name}`,
                       target: "_blank",
                       rel: "noopener noreferrer",
                       "data-test-id": "edit-product-button",
@@ -2642,7 +2642,7 @@ function DefaultDamItemRenderer({ item }) {
 }
 
 // src/components/DataResourceVariablesList.tsx
-import { Callout as Callout3, Input as Input4 } from "@uniformdev/design-system";
+import { Callout as Callout4, Input as Input4 } from "@uniformdev/design-system";
 
 // src/hooks/useMeshLocation.ts
 import { useMemo as useMemo4, useRef as useRef7 } from "react";
@@ -2655,6 +2655,18 @@ import { Theme } from "@uniformdev/design-system";
 import { createContext, useContext as useContext3 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var UniformMeshSdkContext = createContext(void 0);
+var UniformMeshSdkContextProvider = ({ children }) => {
+  let value = void 0;
+  if (typeof window !== "undefined" && typeof window.UniformMeshSDK !== "undefined") {
+    value = {
+      sdk: window.UniformMeshSDK
+    };
+  }
+  return /* @__PURE__ */ jsxs15(UniformMeshSdkContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx26(Theme, {}),
+    /* @__PURE__ */ jsx26(UniformMeshLocationContextProvider, { children })
+  ] });
+};
 var useUniformMeshSdkContext = () => {
   const context = useContext3(UniformMeshSdkContext);
   if (!context) {
@@ -2671,7 +2683,9 @@ function useUniformMeshSdk() {
 
 // src/components/UniformMeshLocationContext.tsx
 import { jsx as jsx27 } from "@emotion/react/jsx-runtime";
-var UniformMeshLocationContext = createContext2(void 0);
+var UniformMeshLocationContext = createContext2(
+  void 0
+);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
@@ -2702,9 +2716,20 @@ var useUniformMeshLocationContext = () => {
 };
 
 // src/hooks/useMeshLocation.ts
+var legacyWarned = false;
 function useMeshLocation(expectedLocation) {
   const { location } = useUniformMeshLocationContext();
-  if (expectedLocation && location.type !== expectedLocation) {
+  let effectiveExpected = expectedLocation;
+  if (expectedLocation === "dataTypeInstance") {
+    effectiveExpected = "dataResource";
+    if (!legacyWarned) {
+      console.warn(
+        "`dataTypeInstance` mesh location is deprecated, please switch to `dataResource` instead."
+      );
+      legacyWarned = true;
+    }
+  }
+  if (effectiveExpected && location.type !== effectiveExpected) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
   const backdoorLocation = useRef7(location);
@@ -2793,8 +2818,10 @@ import mitt from "mitt";
 import * as React10 from "react";
 
 // src/components/Variables/VariableEditor.tsx
-import { Button as Button2, Input as Input2 } from "@uniformdev/design-system";
-import { Form, Formik } from "formik";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button as Button2, Callout as Callout3, Input as Input2, useShortcut } from "@uniformdev/design-system";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 // src/components/Variables/InputVariables.styles.ts
 import { css as css19 } from "@emotion/react";
@@ -2810,57 +2837,90 @@ var variablesFormBtnGroup = css19`
 
 // src/components/Variables/VariableEditor.tsx
 import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
-function VariableEditor({ variable, onSubmit, onCancel }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+var schema = z.object({
+  name: z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: z.string(),
+  displayName: z.string().optional(),
+  helpText: z.string().optional(),
+  order: z.number().optional(),
+  type: z.string().optional()
+});
+function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { variables } = useVariables();
-  return /* @__PURE__ */ jsx28(
-    Formik,
-    {
-      initialValues: {
-        name: variable,
-        default: (_b = (_a = variables[variable]) == null ? void 0 : _a.default) != null ? _b : "",
-        displayName: (_d = (_c = variables[variable]) == null ? void 0 : _c.displayName) != null ? _d : "",
-        helpText: (_f = (_e = variables[variable]) == null ? void 0 : _e.helpText) != null ? _f : "",
-        order: (_g = variables[variable]) == null ? void 0 : _g.order,
-        type: (_i = (_h = variables[variable]) == null ? void 0 : _h.type) != null ? _i : ""
-      },
-      onSubmit: (values) => {
-        const finalValue = {
-          ...values,
-          helpText: values.helpText || void 0,
-          type: values.type || void 0,
-          displayName: values.displayName || void 0
-        };
-        return onSubmit(finalValue);
-      },
-      children: ({ getFieldProps, initialValues }) => {
-        return /* @__PURE__ */ jsxs16(Form, { css: variablesFormContainer, children: [
-          /* @__PURE__ */ jsx28(
-            Input2,
-            {
-              ...getFieldProps("name"),
-              label: "Name",
-              disabled: initialValues.name !== "",
-              caption: "This cannot change once created."
-            }
-          ),
-          /* @__PURE__ */ jsx28(
-            Input2,
-            {
-              ...getFieldProps("helpText"),
-              label: "Help Text",
-              caption: "Appears in the composition data resource when entering a value for this variable.",
-              autoComplete: "off"
-            }
-          ),
-          /* @__PURE__ */ jsx28(Input2, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
-          /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "OK" }),
-            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-          ] })
-        ] });
-      }
-    }
+  const currentVariable = variables[variable];
+  const { register, handleSubmit, formState } = useForm({
+    defaultValues: {
+      name: variable,
+      default: (_a = currentVariable == null ? void 0 : currentVariable.default) != null ? _a : "",
+      displayName: (_b = currentVariable == null ? void 0 : currentVariable.displayName) != null ? _b : "",
+      helpText: (_c = currentVariable == null ? void 0 : currentVariable.helpText) != null ? _c : "",
+      order: currentVariable == null ? void 0 : currentVariable.order,
+      type: (_d = currentVariable == null ? void 0 : currentVariable.type) != null ? _d : ""
+    },
+    resolver: zodResolver(schema)
+  });
+  const submitHandler = handleSubmit((values) => {
+    const finalValue = {
+      ...values,
+      helpText: values.helpText || void 0,
+      type: values.type || void 0,
+      displayName: values.displayName || void 0
+    };
+    return onSubmit(finalValue);
+  });
+  useShortcut({
+    shortcut: "enter",
+    handler: () => {
+      submitHandler();
+    },
+    activeWhenEditing: true
+  });
+  return (
+    // NOTE: this is intentionally NOT a <form> because it's regularly used in a nested modal and that can make it bubble
+    // up a submit to its 'parent form' which is not what we want.
+    /* @__PURE__ */ jsxs16("div", { css: variablesFormContainer, children: [
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("name"),
+          label: "Name",
+          disabled: variable !== "",
+          caption: "This cannot change once created.",
+          errorMessage: (_e = formState.errors.name) == null ? void 0 : _e.message,
+          "data-af": "1"
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("helpText"),
+          label: "Help Text",
+          caption: "Appears when entering a value for this variable.",
+          autoComplete: "off",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("default"),
+          label: "Default Value",
+          autoComplete: "off",
+          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+        }
+      ),
+      /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
+        /* @__PURE__ */ jsx28(Button2, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
+      ] }),
+      disableMeshTip ? null : /* @__PURE__ */ jsxs16(Callout3, { type: "tip", title: "Customized User Interfaces", children: [
+        "Developers can create customized user interfaces for variable editing by building a Uniform mesh integration. Get started quickly with our",
+        " ",
+        /* @__PURE__ */ jsx28("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        "."
+      ] })
+    ] })
   );
 }
 
@@ -3284,13 +3344,13 @@ function DataResourceVariablesList({
   const {
     value,
     metadata: { dataType }
-  } = useMeshLocation("dataResource");
+  } = useMeshLocation("dataTypeInstance");
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
       return /* @__PURE__ */ jsx33(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx33(Callout3, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx33(Callout4, { type: "note", children: "No settings are required." });
   }
   return /* @__PURE__ */ jsx33("div", { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
@@ -4750,6 +4810,12 @@ var QueryFilter = ({
   ] });
 };
 
+// src/hooks/useUniformMeshLocation.ts
+function useUniformMeshLocation() {
+  const { location } = useUniformMeshLocationContext();
+  return location;
+}
+
 // src/hooks/index.ts
 import { ParameterShellContext, useParameterShell } from "@uniformdev/design-system";
 
@@ -4765,13 +4831,14 @@ function createLocationValidator(setValue, validate) {
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout4,
+  Callout as Callout5,
   Heading,
   Input as Input8,
   InputComboBox,
   InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
   InputToggle,
+  InputKeywordSearch as InputKeywordSearch5,
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
@@ -4801,7 +4868,7 @@ export * from "@uniformdev/mesh-sdk";
 export {
   AddListButton2 as AddListButton,
   Button6 as Button,
-  Callout4 as Callout,
+  Callout5 as Callout,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceVariablesList,
@@ -4818,6 +4885,7 @@ export {
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
+  InputKeywordSearch5 as KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator4 as LoadingIndicator,
@@ -4873,6 +4941,10 @@ export {
   TextVariableRenderer,
   Textarea,
   Theme3 as Theme,
+  UniformMeshLocationContext,
+  UniformMeshLocationContextProvider,
+  UniformMeshSdkContext,
+  UniformMeshSdkContextProvider,
   VariableEditor,
   VariablesList,
   VariablesProvider,
@@ -4941,6 +5013,7 @@ export {
   selectedItemTitle,
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
+  useInitializeUniformMeshSdk,
   useMeshLocation,
   useObjectSearchContext,
   useParameterShell,
@@ -4949,7 +5022,10 @@ export {
   useRequest,
   useRequestHeader,
   useRequestParameter,
+  useUniformMeshLocation,
+  useUniformMeshLocationContext,
   useUniformMeshSdk,
+  useUniformMeshSdkContext,
   useVariables,
   variablesToList
 };

package/dist/index.js

@@ -50,6 +50,7 @@ __export(src_exports, {
   InputSelect: () => import_design_system34.InputSelect,
   InputToggle: () => import_design_system34.InputToggle,
   InputVariables: () => InputVariables,
+  KeywordSearchInput: () => import_design_system34.InputKeywordSearch,
   Label: () => import_design_system34.Label,
   LinkButton: () => LinkButton,
   LoadingIndicator: () => import_design_system34.LoadingIndicator,
@@ -105,6 +106,10 @@ __export(src_exports, {
   TextVariableRenderer: () => TextVariableRenderer,
   Textarea: () => import_design_system34.Textarea,
   Theme: () => import_design_system34.Theme,
+  UniformMeshLocationContext: () => UniformMeshLocationContext,
+  UniformMeshLocationContextProvider: () => UniformMeshLocationContextProvider,
+  UniformMeshSdkContext: () => UniformMeshSdkContext,
+  UniformMeshSdkContextProvider: () => UniformMeshSdkContextProvider,
   VariableEditor: () => VariableEditor,
   VariablesList: () => VariablesList,
   VariablesProvider: () => VariablesProvider,
@@ -173,6 +178,7 @@ __export(src_exports, {
   selectedItemTitle: () => selectedItemTitle,
   urlEncodeRequestParameter: () => urlEncodeRequestParameter,
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
+  useInitializeUniformMeshSdk: () => useInitializeUniformMeshSdk,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
   useParameterShell: () => import_design_system33.useParameterShell,
@@ -181,7 +187,10 @@ __export(src_exports, {
   useRequest: () => useRequest,
   useRequestHeader: () => useRequestHeader,
   useRequestParameter: () => useRequestParameter,
+  useUniformMeshLocation: () => useUniformMeshLocation,
+  useUniformMeshLocationContext: () => useUniformMeshLocationContext,
   useUniformMeshSdk: () => useUniformMeshSdk,
+  useUniformMeshSdkContext: () => useUniformMeshSdkContext,
   useVariables: () => useVariables,
   variablesToList: () => variablesToList
 });
@@ -1076,7 +1085,7 @@ var ProductPreviewList = ({
           import_design_system3.scrollbarStyles
         ],
         children: products == null ? void 0 : products.map((product, index) => {
-          var _a;
+          var _a, _b;
           const [category] = (product == null ? void 0 : product.categories) || [];
           const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
           return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { css: productPreviewListItem, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -1089,13 +1098,13 @@ var ProductPreviewList = ({
                   "img",
                   {
                     src: product.thumbnailUrl,
-                    alt: typeof product.title === "string" ? product.title : `Product ${index}`,
+                    alt: typeof product.title === "string" ? product.title : product.name || `Product ${index}`,
                     css: productPreviewListImage,
                     "data-test-id": "product-image"
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { css: productPreviewListImageDefault }),
                 /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("h4", { css: productPreviewListTitle, "data-test-id": "product-name", children: [
-                  product.title,
+                  product.title || product.name,
                   categoryName && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { css: productPreviewListCategoryText, children: categoryName })
                 ] }),
                 product && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
@@ -1108,12 +1117,12 @@ var ProductPreviewList = ({
                     "Price: ",
                     product.price
                   ] }) : null,
-                  product.editLink ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  product.editLink || product.url ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                     "a",
                     {
                       css: productPreviewListLinkBtn,
-                      href: product.editLink,
-                      title: `Go to ${product.title}`,
+                      href: (_b = product.editLink) != null ? _b : product.url,
+                      title: `Go to ${product.title || product.name}`,
                       target: "_blank",
                       rel: "noopener noreferrer",
                       "data-test-id": "edit-product-button",
@@ -2828,6 +2837,18 @@ var import_design_system13 = require("@uniformdev/design-system");
 var import_react25 = require("react");
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var UniformMeshSdkContext = (0, import_react25.createContext)(void 0);
+var UniformMeshSdkContextProvider = ({ children }) => {
+  let value = void 0;
+  if (typeof window !== "undefined" && typeof window.UniformMeshSDK !== "undefined") {
+    value = {
+      sdk: window.UniformMeshSDK
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(UniformMeshSdkContext.Provider, { value, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_design_system13.Theme, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UniformMeshLocationContextProvider, { children })
+  ] });
+};
 var useUniformMeshSdkContext = () => {
   const context = (0, import_react25.useContext)(UniformMeshSdkContext);
   if (!context) {
@@ -2844,7 +2865,9 @@ function useUniformMeshSdk() {
 
 // src/components/UniformMeshLocationContext.tsx
 var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
-var UniformMeshLocationContext = (0, import_react26.createContext)(void 0);
+var UniformMeshLocationContext = (0, import_react26.createContext)(
+  void 0
+);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
@@ -2875,9 +2898,20 @@ var useUniformMeshLocationContext = () => {
 };
 
 // src/hooks/useMeshLocation.ts
+var legacyWarned = false;
 function useMeshLocation(expectedLocation) {
   const { location } = useUniformMeshLocationContext();
-  if (expectedLocation && location.type !== expectedLocation) {
+  let effectiveExpected = expectedLocation;
+  if (expectedLocation === "dataTypeInstance") {
+    effectiveExpected = "dataResource";
+    if (!legacyWarned) {
+      console.warn(
+        "`dataTypeInstance` mesh location is deprecated, please switch to `dataResource` instead."
+      );
+      legacyWarned = true;
+    }
+  }
+  if (effectiveExpected && location.type !== effectiveExpected) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
   const backdoorLocation = (0, import_react27.useRef)(location);
@@ -2966,8 +3000,10 @@ var import_mitt = __toESM(require("mitt"));
 var React10 = __toESM(require("react"));
 
 // src/components/Variables/VariableEditor.tsx
+var import_zod = require("@hookform/resolvers/zod");
 var import_design_system14 = require("@uniformdev/design-system");
-var import_formik = require("formik");
+var import_react_hook_form = require("react-hook-form");
+var import_zod2 = require("zod");
 
 // src/components/Variables/InputVariables.styles.ts
 var import_react29 = require("@emotion/react");
@@ -2983,57 +3019,90 @@ var variablesFormBtnGroup = import_react29.css`
 
 // src/components/Variables/VariableEditor.tsx
 var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
-function VariableEditor({ variable, onSubmit, onCancel }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+var schema = import_zod2.z.object({
+  name: import_zod2.z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: import_zod2.z.string(),
+  displayName: import_zod2.z.string().optional(),
+  helpText: import_zod2.z.string().optional(),
+  order: import_zod2.z.number().optional(),
+  type: import_zod2.z.string().optional()
+});
+function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { variables } = useVariables();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_formik.Formik,
-    {
-      initialValues: {
-        name: variable,
-        default: (_b = (_a = variables[variable]) == null ? void 0 : _a.default) != null ? _b : "",
-        displayName: (_d = (_c = variables[variable]) == null ? void 0 : _c.displayName) != null ? _d : "",
-        helpText: (_f = (_e = variables[variable]) == null ? void 0 : _e.helpText) != null ? _f : "",
-        order: (_g = variables[variable]) == null ? void 0 : _g.order,
-        type: (_i = (_h = variables[variable]) == null ? void 0 : _h.type) != null ? _i : ""
-      },
-      onSubmit: (values) => {
-        const finalValue = {
-          ...values,
-          helpText: values.helpText || void 0,
-          type: values.type || void 0,
-          displayName: values.displayName || void 0
-        };
-        return onSubmit(finalValue);
-      },
-      children: ({ getFieldProps, initialValues }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_formik.Form, { css: variablesFormContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_design_system14.Input,
-            {
-              ...getFieldProps("name"),
-              label: "Name",
-              disabled: initialValues.name !== "",
-              caption: "This cannot change once created."
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_design_system14.Input,
-            {
-              ...getFieldProps("helpText"),
-              label: "Help Text",
-              caption: "Appears in the composition data resource when entering a value for this variable.",
-              autoComplete: "off"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.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_system14.Button, { type: "submit", children: "OK" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-          ] })
-        ] });
-      }
-    }
+  const currentVariable = variables[variable];
+  const { register, handleSubmit, formState } = (0, import_react_hook_form.useForm)({
+    defaultValues: {
+      name: variable,
+      default: (_a = currentVariable == null ? void 0 : currentVariable.default) != null ? _a : "",
+      displayName: (_b = currentVariable == null ? void 0 : currentVariable.displayName) != null ? _b : "",
+      helpText: (_c = currentVariable == null ? void 0 : currentVariable.helpText) != null ? _c : "",
+      order: currentVariable == null ? void 0 : currentVariable.order,
+      type: (_d = currentVariable == null ? void 0 : currentVariable.type) != null ? _d : ""
+    },
+    resolver: (0, import_zod.zodResolver)(schema)
+  });
+  const submitHandler = handleSubmit((values) => {
+    const finalValue = {
+      ...values,
+      helpText: values.helpText || void 0,
+      type: values.type || void 0,
+      displayName: values.displayName || void 0
+    };
+    return onSubmit(finalValue);
+  });
+  (0, import_design_system14.useShortcut)({
+    shortcut: "enter",
+    handler: () => {
+      submitHandler();
+    },
+    activeWhenEditing: true
+  });
+  return (
+    // NOTE: this is intentionally NOT a <form> because it's regularly used in a nested modal and that can make it bubble
+    // up a submit to its 'parent form' which is not what we want.
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { css: variablesFormContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_design_system14.Input,
+        {
+          ...register("name"),
+          label: "Name",
+          disabled: variable !== "",
+          caption: "This cannot change once created.",
+          errorMessage: (_e = formState.errors.name) == null ? void 0 : _e.message,
+          "data-af": "1"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_design_system14.Input,
+        {
+          ...register("helpText"),
+          label: "Help Text",
+          caption: "Appears when entering a value for this variable.",
+          autoComplete: "off",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_design_system14.Input,
+        {
+          ...register("default"),
+          label: "Default Value",
+          autoComplete: "off",
+          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { css: variablesFormBtnGroup, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_design_system14.Button, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
+      ] }),
+      disableMeshTip ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_design_system14.Callout, { type: "tip", title: "Customized User Interfaces", children: [
+        "Developers can create customized user interfaces for variable editing by building a Uniform mesh integration. Get started quickly with our",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        "."
+      ] })
+    ] })
   );
 }
 
@@ -3447,7 +3516,7 @@ function DataResourceVariablesList({
   const {
     value,
     metadata: { dataType }
-  } = useMeshLocation("dataResource");
+  } = useMeshLocation("dataTypeInstance");
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
@@ -4895,6 +4964,12 @@ var QueryFilter = ({
   ] });
 };
 
+// src/hooks/useUniformMeshLocation.ts
+function useUniformMeshLocation() {
+  const { location } = useUniformMeshLocationContext();
+  return location;
+}
+
 // src/hooks/index.ts
 var import_design_system33 = require("@uniformdev/design-system");
 
@@ -4930,6 +5005,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   InputSelect,
   InputToggle,
   InputVariables,
+  KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator,
@@ -4985,6 +5061,10 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   TextVariableRenderer,
   Textarea,
   Theme,
+  UniformMeshLocationContext,
+  UniformMeshLocationContextProvider,
+  UniformMeshSdkContext,
+  UniformMeshSdkContextProvider,
   VariableEditor,
   VariablesList,
   VariablesProvider,
@@ -5053,6 +5133,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   selectedItemTitle,
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
+  useInitializeUniformMeshSdk,
   useMeshLocation,
   useObjectSearchContext,
   useParameterShell,
@@ -5061,7 +5142,10 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useRequest,
   useRequestHeader,
   useRequestParameter,
+  useUniformMeshLocation,
+  useUniformMeshLocationContext,
   useUniformMeshSdk,
+  useUniformMeshSdkContext,
   useVariables,
   variablesToList
 });

package/dist/index.mjs

@@ -893,7 +893,7 @@ var ProductPreviewList = ({
           scrollbarStyles
         ],
         children: products == null ? void 0 : products.map((product, index) => {
-          var _a;
+          var _a, _b;
           const [category] = (product == null ? void 0 : product.categories) || [];
           const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
           return /* @__PURE__ */ jsx18("li", { css: productPreviewListItem, children: /* @__PURE__ */ jsxs7(
@@ -906,13 +906,13 @@ var ProductPreviewList = ({
                   "img",
                   {
                     src: product.thumbnailUrl,
-                    alt: typeof product.title === "string" ? product.title : `Product ${index}`,
+                    alt: typeof product.title === "string" ? product.title : product.name || `Product ${index}`,
                     css: productPreviewListImage,
                     "data-test-id": "product-image"
                   }
                 ) : /* @__PURE__ */ jsx18("div", { css: productPreviewListImageDefault }),
                 /* @__PURE__ */ jsxs7("h4", { css: productPreviewListTitle, "data-test-id": "product-name", children: [
-                  product.title,
+                  product.title || product.name,
                   categoryName && /* @__PURE__ */ jsx18("span", { css: productPreviewListCategoryText, children: categoryName })
                 ] }),
                 product && /* @__PURE__ */ jsxs7(Fragment2, { children: [
@@ -925,12 +925,12 @@ var ProductPreviewList = ({
                     "Price: ",
                     product.price
                   ] }) : null,
-                  product.editLink ? /* @__PURE__ */ jsxs7(
+                  product.editLink || product.url ? /* @__PURE__ */ jsxs7(
                     "a",
                     {
                       css: productPreviewListLinkBtn,
-                      href: product.editLink,
-                      title: `Go to ${product.title}`,
+                      href: (_b = product.editLink) != null ? _b : product.url,
+                      title: `Go to ${product.title || product.name}`,
                       target: "_blank",
                       rel: "noopener noreferrer",
                       "data-test-id": "edit-product-button",
@@ -2642,7 +2642,7 @@ function DefaultDamItemRenderer({ item }) {
 }
 
 // src/components/DataResourceVariablesList.tsx
-import { Callout as Callout3, Input as Input4 } from "@uniformdev/design-system";
+import { Callout as Callout4, Input as Input4 } from "@uniformdev/design-system";
 
 // src/hooks/useMeshLocation.ts
 import { useMemo as useMemo4, useRef as useRef7 } from "react";
@@ -2655,6 +2655,18 @@ import { Theme } from "@uniformdev/design-system";
 import { createContext, useContext as useContext3 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var UniformMeshSdkContext = createContext(void 0);
+var UniformMeshSdkContextProvider = ({ children }) => {
+  let value = void 0;
+  if (typeof window !== "undefined" && typeof window.UniformMeshSDK !== "undefined") {
+    value = {
+      sdk: window.UniformMeshSDK
+    };
+  }
+  return /* @__PURE__ */ jsxs15(UniformMeshSdkContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx26(Theme, {}),
+    /* @__PURE__ */ jsx26(UniformMeshLocationContextProvider, { children })
+  ] });
+};
 var useUniformMeshSdkContext = () => {
   const context = useContext3(UniformMeshSdkContext);
   if (!context) {
@@ -2671,7 +2683,9 @@ function useUniformMeshSdk() {
 
 // src/components/UniformMeshLocationContext.tsx
 import { jsx as jsx27 } from "@emotion/react/jsx-runtime";
-var UniformMeshLocationContext = createContext2(void 0);
+var UniformMeshLocationContext = createContext2(
+  void 0
+);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
@@ -2702,9 +2716,20 @@ var useUniformMeshLocationContext = () => {
 };
 
 // src/hooks/useMeshLocation.ts
+var legacyWarned = false;
 function useMeshLocation(expectedLocation) {
   const { location } = useUniformMeshLocationContext();
-  if (expectedLocation && location.type !== expectedLocation) {
+  let effectiveExpected = expectedLocation;
+  if (expectedLocation === "dataTypeInstance") {
+    effectiveExpected = "dataResource";
+    if (!legacyWarned) {
+      console.warn(
+        "`dataTypeInstance` mesh location is deprecated, please switch to `dataResource` instead."
+      );
+      legacyWarned = true;
+    }
+  }
+  if (effectiveExpected && location.type !== effectiveExpected) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
   const backdoorLocation = useRef7(location);
@@ -2793,8 +2818,10 @@ import mitt from "mitt";
 import * as React10 from "react";
 
 // src/components/Variables/VariableEditor.tsx
-import { Button as Button2, Input as Input2 } from "@uniformdev/design-system";
-import { Form, Formik } from "formik";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button as Button2, Callout as Callout3, Input as Input2, useShortcut } from "@uniformdev/design-system";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 // src/components/Variables/InputVariables.styles.ts
 import { css as css19 } from "@emotion/react";
@@ -2810,57 +2837,90 @@ var variablesFormBtnGroup = css19`
 
 // src/components/Variables/VariableEditor.tsx
 import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
-function VariableEditor({ variable, onSubmit, onCancel }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+var schema = z.object({
+  name: z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: z.string(),
+  displayName: z.string().optional(),
+  helpText: z.string().optional(),
+  order: z.number().optional(),
+  type: z.string().optional()
+});
+function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const { variables } = useVariables();
-  return /* @__PURE__ */ jsx28(
-    Formik,
-    {
-      initialValues: {
-        name: variable,
-        default: (_b = (_a = variables[variable]) == null ? void 0 : _a.default) != null ? _b : "",
-        displayName: (_d = (_c = variables[variable]) == null ? void 0 : _c.displayName) != null ? _d : "",
-        helpText: (_f = (_e = variables[variable]) == null ? void 0 : _e.helpText) != null ? _f : "",
-        order: (_g = variables[variable]) == null ? void 0 : _g.order,
-        type: (_i = (_h = variables[variable]) == null ? void 0 : _h.type) != null ? _i : ""
-      },
-      onSubmit: (values) => {
-        const finalValue = {
-          ...values,
-          helpText: values.helpText || void 0,
-          type: values.type || void 0,
-          displayName: values.displayName || void 0
-        };
-        return onSubmit(finalValue);
-      },
-      children: ({ getFieldProps, initialValues }) => {
-        return /* @__PURE__ */ jsxs16(Form, { css: variablesFormContainer, children: [
-          /* @__PURE__ */ jsx28(
-            Input2,
-            {
-              ...getFieldProps("name"),
-              label: "Name",
-              disabled: initialValues.name !== "",
-              caption: "This cannot change once created."
-            }
-          ),
-          /* @__PURE__ */ jsx28(
-            Input2,
-            {
-              ...getFieldProps("helpText"),
-              label: "Help Text",
-              caption: "Appears in the composition data resource when entering a value for this variable.",
-              autoComplete: "off"
-            }
-          ),
-          /* @__PURE__ */ jsx28(Input2, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
-          /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
-            /* @__PURE__ */ jsx28(Button2, { type: "submit", children: "OK" }),
-            /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
-          ] })
-        ] });
-      }
-    }
+  const currentVariable = variables[variable];
+  const { register, handleSubmit, formState } = useForm({
+    defaultValues: {
+      name: variable,
+      default: (_a = currentVariable == null ? void 0 : currentVariable.default) != null ? _a : "",
+      displayName: (_b = currentVariable == null ? void 0 : currentVariable.displayName) != null ? _b : "",
+      helpText: (_c = currentVariable == null ? void 0 : currentVariable.helpText) != null ? _c : "",
+      order: currentVariable == null ? void 0 : currentVariable.order,
+      type: (_d = currentVariable == null ? void 0 : currentVariable.type) != null ? _d : ""
+    },
+    resolver: zodResolver(schema)
+  });
+  const submitHandler = handleSubmit((values) => {
+    const finalValue = {
+      ...values,
+      helpText: values.helpText || void 0,
+      type: values.type || void 0,
+      displayName: values.displayName || void 0
+    };
+    return onSubmit(finalValue);
+  });
+  useShortcut({
+    shortcut: "enter",
+    handler: () => {
+      submitHandler();
+    },
+    activeWhenEditing: true
+  });
+  return (
+    // NOTE: this is intentionally NOT a <form> because it's regularly used in a nested modal and that can make it bubble
+    // up a submit to its 'parent form' which is not what we want.
+    /* @__PURE__ */ jsxs16("div", { css: variablesFormContainer, children: [
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("name"),
+          label: "Name",
+          disabled: variable !== "",
+          caption: "This cannot change once created.",
+          errorMessage: (_e = formState.errors.name) == null ? void 0 : _e.message,
+          "data-af": "1"
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("helpText"),
+          label: "Help Text",
+          caption: "Appears when entering a value for this variable.",
+          autoComplete: "off",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ),
+      /* @__PURE__ */ jsx28(
+        Input2,
+        {
+          ...register("default"),
+          label: "Default Value",
+          autoComplete: "off",
+          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+        }
+      ),
+      /* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
+        /* @__PURE__ */ jsx28(Button2, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "Cancel" })
+      ] }),
+      disableMeshTip ? null : /* @__PURE__ */ jsxs16(Callout3, { type: "tip", title: "Customized User Interfaces", children: [
+        "Developers can create customized user interfaces for variable editing by building a Uniform mesh integration. Get started quickly with our",
+        " ",
+        /* @__PURE__ */ jsx28("a", { href: "https://docs.uniform.app", target: "_blank", rel: "noopener noreferrer", children: "Mesh SDK" }),
+        "."
+      ] })
+    ] })
   );
 }
 
@@ -3284,13 +3344,13 @@ function DataResourceVariablesList({
   const {
     value,
     metadata: { dataType }
-  } = useMeshLocation("dataResource");
+  } = useMeshLocation("dataTypeInstance");
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
       return /* @__PURE__ */ jsx33(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx33(Callout3, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx33(Callout4, { type: "note", children: "No settings are required." });
   }
   return /* @__PURE__ */ jsx33("div", { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
@@ -4750,6 +4810,12 @@ var QueryFilter = ({
   ] });
 };
 
+// src/hooks/useUniformMeshLocation.ts
+function useUniformMeshLocation() {
+  const { location } = useUniformMeshLocationContext();
+  return location;
+}
+
 // src/hooks/index.ts
 import { ParameterShellContext, useParameterShell } from "@uniformdev/design-system";
 
@@ -4765,13 +4831,14 @@ function createLocationValidator(setValue, validate) {
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout4,
+  Callout as Callout5,
   Heading,
   Input as Input8,
   InputComboBox,
   InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
   InputToggle,
+  InputKeywordSearch as InputKeywordSearch5,
   Label,
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
@@ -4801,7 +4868,7 @@ export * from "@uniformdev/mesh-sdk";
 export {
   AddListButton2 as AddListButton,
   Button6 as Button,
-  Callout4 as Callout,
+  Callout5 as Callout,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceVariablesList,
@@ -4818,6 +4885,7 @@ export {
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
+  InputKeywordSearch5 as KeywordSearchInput,
   Label,
   LinkButton,
   LoadingIndicator4 as LoadingIndicator,
@@ -4873,6 +4941,10 @@ export {
   TextVariableRenderer,
   Textarea,
   Theme3 as Theme,
+  UniformMeshLocationContext,
+  UniformMeshLocationContextProvider,
+  UniformMeshSdkContext,
+  UniformMeshSdkContextProvider,
   VariableEditor,
   VariablesList,
   VariablesProvider,
@@ -4941,6 +5013,7 @@ export {
   selectedItemTitle,
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
+  useInitializeUniformMeshSdk,
   useMeshLocation,
   useObjectSearchContext,
   useParameterShell,
@@ -4949,7 +5022,10 @@ export {
   useRequest,
   useRequestHeader,
   useRequestParameter,
+  useUniformMeshLocation,
+  useUniformMeshLocationContext,
   useUniformMeshSdk,
+  useUniformMeshSdkContext,
   useVariables,
   variablesToList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "18.35.1-alpha.27+183715405",
+  "version": "18.38.2-alpha.6+d4938f167",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -43,15 +43,17 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/design-system": "18.35.1-alpha.27+183715405",
-    "@uniformdev/mesh-sdk": "18.35.1-alpha.27+183715405",
-    "formik": "^2.2.9",
+    "@hookform/resolvers": "^3.0.1",
+    "@uniformdev/design-system": "18.38.2-alpha.6+d4938f167",
+    "@uniformdev/mesh-sdk": "18.38.2-alpha.6+d4938f167",
     "mitt": "^3.0.0",
     "react-beautiful-dnd": "13.1.1",
+    "react-hook-form": "^7.43.9",
     "react-icons": "4.8.0",
     "react-use": "17.4.0",
     "timeago.js": "4.0.2",
-    "uuid": "9.0.0"
+    "uuid": "9.0.0",
+    "zod": "^3.21.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.8.0",
@@ -62,7 +64,7 @@
     "@emotion/babel-preset-css-prop": "11.10.0",
     "@emotion/react": "11.10.5",
     "@svgr/cli": "6.5.1",
-    "@types/react": "18.0.33",
+    "@types/react": "18.0.35",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/uuid": "9.0.1",
     "react": "18.2.0",
@@ -74,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18371540510874773bba7b3e0fbb0c6427cb8e07"
+  "gitHead": "d4938f167d196bbd523e6cdd031f56fab4ceebf6"
 }