@prismicio/react 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -5,9 +5,6 @@ import * as prismicT from '@prismicio/types';
 import * as prismicR from '@prismicio/richtext';
 export { Element } from '@prismicio/richtext';
 
-declare module "react" {
-    function forwardRef<T, P = Record<string, never>>(render: (props: P, ref: React.Ref<T>) => JSX.Element | null): (props: P & React.RefAttributes<T>) => JSX.Element | null;
-}
 /**
  * Props provided to a component when rendered with `<PrismicLink>`.
  */
@@ -34,7 +31,7 @@ interface LinkProps {
 /**
  * Props for `<PrismicLink>`.
  */
-declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction = prismicH.LinkResolverFunction> = Omit<React.ComponentProps<InternalComponent> & React.ComponentProps<ExternalComponent>, keyof LinkProps> & {
+declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = Omit<React.ComponentPropsWithoutRef<InternalComponent> & React.ComponentPropsWithoutRef<ExternalComponent>, keyof LinkProps> & {
     /**
      * The Link Resolver used to resolve links.
      *
@@ -87,7 +84,9 @@ declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkPr
      */
     href: string | null | undefined;
 });
-declare const PrismicLink: <InternalComponent extends React.ElementType<LinkProps> = "a", ExternalComponent extends React.ElementType<LinkProps> = "a", LinkResolverFunction extends prismicH.LinkResolverFunction<string> = prismicH.LinkResolverFunction<string>, Ref extends (InternalComponent extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[InternalComponent] : any) | (ExternalComponent extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[ExternalComponent] : any) = (InternalComponent extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[InternalComponent] : any) | (ExternalComponent extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[ExternalComponent] : any)>(props: PrismicLinkProps<InternalComponent, ExternalComponent, LinkResolverFunction> & React.RefAttributes<Ref>) => JSX.Element | null;
+declare const PrismicLink: <InternalComponent extends React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction<any>>(props: PrismicLinkProps<InternalComponent, ExternalComponent, LinkResolverFunction> & {
+    ref?: React.Ref<Element> | undefined;
+}) => JSX.Element | null;
 
 /**
  * A function mapping Rich Text block types to React Components. It is used to
@@ -112,7 +111,7 @@ declare type PrismicClientHookState = "idle" | "loading" | "loaded" | "failed";
  * React context value containing shared configuration for `@prismicio/react`
  * components and hooks.
  */
-declare type PrismicContextValue = {
+declare type PrismicContextValue<LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = {
     /**
      * A `@prismicio/client` instance used to fetch content from a Prismic
      * repository. This is used by `@prismicio/react` hooks, such as
@@ -127,7 +126,7 @@ declare type PrismicContextValue = {
      * 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}
      */
-    linkResolver?: prismicH.LinkResolverFunction;
+    linkResolver?: LinkResolverFunction;
     /**
      * A map or function that maps a Rich Text block to a React component.
      *
@@ -171,14 +170,14 @@ declare type PrismicContextValue = {
 /**
  * Props for `<PrismicProvider>`.
  */
-declare type PrismicProviderProps = PrismicContextValue;
+declare type PrismicProviderProps<LinkResolverFunction extends prismicH.LinkResolverFunction> = PrismicContextValue<LinkResolverFunction>;
 /**
  * React context provider to share configuration for `@prismicio/react`
  * components and hooks.
  *
  * @returns A React context provider with shared configuration.
  */
-declare const PrismicProvider: ({ client, linkResolver, richTextComponents, internalLinkComponent, externalLinkComponent, children, }: PrismicProviderProps) => JSX.Element;
+declare const PrismicProvider: <LinkResolverFunction extends prismicH.LinkResolverFunction<any>>({ client, linkResolver, richTextComponents, internalLinkComponent, externalLinkComponent, children, }: PrismicProviderProps<LinkResolverFunction>) => JSX.Element;
 
 /**
  * React hook used to read shared configuration for `@prismicio/react`
@@ -240,7 +239,7 @@ declare const PrismicText: (props: PrismicTextProps) => JSX.Element | null;
 /**
  * Props for `<PrismicRichText>`.
  */
-declare type PrismicRichTextProps = {
+declare type PrismicRichTextProps<LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = {
     /**
      * The Prismic Rich Text field to render.
      */
@@ -253,7 +252,7 @@ declare type PrismicRichTextProps = {
      * 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}
      */
-    linkResolver?: PrismicLinkProps["linkResolver"];
+    linkResolver?: LinkResolverFunction;
     /**
      * A function that maps a Rich Text block to a React component.
      *
@@ -282,7 +281,7 @@ declare type PrismicRichTextProps = {
      * (type, node, content, children) => {
      * 	switch (type) {
      * 		case "heading1": {
-     * 			return <Heading>{chidlren}</Heading>;
+     * 			return <Heading>{children}</Heading>;
      * 		}
      * 	}
      * };
@@ -301,6 +300,11 @@ declare type PrismicRichTextProps = {
      * @defaultValue `<a>`
      */
     externalLinkComponent?: PrismicLinkProps["externalComponent"];
+    /**
+     * The value to be rendered when the field is empty. If a fallback is not
+     * given, `null` will be rendered.
+     */
+    fallback?: React.ReactNode;
 };
 /**
  * React component that renders content from a Prismic Rich Text field. By
@@ -342,7 +346,7 @@ declare type PrismicRichTextProps = {
  * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}
  * @see Learn about Rich Text serializers {@link https://prismic.io/docs/core-concepts/html-serializer}
  */
-declare const PrismicRichText: (props: PrismicRichTextProps) => JSX.Element | null;
+declare const PrismicRichText: <LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction<string>>(props: PrismicRichTextProps<LinkResolverFunction>) => JSX.Element | null;
 
 declare type WordSeparators = "-" | "_" | " ";
 declare type Split<S extends string, Delimiter extends string> = S extends `${infer Head}${Delimiter}${infer Tail}` ? [Head, ...Split<Tail, Delimiter>] : S extends Delimiter ? [] : [S];
@@ -362,20 +366,47 @@ declare type CamelCase<K> = K extends string ? CamelCaseStringArray<Split<K exte
  */
 declare type PascalCase<Value> = CamelCase<Value> extends string ? Capitalize<CamelCase<Value>> : CamelCase<Value>;
 
+/**
+ * Returns the type of a `SliceLike` type.
+ *
+ * @typeParam Slice - The Slice from which the type will be extracted.
+ */
+declare type ExtractSliceType<Slice extends SliceLike> = Slice extends SliceLikeRestV2 ? Slice["slice_type"] : Slice extends SliceLikeGraphQL ? Slice["type"] : never;
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * Rest API V2 for the `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+declare type SliceLikeRestV2<SliceType extends string = string> = {
+    slice_type: prismicT.Slice<SliceType>["slice_type"];
+};
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+declare type SliceLikeGraphQL<SliceType extends string = string> = {
+    type: prismicT.Slice<SliceType>["slice_type"];
+};
 /**
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone>` component.
  *
- * If using Prismic's REST API, use the `Slice` export from `@prismicio/types`
- * for a full interface.
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-declare type SliceLike<SliceType extends string = string> = Pick<prismicT.Slice<SliceType>, "slice_type">;
+declare type SliceLike<SliceType extends string = string> = SliceLikeRestV2<SliceType> | SliceLikeGraphQL<SliceType>;
 /**
  * A looser version of the `SliceZone` type from `@prismicio/types` using `SliceLike`.
  *
- * If using Prismic's REST API, use the `SliceZone` export from
+ * If using Prismic's Rest API V2, use the `SliceZone` export from
  * `@prismicio/types` for the full type.
  *
  * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
@@ -422,7 +453,7 @@ declare type SliceComponentType<TSlice extends SliceLike = SliceLike, TContext =
  * @typeParam TContext - Arbitrary data made available to all Slice components.
  */
 declare type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
-    [SliceType in keyof Record<TSlice["slice_type"], never>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
+    [SliceType in ExtractSliceType<TSlice>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
 };
 /**
  * This Slice component can be used as a reminder to provide a proper implementation.
@@ -442,7 +473,7 @@ declare type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
     /**
      * The name of the Slice.
      */
-    sliceName: PascalCase<TSlice["slice_type"]>;
+    sliceName: PascalCase<ExtractSliceType<TSlice>>;
     /**
      * The index of the Slice in the Slice Zone.
      */

package/dist/index.js

@@ -237,7 +237,7 @@ const PrismicRichText = (props) => {
       });
       return /* @__PURE__ */ React.createElement(React.Fragment, null, serialized);
     } else {
-      return null;
+      return props.fallback != null ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.fallback) : null;
     }
   }, [
     props.field,
@@ -245,6 +245,7 @@ const PrismicRichText = (props) => {
     props.externalLinkComponent,
     props.components,
     props.linkResolver,
+    props.fallback,
     context.linkResolver,
     context.richTextComponents
   ]);
@@ -260,13 +261,14 @@ const pascalCase = (input) => {
 const TODOSliceComponent = __PRODUCTION__ ? () => null : ({
   slice
 }) => {
+  const type = "slice_type" in slice ? slice.slice_type : slice.type;
   React.useEffect(() => {
-    console.warn(`[SliceZone] Could not find a component for Slice type "${slice.slice_type}"`, slice);
-  }, [slice]);
+    console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
+  }, [slice, type]);
   return /* @__PURE__ */ React.createElement("section", {
     "data-slice-zone-todo-component": "",
-    "data-slice-type": slice.slice_type
-  }, "Could not find a component for Slice type \u201C", slice.slice_type, "\u201D");
+    "data-slice-type": type
+  }, "Could not find a component for Slice type \u201C", type, "\u201D");
 };
 const SliceZone = ({
   slices = [],
@@ -277,11 +279,12 @@ const SliceZone = ({
 }) => {
   const renderedSlices = React.useMemo(() => {
     return slices.map((slice, index) => {
-      let Comp = components[slice.slice_type] || defaultComponent;
+      const type = "slice_type" in slice ? slice.slice_type : slice.type;
+      let Comp = components[type] || defaultComponent;
       if (resolver) {
         const resolvedComp = resolver({
           slice,
-          sliceName: pascalCase(slice.slice_type),
+          sliceName: pascalCase(type),
           i: index
         });
         if (resolvedComp) {