@amplifyup/sdk 0.1.28 → 0.1.29

package/dist/react.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { P as PageConfig, b as AmplifyUpConfig, C as ContentSource, A as AmplifyContentMeta } from './types-BxpG9Gsy.mjs';
 export { Z as ZoneConfig } from './types-BxpG9Gsy.mjs';
 export { AmplifyRenderer } from './AmplifyRenderer.mjs';
@@ -41,6 +41,11 @@ interface AmplifyPageContentProps {
 declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, forceComposerPreview, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
 
 declare function useLiveComposerProps(layoutNodeId: string | undefined, props: Record<string, any>): Record<string, any>;
+/**
+ * Live props for this layout node (CMS fields + settings).
+ * Same values `<Field>` reads — use this when you want to render yourself.
+ */
+declare function useComponentProps<T extends Record<string, any> = Record<string, any>>(): T;
 declare function ComponentContextProvider({ children, slots, props, layoutNodeId, componentId, }: {
     children: ReactNode;
     slots?: Record<string, ReactNode>;
@@ -78,37 +83,12 @@ declare function Slot({ name, className, }: {
     name: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element | null;
-/**
- * Field Component
- *
- * Renders a field value from component props. Developers use this to define
- * where field values should appear in their component, with full control
- * over styling and formatting.
- *
- * For markdown / rich text fields, use {@link RichText} instead.
- *
- * @example
- * ```tsx
- * function Hero({ title, description }) {
- *   return (
- *     <section className="hero">
- *       <h1>
- *         <Field name="title" fallback="Default Title" />
- *       </h1>
- *       <p>
- *         <Field name="description" />
- *       </p>
- *     </section>
- *   );
- * }
- * ```
- */
 declare function Field({ name, fallback, className, render, }: {
     name: string;
     fallback?: ReactNode;
     className?: string;
     render?: (value: any) => ReactNode;
-}): react_jsx_runtime.JSX.Element | null;
+}): string | number | true | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null;
 /**
  * RichText - Renders a markdown (or HTML string) field as formatted HTML.
  *
@@ -141,4 +121,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp, useLiveComposerProps };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp, useComponentProps, useLiveComposerProps };

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { P as PageConfig, b as AmplifyUpConfig, C as ContentSource, A as AmplifyContentMeta } from './types-BxpG9Gsy.js';
 export { Z as ZoneConfig } from './types-BxpG9Gsy.js';
 export { AmplifyRenderer } from './AmplifyRenderer.js';
@@ -41,6 +41,11 @@ interface AmplifyPageContentProps {
 declare function AmplifyPageContent({ fallback, renderComponent, pageConfig: pageConfigProp, forceComposerPreview, previewLoadingComponent, previewEmptyComponent, loadingComponent, emptyComponent, errorComponent, }: AmplifyPageContentProps): react_jsx_runtime.JSX.Element | null;
 
 declare function useLiveComposerProps(layoutNodeId: string | undefined, props: Record<string, any>): Record<string, any>;
+/**
+ * Live props for this layout node (CMS fields + settings).
+ * Same values `<Field>` reads — use this when you want to render yourself.
+ */
+declare function useComponentProps<T extends Record<string, any> = Record<string, any>>(): T;
 declare function ComponentContextProvider({ children, slots, props, layoutNodeId, componentId, }: {
     children: ReactNode;
     slots?: Record<string, ReactNode>;
@@ -78,37 +83,12 @@ declare function Slot({ name, className, }: {
     name: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element | null;
-/**
- * Field Component
- *
- * Renders a field value from component props. Developers use this to define
- * where field values should appear in their component, with full control
- * over styling and formatting.
- *
- * For markdown / rich text fields, use {@link RichText} instead.
- *
- * @example
- * ```tsx
- * function Hero({ title, description }) {
- *   return (
- *     <section className="hero">
- *       <h1>
- *         <Field name="title" fallback="Default Title" />
- *       </h1>
- *       <p>
- *         <Field name="description" />
- *       </p>
- *     </section>
- *   );
- * }
- * ```
- */
 declare function Field({ name, fallback, className, render, }: {
     name: string;
     fallback?: ReactNode;
     className?: string;
     render?: (value: any) => ReactNode;
-}): react_jsx_runtime.JSX.Element | null;
+}): string | number | true | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null;
 /**
  * RichText - Renders a markdown (or HTML string) field as formatted HTML.
  *
@@ -141,4 +121,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp, useLiveComposerProps };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp, useComponentProps, useLiveComposerProps };

package/dist/react.js

@@ -2774,6 +2774,16 @@ function useLiveComposerProps(layoutNodeId, props) {
   }, [layoutNodeId]);
   return live;
 }
+function useComponentProps() {
+  const context = react.useContext(ComponentContext);
+  if (!context) {
+    console.warn(
+      "[AmplifyUp SDK] useComponentProps used outside ComponentContextProvider"
+    );
+    return {};
+  }
+  return context.props || {};
+}
 function ComponentContextProvider({
   children,
   slots,
@@ -3053,6 +3063,33 @@ function formatFieldValue(value) {
   }
   return "";
 }
+function isLinkListItem(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function renderLinkList(items, className) {
+  const links = items.filter(isLinkListItem).filter((item) => {
+    const label = typeof item.label === "string" ? item.label.trim() : "";
+    const href = typeof item.href === "string" ? item.href.trim() : "";
+    return !!(label || href);
+  });
+  if (links.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: links.map((item, index) => {
+    const label = typeof item.label === "string" && item.label.trim() ? item.label : typeof item.href === "string" ? item.href : "Link";
+    const href = typeof item.href === "string" && item.href.trim() ? item.href : "#";
+    const style = typeof item.style === "string" ? item.style.trim() : "";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href,
+        target: item.openInNewTab ? "_blank" : void 0,
+        rel: item.openInNewTab ? "noreferrer" : void 0,
+        "data-amplifyup-action-style": style || void 0,
+        children: label
+      },
+      typeof item._key === "string" && item._key ? item._key : `${href}-${index}`
+    );
+  }) });
+}
 function Field({
   name,
   fallback,
@@ -3070,6 +3107,9 @@ function Field({
     console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
   }
+  if (render) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
+  }
   if (composerEdit && canInlineEdit(name, fieldValue)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ComposerInlineField,
@@ -3078,7 +3118,6 @@ function Field({
         value: fieldValue,
         fallback,
         className,
-        render,
         layoutNodeId: context.layoutNodeId,
         componentId: context.componentId
       }
@@ -3087,8 +3126,9 @@ function Field({
   if (fieldValue === void 0 || fieldValue === null) {
     return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
   }
-  if (render) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: render(fieldValue) });
+  if (Array.isArray(fieldValue)) {
+    const list = renderLinkList(fieldValue, className);
+    if (list) return list;
   }
   const text = formatFieldValue(fieldValue);
   if (!text) {
@@ -3876,6 +3916,7 @@ exports.fetchPageConfigServer = fetchPageConfigServer;
 exports.isComposerPreview = isComposerPreview;
 exports.isPreviewRequest = isPreviewRequest;
 exports.useAmplifyUp = useAmplifyUp;
+exports.useComponentProps = useComponentProps;
 exports.useLiveComposerProps = useLiveComposerProps;
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map