@prismicio/react 3.4.1 → 3.4.2-canary.ec5cd66

package/src/PrismicLink.tsx

@@ -4,8 +4,8 @@ import {
 	type PrismicDocument,
 	asLinkAttrs,
 	type AsLinkAttrsConfig,
-} from "@prismicio/client";
-import { DEV } from "esm-env";
+} from "@prismicio/client"
+import { DEV } from "esm-env"
 import {
 	type ComponentProps,
 	type ComponentType,
@@ -13,32 +13,32 @@ import {
 	type HTMLAttributeAnchorTarget,
 	type ReactNode,
 	forwardRef,
-} from "react";
+} from "react"
 
-import { devMsg } from "./lib/devMsg.js";
+import { devMsg } from "./lib/devMsg.js"
 
 /** The default component rendered for internal and external links. */
-const defaultComponent = "a";
+const defaultComponent = "a"
 
 /** Props provided to a component when rendered with `<PrismicLink>`. */
 export interface LinkProps {
 	/** The URL to link. */
-	href: string;
+	href: string
 
 	/**
 	 * The `target` attribute for anchor elements. If the Prismic field is configured to open in a new
 	 * window, this prop defaults to `_blank`.
 	 */
-	target?: HTMLAttributeAnchorTarget;
+	target?: HTMLAttributeAnchorTarget
 
 	/**
 	 * The `rel` attribute for anchor elements. If the `target` prop is set to `"_blank"`, this prop
 	 * defaults to `"noopener noreferrer"`.
 	 */
-	rel?: string;
+	rel?: string
 
 	/** Children for the component. */
-	children?: ReactNode;
+	children?: ReactNode
 }
 
 export type PrismicLinkProps<
@@ -50,7 +50,7 @@ export type PrismicLinkProps<
 	 * external. This prop can be provided a function to use the link's metadata to determine the
 	 * `rel` value.
 	 */
-	rel?: string | AsLinkAttrsConfig["rel"];
+	rel?: string | AsLinkAttrsConfig["rel"]
 
 	/**
 	 * The link resolver used to resolve links.
@@ -60,7 +60,7 @@ export type PrismicLinkProps<
 	 *   resolver does not need to be provided.
 	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
-	linkResolver?: LinkResolverFunction;
+	linkResolver?: LinkResolverFunction
 
 	/**
 	 * The component rendered for internal URLs. Defaults to `<a>`.
@@ -68,39 +68,39 @@ export type PrismicLinkProps<
 	 * If your app uses a client-side router that requires a special Link component, provide the Link
 	 * component to this prop.
 	 */
-	internalComponent?: ComponentType<InternalComponentProps>;
+	internalComponent?: ComponentType<InternalComponentProps>
 
 	/** The component rendered for external URLs. Defaults to `<a>`. */
-	externalComponent?: ComponentType<ExternalComponentProps>;
+	externalComponent?: ComponentType<ExternalComponentProps>
 
 	/**
 	 * The children to render for the link. If no children are provided, the link's `text` property
 	 * will be used.
 	 */
