@amplifyup/sdk 0.1.49 → 0.1.51

package/dist/react.js

@@ -3885,6 +3885,23 @@ function formatFieldValue(value) {
   }
   return "";
 }
+function warnProjectionProps(component, name, hasExplicitValue) {
+  if (process.env.NODE_ENV === "production") return;
+  if (hasExplicitValue && name) {
+    console.warn(
+      `[AmplifyUp SDK] ${component}: pass either value={\u2026} or deprecated name="\u2026", not both. Prefer value={\u2026} and omit name.`
+    );
+    return;
+  }
+  if (name) {
+    console.warn(
+      `[AmplifyUp SDK] ${component} \`name\` is deprecated and will be removed. Prefer value={${name}} from your component props and omit name.`
+    );
+  }
+}
+function hasOwnProp(props, key) {
+  return Object.prototype.hasOwnProperty.call(props, key);
+}
 function isLinkListItem(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
 }
@@ -3912,21 +3929,23 @@ function renderLinkList(items, className) {
     );
   }) });
 }
-function Field({
-  name,
-  fallback,
-  className,
-  render
-}) {
+function Field(props) {
+  const { value, name, fallback, className, render } = props;
   const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
+  const hasExplicitValue = hasOwnProp(props, "value");
+  const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
+  const editName = hasExplicitValue ? "" : name || "";
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    name,
-    context?.props?.[name]
+    editName,
+    sourceValue
   );
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
+  warnProjectionProps("Field", name, hasExplicitValue);
+  if (!context && !hasExplicitValue) {
+    console.warn(
+      "[AmplifyUp SDK] Field needs a `value` prop (or deprecated `name` alone)"
+    );
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
   if (render) {
@@ -3939,11 +3958,11 @@ function Field({
   const text = formatFieldValue(fieldValue);
   const showVisualFallback = !text && isReactNodeFallback(fallback);
   const emptyBlockField = isComposerEmptyText(fieldValue) && classNameIsBlock(className);
-  if (composerEdit && canInlineEdit(name, fieldValue) && !showVisualFallback && !emptyBlockField) {
+  if (composerEdit && editName && context && canInlineEdit(editName, fieldValue) && !showVisualFallback && !emptyBlockField) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineField,
       {
-        name,
+        name: editName,
         value: fieldValue,
         fallback,
         className,
@@ -3968,34 +3987,46 @@ function markdownToHtml(markdown) {
     return markdown;
   }
 }
-function RichText({
-  name,
-  fallback,
-  className,
-  as: Tag = "div"
-}) {
+function RichText(props) {
+  const {
+    value,
+    name,
+    fallback,
+    className,
+    as: Tag = "div",
+    children
+  } = props;
   const context = React.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
+  const childrenValue = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+  const hasValueProp = hasOwnProp(props, "value");
+  const hasExplicitValue = hasValueProp || childrenValue !== void 0;
+  const sourceValue = hasValueProp ? value : childrenValue !== void 0 ? childrenValue : name ? context?.props?.[name] : void 0;
+  const editName = hasExplicitValue ? "" : name || "";
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    name,
-    context?.props?.[name]
+    editName,
+    sourceValue
   );
-  if (!context) {
-    console.warn(`[AmplifyUp SDK] RichText "${name}" used outside ComponentContextProvider`);
+  if (!context && !hasExplicitValue) {
+    console.warn(
+      "[AmplifyUp SDK] RichText needs a `value` prop (or string children), or deprecated `name` alone"
+    );
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
+  warnProjectionProps("RichText", name, hasExplicitValue);
+  const canEdit = !!editName && !!context && canInlineEdit(editName, fieldValue);
   if (isComposerEmptyText(fieldValue)) {
-    if (composerEdit && canInlineEdit(name, fieldValue) && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
+    if (composerEdit && canEdit && !isReactNodeFallback(fallback) && !classNameIsBlock(className)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         ComposerInlineField,
         {
-          name,
+          name: editName,
           value: fieldValue,
           fallback: typeof fallback === "string" || typeof fallback === "number" ? fallback : void 0,
           className,
-          layoutNodeId: context.layoutNodeId,
-          componentId: context.componentId
+          layoutNodeId: context?.layoutNodeId,
+          componentId: context?.componentId
         }
       );
     }
@@ -4021,22 +4052,22 @@ function RichText({
       Tag,
       {
         className,
-        "data-amplifyup-field": name,
-        "data-amplifyup-node-id": context.layoutNodeId || void 0,
+        "data-amplifyup-field": editName || void 0,
+        "data-amplifyup-node-id": context?.layoutNodeId || void 0,
         dangerouslySetInnerHTML: { __html: html }
       }
     );
   }
-  if (composerEdit && canInlineEdit(name, fieldValue)) {
+  if (composerEdit && canEdit) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineHtml,
       {
-        name,
+        name: editName,
         html,
         className,
         Tag,
-        layoutNodeId: context.layoutNodeId,
-        componentId: context.componentId
+        layoutNodeId: context?.layoutNodeId,
+        componentId: context?.componentId
       }
     );
   }
@@ -4052,23 +4083,28 @@ function imageSrc(value) {
   if (isPortableImageValue(value)) return value.url.trim();
   return "";
 }
-function Image({
-  name,
-  alt: altProp,
-  className,
-  width: widthProp,
-  height: heightProp,
-  ...imgProps
-}) {
+function Image(props) {
+  const {
+    value,
+    name,
+    alt: altProp,
+    className,
+    width: widthProp,
+    height: heightProp,
+    ...imgProps
+  } = props;
   const context = React.useContext(ComponentContext);
+  const hasExplicitValue = hasOwnProp(props, "value");
+  const sourceValue = hasExplicitValue ? value : name ? context?.props?.[name] : void 0;
   const fieldValue = useFieldOverlay(
     context?.layoutNodeId,
-    name,
-    context?.props?.[name]
+    hasExplicitValue ? "" : name || "",
+    sourceValue
   );
-  if (!context) {
+  warnProjectionProps("Image", name, hasExplicitValue);
+  if (!context && !hasExplicitValue) {
     console.warn(
-      `[AmplifyUp SDK] Image "${name}" used outside ComponentContextProvider`
+      "[AmplifyUp SDK] Image needs a `value` prop (or deprecated `name` alone)"
     );
     return null;
   }