@prismicio/react 3.4.0 → 3.4.1-canary.56c63d1

package/src/PrismicTable.tsx

@@ -1,4 +1,3 @@
-import type { ComponentType, FC, ReactNode } from "react";
 import {
 	isFilled,
 	type TableField,
@@ -8,21 +7,22 @@ import {
 	type TableFieldBodyRow,
 	type TableFieldHeaderCell,
 	type TableFieldDataCell,
-} from "@prismicio/client";
+} 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,57 +31,53 @@ 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.
 	 *
-	 * @example A map serializer.
+	 * @example
+	 * 	A map serializer.
 	 *
-	 * ```jsx
-	 * {
-	 *   table: ({children}) => <table>{children}</table>
-	 *   thead: ({children}) => <thead>{children}</thead>
-	 * }
-	 * ```
+	 * 	```jsx
+	 * 	{
+	 * 	table: ({children}) => <table>{children}</table>
+	 * 	thead: ({children}) => <thead>{children}</thead>
+	 * 	}
+	 * 	```
 	 */
-	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.
+	 * 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
- * <PrismicTable field={slice.primary.pricing_table} />;
- * ```
+ * 	;```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}>
@@ -98,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}>
@@ -125,5 +121,5 @@ function TableRow(props: TableRowProps) {
 				),
 			)}
 		</Tr>
-	);
+	)
 }

package/src/PrismicText.tsx