-	children?: ReactNode;
+	children?: ReactNode
 } & (
 		| {
-				document: PrismicDocument | null | undefined;
-				href?: never;
-				field?: never;
+				document: PrismicDocument | null | undefined
+				href?: never
+				field?: never
 		  }
 		| {
-				field: LinkField | null | undefined;
-				href?: never;
-				document?: never;
+				field: LinkField | null | undefined
+				href?: never
+				document?: never
 		  }
 		| {
-				href: LinkProps["href"];
-				field?: LinkField | null | undefined;
-				document?: never;
+				href: LinkProps["href"]
+				field?: LinkField | null | undefined
+				document?: never
 		  }
-	);
+	)
 
 /**
  * Renders a link from a Prismic link field or page.
  *
  * @example
- * 	```tsx
+ * 	;```tsx
  * 	<PrismicLink field={slice.primary.link}>Click here</PrismicLink>;
  * 	```
  *
@@ -121,7 +121,7 @@ export const PrismicLink = forwardRef(function PrismicLink<
 		externalComponent,
 		children,
 		...restProps
-	} = props;
+	} = props
 
 	if (DEV) {
 		if (field) {
@@ -129,12 +129,12 @@ export const PrismicLink = forwardRef(function PrismicLink<
 				console.error(
 					`[PrismicLink] This "field" prop value caused an error to be thrown.\n`,
 					field,
-				);
+				)
 				throw new Error(
 					`[PrismicLink] The provided field is missing required properties to properly render a link. The link will not render. For more details, see ${devMsg(
 						"missing-link-properties",
 					)}`,
-				);
+				)
 			} else if (
 				("text" in field ? Object.keys(field).length > 2 : Object.keys(field).length > 1) &&
 				!("url" in field || "uid" in field || "id" in field)
@@ -144,7 +144,7 @@ export const PrismicLink = forwardRef(function PrismicLink<
 						"missing-link-properties",
 					)}`,
 					field,
-				);
+				)
 			}
 		} else if (doc) {
 			if (!("url" in doc || "id" in doc)) {
@@ -153,7 +153,7 @@ export const PrismicLink = forwardRef(function PrismicLink<
 						"missing-link-properties",
 					)}`,
 					doc,
-				);
+				)
 			}
 		}
 	}
@@ -165,36 +165,36 @@ export const PrismicLink = forwardRef(function PrismicLink<
 	} = asLinkAttrs(field ?? doc, {
 		linkResolver,
 		rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
-	});
+	})
 
-	let rel: string | undefined = computedRel;
+	let rel: string | undefined = computedRel
 	if ("rel" in restProps && typeof restProps.rel !== "function") {
-		rel = restProps.rel;
+		rel = restProps.rel
 	}
 
-	const href = ("href" in restProps ? restProps.href : computedHref) || "";
+	const href = ("href" in restProps ? restProps.href : computedHref) || ""
 
-	const InternalComponent = (internalComponent || defaultComponent) as ComponentType<LinkProps>;
-	const ExternalComponent = (externalComponent || defaultComponent) as ComponentType<LinkProps>;
+	const InternalComponent = (internalComponent || defaultComponent) as ComponentType<LinkProps>
+	const ExternalComponent = (externalComponent || defaultComponent) as ComponentType<LinkProps>
 	const Component = href
 		? isInternalURL(href)
 			? InternalComponent
 			: ExternalComponent
-		: InternalComponent;
+		: InternalComponent
 
 	return (
 		<Component ref={ref} {...attrs} {...restProps} href={href} rel={rel}>
 			{"children" in props ? children : field?.text}
 		</Component>
-	);
+	)
 }) as <
 	InternalComponentProps = ComponentProps<typeof defaultComponent>,
 	ExternalComponentProps = ComponentProps<typeof defaultComponent>,
 >(
 	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
-		ref?: ForwardedRef<Element>;
+		ref?: ForwardedRef<Element>
 	},
-) => ReactNode;
+) => ReactNode
 
 /**
  * Determines if a URL is internal or external.
@@ -204,8 +204,8 @@ export const PrismicLink = forwardRef(function PrismicLink<
  */
 // TODO: This does not detect all relative URLs as internal such as `about` or `./about`. This function assumes relative URLs start with a "/" or "#"`.
 export function isInternalURL(url: string): boolean {
-	const isInternal = /^(\/(?!\/)|#)/.test(url);
-	const isSpecialLink = !isInternal && !/^https?:\/\//.test(url);
+	const isInternal = /^(\/(?!\/)|#)/.test(url)
+	const isSpecialLink = !isInternal && !/^https?:\/\//.test(url)
 
-	return isInternal && !isSpecialLink;
+	return isInternal && !isSpecialLink
 }

package/src/PrismicRichText.tsx

@@ -3,15 +3,15 @@ import {
 	type LinkResolverFunction,
 	type RichTextField,
 	type RTAnyNode,
-} from "@prismicio/client";
+} from "@prismicio/client"
 import {
 	composeSerializers,
 	serialize,
 	wrapMapSerializer,
 	type RichTextFunctionSerializer,
 	type RichTextMapSerializer,
-} from "@prismicio/client/richtext";
-import { DEV } from "esm-env";
+} from "@prismicio/client/richtext"
+import { DEV } from "esm-env"
 import {
 	cloneElement,
 	type ComponentType,
@@ -19,10 +19,10 @@ import {
 	Fragment,
 	isValidElement,
 	type ReactNode,
-} from "react";
+} from "react"
 
