@prismicio/react 3.1.0 → 3.2.1-alpha.0

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.
@@ -1,4 +1,4 @@
1
- import { ComponentProps, ComponentType, ElementType, ForwardedRef, HTMLAttributeAnchorTarget, ReactNode } from "react";
1
+ import { ComponentProps, ComponentType, ForwardedRef, HTMLAttributeAnchorTarget, ReactNode } from "react";
2
2
  import { type LinkField, type LinkResolverFunction, type PrismicDocument, type AsLinkAttrsConfig } from "@prismicio/client";
3
3
  /** The default component rendered for internal and external links. */
4
4
  declare const defaultComponent = "a";
@@ -42,7 +42,7 @@ export type PrismicLinkProps<InternalComponentProps = ComponentProps<typeof defa
42
42
  * If your app uses a client-side router that requires a special Link
43
43
  * component, provide the Link component to this prop.
44
44
  */
45
- internalComponent?: ElementType<InternalComponentProps>;
45
+ internalComponent?: ComponentType<InternalComponentProps>;
46
46
  /** The component rendered for external URLs. Defaults to `<a>`. */
47
47
  externalComponent?: ComponentType<ExternalComponentProps>;
48
48
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"PrismicLink.js","sources":["../src/PrismicLink.tsx"],"sourcesContent":["import {\n\tComponentProps,\n\tComponentType,\n\tElementType,\n\tForwardedRef,\n\tHTMLAttributeAnchorTarget,\n\tReactNode,\n\tforwardRef,\n} from \"react\";\nimport {\n\ttype LinkField,\n\ttype LinkResolverFunction,\n\ttype PrismicDocument,\n\tasLinkAttrs,\n\ttype AsLinkAttrsConfig,\n} from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\nimport { devMsg } from \"./lib/devMsg.js\";\n\n/** The default component rendered for internal and external links. */\nconst defaultComponent = \"a\";\n\n/** Props provided to a component when rendered with `<PrismicLink>`. */\nexport interface LinkProps {\n\t/** The URL to link. */\n\thref: string;\n\n\t/**\n\t * The `target` attribute for anchor elements. If the Prismic field is\n\t * configured to open in a new window, this prop defaults to `_blank`.\n\t */\n\ttarget?: HTMLAttributeAnchorTarget;\n\n\t/**\n\t * The `rel` attribute for anchor elements. If the `target` prop is set to\n\t * `\"_blank\"`, this prop defaults to `\"noopener noreferrer\"`.\n\t */\n\trel?: string;\n\n\t/** Children for the component. * */\n\tchildren?: ReactNode;\n}\n\nexport type PrismicLinkProps<\n\tInternalComponentProps = ComponentProps<typeof defaultComponent>,\n\tExternalComponentProps = ComponentProps<typeof defaultComponent>,\n> = Omit<\n\tInternalComponentProps & ExternalComponentProps,\n\t\"rel\" | \"href\" | \"children\"\n> & {\n\t/**\n\t * The `rel` attribute for the link. By default, `\"noreferrer\"` is provided if\n\t * the link's URL is external. This prop can be provided a function to use the\n\t * link's metadata to determine the `rel` value.\n\t */\n\trel?: string | AsLinkAttrsConfig[\"rel\"];\n\n\t/**\n\t * The Link Resolver used to resolve links.\n\t *\n\t * @remarks\n\t * If your app uses Route Resolvers when querying for your Prismic\n\t * repository's content, a Link Resolver does not need to be provided.\n\t *\n\t * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction;\n\n\t/**\n\t * The component rendered for internal URLs. Defaults to `<a>`.\n\t *\n\t * If your app uses a client-side router that requires a special Link\n\t * component, provide the Link component to this prop.\n\t */\n\tinternalComponent?: ElementType<InternalComponentProps>;\n\n\t/** The component rendered for external URLs. Defaults to `<a>`. */\n\texternalComponent?: ComponentType<ExternalComponentProps>;\n\n\t/**\n\t * The children to render for the link. If no children are provided, the\n\t * link's `text` property will be used.\n\t */\n\tchildren?: ReactNode;\n} & (\n\t\t| {\n\t\t\t\tdocument: PrismicDocument | null | undefined;\n\t\t\t\thref?: never;\n\t\t\t\tfield?: never;\n\t\t }\n\t\t| {\n\t\t\t\tfield: LinkField | null | undefined;\n\t\t\t\thref?: never;\n\t\t\t\tdocument?: never;\n\t\t }\n\t\t| {\n\t\t\t\thref: LinkProps[\"href\"];\n\t\t\t\tfield?: LinkField | null | undefined;\n\t\t\t\tdocument?: never;\n\t\t }\n\t);\n\nexport const PrismicLink = forwardRef(function PrismicLink<\n\tInternalComponentProps = ComponentProps<typeof defaultComponent>,\n\tExternalComponentProps = ComponentProps<typeof defaultComponent>,\n>(\n\tprops: PrismicLinkProps<InternalComponentProps, ExternalComponentProps>,\n\tref: ForwardedRef<Element>,\n) {\n\tconst {\n\t\tfield,\n\t\tdocument: doc,\n\t\tlinkResolver,\n\t\tinternalComponent,\n\t\texternalComponent,\n\t\tchildren,\n\t\t...restProps\n\t} = props;\n\n\tif (DEV) {\n\t\tif (field) {\n\t\t\tif (!field.link_type) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[PrismicLink] This \"field\" prop value caused an error to be thrown.\\n`,\n\t\t\t\t\tfield,\n\t\t\t\t);\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`[PrismicLink] The provided field is missing required properties to properly render a link. The link will not render. For more details, see ${devMsg(\n\t\t\t\t\t\t\"missing-link-properties\",\n\t\t\t\t\t)}`,\n\t\t\t\t);\n\t\t\t} else if (\n\t\t\t\t(\"text\" in field\n\t\t\t\t\t? Object.keys(field).length > 2\n\t\t\t\t\t: Object.keys(field).length > 1) &&\n\t\t\t\t!(\"url\" in field || \"uid\" in field || \"id\" in field)\n\t\t\t) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[PrismicLink] The provided field is missing required properties to properly render a link. The link may not render correctly. For more details, see ${devMsg(\n\t\t\t\t\t\t\"missing-link-properties\",\n\t\t\t\t\t)}`,\n\t\t\t\t\tfield,\n\t\t\t\t);\n\t\t\t}\n\t\t} else if (doc) {\n\t\t\tif (!(\"url\" in doc || \"id\" in doc)) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[PrismicLink] The provided document is missing required properties to properly render a link. The link may not render correctly. For more details, see ${devMsg(\n\t\t\t\t\t\t\"missing-link-properties\",\n\t\t\t\t\t)}`,\n\t\t\t\t\tdoc,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst {\n\t\thref: computedHref,\n\t\trel: computedRel,\n\t\t...attrs\n\t} = asLinkAttrs(field ?? doc, {\n\t\tlinkResolver,\n\t\trel: typeof restProps.rel === \"function\" ? restProps.rel : undefined,\n\t});\n\n\tlet rel: string | undefined = computedRel;\n\tif (\"rel\" in restProps && typeof restProps.rel !== \"function\") {\n\t\trel = restProps.rel;\n\t}\n\n\tconst href = (\"href\" in restProps ? restProps.href : computedHref) || \"\";\n\n\tconst InternalComponent = (internalComponent ||\n\t\tdefaultComponent) as ComponentType<LinkProps>;\n\tconst ExternalComponent = (externalComponent ||\n\t\tdefaultComponent) as ComponentType<LinkProps>;\n\tconst Component = href\n\t\t? isInternalURL(href)\n\t\t\t? InternalComponent\n\t\t\t: ExternalComponent\n\t\t: InternalComponent;\n\n\treturn (\n\t\t<Component ref={ref} {...attrs} {...restProps} href={href} rel={rel}>\n\t\t\t{\"children\" in props ? children : field?.text}\n\t\t</Component>\n\t);\n}) as <\n\tInternalComponentProps = ComponentProps<typeof defaultComponent>,\n\tExternalComponentProps = ComponentProps<typeof defaultComponent>,\n>(\n\tprops: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {\n\t\tref?: ForwardedRef<Element>;\n\t},\n) => ReactNode;\n\n/**\n * Determines if a URL is internal or external.\n *\n * @param url - The URL to check if internal or external.\n *\n * @returns `true` if `url` is internal, `false` otherwise.\n */\n// TODO: This does not detect all relative URLs as internal such as `about` or `./about`. This function assumes relative URLs start with a \"/\" or \"#\"`.\nexport function isInternalURL(url: string): boolean {\n\tconst isInternal = /^(\\/(?!\\/)|#)/.test(url);\n\tconst isSpecialLink = !isInternal && !/^https?:\\/\\//.test(url);\n\n\treturn isInternal && !isSpecialLink;\n}\n"],"names":["PrismicLink","_jsx"],"mappings":";;;;;AAqBA,MAAM,mBAAmB;AAkFlB,MAAM,cAAc,WAAW,SAASA,aAI9C,OACA,KAA0B;AAEpB,QAAA,EACL,OACA,UAAU,KACV,cACA,mBACA,mBACA,UACA,GAAG,UAAA,IACA;AAEJ,MAAI,KAAK;AACR,QAAI,OAAO;AACN,UAAA,CAAC,MAAM,WAAW;AACrB,gBAAQ,MACP;AAAA,GACA,KAAK;AAEN,cAAM,IAAI,MACT,8IAA8I,OAC7I,yBAAyB,CACzB,EAAE;AAAA,MAAA,YAGH,UAAU,QACR,OAAO,KAAK,KAAK,EAAE,SAAS,IAC5B,OAAO,KAAK,KAAK,EAAE,SAAS,MAC/B,EAAE,SAAS,SAAS,SAAS,SAAS,QAAQ,QAC7C;AACD,gBAAQ,KACP,uJAAuJ,OACtJ,yBAAyB,CACzB,IACD,KAAK;AAAA,MAAA;AAAA,eAGG,KAAK;AACf,UAAI,EAAE,SAAS,OAAO,QAAQ,MAAM;AACnC,gBAAQ,KACP,0JAA0J,OACzJ,yBAAyB,CACzB,IACD,GAAG;AAAA,MAAA;AAAA,IAEL;AAAA,EACD;AAGK,QAAA,EACL,MAAM,cACN,KAAK,aACL,GAAG,UACA,YAAY,SAAS,KAAK;AAAA,IAC7B;AAAA,IACA,KAAK,OAAO,UAAU,QAAQ,aAAa,UAAU,MAAM;AAAA,EAAA,CAC3D;AAED,MAAI,MAA0B;AAC9B,MAAI,SAAS,aAAa,OAAO,UAAU,QAAQ,YAAY;AAC9D,UAAM,UAAU;AAAA,EAAA;AAGjB,QAAM,QAAQ,UAAU,YAAY,UAAU,OAAO,iBAAiB;AAEtE,QAAM,oBAAqB,qBAC1B;AACD,QAAM,oBAAqB,qBAC1B;AACD,QAAM,YAAY,OACf,cAAc,IAAI,IACjB,oBACA,oBACD;AAEH,SACCC,IAAC,WAAS,EAAC,KAAc,GAAA,UAAW,WAAW,MAAY,eACzD,cAAc,QAAQ,WAAW,+BAAO,MAAI;AAGhD,CAAC;AAiBK,SAAU,cAAc,KAAW;AAClC,QAAA,aAAa,gBAAgB,KAAK,GAAG;AAC3C,QAAM,gBAAgB,CAAC,cAAc,CAAC,eAAe,KAAK,GAAG;AAE7D,SAAO,cAAc,CAAC;AACvB;"}
1
+ {"version":3,"file":"PrismicLink.js","sources":["../src/PrismicLink.tsx"],"sourcesContent":["import {\n\tComponentProps,\n\tComponentType,\n\tForwardedRef,\n\tHTMLAttributeAnchorTarget,\n\tReactNode,\n\tforwardRef,\n} from \"react\";\nimport {\n\ttype LinkField,\n\ttype LinkResolverFunction,\n\ttype PrismicDocument,\n\tasLinkAttrs,\n\ttype AsLinkAttrsConfig,\n} from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\nimport { devMsg } from \"./lib/devMsg.js\";\n\n/** The default component rendered for internal and external links. */\nconst defaultComponent = \"a\";\n\n/** Props provided to a component when rendered with `<PrismicLink>`. */\nexport interface LinkProps {\n\t/** The URL to link. */\n\thref: string;\n\n\t/**\n\t * The `target` attribute for anchor elements. If the Prismic field is\n\t * configured to open in a new window, this prop defaults to `_blank`.\n\t */\n\ttarget?: HTMLAttributeAnchorTarget;\n\n\t/**\n\t * The `rel` attribute for anchor elements. If the `target` prop is set to\n\t * `\"_blank\"`, this prop defaults to `\"noopener noreferrer\"`.\n\t */\n\trel?: string;\n\n\t/** Children for the component. * */\n\tchildren?: ReactNode;\n}\n\nexport type PrismicLinkProps<\n\tInternalComponentProps = ComponentProps<typeof defaultComponent>,\n\tExternalComponentProps = ComponentProps<typeof defaultComponent>,\n> = Omit<\n\tInternalComponentProps & ExternalComponentProps,\n\t\"rel\" | \"href\" | \"children\"\n> & {\n\t/**\n\t * The `rel` attribute for the link. By default, `\"noreferrer\"` is provided if\n\t * the link's URL is external. This prop can be provided a function to use the\n\t * link's metadata to determine the `rel` value.\n\t */\n\trel?: string | AsLinkAttrsConfig[\"rel\"];\n\n\t/**\n\t * The Link Resolver used to resolve links.\n\t *\n\t * @remarks\n\t * If your app uses Route Resolvers when querying for your Prismic\n\t * repository's content, a Link Resolver does not need to be provided.\n\t *\n\t * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction;\n\n\t/**\n\t * The component rendered for internal URLs. Defaults to `<a>`.\n\t *\n\t * If your app uses a client-side router that requires a special Link\n\t * component, provide the Link component to this prop.\n\t */\n\tinternalComponent?: ComponentType<InternalComponentProps>;\n\n\t/** The component rendered for external URLs. Defaults to `<a>`. */\n\texternalComponent?: ComponentType<ExternalComponentProps>;\n\n\t/**\n\t * The children to render for the link. If no children are provided, the\n\t * link's `text` property will be used.\n\t */\n\tchildren?: ReactNode;\n} & (\n\t\t| {\n\t\t\t\tdocument: PrismicDocument | null | undefined;\n\t\t\t\thref?: never;\n\t\t\t\tfield?: never;\n\t\t }\n\t\t| {\n\t\t\t\tfield: LinkField | null | undefined;\n\t\t\t\thref?: never;\n\t\t\t\tdocument?: never;\n\t\t }\n\t\t| {\n\t\t\t\thref: LinkProps[\"href\"];\n\t\t\t\tfield?: LinkField | null | undefined;\n\t\t\t\tdocument?: never;\n\t\t }\n\t);\n\nexport const PrismicLink = forwardRef(function PrismicLink<\n\tInternalComponentProps = ComponentProps<typeof defaultComponent>,\n\tExternalComponentProps = ComponentProps<typeof defaultComponent>,\n>(\n\tprops: PrismicLinkProps<InternalComponentProps, ExternalComponentProps>,\n\tref: ForwardedRef<Element>,\n) {\n\tconst {\n\t\tfield,\n\t\tdocument: doc,\n\t\tlinkResolver,\n\t\tinternalComponent,\n\t\texternalComponent,\n\t\tchildren,\n\t\t...restProps\n\t} = props;\n\n\tif (DEV) {\n\t\tif (field) {\n\t\t\tif (!field.link_type) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[PrismicLink] This \"field\" prop value caused an error to be thrown.\\n`,\n\t\t\t\t\tfield,\n\t\t\t\t);\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`[PrismicLink] The provided field is missing required properties to properly render a link. The link will not render. For more details, see ${devMsg(\n\t\t\t\t\t\t\"missing-link-properties\",\n\t\t\t\t\t)}`,\n\t\t\t\t);\n\t\t\t} else if (\n\t\t\t\t(\"text\" in field\n\t\t\t\t\t? Object.keys(field).length > 2\n\t\t\t\t\t: Object.keys(field).length > 1) &&\n\t\t\t\t!(\"url\" in field || \"uid\" in field || \"id\" in field)\n\t\t\t) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[PrismicLink] The provided field is missing required properties to properly render a link. The link may not render correctly. For more details, see ${devMsg(\n\t\t\t\t\t\t\"missing-link-properties\",\n\t\t\t\t\t)}`,\n\t\t\t\t\tfield,\n\t\t\t\t);\n\t\t\t}\n\t\t} else if (doc) {\n\t\t\tif (!(\"url\" in doc || \"id\" in doc)) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[PrismicLink] The provided document is missing required properties to properly render a link. The link may not render correctly. For more details, see ${devMsg(\n\t\t\t\t\t\t\"missing-link-properties\",\n\t\t\t\t\t)}`,\n\t\t\t\t\tdoc,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst {\n\t\thref: computedHref,\n\t\trel: computedRel,\n\t\t...attrs\n\t} = asLinkAttrs(field ?? doc, {\n\t\tlinkResolver,\n\t\trel: typeof restProps.rel === \"function\" ? restProps.rel : undefined,\n\t});\n\n\tlet rel: string | undefined = computedRel;\n\tif (\"rel\" in restProps && typeof restProps.rel !== \"function\") {\n\t\trel = restProps.rel;\n\t}\n\n\tconst href = (\"href\" in restProps ? restProps.href : computedHref) || \"\";\n\n\tconst InternalComponent = (internalComponent ||\n\t\tdefaultComponent) as ComponentType<LinkProps>;\n\tconst ExternalComponent = (externalComponent ||\n\t\tdefaultComponent) as ComponentType<LinkProps>;\n\tconst Component = href\n\t\t? isInternalURL(href)\n\t\t\t? InternalComponent\n\t\t\t: ExternalComponent\n\t\t: InternalComponent;\n\n\treturn (\n\t\t<Component ref={ref} {...attrs} {...restProps} href={href} rel={rel}>\n\t\t\t{\"children\" in props ? children : field?.text}\n\t\t</Component>\n\t);\n}) as <\n\tInternalComponentProps = ComponentProps<typeof defaultComponent>,\n\tExternalComponentProps = ComponentProps<typeof defaultComponent>,\n>(\n\tprops: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {\n\t\tref?: ForwardedRef<Element>;\n\t},\n) => ReactNode;\n\n/**\n * Determines if a URL is internal or external.\n *\n * @param url - The URL to check if internal or external.\n *\n * @returns `true` if `url` is internal, `false` otherwise.\n */\n// TODO: This does not detect all relative URLs as internal such as `about` or `./about`. This function assumes relative URLs start with a \"/\" or \"#\"`.\nexport function isInternalURL(url: string): boolean {\n\tconst isInternal = /^(\\/(?!\\/)|#)/.test(url);\n\tconst isSpecialLink = !isInternal && !/^https?:\\/\\//.test(url);\n\n\treturn isInternal && !isSpecialLink;\n}\n"],"names":["PrismicLink","_jsx"],"mappings":";;;;;AAoBA,MAAM,mBAAmB;AAkFlB,MAAM,cAAc,WAAW,SAASA,aAI9C,OACA,KAA0B;AAEpB,QAAA,EACL,OACA,UAAU,KACV,cACA,mBACA,mBACA,UACA,GAAG,UAAA,IACA;AAEJ,MAAI,KAAK;AACR,QAAI,OAAO;AACN,UAAA,CAAC,MAAM,WAAW;AACrB,gBAAQ,MACP;AAAA,GACA,KAAK;AAEN,cAAM,IAAI,MACT,8IAA8I,OAC7I,yBAAyB,CACzB,EAAE;AAAA,MAAA,YAGH,UAAU,QACR,OAAO,KAAK,KAAK,EAAE,SAAS,IAC5B,OAAO,KAAK,KAAK,EAAE,SAAS,MAC/B,EAAE,SAAS,SAAS,SAAS,SAAS,QAAQ,QAC7C;AACD,gBAAQ,KACP,uJAAuJ,OACtJ,yBAAyB,CACzB,IACD,KAAK;AAAA,MAAA;AAAA,eAGG,KAAK;AACf,UAAI,EAAE,SAAS,OAAO,QAAQ,MAAM;AACnC,gBAAQ,KACP,0JAA0J,OACzJ,yBAAyB,CACzB,IACD,GAAG;AAAA,MAAA;AAAA,IAEL;AAAA,EACD;AAGK,QAAA,EACL,MAAM,cACN,KAAK,aACL,GAAG,UACA,YAAY,SAAS,KAAK;AAAA,IAC7B;AAAA,IACA,KAAK,OAAO,UAAU,QAAQ,aAAa,UAAU,MAAM;AAAA,EAAA,CAC3D;AAED,MAAI,MAA0B;AAC9B,MAAI,SAAS,aAAa,OAAO,UAAU,QAAQ,YAAY;AAC9D,UAAM,UAAU;AAAA,EAAA;AAGjB,QAAM,QAAQ,UAAU,YAAY,UAAU,OAAO,iBAAiB;AAEtE,QAAM,oBAAqB,qBAC1B;AACD,QAAM,oBAAqB,qBAC1B;AACD,QAAM,YAAY,OACf,cAAc,IAAI,IACjB,oBACA,oBACD;AAEH,SACCC,IAAC,WAAS,EAAC,KAAc,GAAA,UAAW,WAAW,MAAY,eACzD,cAAc,QAAQ,WAAW,+BAAO,MAAI;AAGhD,CAAC;AAiBK,SAAU,cAAc,KAAW;AAClC,QAAA,aAAa,gBAAgB,KAAK,GAAG;AAC3C,QAAM,gBAAgB,CAAC,cAAc,CAAC,eAAe,KAAK,GAAG;AAE7D,SAAO,cAAc,CAAC;AACvB;"}
@@ -1,31 +1,31 @@
1
- import { ReactNode } from "react";
1
+ import { ComponentType, FC, ReactNode } from "react";
2
2
  import { TableField, TableFieldHead, TableFieldHeadRow, TableFieldBody, TableFieldBodyRow, TableFieldHeaderCell, TableFieldDataCell } from "@prismicio/client";
