@prismicio/react 3.2.1-alpha.0 → 3.2.2

package/dist/SliceZone.d.ts

@@ -3,37 +3,37 @@ import type { Slice } from "@prismicio/client";
 /**
  * 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"] : TSlice extends SliceLikeGraphQL ? TSlice["type"] : 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>, "id" | "slice_type">;
 /**
- * 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
@@ -44,49 +44,49 @@ export type SliceLike<TSliceType extends string = string> = (SliceLikeRestV2<TSl
  * 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, TContext = unknown> = {
     /** 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. */
+    /** All slices from the slice zone to which the slice belongs. */
     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<TSlice extends SliceLike = any, TContext = unknown> = 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> = {
     [SliceType in ExtractSliceType<TSlice>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
@@ -94,24 +94,24 @@ export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext =
 /**
  * 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. */
     components?: Record<string, ComponentType<any>>;
     /**
      * The React component rendered if a component mapping from the `components`
      * prop cannot be found.
      */
     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
@@ -121,19 +121,15 @@ export declare const TODOSliceComponent: <TSlice extends SliceLike>({ slice, }:
     slice: TSlice;
 }) => import("react/jsx-runtime").JSX.Element | null;
 /**
- * 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 declare const SliceZone: FC<SliceZoneProps>;
 export {};

package/dist/SliceZone.js

@@ -5,8 +5,8 @@ const TODOSliceComponent = ({ slice }) => {
     return null;
   }
   const type = "slice_type" in slice ? slice.slice_type : slice.type;
-  console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
-  return jsxs("section", { "data-slice-zone-todo-component": "", "data-slice-type": type, children: ["Could not find a component for Slice type “", type, "”"] });
+  console.warn(`[SliceZone] Could not find a component for slice type "${type}"`, slice);
+  return jsxs("section", { "data-slice-zone-todo-component": "", "data-slice-type": type, children: ["Could not find a component for slice type “", type, "”"] });
 };
 const SliceZone = (props) => {
   const { slices = [], components = {}, defaultComponent, context = {} } = props;

package/dist/SliceZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliceZone.js","sources":["../src/SliceZone.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport type { Slice } from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam Slice - The Slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t\t? TSlice[\"type\"]\n\t\t: never;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * Rest API V2 for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tSlice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * GraphQL API for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: Slice<TSliceType>[\"slice_type\"];\n};\n\n/**\n * The minimum required properties to represent a Prismic Slice for the\n * `unstable_mapSliceZone()` helper.\n *\n * If using Prismic's Rest API V2, use the `Slice` export from\n * `@prismicio/client` for a full interface.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLike<TSliceType extends string = string> = (\n\t| SliceLikeRestV2<TSliceType>\n\t| SliceLikeGraphQL<TSliceType>\n) & {\n\t/**\n\t * If `true`, this Slice has been modified from its original value using a\n\t * mapper and `@prismicio/client`'s `mapSliceZone()`.\n\t *\n\t * @internal\n\t */\n\t__mapped?: true;\n};\n\n/**\n * A looser version of the `SliceZone` type from `@prismicio/client` using\n * `SliceLike`.\n *\n * If using Prismic's Rest API V2, use the `SliceZone` export from\n * `@prismicio/client` for the full type.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> =\n\treadonly TSlice[];\n\n/**\n * React props for a component rendering content from a Prismic Slice using the\n * `<SliceZone>` component.\n *\n * @typeParam TSlice - The Slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made\n *   available to all Slice components.\n */\nexport type SliceComponentProps<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> = {\n\t/** Slice data for this component. */\n\tslice: TSlice;\n\n\t/** The index of the Slice in the Slice Zone. */\n\tindex: number;\n\n\t/** All Slices from the Slice Zone to which the Slice belongs. */\n\t// TODO: We have to keep this list of Slices general due to circular\n\t// reference limtiations. If we had another generic to determine the full\n\t// union of Slice types, it would include TSlice. This causes TypeScript to\n\t// throw a compilation error.\n\tslices: SliceZoneLike<\n\t\tTSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2\n\t>;\n\n\t/**\n\t * Arbitrary data passed to `<SliceZone>` and made available to all Slice\n\t * components.\n\t */\n\tcontext: TContext;\n};\n\n/**\n * A React component to be rendered for each instance of its Slice.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceComponentType<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n\tTContext = unknown,\n> = ComponentType<SliceComponentProps<TSlice, TContext>>;\n\n/**\n * A record of Slice types mapped to a React component. The component will be\n * rendered for each instance of its Slice.\n *\n * @deprecated This type is no longer used by `@prismicio/react`. Prefer using\n *   `Record<string, SliceComponentType<any>>` instead.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneComponents<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> =\n\t// This is purposely not wrapped in Partial to ensure a component is provided\n\t// for all Slice types. <SliceZone> will render a default component if one is\n\t// not provided, but it *should* be a type error if an explicit component is\n\t// missing.\n\t//\n\t// If a developer purposely does not want to provide a component, they can\n\t// assign it to the TODOSliceComponent exported from this package. This\n\t// signals to future developers that it is a placeholder and should be\n\t// implemented.\n\t{\n\t\t[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<\n\t\t\tExtract<TSlice, SliceLike<SliceType>> extends never\n\t\t\t\t? SliceLike\n\t\t\t\t: Extract<TSlice, SliceLike<SliceType>>,\n\t\t\tTContext\n\t\t>;\n\t};\n\n/**\n * React props for the `<SliceZone>` component.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneProps<TContext = unknown> = {\n\t/** List of Slice data from the Slice Zone. */\n\tslices?: SliceZoneLike;\n\n\t/** A record mapping Slice types to React components. */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>;\n\n\t/**\n\t * The React component rendered if a component mapping from the `components`\n\t * prop cannot be found.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;\n\n\t/** Arbitrary data made available to all Slice components. */\n\tcontext?: TContext;\n};\n\n/**\n * This Slice component can be used as a reminder to provide a proper\n * implementation.\n *\n * This is also the default React component rendered when a component mapping\n * cannot be found in `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike>({\n\tslice,\n}: {\n\tslice: TSlice;\n}) => {\n\tif (!DEV) {\n\t\treturn null;\n\t}\n\n\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\tconsole.warn(\n\t\t`[SliceZone] Could not find a component for Slice type \"${type}\"`,\n\t\tslice,\n\t);\n\n\treturn (\n\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\tCould not find a component for Slice type &ldquo;{type}\n\t\t\t&rdquo;\n\t\t</section>\n\t);\n};\n\n/**\n * Renders content from a Prismic Slice Zone using React components for each\n * type of Slice.\n *\n * If a component is not provided for a type of Slice, a default component can\n * be provided. A fallback component is provided by default that will not be\n * rendered in a production build of your app.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n *\n * @returns The Slice Zone's content as React components.\n *\n * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}\n */\nexport const SliceZone: FC<SliceZoneProps> = (props) => {\n\tconst {\n\t\tslices = [],\n\t\tcomponents = {},\n\t\tdefaultComponent,\n\t\tcontext = {},\n\t} = props;\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tconst key =\n\t\t\t\"id\" in slice && slice.id\n\t\t\t\t? slice.id\n\t\t\t\t: `${index}-${JSON.stringify(slice)}`;\n\n\t\tconst Comp =\n\t\t\tcomponents[type as keyof typeof components] || defaultComponent;\n\n\t\tif (!Comp) {\n\t\t\treturn <TODOSliceComponent key={key} slice={slice} />;\n\t\t}\n\n\t\tif (slice.__mapped) {\n\t\t\tconst { __mapped, ...mappedProps } = slice;\n\n\t\t\treturn <Comp key={key} {...mappedProps} />;\n\t\t}\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tkey={key}\n\t\t\t\tslice={slice}\n\t\t\t\tindex={index}\n\t\t\t\tslices={slices}\n\t\t\t\tcontext={context}\n\t\t\t/>\n\t\t);\n\t});\n\n\treturn <>{renderedSlices}</>;\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;AAoLO,MAAM,qBAAqB,CAA2B,EAC5D,YAGI;AACJ,MAAI,CAAC,KAAK;AACF,WAAA;AAAA,EAAA;AAGR,QAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE9D,UAAQ,KACP,0DAA0D,IAAI,KAC9D,KAAK;AAGN,SACCA,oDAAwC,IAAE,mBAAkB,MACT,UAAA,CAAA,+CAAA,MAEzC,GAAA,GAAA;AAEZ;AAiBa,MAAA,YAAgC,CAAC,UAAS;AAChD,QAAA,EACL,SAAS,CAAA,GACT,aAAa,CAAA,GACb,kBACA,UAAU,OACP;AAEJ,QAAM,iBAAiB,OAAO,IAAI,CAAC,OAAO,UAAS;AAClD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE9D,UAAM,MACL,QAAQ,SAAS,MAAM,KACpB,MAAM,KACN,GAAG,KAAK,IAAI,KAAK,UAAU,KAAK,CAAC;AAE/B,UAAA,OACL,WAAW,IAA+B,KAAK;AAEhD,QAAI,CAAC,MAAM;AACV,aAAOC,IAAC,oBAA6B,EAAA,MAAA,GAAL,GAAG;AAAA,IAAA;AAGpC,QAAI,MAAM,UAAU;AACnB,YAAM,EAAE,UAAU,GAAG,YAAA,IAAgB;AAErC,aAAOA,IAAC,MAAI,EAAA,GAAe,YAAA,GAAT,GAAG;AAAA,IAAA;AAIrB,WAAAA,IAAC,MAAI,EAEJ,OACA,OACA,QACA,WAJK,GAAG;AAAA,EAAA,CAOV;AAED,SAAOA,IAAAC,UAAA,EAAA,UAAG,gBAAc;AACzB;"}
+{"version":3,"file":"SliceZone.js","sources":["../src/SliceZone.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport type { Slice } from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam TSlice - The slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t\t? TSlice[\"type\"]\n\t\t: never;\n\n/**\n * The minimum required properties to represent a Prismic slice from the Prismic\n * Content API for the `mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tSlice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>;\n\n/**\n * The minimum required properties to represent a Prismic slice from the Prismic\n * GraphQL API for the `mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: Slice<TSliceType>[\"slice_type\"];\n};\n\n/**\n * The minimum required properties to represent a Prismic slice for the\n * `mapSliceZone()` helper.\n *\n * If using Prismic's Content API, use the `Slice` export from\n * `@prismicio/client` for a full interface.\n *\n * @typeParam SliceType - Type name of the slice.\n */\nexport type SliceLike<TSliceType extends string = string> = (\n\t| SliceLikeRestV2<TSliceType>\n\t| SliceLikeGraphQL<TSliceType>\n) & {\n\t/**\n\t * If `true`, this slice has been modified from its original value using a\n\t * mapper and `@prismicio/client`'s `mapSliceZone()`.\n\t *\n\t * @internal\n\t */\n\t__mapped?: true;\n};\n\n/**\n * A looser version of the `SliceZone` type from `@prismicio/client` using\n * `SliceLike`.\n *\n * If using Prismic's Content API, use the `SliceZone` export from\n * `@prismicio/client` for the full type.\n *\n * @typeParam TSlice - The type(s) of a slice in the slice zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> =\n\treadonly TSlice[];\n\n/**\n * React props for a component rendering content from a Prismic slice using the\n * `<SliceZone>` component.\n *\n * @typeParam TSlice - The slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made\n *   available to all slice components.\n */\nexport type SliceComponentProps<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> = {\n\t/** Slice data for this component. */\n\tslice: TSlice;\n\n\t/** The index of the slice in the slice zone. */\n\tindex: number;\n\n\t/** All slices from the slice zone to which the slice belongs. */\n\t// TODO: We have to keep this list of slices general due to circular\n\t// reference limtiations. If we had another generic to determine the full\n\t// union of slice types, it would include TSlice. This causes TypeScript to\n\t// throw a compilation error.\n\tslices: SliceZoneLike<\n\t\tTSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2\n\t>;\n\n\t/**\n\t * Arbitrary data passed to `<SliceZone>` and made available to all slice\n\t * components.\n\t */\n\tcontext: TContext;\n};\n\n/**\n * A React component to be rendered for each instance of its slice.\n *\n * @typeParam TSlice - The type(s) of a slice in the slice zone.\n * @typeParam TContext - Arbitrary data made available to all slice components.\n */\nexport type SliceComponentType<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n\tTContext = unknown,\n> = ComponentType<SliceComponentProps<TSlice, TContext>>;\n\n/**\n * A record of slice types mapped to a React component. The component will be\n * rendered for each instance of its slice.\n *\n * @deprecated This type is no longer used by `@prismicio/react`. Prefer using\n *   `Record<string, SliceComponentType<any>>` instead.\n *\n * @typeParam TSlice - The type(s) of a slice in the slice zone.\n * @typeParam TContext - Arbitrary data made available to all slice components.\n */\nexport type SliceZoneComponents<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> =\n\t// This is purposely not wrapped in Partial to ensure a component is provided\n\t// for all slice types. <SliceZone> will render a default component if one is\n\t// not provided, but it *should* be a type error if an explicit component is\n\t// missing.\n\t//\n\t// If a developer purposely does not want to provide a component, they can\n\t// assign it to the TODOSliceComponent exported from this package. This\n\t// signals to future developers that it is a placeholder and should be\n\t// implemented.\n\t{\n\t\t[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<\n\t\t\tExtract<TSlice, SliceLike<SliceType>> extends never\n\t\t\t\t? SliceLike\n\t\t\t\t: Extract<TSlice, SliceLike<SliceType>>,\n\t\t\tTContext\n\t\t>;\n\t};\n\n/**\n * React props for the `<SliceZone>` component.\n *\n * @typeParam TSlice - The type(s) of a slice in the slice zone.\n * @typeParam TContext - Arbitrary data made available to all slice components.\n */\nexport type SliceZoneProps<TContext = unknown> = {\n\t/** List of slice data from the slice zone. */\n\tslices?: SliceZoneLike;\n\n\t/** A record mapping slice types to React components. */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>;\n\n\t/**\n\t * The React component rendered if a component mapping from the `components`\n\t * prop cannot be found.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;\n\n\t/** Arbitrary data made available to all slice components. */\n\tcontext?: TContext;\n};\n\n/**\n * This slice component can be used as a reminder to provide a proper\n * implementation.\n *\n * This is also the default React component rendered when a component mapping\n * cannot be found in `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike>({\n\tslice,\n}: {\n\tslice: TSlice;\n}) => {\n\tif (!DEV) {\n\t\treturn null;\n\t}\n\n\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\tconsole.warn(\n\t\t`[SliceZone] Could not find a component for slice type \"${type}\"`,\n\t\tslice,\n\t);\n\n\treturn (\n\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\tCould not find a component for slice type &ldquo;{type}\n\t\t\t&rdquo;\n\t\t</section>\n\t);\n};\n\n/**\n * Renders slices in a slice zone as React components.\n *\n * @example\n *\n * ```tsx\n * <SliceZone slices={page.data.slices} components={components} />;\n * ```\n *\n * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}\n */\nexport const SliceZone: FC<SliceZoneProps> = (props) => {\n\tconst {\n\t\tslices = [],\n\t\tcomponents = {},\n\t\tdefaultComponent,\n\t\tcontext = {},\n\t} = props;\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tconst key =\n\t\t\t\"id\" in slice && slice.id\n\t\t\t\t? slice.id\n\t\t\t\t: `${index}-${JSON.stringify(slice)}`;\n\n\t\tconst Comp =\n\t\t\tcomponents[type as keyof typeof components] || defaultComponent;\n\n\t\tif (!Comp) {\n\t\t\treturn <TODOSliceComponent key={key} slice={slice} />;\n\t\t}\n\n\t\tif (slice.__mapped) {\n\t\t\tconst { __mapped, ...mappedProps } = slice;\n\n\t\t\treturn <Comp key={key} {...mappedProps} />;\n\t\t}\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tkey={key}\n\t\t\t\tslice={slice}\n\t\t\t\tindex={index}\n\t\t\t\tslices={slices}\n\t\t\t\tcontext={context}\n\t\t\t/>\n\t\t);\n\t});\n\n\treturn <>{renderedSlices}</>;\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;AAoLO,MAAM,qBAAqB,CAA2B,EAC5D,YAGI;AACJ,MAAI,CAAC,KAAK;AACF,WAAA;AAAA,EAAA;AAGR,QAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE9D,UAAQ,KACP,0DAA0D,IAAI,KAC9D,KAAK;AAGN,SACCA,oDAAwC,IAAE,mBAAkB,MACT,UAAA,CAAA,+CAAA,MAEzC,GAAA,GAAA;AAEZ;AAaa,MAAA,YAAgC,CAAC,UAAS;AAChD,QAAA,EACL,SAAS,CAAA,GACT,aAAa,CAAA,GACb,kBACA,UAAU,OACP;AAEJ,QAAM,iBAAiB,OAAO,IAAI,CAAC,OAAO,UAAS;AAClD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE9D,UAAM,MACL,QAAQ,SAAS,MAAM,KACpB,MAAM,KACN,GAAG,KAAK,IAAI,KAAK,UAAU,KAAK,CAAC;AAE/B,UAAA,OACL,WAAW,IAA+B,KAAK;AAEhD,QAAI,CAAC,MAAM;AACV,aAAOC,IAAC,oBAA6B,EAAA,MAAA,GAAL,GAAG;AAAA,IAAA;AAGpC,QAAI,MAAM,UAAU;AACnB,YAAM,EAAE,UAAU,GAAG,YAAA,IAAgB;AAErC,aAAOA,IAAC,MAAI,EAAA,GAAe,YAAA,GAAT,GAAG;AAAA,IAAA;AAIrB,WAAAA,IAAC,MAAI,EAEJ,OACA,OACA,QACA,WAJK,GAAG;AAAA,EAAA,CAOV;AAED,SAAOA,IAAAC,UAAA,EAAA,UAAG,gBAAc;AACzB;"}

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const version = "3.2.1-alpha.0";
+const version = "3.2.2";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/react",
-	"version": "3.2.1-alpha.0",
+	"version": "3.2.2",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
 		"typescript",

package/src/PrismicImage.tsx

@@ -29,7 +29,7 @@ export type PrismicImageProps = Omit<
 	ComponentProps<"img">,
 	"src" | "srcset" | "alt"
 > & {
-	/** The Prismic Image field or thumbnail to render. */
+	/** The Prismic image field or thumbnail to render. */
 	field: ImageFieldImage | null | undefined;
 
 	/**
@@ -48,7 +48,7 @@ export type PrismicImageProps = Omit<
 	alt?: "";
 
 	/**
-	 * Declare an image as decorative only if the Image field does not have
+	 * Declare an image as decorative only if the image field does not have
 	 * alternative text by providing `fallbackAlt=""`.
 	 *
 	 * See:
@@ -64,13 +64,13 @@ export type PrismicImageProps = Omit<
 } & (
 		| {
 				/**
-				 * Widths used to build a `srcset` value for the Image field.
+				 * Widths (in pixels) used to build a `srcset` value for the image
+				 * field.
 				 *
-				 * If a `widths` prop is not given or `"defaults"` is passed, the
-				 * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
-				 * 3840.
+				 * If omitted or set to `"defaults"`, the following widths will be used:
+				 * 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
 				 *
-				 * If the Image field contains responsive views, each responsive view
+				 * If the image field contains responsive views, each responsive view
 				 * can be used as a width in the resulting `srcset` by passing
 				 * `"thumbnails"` as the `widths` prop.
 				 */
@@ -84,7 +84,7 @@ export type PrismicImageProps = Omit<
 				/** Not used when the `widths` prop is used. */
 				widths?: never;
 				/**
-				 * Pixel densities used to build a `srcset` value for the Image field.
+				 * Pixel densities used to build a `srcset` value for the image field.
 				 *
 				 * If a `pixelDensities` prop is passed `"defaults"`, the following
 				 * pixel densities will be used: 1, 2, 3.
@@ -98,23 +98,15 @@ export type PrismicImageProps = Omit<
 	);
 
 /**
- * React component that renders an image from a Prismic Image field or one of
- * its thumbnails. It will automatically set the `alt` attribute using the Image
- * field's `alt` property.
+ * Renders an optimized image from a Prismic image field.
  *
- * By default, a widths-based srcset will be used to support responsive images.
- * This ensures only the smallest image needed for a browser is downloaded.
+ * @example
  *
- * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default
- * pixel densities can be used by using `pixelDensities="defaults"`.
+ * ```tsx
+ * <PrismicImage field={slice.primary.photo} />;
+ * ```
  *
- * **Note**: If you are using a framework that has a native image component,
- * such as Next.js and Gatsby, prefer using those image components instead. They
- * can provide deeper framework integration than `<PrismicImage>`.
- *
- * @param props - Props for the component.
- *
- * @returns A responsive image component for the given Image field.
+ * @see Learn how to optimize images with imgix, use responsive images, and use framework-specific image components: {@link https://prismic.io/docs/fields/image}
  */
 export const PrismicImage: FC<PrismicImageProps> = forwardRef(
 	function PrismicImage(

package/src/PrismicLink.tsx

@@ -37,7 +37,7 @@ export interface LinkProps {
 	 */
 	rel?: string;
 
-	/** Children for the component. * */
+	/** Children for the component. */
 	children?: ReactNode;
 }
 
@@ -56,13 +56,13 @@ export type PrismicLinkProps<
 	rel?: string | AsLinkAttrsConfig["rel"];
 
 	/**
-	 * The Link Resolver used to resolve links.
+	 * The link resolver used to resolve links.
 	 *
 	 * @remarks
-	 * If your app uses Route Resolvers when querying for your Prismic
-	 * repository's content, a Link Resolver does not need to be provided.
+	 * If your app uses route resolvers when querying for your Prismic
+	 * repository's content, a link resolver does not need to be provided.
 	 *
-	 * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
+	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
 	linkResolver?: LinkResolverFunction;
 
@@ -100,6 +100,17 @@ export type PrismicLinkProps<
 		  }
 	);
 
+/**
+ * Renders a link from a Prismic link field or page.
+ *
+ * @example
+ *
+ * ```tsx
+ * <PrismicLink field={slice.primary.link}>Click here</PrismicLink>;
+ * ```
+ *
+ * @see Learn how to display links and use variants for styling: {@link https://prismic.io/docs/fields/link}
+ */
 export const PrismicLink = forwardRef(function PrismicLink<
 	InternalComponentProps = ComponentProps<typeof defaultComponent>,
 	ExternalComponentProps = ComponentProps<typeof defaultComponent>,

package/src/PrismicRichText.tsx

@@ -26,39 +26,39 @@ import { devMsg } from "./lib/devMsg.js";
 import { LinkProps, PrismicLink } from "./PrismicLink.js";
 
 /**
- * A function mapping Rich Text block types to React Components. It is used to
- * render Rich Text or Title fields.
+ * A function mapping rich text block types to React Components. It is used to
+ * render rich text fields.
  *
- * @see Templating rich text and title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
+ * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
 export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
 
 /**
- * A map of Rich Text block types to React Components. It is used to render Rich
- * Text or Title fields.
+ * A map of rich text block types to React Components. It is used to render rich
+ * text fields.
  *
- * @see Templating Rich Text and Title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
+ * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
 export type JSXMapSerializer = RichTextMapSerializer<ReactNode>;
 
 /** Props for `<PrismicRichText>`. */
 export type PrismicRichTextProps = {
-	/** The Prismic Rich Text field to render. */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined;
 
 	/**
-	 * The Link Resolver used to resolve links.
+	 * The link resolver used to resolve links.
 	 *
 	 * @remarks
-	 * If your app uses Route Resolvers when querying for your Prismic
-	 * repository's content, a Link Resolver does not need to be provided.
+	 * If your app uses route resolvers when querying for your Prismic
+	 * repository's content, a link resolver does not need to be provided.
 	 *
-	 * @see Learn about Link Resolvers and Route Resolvers {@link https://io/docs/core-concepts/link-resolver-route-resolver}
+	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
 	linkResolver?: LinkResolverFunction;
 
 	/**
-	 * A map or function that maps a Rich Text block to a React component.
+	 * A map or function that maps a rich text block to a React component.
 	 *
 	 * @remarks
 	 * Prefer using a map serializer over the function serializer when possible.
@@ -243,42 +243,15 @@ const createDefaultSerializer = (
 	});
 
 /**
- * React component that renders content from a Prismic Rich Text field. By
- * default, HTML elements are rendered for each piece of content. A `heading1`
- * block will render an `<h1>` HTML element, for example. Links will use
- * `<PrismicLink>` by default which can be customized using the
- * `internalLinkComponent` and `externalLinkComponent` props.
+ * Renders content from a Prismic rich text field as React components.
  *
- * To customize the components that are rendered, provide a map or function
- * serializer to the `components` prop.
+ * @example
  *
- * @remarks
- * This component returns a React fragment with no wrapping element around the
- * content. If you need a wrapper, add a component around `<PrismicRichText>`.
- *
- * @example Rendering a Rich Text field using the default HTMl elements.
- *
- * ```jsx
- * <PrismicRichText field={document.data.content} />;
+ * ```tsx
+ * <PrismicRichText field={slice.primary.text} />;
  * ```
  *
- * @example Rendering a Rich Text field using a custom set of React components.
- *
- * ```jsx
- * <PrismicRichText
- * 	field={document.data.content}
- * 	components={{
- * 		heading1: ({ children }) => <Heading>{children}</Heading>,
- * 	}}
- * />;
- * ```
- *
- * @param props - Props for the component.
- *
- * @returns The Rich Text field's content as React components.
- *
- * @see Learn about Rich Text fields {@link https://io/docs/core-concepts/rich-text-title}
- * @see Learn about Rich Text serializers {@link https://io/docs/core-concepts/html-serializer}
+ * @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
  */
 export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 	const {

package/src/PrismicTable.tsx

@@ -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

@@ -6,7 +6,7 @@ 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

@@ -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;