-import { devMsg } from "./lib/devMsg.js";
-import { type LinkProps, PrismicLink } from "./PrismicLink.js";
+import { devMsg } from "./lib/devMsg.js"
+import { type LinkProps, PrismicLink } from "./PrismicLink.js"
 
 /**
  * A function mapping rich text block types to React Components. It is used to render rich text
@@ -30,22 +30,22 @@ import { type LinkProps, PrismicLink } from "./PrismicLink.js";
  *
  * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
-export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
+export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>
 
 /**
  * A map of rich text block types to React Components. It is used to render rich text fields.
  *
  * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
-export type RichTextComponents = RichTextMapSerializer<ReactNode>;
+export type RichTextComponents = RichTextMapSerializer<ReactNode>
 
 /** @deprecated Use `RichTextComponents` instead. */
-export type JSXMapSerializer = RichTextComponents;
+export type JSXMapSerializer = RichTextComponents
 
 /** Props for `<PrismicRichText>`. */
 export type PrismicRichTextProps = {
 	/** The Prismic rich text field to render. */
-	field: RichTextField | null | undefined;
+	field: RichTextField | null | undefined
 
 	/**
 	 * The link resolver used to resolve links.
@@ -55,7 +55,7 @@ export type PrismicRichTextProps = {
 	 *   resolver does not need to be provided.
 	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
-	linkResolver?: LinkResolverFunction;
+	linkResolver?: LinkResolverFunction
 
 	/**
 	 * A map or function that maps a rich text block to a React component.
@@ -85,40 +85,40 @@ export type PrismicRichTextProps = {
 	 * 	};
 	 * 	```
 	 */
-	components?: RichTextComponents | JSXFunctionSerializer;
+	components?: RichTextComponents | JSXFunctionSerializer
 
 	/**
 	 * The React component rendered for links when the URL is internal.
 	 *
 	 * @defaultValue `<a>`
 	 */
-	internalLinkComponent?: ComponentType<LinkProps>;
+	internalLinkComponent?: ComponentType<LinkProps>
 
 	/**
 	 * The React component rendered for links when the URL is external.
 	 *
 	 * @defaultValue `<a>`
 	 */
-	externalLinkComponent?: ComponentType<LinkProps>;
+	externalLinkComponent?: ComponentType<LinkProps>
 
 	/**
 	 * The value to be rendered when the field is empty. If a fallback is not given, `null` will be
 	 * rendered.
 	 */
-	fallback?: ReactNode;
-};
+	fallback?: ReactNode
+}
 
 type CreateDefaultSerializerArgs = {
-	linkResolver: LinkResolverFunction | undefined;
-	internalLinkComponent?: ComponentType<LinkProps>;
-	externalLinkComponent?: ComponentType<LinkProps>;
-};
+	linkResolver: LinkResolverFunction | undefined
+	internalLinkComponent?: ComponentType<LinkProps>
+	externalLinkComponent?: ComponentType<LinkProps>
+}
 
 const getDir = (node: RTAnyNode): "rtl" | undefined => {
 	if ("direction" in node && node.direction === "rtl") {
-		return "rtl";
+		return "rtl"
 	}
-};
+}
 
 const createDefaultSerializer = (args: CreateDefaultSerializerArgs): JSXFunctionSerializer =>
 	wrapMapSerializer<ReactNode>({
@@ -179,7 +179,7 @@ const createDefaultSerializer = (args: CreateDefaultSerializerArgs): JSXFunction
 					alt={node.alt ?? undefined}
 					data-copyright={node.copyright ? node.copyright : undefined}
 				/>
-			);
+			)
 
 			return (
 				<p key={key} className="block-img">
@@ -196,7 +196,7 @@ const createDefaultSerializer = (args: CreateDefaultSerializerArgs): JSXFunction
 						img
 					)}
 				</p>
-			);
+			)
 		},
 		embed: ({ node, key }) => (
 			<div
@@ -224,28 +224,28 @@ const createDefaultSerializer = (args: CreateDefaultSerializerArgs): JSXFunction
 			</span>
 		),
 		span: ({ text, key }) => {
-			const result: ReactNode[] = [];
+			const result: ReactNode[] = []
 
-			let i = 0;
+			let i = 0
 			for (const line of text.split("\n")) {
 				if (i > 0) {
-					result.push(<br key={`${i}__break`} />);
+					result.push(<br key={`${i}__break`} />)
 				}
 
-				result.push(<Fragment key={`${i}__line`}>{line}</Fragment>);
+				result.push(<Fragment key={`${i}__line`}>{line}</Fragment>)
 
-				i++;
+				i++
 			}
 
-			return <Fragment key={key}>{result}</Fragment>;
+			return <Fragment key={key}>{result}</Fragment>
 		},
