@prismicio/react 3.2.1-alpha.0 → 3.2.2-pr.236.d65a0c3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,37 +3,37 @@ import type { Slice } from "@prismicio/client";
3
3
  /**
4
4
  * Returns the type of a `SliceLike` type.
5
5
  *
6
- * @typeParam Slice - The Slice from which the type will be extracted.
6
+ * @typeParam TSlice - The slice from which the type will be extracted.
7
7
  */
8
8
  type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice ? TSlice["slice_type"] : TSlice extends SliceLikeGraphQL ? TSlice["type"] : never;
9
9
  /**
10
- * The minimum required properties to represent a Prismic Slice from the Prismic
11
- * Rest API V2 for the `unstable_mapSliceZone()` helper.
10
+ * The minimum required properties to represent a Prismic slice from the Prismic
11
+ * Content API for the `mapSliceZone()` helper.
12
12
  *
13
- * @typeParam SliceType - Type name of the Slice.
13
+ * @typeParam SliceType - Type name of the slice.
14
14
  */
15
15
  export type SliceLikeRestV2<TSliceType extends string = string> = Pick<Slice<TSliceType>, "id" | "slice_type">;
16
16
  /**
17
- * The minimum required properties to represent a Prismic Slice from the Prismic
18
- * GraphQL API for the `unstable_mapSliceZone()` helper.
17
+ * The minimum required properties to represent a Prismic slice from the Prismic
18
+ * GraphQL API for the `mapSliceZone()` helper.
19
19
  *
20
- * @typeParam SliceType - Type name of the Slice.
20
+ * @typeParam SliceType - Type name of the slice.
21
21
  */
22
22
  export type SliceLikeGraphQL<TSliceType extends string = string> = {
23
23
  type: Slice<TSliceType>["slice_type"];
24
24
  };
25
25
  /**
26
- * The minimum required properties to represent a Prismic Slice for the
27
- * `unstable_mapSliceZone()` helper.
26
+ * The minimum required properties to represent a Prismic slice for the
27
+ * `mapSliceZone()` helper.
28
28
  *
29
- * If using Prismic's Rest API V2, use the `Slice` export from
29
+ * If using Prismic's Content API, use the `Slice` export from
30
30
  * `@prismicio/client` for a full interface.
31
31
  *
32
- * @typeParam SliceType - Type name of the Slice.
32
+ * @typeParam SliceType - Type name of the slice.
33
33
  */
34
34
  export type SliceLike<TSliceType extends string = string> = (SliceLikeRestV2<TSliceType> | SliceLikeGraphQL<TSliceType>) & {
35
35
  /**
36
- * If `true`, this Slice has been modified from its original value using a
36
+ * If `true`, this slice has been modified from its original value using a
37
37
  * mapper and `@prismicio/client`'s `mapSliceZone()`.
38
38
  *
39
39
  * @internal
@@ -44,49 +44,49 @@ export type SliceLike<TSliceType extends string = string> = (SliceLikeRestV2<TSl
44
44
  * A looser version of the `SliceZone` type from `@prismicio/client` using
45
45
  * `SliceLike`.
46
46
  *
47
- * If using Prismic's Rest API V2, use the `SliceZone` export from
47
+ * If using Prismic's Content API, use the `SliceZone` export from
48
48
  * `@prismicio/client` for the full type.
49
49
  *
50
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
50
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
51
51
  */
52
52
  export type SliceZoneLike<TSlice extends SliceLike = SliceLike> = readonly TSlice[];
53
53
  /**
54
- * React props for a component rendering content from a Prismic Slice using the
54
+ * React props for a component rendering content from a Prismic slice using the
55
55
  * `<SliceZone>` component.
56
56
  *
57
- * @typeParam TSlice - The Slice passed as a prop.
57
+ * @typeParam TSlice - The slice passed as a prop.
58
58
  * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made
59
- * available to all Slice components.
59
+ * available to all slice components.
60
60
  */
61
61
  export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
62
62
  /** Slice data for this component. */
63
63
  slice: TSlice;
64
- /** The index of the Slice in the Slice Zone. */
64
+ /** The index of the slice in the slice zone. */
65
65
  index: number;
66
- /** All Slices from the Slice Zone to which the Slice belongs. */
66
+ /** All slices from the slice zone to which the slice belongs. */
67
67
  slices: SliceZoneLike<TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2>;
68
68
  /**
69
- * Arbitrary data passed to `<SliceZone>` and made available to all Slice
69
+ * Arbitrary data passed to `<SliceZone>` and made available to all slice
70
70
  * components.
71
71
  */
72
72
  context: TContext;
73
73
  };