@@ -1,37 +1,36 @@
-import type { FC } from "react";
-import { asText, isFilled, type RichTextField } from "@prismicio/client";
-import { DEV } from "esm-env";
+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.
+	 * 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
- * <PrismicText field={slice.primary.text} />;
- * ```
+ * 	;```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) {
@@ -40,7 +39,7 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
 					"classname-is-not-a-valid-prop",
 				)}.`,
 				props.field,
-			);
+			)
 		}
 	}
 
@@ -51,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 })}</>
+}

package/src/PrismicToolbar.tsx

@@ -1,97 +1,93 @@
-"use client";
+"use client"
 
-import { getToolbarSrc } from "@prismicio/client";
-import { type FC, useEffect, useRef } from "react";
+import { getToolbarSrc } from "@prismicio/client"
+import { type FC, useEffect, useRef } from "react"
 
 /** Props for `<PrismicToolbar>`. */
 export type PrismicToolbarProps = {
 	/**
-	 * The name of the Prismic repository. For example, `"my-repo"` if the
-	 * repository URL is `my-repo.prismic.io`.
+	 * The name of the Prismic repository. For example, `"my-repo"` if the repository URL is
+	 * `my-repo.prismic.io`.
 	 */
-	repositoryName: string;
+	repositoryName: string
 
 	/**
-	 * Called when the Prismic toolbar triggers a preview update. This happens
-	 * when the previewed content changes.
+	 * Called when the Prismic toolbar triggers a preview update. This happens when the previewed
+	 * content changes.
 	 *
 	 * The new ref can be read from `event.detail.ref`.
 	 *
-	 * The default page reload behavior can be cancelled with
-	 * `event.preventDefault()`.
+	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
 	 */
-	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void;
+	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void
 
 	/**
-	 * Called when the Prismic toolbar triggers a preview end. This happens when
-	 * a preview session is closed.
+	 * Called when the Prismic toolbar triggers a preview end. This happens when a preview session is
+	 * closed.
 	 *
-	 * The default page reload behavior can be cancelled with
-	 * `event.preventDefault()`.
+	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
 	 */
-	onPreviewEnd?: (event: CustomEvent<null>) => void;
-};
+	onPreviewEnd?: (event: CustomEvent<null>) => void
+}
 
 /**
  * Renders the Prismic Toolbar script to support draft previews.
  *
  * @example
- *
- * ```tsx
- * <PrismicToolbar repositoryName="my-repo" />;
- * ```
+ * 	;```tsx
+ * 	<PrismicToolbar repositoryName="my-repo" />;
+ * 	```
  *
  * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}
  */
 export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
-	const { repositoryName, onPreviewUpdate, onPreviewEnd } = props;
+	const { repositoryName, onPreviewUpdate, onPreviewEnd } = props
 
-	const src = getToolbarSrc(repositoryName);
+	const src = getToolbarSrc(repositoryName)
 
-	const onPreviewUpdateRef = useRef(onPreviewUpdate);
-	onPreviewUpdateRef.current = onPreviewUpdate;
+	const onPreviewUpdateRef = useRef(onPreviewUpdate)
+	onPreviewUpdateRef.current = onPreviewUpdate
 
-	const onPreviewEndRef = useRef(onPreviewEnd);
-	onPreviewEndRef.current = onPreviewEnd;
+	const onPreviewEndRef = useRef(onPreviewEnd)
+	onPreviewEndRef.current = onPreviewEnd
 
 	useEffect(() => {
-		const existingScript = document.querySelector(`script[src="${src}"]`);
+		const existingScript = document.querySelector(`script[src="${src}"]`)
 
 		if (!existingScript) {
-			const script = document.createElement("script");
-			script.src = src;
-			script.defer = true;
+			const script = document.createElement("script")
+			script.src = src
+			script.defer = true
 
 			// Used to distinguish the toolbar element from other elements.
-			script.dataset.prismicToolbar = "";
-			script.dataset.repositoryName = repositoryName;
+			script.dataset.prismicToolbar = ""
+			script.dataset.repositoryName = repositoryName
 
 			// Disable Happy DOM `<script>` evaluation during tests.
 			// @ts-expect-error - `_evaluateScript` is a Happy DOM-specific property.
-			script._evaluateScript = false;
+			script._evaluateScript = false
 
-			document.body.appendChild(script);
+			document.body.appendChild(script)
 		}
-	}, [repositoryName, src]);
+	}, [repositoryName, src])
 
 	useEffect(() => {
-		const controller = new AbortController();
+		const controller = new AbortController()
 
 		window.addEventListener(
 			"prismicPreviewUpdate",
-			(event) =>
-				onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
+			(event) => onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
 			{ signal: controller.signal },
-		);
+		)
 
 		window.addEventListener(
 			"prismicPreviewEnd",
 			(event) => onPreviewEndRef.current?.(event as CustomEvent<null>),
 			{ signal: controller.signal },
-		);
+		)
 
-		return () => controller.abort();
-	}, []);
+		return () => controller.abort()
+	}, [])
 
-	return null;
-};
+	return null
+}

package/src/SliceZone.tsx

@@ -1,6 +1,6 @@
-import type { ComponentType, FC, ReactNode } from "react";
-import type { Slice } from "@prismicio/client";
-import { DEV } from "esm-env";
+import type { Slice } from "@prismicio/client"
+import { DEV } from "esm-env"
+import type { ComponentType, FC, ReactNode } from "react"
 
 /**
  * Returns the type of a `SliceLike` type.
@@ -11,35 +11,34 @@ type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice
 	? TSlice["slice_type"]
 	: TSlice extends SliceLikeGraphQL
 		? TSlice["type"]
-		: never;
+		: never
 
 /**
- * The minimum required properties to represent a Prismic slice from the Prismic
- * Content API for the `mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice from the Prismic Content API for the
+ * `mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the slice.
  */
 export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
 	Slice<TSliceType>,
 	"id" | "slice_type"
->;
+>
 
 /**
- * The minimum required properties to represent a Prismic slice from the Prismic
- * GraphQL API for the `mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice from the Prismic GraphQL API for the
+ * `mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the slice.
  */
 export type SliceLikeGraphQL<TSliceType extends string = string> = {
-	type: Slice<TSliceType>["slice_type"];
-};
+	type: Slice<TSliceType>["slice_type"]
+}
 
 /**
- * The minimum required properties to represent a Prismic slice for the
- * `mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice for the `mapSliceZone()` helper.
  *