-	});
+	})
 
 /**
  * Renders content from a Prismic rich text field as React components.
  *
  * @example
- * 	```tsx
+ * 	;```tsx
  * 	<PrismicRichText field={slice.primary.text} />;
  * 	```
  *
@@ -260,7 +260,7 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 		externalLinkComponent,
 		internalLinkComponent,
 		...restProps
-	} = props;
+	} = props
 
 	if (DEV) {
 		if ("className" in restProps) {
@@ -269,12 +269,12 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 					"classname-is-not-a-valid-prop",
 				)}.`,
 				field,
-			);
+			)
 		}
 	}
 
 	if (!isFilled.richText(field)) {
-		return fallback != null ? <>{fallback}</> : null;
+		return fallback != null ? <>{fallback}</> : null
 	}
 
 	const serializer = composeSerializers<ReactNode>(
@@ -284,24 +284,24 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 			internalLinkComponent,
 			externalLinkComponent,
 		}),
-	);
+	)
 
 	// The serializer is wrapped in a higher-order function that
 	// automatically applies a key to React Elements if one is not already
 	// given.
 	const serialized = serialize<ReactNode>(field, (type, node, text, children, key) => {
-		const result = serializer(type, node, text, children, key);
+		const result = serializer(type, node, text, children, key)
 
 		if (isValidElement(result) && result.key == null) {
-			return cloneElement(result, { key });
+			return cloneElement(result, { key })
 		} else {
-			return result;
+			return result
 		}
-	});
+	})
 
 	if (!serialized) {
-		return fallback != null ? <>{fallback}</> : null;
+		return fallback != null ? <>{fallback}</> : null
 	}
 
-	return <>{serialized}</>;
-};
+	return <>{serialized}</>
+}

package/src/PrismicTable.tsx

@@ -7,22 +7,22 @@ import {
 	type TableFieldBodyRow,
 	type TableFieldHeaderCell,
 	type TableFieldDataCell,
-} from "@prismicio/client";
-import type { ComponentType, FC, ReactNode } from "react";
+} from "@prismicio/client"
+import type { ComponentType, FC, ReactNode } from "react"
 
-import { type JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
+import { type JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js"
 
 type TableComponents = {
-	table?: ComponentType<{ table: TableField<"filled">; children: ReactNode }>;
-	thead?: ComponentType<{ head: TableFieldHead; children: ReactNode }>;
-	tbody?: ComponentType<{ body: TableFieldBody; children: ReactNode }>;
+	table?: ComponentType<{ table: TableField<"filled">; children: ReactNode }>
+	thead?: ComponentType<{ head: TableFieldHead; children: ReactNode }>
+	tbody?: ComponentType<{ body: TableFieldBody; children: ReactNode }>
 	tr?: ComponentType<{
-		row: TableFieldHeadRow | TableFieldBodyRow;
-		children: ReactNode;
-	}>;
-	th?: ComponentType<{ cell: TableFieldHeaderCell; children: ReactNode }>;
-	td?: ComponentType<{ cell: TableFieldDataCell; children: ReactNode }>;
-};
+		row: TableFieldHeadRow | TableFieldBodyRow
+		children: ReactNode
+	}>
+	th?: ComponentType<{ cell: TableFieldHeaderCell; children: ReactNode }>
+	td?: ComponentType<{ cell: TableFieldDataCell; children: ReactNode }>
+}
 
 const defaultComponents: Required<TableComponents> = {
 	table: ({ children }) => <table>{children}</table>,
@@ -31,12 +31,12 @@ const defaultComponents: Required<TableComponents> = {
 	tr: ({ children }) => <tr>{children}</tr>,
 	th: ({ children }) => <th>{children}</th>,
 	td: ({ children }) => <td>{children}</td>,
-};
+}
 
 /** Props for `<PrismicTable>`. */
 export type PrismicTableProps = {
 	/** The Prismic table field to render. */
-	field: TableField;
+	field: TableField
 
 	/**
 	 * An object that maps a table block to a React component.
@@ -51,33 +51,33 @@ export type PrismicTableProps = {
 	 * 	}
 	 * 	```
 	 */
-	components?: JSXMapSerializer & TableComponents;
+	components?: JSXMapSerializer & TableComponents
 
 	/**
 	 * The value to be rendered when the field is empty. If a fallback is not given, `null` will be
 	 * rendered.
 	 */
-	fallback?: ReactNode;
-};
+	fallback?: ReactNode
+}
 
 /**
  * Renders content from a Prismic table field as React components.
  *
  * @example
- * 	```tsx
+ * 	;```tsx
  * 	<PrismicTable field={slice.primary.pricing_table} />;
  * 	```
  *
  * @see Learn how to style tables and customize table element components: {@link https://prismic.io/docs/fields/table}
  */
 export const PrismicTable: FC<PrismicTableProps> = (props) => {
-	const { field, components, fallback = null } = props;
+	const { field, components, fallback = null } = props
 
 	if (!isFilled.table(field)) {
-		return fallback;
+		return fallback
 	}
 
-	const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components };
+	const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components }
 
 	return (
 		<Table table={field}>
@@ -94,18 +94,18 @@ export const PrismicTable: FC<PrismicTableProps> = (props) => {
 				))}
 			</Tbody>
 		</Table>