3
3
  import { JSXMapSerializer } from "./PrismicRichText.js";
4
4
  type TableComponents = {
5
- table?: (props: {
5
+ table?: ComponentType<{
6
6
  table: TableField<"filled">;
7
7
  children: ReactNode;
8
- }) => ReactNode;
9
- thead?: (props: {
8
+ }>;
9
+ thead?: ComponentType<{
10
10
  head: TableFieldHead;
11
11
  children: ReactNode;
12
- }) => ReactNode;
13
- tbody?: (props: {
12
+ }>;
13
+ tbody?: ComponentType<{
14
14
  body: TableFieldBody;
15
15
  children: ReactNode;
16
- }) => ReactNode;
17
- tr?: (props: {
16
+ }>;
17
+ tr?: ComponentType<{
18
18
  row: TableFieldHeadRow | TableFieldBodyRow;
19
19
  children: ReactNode;
20
- }) => ReactNode;
21
- th?: (props: {
20
+ }>;
21
+ th?: ComponentType<{
22
22
  cell: TableFieldHeaderCell;
23
23
  children: ReactNode;
24
- }) => ReactNode;
25
- td?: (props: {
24
+ }>;
25
+ td?: ComponentType<{
26
26
  cell: TableFieldDataCell;
27
27
  children: ReactNode;
28
- }) => ReactNode;
28
+ }>;
29
29
  };