- * If using Prismic's Content API, use the `Slice` export from
- * `@prismicio/client` for a full interface.
+ * If using Prismic's Content API, use the `Slice` export from `@prismicio/client` for a full
+ * interface.
  *
  * @typeParam SliceType - Type name of the slice.
  */
@@ -48,59 +47,49 @@ export type SliceLike<TSliceType extends string = string> = (
 	| SliceLikeGraphQL<TSliceType>
 ) & {
 	/**
-	 * If `true`, this slice has been modified from its original value using a
-	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+	 * If `true`, this slice has been modified from its original value using a mapper and
+	 * `@prismicio/client`'s `mapSliceZone()`.
 	 *
 	 * @internal
 	 */
-	__mapped?: true;
-};
+	__mapped?: true
+}
 
 /**
- * A looser version of the `SliceZone` type from `@prismicio/client` using
- * `SliceLike`.
+ * A looser version of the `SliceZone` type from `@prismicio/client` using `SliceLike`.
  *
- * If using Prismic's Content API, use the `SliceZone` export from
- * `@prismicio/client` for the full type.
+ * If using Prismic's Content API, use the `SliceZone` export from `@prismicio/client` for the full
+ * type.
  *
  * @typeParam TSlice - The type(s) of a slice in the slice zone.
  */
-export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
-	readonly TSlice[];
+export type SliceZoneLike<TSlice extends SliceLike = SliceLike> = readonly TSlice[]
 
 /**
- * React props for a component rendering content from a Prismic slice using the
- * `<SliceZone>` component.
+ * React props for a component rendering content from a Prismic slice using the `<SliceZone>`
+ * component.
  *
  * @typeParam TSlice - The slice passed as a prop.
- * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made
- *   available to all slice components.
+ * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made available to all slice
+ *   components.
  */
-export type SliceComponentProps<
-	TSlice extends SliceLike = SliceLike,
-	TContext = unknown,
-> = {
+export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
 	/** Slice data for this component. */
-	slice: TSlice;
+	slice: TSlice
 
 	/** The index of the slice in the slice zone. */
-	index: number;
+	index: number
 
 	/** All slices from the slice zone to which the slice belongs. */
 	// TODO: We have to keep this list of slices general due to circular
 	// reference limtiations. If we had another generic to determine the full
 	// union of slice types, it would include TSlice. This causes TypeScript to
 	// throw a compilation error.
-	slices: SliceZoneLike<
-		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
-	>;
+	slices: SliceZoneLike<TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2>
 
-	/**
-	 * Arbitrary data passed to `<SliceZone>` and made available to all slice
-	 * components.
-	 */
-	context: TContext;
-};
+	/** Arbitrary data passed to `<SliceZone>` and made available to all slice components. */
+	context: TContext
+}
 
 /**
  * A React component to be rendered for each instance of its slice.
@@ -112,22 +101,18 @@ export type SliceComponentType<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	TSlice extends SliceLike = any,
 	TContext = unknown,
-> = ComponentType<SliceComponentProps<TSlice, TContext>>;
+> = ComponentType<SliceComponentProps<TSlice, TContext>>
 
 /**
- * A record of slice types mapped to a React component. The component will be
- * rendered for each instance of its slice.
+ * A record of slice types mapped to a React component. The component will be rendered for each
+ * instance of its slice.
  *
  * @deprecated This type is no longer used by `@prismicio/react`. Prefer using
  *   `Record<string, SliceComponentType<any>>` instead.
- *
  * @typeParam TSlice - The type(s) of a slice in the slice zone.
  * @typeParam TContext - Arbitrary data made available to all slice components.
  */
-export type SliceZoneComponents<
-	TSlice extends SliceLike = SliceLike,
-	TContext = unknown,
-> =
+export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> =
 	// This is purposely not wrapped in Partial to ensure a component is provided
 	// for all slice types. <SliceZone> will render a default component if one is
 	// not provided, but it *should* be a type error if an explicit component is