-	);
-};
+	)
+}
 
 type TableRowProps = {
-	row: TableFieldHeadRow | TableFieldBodyRow;
-	components?: JSXMapSerializer & TableComponents;
-};
+	row: TableFieldHeadRow | TableFieldBodyRow
+	components?: JSXMapSerializer & TableComponents
+}
 
 function TableRow(props: TableRowProps) {
-	const { row, components } = props;
+	const { row, components } = props
 
-	const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
+	const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components }
 
 	return (
 		<Tr row={row}>
@@ -121,5 +121,5 @@ function TableRow(props: TableRowProps) {
 				),
 			)}
 		</Tr>
-	);
+	)
 }

package/src/PrismicText.tsx

@@ -1,36 +1,36 @@
-import { asText, isFilled, type RichTextField } from "@prismicio/client";
-import { DEV } from "esm-env";
-import type { FC } from "react";
+import { asText, isFilled, type RichTextField } from "@prismicio/client"
+import { DEV } from "esm-env"
+import type { FC } from "react"
 
-import { devMsg } from "./lib/devMsg.js";
+import { devMsg } from "./lib/devMsg.js"
 
 /** Props for `<PrismicText>`. */
 export type PrismicTextProps = {
 	/** The Prismic rich text field to render. */
-	field: RichTextField | null | undefined;
+	field: RichTextField | null | undefined
 
 	/**
 	 * The string rendered when the field is empty. If a fallback is not given, `null` will be
 	 * rendered.
 	 */
-	fallback?: string;
+	fallback?: string
 
 	/** The separator used between blocks. Defaults to `\n`. */
-	separator?: string;
-};
+	separator?: string
+}
 
 /**
  * Renders content from a Prismic rich text field as plain text (no HTML).
  *
  * @example
- * 	```tsx
+ * 	;```tsx
  * 	<PrismicText field={slice.primary.text} />;
  * 	```
  *
  * @see Learn how to display rich text as plain text or React components: {@link https://prismic.io/docs/fields/rich-text}
  */
 export const PrismicText: FC<PrismicTextProps> = (props) => {
-	const { field, fallback, separator } = props;
+	const { field, fallback, separator } = props
 
 	if (DEV) {
 		if ("className" in props) {
@@ -39,7 +39,7 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
 					"classname-is-not-a-valid-prop",
 				)}.`,
 				props.field,
-			);
+			)
 		}
 	}
 
@@ -50,15 +50,15 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
 					"prismictext-works-only-with-rich-text-and-title-fields",
 				)}`,
 				props.field,
-			);
+			)
 		}
 
-		return null;
+		return null
 	}
 
 	if (!isFilled.richText(field)) {
-		return fallback != null ? <>{fallback}</> : null;
+		return fallback != null ? <>{fallback}</> : null
 	}
 
-	return <>{asText(field, { separator })}</>;
-};
+	return <>{asText(field, { separator })}</>
+}