30
30
  /** Props for `<PrismicTable>`. */
31
31
  export type PrismicTableProps = {
@@ -83,5 +83,5 @@ export type PrismicTableProps = {
83
83
  *
84
84
  * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}
85
85
  */
86
- export declare function PrismicTable(props: PrismicTableProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
86
+ export declare const PrismicTable: FC<PrismicTableProps>;
87
87
  export {};
@@ -9,18 +9,18 @@ const defaultComponents = {
9
9
  th: ({ children }) => jsx("th", { children }),
10
10
  td: ({ children }) => jsx("td", { children })
11
11
  };
12
- function PrismicTable(props) {
12
+ const PrismicTable = (props) => {
13
13
  const { field, components, fallback = null } = props;
14
14
  if (!isFilled.table(field)) {
15
15
  return fallback;
16
16
  }
17
17
  const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components };
18
- return jsxs(Table, { table: field, children: [field.head && jsx(Thead, { head: field.head, children: field.head.rows.map((row) => jsx(TableRow, { row, components }, JSON.stringify(row))) }), jsx(Tbody, { body: field.body, children: field.body.rows.map((row) => jsx(TableRow, { row, components }, JSON.stringify(row))) })] });
19
- }
18
+ return jsxs(Table, { table: field, children: [field.head && jsx(Thead, { head: field.head, children: field.head.rows.map((row) => jsx(TableRow, { row, components }, row.key)) }), jsx(Tbody, { body: field.body, children: field.body.rows.map((row) => jsx(TableRow, { row, components }, row.key)) })] });
19
+ };
20
20
  function TableRow(props) {
21
21
  const { row, components } = props;
22
22
  const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
23
- return jsx(Tr, { row, children: row.cells.map((cell) => cell.type === "header" ? jsx(Th, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) }, JSON.stringify(cell)) : jsx(Td, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) }, JSON.stringify(cell))) });
23
+ return jsx(Tr, { row, children: row.cells.map((cell) => cell.type === "header" ? jsx(Th, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) }, cell.key) : jsx(Td, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) }, cell.key)) });
24
24
  }
