@prismicio/react 3.2.1 → 3.2.2-canary.8d3ad6d

package/src/PrismicTable.tsx

@@ -1,16 +1,16 @@
-import { ComponentType, FC, ReactNode } from "react";
+import type { ComponentType, FC, ReactNode } from "react";
 import {
 	isFilled,
-	TableField,
-	TableFieldHead,
-	TableFieldHeadRow,
-	TableFieldBody,
-	TableFieldBodyRow,
-	TableFieldHeaderCell,
-	TableFieldDataCell,
+	type TableField,
+	type TableFieldHead,
+	type TableFieldHeadRow,
+	type TableFieldBody,
+	type TableFieldBodyRow,
+	type TableFieldHeaderCell,
+	type TableFieldDataCell,
 } from "@prismicio/client";
 
-import { JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
+import { type JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
 
 type TableComponents = {
 	table?: ComponentType<{ table: TableField<"filled">; children: ReactNode }>;
@@ -60,37 +60,15 @@ export type PrismicTableProps = {
 };
 
 /**
- * React component that renders content from a Prismic table field. By default,
- * HTML elements are rendered for each piece of content. A `tbody` block will
- * render a `<tbody>` HTML element, for example.
+ * Renders content from a Prismic table field as React components.
  *
- * To customize the components that are rendered, provide a map serializer to
- * the `components` prop.
+ * @example
  *
- * @example Rendering a table field using the default HTMl elements.
- *
- * ```jsx
- * <PrismicTable field={document.data.my_table} />;
- * ```
- *
- * @example Rendering a table field using a custom set of React components.
- *
- * ```jsx
- * <PrismicTable
- * 	field={document.data.my_table}
- * 	components={{
- * 		tbody: ({ children }) => (
- * 			<tbody className="my-class">{children}</tbody>
- * 		),
- * 	}}
- * />;
+ * ```tsx
+ * <PrismicTable field={slice.primary.pricing_table} />;
  * ```
  *
- * @param props - Props for the component.
- *
- * @returns The table field's content as React components.
- *
- * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/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;

package/src/PrismicText.tsx

@@ -1,12 +1,12 @@
-import { FC } from "react";
-import { asText, isFilled, RichTextField } from "@prismicio/client";
+import type { FC } from "react";
+import { asText, isFilled, type RichTextField } from "@prismicio/client";
 import { DEV } from "esm-env";
 
 import { devMsg } from "./lib/devMsg.js";
 
 /** Props for `<PrismicText>`. */
 export type PrismicTextProps = {
-	/** The Prismic Rich Text field to render. */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined;
 
 	/**
@@ -20,24 +20,15 @@ export type PrismicTextProps = {
 };
 
 /**
- * React component that renders content from a Prismic Rich Text field as plain
- * text.
+ * Renders content from a Prismic rich text field as plain text (no HTML).
  *
- * @remarks
- * This component returns a React fragment with no wrapping element around the
- * content. If you need a wrapper, add a component around `<PrismicText>`.
+ * @example
  *
- * @example Rendering a Rich Text field as plain text.
- *
- * ```jsx
- * <PrismicText field={document.data.content} />;
+ * ```tsx
+ * <PrismicText field={slice.primary.text} />;
  * ```
  *
- * @param props - Props for the component.
- *
- * @returns The Rich Text field's content as plain text.
- *
- * @see Learn about Rich Text fields {@link https://io/docs/core-concepts/rich-text-title}
+ * @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;
@@ -56,7 +47,7 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
 	if (typeof props.field === "string") {
 		if (DEV) {
 			console.error(
-				`[PrismicText] The "field" prop only accepts a Rich Text or Title field's value but was provided a different type of field instead (e.g. a Key Text or Select field). You can resolve this error by rendering the field value inline without <PrismicText>. For more details, see ${devMsg(
+				`[PrismicText] The "field" prop only accepts a rich text field's value but was provided a different type of field instead (e.g. a key text or select field). You can resolve this error by rendering the field value inline without <PrismicText>. For more details, see ${devMsg(
 					"prismictext-works-only-with-rich-text-and-title-fields",
 				)}`,
 				props.field,

package/src/PrismicToolbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useEffect } from "react";
+import { type FC, useEffect } from "react";
 import { getToolbarSrc } from "@prismicio/client";
 
 /** Props for `<PrismicToolbar>`. */
@@ -13,8 +13,15 @@ export type PrismicToolbarProps = {
 };
 
 /**
- * React component that injects the Prismic Toolbar into the app. This component
- * can be placed anywhere in the React tree.
+ * Renders the Prismic Toolbar script to support draft previews.
+ *
+ * @example
+ *
+ * ```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 } = props;

package/src/SliceZone.tsx

@@ -1,11 +1,11 @@
-import type { ComponentType, FC } from "react";
+import type { ComponentType, FC, ReactNode } from "react";
 import type { Slice } from "@prismicio/client";
 import { DEV } from "esm-env";
 
 /**
  * Returns the type of a `SliceLike` type.
  *
- * @typeParam Slice - The Slice from which the type will be extracted.
+ * @typeParam TSlice - The slice from which the type will be extracted.
  */
 type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice
 	? TSlice["slice_type"]
@@ -14,10 +14,10 @@ type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice
 		: never;
 
 /**
- * The minimum required properties to represent a Prismic Slice from the Prismic
- * Rest API V2 for the `unstable_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.
+ * @typeParam SliceType - Type name of the slice.
  */
 export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
 	Slice<TSliceType>,
@@ -25,30 +25,30 @@ export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
 >;
 
 /**
- * The minimum required properties to represent a Prismic Slice from the Prismic
- * GraphQL API for the `unstable_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.
+ * @typeParam SliceType - Type name of the slice.
  */
 export type SliceLikeGraphQL<TSliceType extends string = string> = {
 	type: Slice<TSliceType>["slice_type"];
 };
 
 /**
- * The minimum required properties to represent a Prismic Slice for the
- * `unstable_mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice for the
+ * `mapSliceZone()` helper.
  *
- * If using Prismic's Rest API V2, use the `Slice` export from
+ * If using Prismic's Content API, use the `Slice` export from
  * `@prismicio/client` for a full interface.
  *
- * @typeParam SliceType - Type name of the Slice.
+ * @typeParam SliceType - Type name of the slice.
  */
 export type SliceLike<TSliceType extends string = string> = (
 	| SliceLikeRestV2<TSliceType>
 	| SliceLikeGraphQL<TSliceType>
 ) & {
 	/**
-	 * If `true`, this Slice has been modified from its original value using a
+	 * If `true`, this slice has been modified from its original value using a
 	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
 	 *
 	 * @internal
@@ -60,21 +60,21 @@ export type SliceLike<TSliceType extends string = string> = (
  * A looser version of the `SliceZone` type from `@prismicio/client` using
  * `SliceLike`.
  *
- * If using Prismic's Rest API V2, use the `SliceZone` export from
+ * 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.
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
  */
 export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
 	readonly TSlice[];
 
 /**
- * React props for a component rendering content from a Prismic Slice using the
+ * React props for a component rendering content from a Prismic slice using the
  * `<SliceZone>` component.
  *
- * @typeParam TSlice - The Slice passed as a prop.
+ * @typeParam TSlice - The slice passed as a prop.
  * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made
- *   available to all Slice components.
+ *   available to all slice components.
  */
 export type SliceComponentProps<
 	TSlice extends SliceLike = SliceLike,
@@ -83,30 +83,30 @@ export type SliceComponentProps<
 	/** Slice data for this component. */
 	slice: TSlice;
 
-	/** The index of the Slice in the Slice Zone. */
+	/** The index of the slice in the slice zone. */
 	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
+	/** 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
+	// union of slice types, it would include TSlice. This causes TypeScript to
 	// throw a compilation error.
 	slices: SliceZoneLike<
 		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
 	>;
 
 	/**
-	 * Arbitrary data passed to `<SliceZone>` and made available to all Slice
+	 * 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.
+ * A React component to be rendered for each instance of its slice.
  *
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
- * @typeParam TContext - Arbitrary data made available to all Slice components.
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
+ * @typeParam TContext - Arbitrary data made available to all slice components.
  */
 export type SliceComponentType<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -115,21 +115,21 @@ export type SliceComponentType<
 > = 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.
+ * @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,
 > =
 	// 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
+	// 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
 	// missing.
 	//
@@ -149,14 +149,14 @@ export type SliceZoneComponents<
 /**
  * React props for the `<SliceZone>` component.
  *
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
- * @typeParam TContext - Arbitrary data made available to all Slice components.
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
+ * @typeParam TContext - Arbitrary data made available to all slice components.
  */
 export type SliceZoneProps<TContext = unknown> = {
-	/** List of Slice data from the Slice Zone. */
+	/** List of slice data from the slice zone. */
 	slices?: SliceZoneLike;
 
-	/** A record mapping Slice types to React components. */
+	/** A record mapping slice types to React components. */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	components?: Record<string, ComponentType<any>>;
 
@@ -167,12 +167,12 @@ export type SliceZoneProps<TContext = unknown> = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
 
-	/** Arbitrary data made available to all Slice components. */
+	/** Arbitrary data made available to all slice components. */
 	context?: TContext;
 };
 
 /**
- * This Slice component can be used as a reminder to provide a proper
+ * 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
@@ -182,7 +182,7 @@ export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
 }: {
 	slice: TSlice;
-}) => {
+}): ReactNode => {
 	if (!DEV) {
 		return null;
 	}
@@ -190,32 +190,28 @@ export const TODOSliceComponent = <TSlice extends SliceLike>({
 	const type = "slice_type" in slice ? slice.slice_type : slice.type;
 
 	console.warn(
-		`[SliceZone] Could not find a component for Slice type "${type}"`,
+		`[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}
+			Could not find a component for slice type &ldquo;{type}
 			&rdquo;
 		</section>
 	);
 };
 
 /**
- * Renders content from a Prismic Slice Zone using React components for each
- * type of Slice.
+ * Renders slices in a slice zone as React components.
  *
- * If a component is not provided for a type of Slice, a default component can
- * be provided. A fallback component is provided by default that will not be
- * rendered in a production build of your app.
+ * @example
  *
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
- * @typeParam TContext - Arbitrary data made available to all Slice components.
+ * ```tsx
+ * <SliceZone slices={page.data.slices} components={components} />;
+ * ```
  *
- * @returns The Slice Zone's content as React components.
- *
- * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}
+ * @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 {

package/src/lib/devMsg.ts

@@ -15,6 +15,6 @@ import { version } from "../../package.json";
  *
  * @returns The `prismic.dev/msg` URL for the given slug.
  */
-export function devMsg(slug: string) {
+export function devMsg(slug: string): string {
 	return `https://prismic.dev/msg/react/v${version}/${slug}`;
 }

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/lib/devMsg.d.ts

@@ -1,16 +0,0 @@
-/**
- * Returns a `prismic.dev/msg` URL for a given message slug.
- *
- * @example
- *
- * ```ts
- * devMsg("missing-param");
- * // => "https://prismic.dev/msg/react/v1.2.3/missing-param"
- * ```
- *
- * @param slug - Slug for the message. This corresponds to a Markdown file in
- *   the Git repository's `/messages` directory.
- *
- * @returns The `prismic.dev/msg` URL for the given slug.
- */
-export declare function devMsg(slug: string): string;

package/dist/package.json.js

@@ -1,5 +0,0 @@
-const version = "3.2.1";
-export {
-  version
-};
-//# sourceMappingURL=package.json.js.map

package/dist/package.json.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"package.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}