@@ -143,8 +128,8 @@ export type SliceZoneComponents<
 				? SliceLike
 				: Extract<TSlice, SliceLike<SliceType>>,
 			TContext
-		>;
-	};
+		>
+	}
 
 /**
  * React props for the `<SliceZone>` component.
@@ -154,104 +139,79 @@ export type SliceZoneComponents<
  */
 export type SliceZoneProps<TContext = unknown> = {
 	/** List of slice data from the slice zone. */
-	slices?: SliceZoneLike;
+	slices?: SliceZoneLike
 
 	/** A record mapping slice types to React components. */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	components?: Record<string, ComponentType<any>>;
+	components?: Record<string, ComponentType<any>>
 
-	/**
-	 * The React component rendered if a component mapping from the `components`
-	 * prop cannot be found.
-	 */
+	/** The React component rendered if a component mapping from the `components` prop cannot be found. */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
+	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>
 
 	/** Arbitrary data made available to all slice components. */
-	context?: TContext;
-};
+	context?: TContext
+}
 
 /**
- * This slice component can be used as a reminder to provide a proper
- * implementation.
+ * This slice component can be used as a reminder to provide a proper implementation.
  *
- * This is also the default React component rendered when a component mapping
- * cannot be found in `<SliceZone>`.
+ * This is also the default React component rendered when a component mapping cannot be found in
+ * `<SliceZone>`.
  */
 export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
 }: {
-	slice: TSlice;
+	slice: TSlice
 }): ReactNode => {
 	if (!DEV) {
-		return null;
+		return null
 	}
 
-	const type = "slice_type" in slice ? slice.slice_type : slice.type;
+	const type = "slice_type" in slice ? slice.slice_type : slice.type
 
-	console.warn(
-		`[SliceZone] Could not find a component for slice type "${type}"`,
-		slice,
-	);
+	console.warn(`[SliceZone] Could not find a component for slice type "${type}"`, slice)
 
 	return (
 		<section data-slice-zone-todo-component="" data-slice-type={type}>
 			Could not find a component for slice type &ldquo;{type}
 			&rdquo;
 		</section>
-	);
-};
+	)
+}
 
 /**
  * Renders slices in a slice zone as React components.
  *
  * @example
- *
- * ```tsx
- * <SliceZone slices={page.data.slices} components={components} />;
- * ```
+ * 	;```tsx
+ * 	<SliceZone slices={page.data.slices} components={components} />;
+ * 	```
  *
  * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}
  */
 export const SliceZone: FC<SliceZoneProps> = (props) => {
-	const {
-		slices = [],
-		components = {},
-		defaultComponent,
-		context = {},
-	} = props;
+	const { slices = [], components = {}, defaultComponent, context = {} } = props
 
 	const renderedSlices = slices.map((slice, index) => {
-		const type = "slice_type" in slice ? slice.slice_type : slice.type;
+		const type = "slice_type" in slice ? slice.slice_type : slice.type
 
-		const key =
-			"id" in slice && slice.id
-				? slice.id
-				: `${index}-${JSON.stringify(slice)}`;
+		const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`
 
-		const Comp =
-			components[type as keyof typeof components] || defaultComponent;
+		const Comp = components[type as keyof typeof components] || defaultComponent
 
 		if (!Comp) {
-			return <TODOSliceComponent key={key} slice={slice} />;
+			return <TODOSliceComponent key={key} slice={slice} />
 		}
 
 		if (slice.__mapped) {
-			const { __mapped, ...mappedProps } = slice;
+			const { __mapped, ...mappedProps } = slice
 
-			return <Comp key={key} {...mappedProps} />;
+			return <Comp key={key} {...mappedProps} />
 		}
 
-		return (
-			<Comp
-				key={key}
-				slice={slice}
-				index={index}
-				slices={slices}
-				context={context}
-			/>
-		);
-	});
+		return <Comp key={key} slice={slice} index={index} slices={slices} context={context} />
+	})
 
-	return <>{renderedSlices}</>;
-};
+	return <>{renderedSlices}</>
+}