25
25
  export {
26
26
  PrismicTable
@@ -1 +1 @@
1
- {"version":3,"file":"PrismicTable.js","sources":["../src/PrismicTable.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n\tisFilled,\n\tTableField,\n\tTableFieldHead,\n\tTableFieldHeadRow,\n\tTableFieldBody,\n\tTableFieldBodyRow,\n\tTableFieldHeaderCell,\n\tTableFieldDataCell,\n} from \"@prismicio/client\";\n\nimport { JSXMapSerializer, PrismicRichText } from \"./PrismicRichText.js\";\n\ntype TableComponents = {\n\ttable?: (props: {\n\t\ttable: TableField<\"filled\">;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\tthead?: (props: { head: TableFieldHead; children: ReactNode }) => ReactNode;\n\ttbody?: (props: { body: TableFieldBody; children: ReactNode }) => ReactNode;\n\ttr?: (props: {\n\t\trow: TableFieldHeadRow | TableFieldBodyRow;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\tth?: (props: {\n\t\tcell: TableFieldHeaderCell;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\ttd?: (props: { cell: TableFieldDataCell; children: ReactNode }) => ReactNode;\n};\n\nconst defaultComponents: Required<TableComponents> = {\n\ttable: ({ children }) => <table>{children}</table>,\n\tthead: ({ children }) => <thead>{children}</thead>,\n\ttbody: ({ children }) => <tbody>{children}</tbody>,\n\ttr: ({ children }) => <tr>{children}</tr>,\n\tth: ({ children }) => <th>{children}</th>,\n\ttd: ({ children }) => <td>{children}</td>,\n};\n\n/** Props for `<PrismicTable>`. */\nexport type PrismicTableProps = {\n\t/** The Prismic table field to render. */\n\tfield: TableField;\n\n\t/**\n\t * An object that maps a table block to a React component.\n\t *\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t * table: ({children}) => <table>{children}</table>\n\t * thead: ({children}) => <thead>{children}</thead>\n\t * }\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer & TableComponents;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * React component that renders content from a Prismic table field. By default,\n * HTML elements are rendered for each piece of content. A `tbody` block will\n * render a `<tbody>` HTML element, for example.\n *\n * To customize the components that are rendered, provide a map serializer to\n * the `components` prop.\n *\n * @example Rendering a table field using the default HTMl elements.\n *\n * ```jsx\n * <PrismicTable field={document.data.my_table} />;\n * ```\n *\n * @example Rendering a table field using a custom set of React components.\n *\n * ```jsx\n * <PrismicTable\n * \tfield={document.data.my_table}\n * \tcomponents={{\n * \t\ttbody: ({ children }) => (\n * \t\t\t<tbody className=\"my-class\">{children}</tbody>\n * \t\t),\n * \t}}\n * />;\n * ```\n *\n * @param props - Props for the component.\n *\n * @returns The table field's content as React components.\n *\n * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}\n */\nexport function PrismicTable(props: PrismicTableProps) {\n\tconst { field, components, fallback = null } = props;\n\n\tif (!isFilled.table(field)) {\n\t\treturn fallback;\n\t}\n\n\tconst {\n\t\ttable: Table,\n\t\tthead: Thead,\n\t\ttbody: Tbody,\n\t} = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Table table={field}>\n\t\t\t{field.head && (\n\t\t\t\t<Thead head={field.head}>\n\t\t\t\t\t{field.head.rows.map((row) => (\n\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\tkey={JSON.stringify(row)}\n\t\t\t\t\t\t\trow={row}\n\t\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</Thead>\n\t\t\t)}\n\t\t\t<Tbody body={field.body}>\n\t\t\t\t{field.body.rows.map((row) => (\n\t\t\t\t\t<TableRow\n\t\t\t\t\t\tkey={JSON.stringify(row)}\n\t\t\t\t\t\trow={row}\n\t\t\t\t\t\tcomponents={components}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</Tbody>\n\t\t</Table>\n\t);\n}\n\ntype TableRowProps = {\n\trow: TableFieldHeadRow | TableFieldBodyRow;\n\tcomponents?: JSXMapSerializer & TableComponents;\n};\n\nfunction TableRow(props: TableRowProps) {\n\tconst { row, components } = props;\n\n\tconst { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Tr row={row}>\n\t\t\t{row.cells.map((cell) =>\n\t\t\t\tcell.type === \"header\" ? (\n\t\t\t\t\t<Th key={JSON.stringify(cell)} cell={cell}>\n\t\t\t\t\t\t<PrismicRichText field={cell.content} components={components} />\n\t\t\t\t\t</Th>\n\t\t\t\t) : (\n\t\t\t\t\t<Td key={JSON.stringify(cell)} cell={cell}>\n\t\t\t\t\t\t<PrismicRichText field={cell.content} components={components} />\n\t\t\t\t\t</Td>\n\t\t\t\t),\n\t\t\t)}\n\t\t</Tr>\n\t);\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAgCA,MAAM,oBAA+C;AAAA,EACpD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,IAAI,CAAC,EAAE,eAAeA,IAAK,MAAA,EAAA,UAAc;AAAA,EACzC,IAAI,CAAC,EAAE,eAAeA,IAAK,MAAA,EAAA,UAAc;AAAA,EACzC,IAAI,CAAC,EAAE,SAAA,MAAeA,IAAK,MAAA,EAAA,SAAc,CAAA;;AA8DpC,SAAU,aAAa,OAAwB;AACpD,QAAM,EAAE,OAAO,YAAY,WAAW,KAAS,IAAA;AAE/C,MAAI,CAAC,SAAS,MAAM,KAAK,GAAG;AACpB,WAAA;AAAA,EAAA;AAGR,QAAM,EACL,OAAO,OACP,OAAO,OACP,OAAO,UACJ,EAAE,GAAG,mBAAmB,GAAG,WAAU;AAEzC,SACCC,KAAC,OAAK,EAAC,OAAO,OACZ,UAAA,CAAA,MAAM,QACND,IAAC,OAAK,EAAC,MAAM,MAAM,MACjB,UAAA,MAAM,KAAK,KAAK,IAAI,CAAC,QACrBA,IAAC,YAEA,KACA,WAAA,GAFK,KAAK,UAAU,GAAG,CAAC,CAIzB,EACM,CAAA,GAETA,IAAC,OAAM,EAAA,MAAM,MAAM,MAAI,UACrB,MAAM,KAAK,KAAK,IAAI,CAAC,QACrBA,IAAC,UAEA,EAAA,KACA,WAAsB,GAFjB,KAAK,UAAU,GAAG,CAAC,CAIzB,EAAC,CAAA,CACK,GACD;AAEV;AAOA,SAAS,SAAS,OAAoB;AAC/B,QAAA,EAAE,KAAK,WAAA,IAAe;AAE5B,QAAM,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,OAAO,EAAE,GAAG,mBAAmB,GAAG,WAAU;AAGvE,SAAAA,IAAC,IAAE,EAAC,eACF,IAAI,MAAM,IAAI,CAAC,SACf,KAAK,SAAS,WACbA,IAAC,IAAE,EAA4B,gBAC9BA,IAAC,mBAAgB,OAAO,KAAK,SAAS,YAA0B,EAAA,GADxD,KAAK,UAAU,IAAI,CAAC,IAI7BA,IAAC,IAAE,EAA4B,gBAC9BA,IAAC,mBAAgB,OAAO,KAAK,SAAS,YAA0B,EAAA,GADxD,KAAK,UAAU,IAAI,CAAC,CAG7B,GAEE;AAEP;"}
1
+ {"version":3,"file":"PrismicTable.js","sources":["../src/PrismicTable.tsx"],"sourcesContent":["import { ComponentType, FC, ReactNode } from \"react\";\nimport {\n\tisFilled,\n\tTableField,\n\tTableFieldHead,\n\tTableFieldHeadRow,\n\tTableFieldBody,\n\tTableFieldBodyRow,\n\tTableFieldHeaderCell,\n\tTableFieldDataCell,\n} from \"@prismicio/client\";\n\nimport { JSXMapSerializer, PrismicRichText } from \"./PrismicRichText.js\";\n\ntype TableComponents = {\n\ttable?: ComponentType<{ table: TableField<\"filled\">; children: ReactNode }>;\n\tthead?: ComponentType<{ head: TableFieldHead; children: ReactNode }>;\n\ttbody?: ComponentType<{ body: TableFieldBody; children: ReactNode }>;\n\ttr?: ComponentType<{\n\t\trow: TableFieldHeadRow | TableFieldBodyRow;\n\t\tchildren: ReactNode;\n\t}>;\n\tth?: ComponentType<{ cell: TableFieldHeaderCell; children: ReactNode }>;\n\ttd?: ComponentType<{ cell: TableFieldDataCell; children: ReactNode }>;\n};\n\nconst defaultComponents: Required<TableComponents> = {\n\ttable: ({ children }) => <table>{children}</table>,\n\tthead: ({ children }) => <thead>{children}</thead>,\n\ttbody: ({ children }) => <tbody>{children}</tbody>,\n\ttr: ({ children }) => <tr>{children}</tr>,\n\tth: ({ children }) => <th>{children}</th>,\n\ttd: ({ children }) => <td>{children}</td>,\n};\n\n/** Props for `<PrismicTable>`. */\nexport type PrismicTableProps = {\n\t/** The Prismic table field to render. */\n\tfield: TableField;\n\n\t/**\n\t * An object that maps a table block to a React component.\n\t *\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t * table: ({children}) => <table>{children}</table>\n\t * thead: ({children}) => <thead>{children}</thead>\n\t * }\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer & TableComponents;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * React component that renders content from a Prismic table field. By default,\n * HTML elements are rendered for each piece of content. A `tbody` block will\n * render a `<tbody>` HTML element, for example.\n *\n * To customize the components that are rendered, provide a map serializer to\n * the `components` prop.\n *\n * @example Rendering a table field using the default HTMl elements.\n *\n * ```jsx\n * <PrismicTable field={document.data.my_table} />;\n * ```\n *\n * @example Rendering a table field using a custom set of React components.\n *\n * ```jsx\n * <PrismicTable\n * \tfield={document.data.my_table}\n * \tcomponents={{\n * \t\ttbody: ({ children }) => (\n * \t\t\t<tbody className=\"my-class\">{children}</tbody>\n * \t\t),\n * \t}}\n * />;\n * ```\n *\n * @param props - Props for the component.\n *\n * @returns The table field's content as React components.\n *\n * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}\n */\nexport const PrismicTable: FC<PrismicTableProps> = (props) => {\n\tconst { field, components, fallback = null } = props;\n\n\tif (!isFilled.table(field)) {\n\t\treturn fallback;\n\t}\n\n\tconst {\n\t\ttable: Table,\n\t\tthead: Thead,\n\t\ttbody: Tbody,\n\t} = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Table table={field}>\n\t\t\t{field.head && (\n\t\t\t\t<Thead head={field.head}>\n\t\t\t\t\t{field.head.rows.map((row) => (\n\t\t\t\t\t\t<TableRow key={row.key} row={row} components={components} />\n\t\t\t\t\t))}\n\t\t\t\t</Thead>\n\t\t\t)}\n\t\t\t<Tbody body={field.body}>\n\t\t\t\t{field.body.rows.map((row) => (\n\t\t\t\t\t<TableRow key={row.key} row={row} components={components} />\n\t\t\t\t))}\n\t\t\t</Tbody>\n\t\t</Table>\n\t);\n};\n\ntype TableRowProps = {\n\trow: TableFieldHeadRow | TableFieldBodyRow;\n\tcomponents?: JSXMapSerializer & TableComponents;\n};\n\nfunction TableRow(props: TableRowProps) {\n\tconst { row, components } = props;\n\n\tconst { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Tr row={row}>\n\t\t\t{row.cells.map((cell) =>\n\t\t\t\tcell.type === \"header\" ? (\n\t\t\t\t\t<Th key={cell.key} cell={cell}>\n\t\t\t\t\t\t<PrismicRichText field={cell.content} components={components} />\n\t\t\t\t\t</Th>\n\t\t\t\t) : (\n\t\t\t\t\t<Td key={cell.key} cell={cell}>\n\t\t\t\t\t\t<PrismicRichText field={cell.content} components={components} />\n\t\t\t\t\t</Td>\n\t\t\t\t),\n\t\t\t)}\n\t\t</Tr>\n\t);\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AA0BA,MAAM,oBAA+C;AAAA,EACpD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,IAAI,CAAC,EAAE,eAAeA,IAAK,MAAA,EAAA,UAAc;AAAA,EACzC,IAAI,CAAC,EAAE,eAAeA,IAAK,MAAA,EAAA,UAAc;AAAA,EACzC,IAAI,CAAC,EAAE,SAAA,MAAeA,IAAK,MAAA,EAAA,SAAc,CAAA;;AA8D7B,MAAA,eAAsC,CAAC,UAAS;AAC5D,QAAM,EAAE,OAAO,YAAY,WAAW,KAAS,IAAA;AAE/C,MAAI,CAAC,SAAS,MAAM,KAAK,GAAG;AACpB,WAAA;AAAA,EAAA;AAGR,QAAM,EACL,OAAO,OACP,OAAO,OACP,OAAO,UACJ,EAAE,GAAG,mBAAmB,GAAG,WAAU;AAEzC,SACCC,KAAC,OAAK,EAAC,OAAO,kBACZ,MAAM,QACND,IAAC,OAAK,EAAC,MAAM,MAAM,MACjB,UAAA,MAAM,KAAK,KAAK,IAAI,CAAC,QACrBA,IAAC,UAAQ,EAAe,KAAU,WAAsB,GAAzC,IAAI,GAAG,CACtB,EAAA,CACM,GAETA,IAAC,OAAM,EAAA,MAAM,MAAM,MAAI,UACrB,MAAM,KAAK,KAAK,IAAI,CAAC,QACrBA,IAAC,YAAuB,KAAU,WAAnB,GAAA,IAAI,GAAG,CACtB,EAAC,CAAA,CACK,EAAA,CACD;AAEV;AAOA,SAAS,SAAS,OAAoB;AAC/B,QAAA,EAAE,KAAK,WAAA,IAAe;AAE5B,QAAM,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,OAAO,EAAE,GAAG,mBAAmB,GAAG,WAAU;AAGvE,SAAAA,IAAC,MAAG,KACF,UAAA,IAAI,MAAM,IAAI,CAAC,SACf,KAAK,SAAS,WACbA,IAAC,IAAE,EAAgB,gBAClBA,IAAC,mBAAgB,OAAO,KAAK,SAAS,WAAsB,CAAA,KADpD,KAAK,GAAG,IAIjBA,IAAC,MAAkB,MAClB,UAAAA,IAAC,iBAAe,EAAC,OAAO,KAAK,SAAS,iBAD9B,KAAK,GAAG,CAGjB,GACD;AAGJ;"}
@@ -1,4 +1,4 @@
1
- const version = "3.1.0";
1
+ const version = "3.2.1-alpha.0";
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.1.0",
3
+ "version": "3.2.1-alpha.0",
4
4
  "description": "React components and hooks to fetch and present Prismic content",
5
5
  "keywords": [
6
6
  "typescript",
@@ -46,11 +46,11 @@
46
46
  "lint": "eslint",
47
47
  "prepare": "npm run build",
48
48
  "release": "npm run build && npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
49
- "release:alpha": "npm run build && npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
50
- "release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
49
+ "release:alpha": "npm run build && npm run test && standard-version --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
50
+ "release:alpha:dry": "standard-version --prerelease alpha --dry-run",
51
51
  "release:dry": "standard-version --dry-run",
52
52
  "size": "size-limit",
53
- "test": "npm run lint && npm run types && npm run build && npm run size",
53
+ "test": "npm run lint && npm run types && npm run build && npm run e2e && npm run size && npm run e2e",
54
54
  "types": "tsc --noEmit"
55
55
  },
56
56
  "dependencies": {
@@ -59,7 +59,7 @@
59
59
  "devDependencies": {
60
60
  "@eslint/js": "^9.19.0",
61
61
  "@playwright/test": "^1.50.0",
62
- "@prismicio/client": "^7.16.1",
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
65
  "@types/react": "^19.0.8",
@@ -1,7 +1,6 @@
1
1
  import {
2
2
  ComponentProps,
3
3
  ComponentType,
4
- ElementType,
5
4
  ForwardedRef,
6
5
  HTMLAttributeAnchorTarget,
7
6
  ReactNode,
@@ -73,7 +72,7 @@ export type PrismicLinkProps<
73
72
  * If your app uses a client-side router that requires a special Link
74
73
  * component, provide the Link component to this prop.
75
74
  */
76
- internalComponent?: ElementType<InternalComponentProps>;
75
+ internalComponent?: ComponentType<InternalComponentProps>;
77
76
 
78
77
  /** The component rendered for external URLs. Defaults to `<a>`. */
79
78
  externalComponent?: ComponentType<ExternalComponentProps>;
@@ -1,4 +1,4 @@
1
- import { ReactNode } from "react";
1
+ import { ComponentType, FC, ReactNode } from "react";
2
2
  import {
3
3
  isFilled,
4
4
  TableField,
@@ -13,21 +13,15 @@ import {
13
13
  import { JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
14
14
 
15
15
  type TableComponents = {
16
- table?: (props: {
17
- table: TableField<"filled">;
18
- children: ReactNode;
19
- }) => ReactNode;
20
- thead?: (props: { head: TableFieldHead; children: ReactNode }) => ReactNode;
21
- tbody?: (props: { body: TableFieldBody; children: ReactNode }) => ReactNode;
22
- tr?: (props: {
16
+ table?: ComponentType<{ table: TableField<"filled">; children: ReactNode }>;
17
+ thead?: ComponentType<{ head: TableFieldHead; children: ReactNode }>;
18
+ tbody?: ComponentType<{ body: TableFieldBody; children: ReactNode }>;
19
+ tr?: ComponentType<{
23
20
  row: TableFieldHeadRow | TableFieldBodyRow;
24
21
  children: ReactNode;
25
- }) => ReactNode;
26
- th?: (props: {
27
- cell: TableFieldHeaderCell;
28
- children: ReactNode;
29
- }) => ReactNode;
30
- td?: (props: { cell: TableFieldDataCell; children: ReactNode }) => ReactNode;
22
+ }>;
23
+ th?: ComponentType<{ cell: TableFieldHeaderCell; children: ReactNode }>;
24
+ td?: ComponentType<{ cell: TableFieldDataCell; children: ReactNode }>;
31
25
  };
32
26
 
33
27
  const defaultComponents: Required<TableComponents> = {
@@ -98,7 +92,7 @@ export type PrismicTableProps = {
98
92
  *
99
93
  * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}
100
94
  */
101
- export function PrismicTable(props: PrismicTableProps) {
95
+ export const PrismicTable: FC<PrismicTableProps> = (props) => {
102
96
  const { field, components, fallback = null } = props;
103
97
 
104
98
  if (!isFilled.table(field)) {
@@ -116,26 +110,18 @@ export function PrismicTable(props: PrismicTableProps) {
116
110
  {field.head && (
117
111
  <Thead head={field.head}>
118
112
  {field.head.rows.map((row) => (
119
- <TableRow
120
- key={JSON.stringify(row)}
121
- row={row}
122
- components={components}
123
- />
113
+ <TableRow key={row.key} row={row} components={components} />
124
114
  ))}
125
115
  </Thead>
126
116
  )}
127
117
  <Tbody body={field.body}>
128
118
  {field.body.rows.map((row) => (
129
- <TableRow
130
- key={JSON.stringify(row)}
131
- row={row}
132
- components={components}
133
- />
119
+ <TableRow key={row.key} row={row} components={components} />
134
120
  ))}
135
121
  </Tbody>
136
122
  </Table>
137
123
  );
138
- }
124
+ };
139
125
 
140
126
  type TableRowProps = {
141
127
  row: TableFieldHeadRow | TableFieldBodyRow;
@@ -151,11 +137,11 @@ function TableRow(props: TableRowProps) {
151
137
  <Tr row={row}>
152
138
  {row.cells.map((cell) =>
153
139
  cell.type === "header" ? (
154
- <Th key={JSON.stringify(cell)} cell={cell}>
140
+ <Th key={cell.key} cell={cell}>
155
141
  <PrismicRichText field={cell.content} components={components} />
156
142
  </Th>
157
143
  ) : (
158
- <Td key={JSON.stringify(cell)} cell={cell}>
144
+ <Td key={cell.key} cell={cell}>
159
145
  <PrismicRichText field={cell.content} components={components} />
160
146
  </Td>
161
147
  ),