74
74
  /**
75
- * A React component to be rendered for each instance of its Slice.
75
+ * A React component to be rendered for each instance of its slice.
76
76
  *
77
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
78
- * @typeParam TContext - Arbitrary data made available to all Slice components.
77
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
78
+ * @typeParam TContext - Arbitrary data made available to all slice components.
79
79
  */
80
80
  export type SliceComponentType<TSlice extends SliceLike = any, TContext = unknown> = ComponentType<SliceComponentProps<TSlice, TContext>>;
81
81
  /**
82
- * A record of Slice types mapped to a React component. The component will be
83
- * rendered for each instance of its Slice.
82
+ * A record of slice types mapped to a React component. The component will be
83
+ * rendered for each instance of its slice.
84
84
  *
85
85
  * @deprecated This type is no longer used by `@prismicio/react`. Prefer using
86
86
  * `Record<string, SliceComponentType<any>>` instead.
87
87
  *
88
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
89
- * @typeParam TContext - Arbitrary data made available to all Slice components.
88
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
89
+ * @typeParam TContext - Arbitrary data made available to all slice components.
90
90
  */
91
91
  export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
92
92
  [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 =
94
94
  /**
95
95
  * React props for the `<SliceZone>` component.
96
96
  *
97
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
98
- * @typeParam TContext - Arbitrary data made available to all Slice components.
97
+ * @typeParam TSlice - The type(s) of a slice in the slice zone.
98
+ * @typeParam TContext - Arbitrary data made available to all slice components.
99
99
  */
100
100
  export type SliceZoneProps<TContext = unknown> = {
101
- /** List of Slice data from the Slice Zone. */
101
+ /** List of slice data from the slice zone. */
102
102
  slices?: SliceZoneLike;
103
- /** A record mapping Slice types to React components. */
103
+ /** A record mapping slice types to React components. */
104
104
  components?: Record<string, ComponentType<any>>;
105
105
  /**
106
106
  * The React component rendered if a component mapping from the `components`
107
107
  * prop cannot be found.
108
108
  */
109
109
  defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
110
- /** Arbitrary data made available to all Slice components. */
110
+ /** Arbitrary data made available to all slice components. */
111
111
  context?: TContext;
112
112
  };
113
113
  /**
114
- * This Slice component can be used as a reminder to provide a proper
114
+ * This slice component can be used as a reminder to provide a proper
115
115
  * implementation.
116
116
  *
117
117
  * This is also the default React component rendered when a component mapping
@@ -121,19 +121,15 @@ export declare const TODOSliceComponent: <TSlice extends SliceLike>({ slice, }:
121
121
  slice: TSlice;
122
122
  }) => import("react/jsx-runtime").JSX.Element | null;
123
123
  /**
124
- * Renders content from a Prismic Slice Zone using React components for each
125
- * type of Slice.
124
+ * Renders slices in a slice zone as React components.
126
125
  *
127
- * If a component is not provided for a type of Slice, a default component can
128
- * be provided. A fallback component is provided by default that will not be
129
- * rendered in a production build of your app.
126
+ * @example
130
127
  *
131
- * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
132
- * @typeParam TContext - Arbitrary data made available to all Slice components.
128
+ * ```tsx
129
+ * <SliceZone slices={page.data.slices} components={components} />;
130
+ * ```
133
131
  *
134
- * @returns The Slice Zone's content as React components.
135
- *
136
- * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}
132
+ * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}
137
133
  */
138
134
  export declare const SliceZone: FC<SliceZoneProps>;
139
135
  export {};
package/dist/SliceZone.js CHANGED
@@ -5,8 +5,8 @@ const TODOSliceComponent = ({ slice }) => {
5
5
  return null;
6
6
  }
7
7
  const type = "slice_type" in slice ? slice.slice_type : slice.type;
8
- console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
9
- return jsxs("section", { "data-slice-zone-todo-component": "", "data-slice-type": type, children: ["Could not find a component for Slice type “", type, "”"] });
8
+ console.warn(`[SliceZone] Could not find a component for slice type "${type}"`, slice);
9
+ return jsxs("section", { "data-slice-zone-todo-component": "", "data-slice-type": type, children: ["Could not find a component for slice type “", type, "”"] });
10
10
  };
11
11
  const SliceZone = (props) => {
12
12
  const { slices = [], components = {}, defaultComponent, context = {} } = props;
@@ -1 +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;"}
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 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;"}
@@ -1,4 +1,4 @@
1
- const version = "3.2.1-alpha.0";
1
+ const version = "3.2.2-pr.236.d65a0c3";
2
2
  export {
3
3
  version
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prismicio/react",
3
- "version": "3.2.1-alpha.0",
3
+ "version": "3.2.2-pr.236.d65a0c3",
4
4
  "description": "React components and hooks to fetch and present Prismic content",
5
5
  "keywords": [
6
6
  "typescript",
@@ -62,9 +62,9 @@
62
62
  "@prismicio/client": "^7.17.0",
63
63
  "@rollup/plugin-typescript": "^12.1.2",
64
64
  "@size-limit/preset-small-lib": "^11.1.6",
65
- "@types/react": "^19.0.8",
66
- "@types/react-dom": "^19.0.3",
67
- "@vitejs/plugin-react": "^4.3.4",
65
+ "@types/react": "^19.2.7",
66
+ "@types/react-dom": "^19.2.3",
67
+ "@vitejs/plugin-react": "^4.7.0",
68
68
  "dotenv": "^16.4.7",
69
69
  "eslint": "^9.19.0",
70
70
  "eslint-config-prettier": "^10.0.1",
@@ -75,8 +75,8 @@
75
75
  "playwright": "^1.50.0",
76
76
  "prettier": "^3.4.2",
77
77
  "prettier-plugin-jsdoc": "^1.3.2",
78
- "react": "^19.0.0",
79
- "react-dom": "^19.0.0",
78
+ "react": "^19.2.1",
79
+ "react-dom": "^19.2.1",
80
80
  "rollup-plugin-preserve-directives": "^0.4.0",
81
81
  "rollup-preserve-directives": "^1.1.3",
82
82
  "size-limit": "^11.1.6",
@@ -29,7 +29,7 @@ export type PrismicImageProps = Omit<
29
29
  ComponentProps<"img">,
30
30
  "src" | "srcset" | "alt"
31
31
  > & {
32
- /** The Prismic Image field or thumbnail to render. */
32
+ /** The Prismic image field or thumbnail to render. */
33
33
  field: ImageFieldImage | null | undefined;
34
34
 
35
35
  /**
@@ -48,7 +48,7 @@ export type PrismicImageProps = Omit<
48
48
  alt?: "";
49
49
 
50
50
  /**
51
- * Declare an image as decorative only if the Image field does not have
51
+ * Declare an image as decorative only if the image field does not have
52
52
  * alternative text by providing `fallbackAlt=""`.
53
53
  *
54
54
  * See:
@@ -64,13 +64,13 @@ export type PrismicImageProps = Omit<
64
64
  } & (
65
65
  | {
66
66
  /**
67
- * Widths used to build a `srcset` value for the Image field.
67
+ * Widths (in pixels) used to build a `srcset` value for the image
68
+ * field.
68
69
  *
69
- * If a `widths` prop is not given or `"defaults"` is passed, the
70
- * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
71
- * 3840.
70
+ * If omitted or set to `"defaults"`, the following widths will be used:
71
+ * 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
72
72
  *
73
- * If the Image field contains responsive views, each responsive view
73
+ * If the image field contains responsive views, each responsive view
74
74
  * can be used as a width in the resulting `srcset` by passing
75
75
  * `"thumbnails"` as the `widths` prop.
76
76
  */
@@ -84,7 +84,7 @@ export type PrismicImageProps = Omit<
84
84
  /** Not used when the `widths` prop is used. */
85
85
  widths?: never;
86
86
  /**
87
- * Pixel densities used to build a `srcset` value for the Image field.
87
+ * Pixel densities used to build a `srcset` value for the image field.
88
88
  *
89
89
  * If a `pixelDensities` prop is passed `"defaults"`, the following
90
90
  * pixel densities will be used: 1, 2, 3.
@@ -98,23 +98,15 @@ export type PrismicImageProps = Omit<
98
98
  );
99
99
 
100
100
  /**
101
- * React component that renders an image from a Prismic Image field or one of
102
- * its thumbnails. It will automatically set the `alt` attribute using the Image
103
- * field's `alt` property.
101
+ * Renders an optimized image from a Prismic image field.
104
102
  *
105
- * By default, a widths-based srcset will be used to support responsive images.
106
- * This ensures only the smallest image needed for a browser is downloaded.
103
+ * @example
107
104
  *
108
- * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default
109
- * pixel densities can be used by using `pixelDensities="defaults"`.
105
+ * ```tsx
106
+ * <PrismicImage field={slice.primary.photo} />;
107
+ * ```
110
108
  *
111
- * **Note**: If you are using a framework that has a native image component,
112
- * such as Next.js and Gatsby, prefer using those image components instead. They
113
- * can provide deeper framework integration than `<PrismicImage>`.
114
- *
115
- * @param props - Props for the component.
116
- *
117
- * @returns A responsive image component for the given Image field.
109
+ * @see Learn how to optimize images with imgix, use responsive images, and use framework-specific image components: {@link https://prismic.io/docs/fields/image}
118
110
  */
119
111
  export const PrismicImage: FC<PrismicImageProps> = forwardRef(
120
112
  function PrismicImage(
@@ -37,7 +37,7 @@ export interface LinkProps {
37
37
  */
38
38
  rel?: string;
39
39
 
40
- /** Children for the component. * */
40
+ /** Children for the component. */
41
41
  children?: ReactNode;
42
42
  }
43
43
 
@@ -56,13 +56,13 @@ export type PrismicLinkProps<
56
56
  rel?: string | AsLinkAttrsConfig["rel"];
57
57
 
58
58
  /**
59
- * The Link Resolver used to resolve links.
59
+ * The link resolver used to resolve links.
60
60
  *
61
61
  * @remarks
62
- * If your app uses Route Resolvers when querying for your Prismic
63
- * repository's content, a Link Resolver does not need to be provided.
62
+ * If your app uses route resolvers when querying for your Prismic
63
+ * repository's content, a link resolver does not need to be provided.
64
64
  *
65
- * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
65
+ * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
66
66
  */
67
67
  linkResolver?: LinkResolverFunction;
68
68
 
@@ -100,6 +100,17 @@ export type PrismicLinkProps<
100
100
  }
101
101
  );
102
102
 
103
+ /**
104
+ * Renders a link from a Prismic link field or page.
105
+ *
106
+ * @example
107
+ *
108
+ * ```tsx
109
+ * <PrismicLink field={slice.primary.link}>Click here</PrismicLink>;
110
+ * ```
111
+ *
112
+ * @see Learn how to display links and use variants for styling: {@link https://prismic.io/docs/fields/link}
113
+ */
103
114
  export const PrismicLink = forwardRef(function PrismicLink<
104
115
  InternalComponentProps = ComponentProps<typeof defaultComponent>,
105
116
  ExternalComponentProps = ComponentProps<typeof defaultComponent>,
@@ -26,39 +26,39 @@ import { devMsg } from "./lib/devMsg.js";
26
26
  import { LinkProps, PrismicLink } from "./PrismicLink.js";
27
27
 
28
28
  /**
29
- * A function mapping Rich Text block types to React Components. It is used to
30
- * render Rich Text or Title fields.
29
+ * A function mapping rich text block types to React Components. It is used to
30
+ * render rich text fields.
31
31
  *
32
- * @see Templating rich text and title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
32
+ * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
33
33
  */
34
34
  export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
35
35
 
36
36
  /**
37
- * A map of Rich Text block types to React Components. It is used to render Rich
38
- * Text or Title fields.
37
+ * A map of rich text block types to React Components. It is used to render rich
38
+ * text fields.
39
39
  *
40
- * @see Templating Rich Text and Title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
40
+ * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
41
41
  */
42
42
  export type JSXMapSerializer = RichTextMapSerializer<ReactNode>;
43
43
 
44
44
  /** Props for `<PrismicRichText>`. */
45
45
  export type PrismicRichTextProps = {
46
- /** The Prismic Rich Text field to render. */
46
+ /** The Prismic rich text field to render. */
47
47
  field: RichTextField | null | undefined;
48
48
 
49
49
  /**
50
- * The Link Resolver used to resolve links.
50
+ * The link resolver used to resolve links.
51
51
  *
52
52
  * @remarks
53
- * If your app uses Route Resolvers when querying for your Prismic
54
- * repository's content, a Link Resolver does not need to be provided.
53
+ * If your app uses route resolvers when querying for your Prismic
54
+ * repository's content, a link resolver does not need to be provided.
55
55
  *
56
- * @see Learn about Link Resolvers and Route Resolvers {@link https://io/docs/core-concepts/link-resolver-route-resolver}
56
+ * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
57
57
  */
58
58
  linkResolver?: LinkResolverFunction;
59
59
 
60
60
  /**
61
- * A map or function that maps a Rich Text block to a React component.
61
+ * A map or function that maps a rich text block to a React component.
62
62
  *
63
63
  * @remarks
64
64
  * Prefer using a map serializer over the function serializer when possible.
@@ -243,42 +243,15 @@ const createDefaultSerializer = (
243
243
  });
244
244
 
245
245
  /**
246
- * React component that renders content from a Prismic Rich Text field. By
247
- * default, HTML elements are rendered for each piece of content. A `heading1`
248
- * block will render an `<h1>` HTML element, for example. Links will use
249
- * `<PrismicLink>` by default which can be customized using the
250
- * `internalLinkComponent` and `externalLinkComponent` props.
246
+ * Renders content from a Prismic rich text field as React components.
251
247
  *
252
- * To customize the components that are rendered, provide a map or function
253
- * serializer to the `components` prop.
248
+ * @example
254
249
  *
255
- * @remarks
256
- * This component returns a React fragment with no wrapping element around the
257
- * content. If you need a wrapper, add a component around `<PrismicRichText>`.
258
- *
259
- * @example Rendering a Rich Text field using the default HTMl elements.
260
- *
261
- * ```jsx
262
- * <PrismicRichText field={document.data.content} />;
250
+ * ```tsx
251
+ * <PrismicRichText field={slice.primary.text} />;
263
252
  * ```
264
253
  *
265
- * @example Rendering a Rich Text field using a custom set of React components.
266
- *
267
- * ```jsx
268
- * <PrismicRichText
269
- * field={document.data.content}
270
- * components={{
271
- * heading1: ({ children }) => <Heading>{children}</Heading>,
272
- * }}
273
- * />;
274
- * ```
275
- *
276
- * @param props - Props for the component.
277
- *
278
- * @returns The Rich Text field's content as React components.
279
- *
280
- * @see Learn about Rich Text fields {@link https://io/docs/core-concepts/rich-text-title}
281
- * @see Learn about Rich Text serializers {@link https://io/docs/core-concepts/html-serializer}
254
+ * @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
282
255
  */
283
256
  export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
284
257
  const {
@@ -60,37 +60,15 @@ export type PrismicTableProps = {
60
60
  };
61
61
 
62
62
  /**
63
- * React component that renders content from a Prismic table field. By default,
64
- * HTML elements are rendered for each piece of content. A `tbody` block will
65
- * render a `<tbody>` HTML element, for example.
63
+ * Renders content from a Prismic table field as React components.
66
64
  *
67
- * To customize the components that are rendered, provide a map serializer to
68
- * the `components` prop.
65
+ * @example
69
66
  *
70
- * @example Rendering a table field using the default HTMl elements.
71
- *
72
- * ```jsx
73
- * <PrismicTable field={document.data.my_table} />;
74
- * ```
75
- *
76
- * @example Rendering a table field using a custom set of React components.
77
- *
78
- * ```jsx
79
- * <PrismicTable
80
- * field={document.data.my_table}
81
- * components={{
82
- * tbody: ({ children }) => (
83
- * <tbody className="my-class">{children}</tbody>
84
- * ),
85
- * }}
86
- * />;
67
+ * ```tsx
68
+ * <PrismicTable field={slice.primary.pricing_table} />;
87
69
  * ```
88
70
  *
89
- * @param props - Props for the component.
90
- *
91
- * @returns The table field's content as React components.
92
- *
93
- * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}
71
+ * @see Learn how to style tables and customize table element components: {@link https://prismic.io/docs/fields/table}
94
72
  */
95
73
  export const PrismicTable: FC<PrismicTableProps> = (props) => {
96
74
  const { field, components, fallback = null } = props;
@@ -6,7 +6,7 @@ import { devMsg } from "./lib/devMsg.js";
6
6
 
7
7
  /** Props for `<PrismicText>`. */
8
8
  export type PrismicTextProps = {
9
- /** The Prismic Rich Text field to render. */
9
+ /** The Prismic rich text field to render. */
10
10
  field: RichTextField | null | undefined;
11
11
 
12
12
  /**
@@ -20,24 +20,15 @@ export type PrismicTextProps = {
20
20
  };
21
21
 
22
22
  /**
23
- * React component that renders content from a Prismic Rich Text field as plain
24
- * text.
23
+ * Renders content from a Prismic rich text field as plain text (no HTML).
25
24
  *
26
- * @remarks
27
- * This component returns a React fragment with no wrapping element around the
28
- * content. If you need a wrapper, add a component around `<PrismicText>`.
25
+ * @example
29
26
  *
30
- * @example Rendering a Rich Text field as plain text.
31
- *
32
- * ```jsx
33
- * <PrismicText field={document.data.content} />;
27
+ * ```tsx
28
+ * <PrismicText field={slice.primary.text} />;
34
29
  * ```
35
30
  *
36
- * @param props - Props for the component.
37
- *
38
- * @returns The Rich Text field's content as plain text.
39
- *
40
- * @see Learn about Rich Text fields {@link https://io/docs/core-concepts/rich-text-title}
31
+ * @see Learn how to display rich text as plain text or React components: {@link https://prismic.io/docs/fields/rich-text}
41
32
  */
42
33
  export const PrismicText: FC<PrismicTextProps> = (props) => {
43
34
  const { field, fallback, separator } = props;
@@ -56,7 +47,7 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
56
47
  if (typeof props.field === "string") {
57
48
  if (DEV) {
58
49
  console.error(
59
- `[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(
50
+ `[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(
60
51
  "prismictext-works-only-with-rich-text-and-title-fields",
61
52
  )}`,
62
53
  props.field,
@@ -13,8 +13,15 @@ export type PrismicToolbarProps = {
13
13
  };
14
14
 
15
15
  /**
16
- * React component that injects the Prismic Toolbar into the app. This component
17
- * can be placed anywhere in the React tree.
16
+ * Renders the Prismic Toolbar script to support draft previews.
17
+ *
18
+ * @example
19
+ *
20
+ * ```tsx
21
+ * <PrismicToolbar repositoryName="my-repo" />;
22
+ * ```
23
+ *
24
+ * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}
18
25
  */
19
26
  export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
20
27
  const { repositoryName } = props;