@prismicio/react 3.0.0 → 3.2.0

package/dist/PrismicTable.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from "react";
+import { TableField, TableFieldHead, TableFieldHeadRow, TableFieldBody, TableFieldBodyRow, TableFieldHeaderCell, TableFieldDataCell } from "@prismicio/client";
+import { JSXMapSerializer } from "./PrismicRichText.js";
+type TableComponents = {
+    table?: (props: {
+        table: TableField<"filled">;
+        children: ReactNode;
+    }) => ReactNode;
+    thead?: (props: {
+        head: TableFieldHead;
+        children: ReactNode;
+    }) => ReactNode;
+    tbody?: (props: {
+        body: TableFieldBody;
+        children: ReactNode;
+    }) => ReactNode;
+    tr?: (props: {
+        row: TableFieldHeadRow | TableFieldBodyRow;
+        children: ReactNode;
+    }) => ReactNode;
+    th?: (props: {
+        cell: TableFieldHeaderCell;
+        children: ReactNode;
+    }) => ReactNode;
+    td?: (props: {
+        cell: TableFieldDataCell;
+        children: ReactNode;
+    }) => ReactNode;
+};
+/** Props for `<PrismicTable>`. */
+export type PrismicTableProps = {
+    /** The Prismic table field to render. */
+    field: TableField;
+    /**
+     * An object that maps a table block to a React component.
+     *
+     * @example A map serializer.
+     *
+     * ```jsx
+     * {
+     *   table: ({children}) => <table>{children}</table>
+     *   thead: ({children}) => <thead>{children}</thead>
+     * }
+     * ```
+     */
+    components?: JSXMapSerializer & TableComponents;
+    /**
+     * The value to be rendered when the field is empty. If a fallback is not
+     * given, `null` will be rendered.
+     */
+    fallback?: ReactNode;
+};
+/**
+ * React component that renders content from a Prismic table field. By default,
+ * HTML elements are rendered for each piece of content. A `tbody` block will
+ * render a `<tbody>` HTML element, for example.
+ *
+ * To customize the components that are rendered, provide a map serializer to
+ * the `components` prop.
+ *
+ * @example Rendering a table field using the default HTMl elements.
+ *
+ * ```jsx
+ * <PrismicTable field={document.data.my_table} />;
+ * ```
+ *
+ * @example Rendering a table field using a custom set of React components.
+ *
+ * ```jsx
+ * <PrismicTable
+ * 	field={document.data.my_table}
+ * 	components={{
+ * 		tbody: ({ children }) => (
+ * 			<tbody className="my-class">{children}</tbody>
+ * 		),
+ * 	}}
+ * />;
+ * ```
+ *
+ * @param props - Props for the component.
+ *
+ * @returns The table field's content as React components.
+ *
+ * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}
+ */
+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;
+export {};

package/dist/PrismicTable.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isFilled } from "@prismicio/client";
+import { PrismicRichText } from "./PrismicRichText.js";
+const defaultComponents = {
+  table: ({ children }) => jsx("table", { children }),
+  thead: ({ children }) => jsx("thead", { children }),
+  tbody: ({ children }) => jsx("tbody", { children }),
+  tr: ({ children }) => jsx("tr", { children }),
+  th: ({ children }) => jsx("th", { children }),
+  td: ({ children }) => jsx("td", { children })
+};
+function PrismicTable(props) {
+  const { field, components, fallback = null } = props;
+  if (!isFilled.table(field)) {
+    return fallback;
+  }
+  const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components };
+  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)) })] });
+}
+function TableRow(props) {
+  const { row, components } = props;
+  const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
+  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)) });
+}
+export {
+  PrismicTable
+};
+//# sourceMappingURL=PrismicTable.js.map

package/dist/PrismicTable.js.map

@@ -0,0 +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 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":";;;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,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;"}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { PrismicLink } from "./PrismicLink.js";
 export type { PrismicLinkProps, LinkProps } from "./PrismicLink.js";
+export { PrismicTable } from "./PrismicTable.js";
+export type { PrismicTableProps } from "./PrismicTable.js";
 export { PrismicText } from "./PrismicText.js";
 export type { PrismicTextProps } from "./PrismicText.js";
 export { PrismicRichText } from "./PrismicRichText.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 import { PrismicLink } from "./PrismicLink.js";
+import { PrismicTable } from "./PrismicTable.js";
 import { PrismicText } from "./PrismicText.js";
 import { PrismicRichText } from "./PrismicRichText.js";
 import { Element } from "@prismicio/client/richtext";
@@ -10,6 +11,7 @@ export {
   PrismicImage,
   PrismicLink,
   PrismicRichText,
+  PrismicTable,
   PrismicText,
   PrismicToolbar,
   SliceZone,

package/dist/index.js.map

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

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const version = "3.0.0";
+const version = "3.2.0";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/react",
-	"version": "3.0.0",
+	"version": "3.2.0",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -59,7 +59,7 @@
 	"devDependencies": {
 		"@eslint/js": "^9.19.0",
 		"@playwright/test": "^1.50.0",
-		"@prismicio/client": "^7.12.0",
+		"@prismicio/client": "^7.17.0",
 		"@rollup/plugin-typescript": "^12.1.2",
 		"@size-limit/preset-small-lib": "^11.1.6",
 		"@types/react": "^19.0.8",

package/src/PrismicTable.tsx

@@ -0,0 +1,157 @@
+import { ReactNode } from "react";
+import {
+	isFilled,
+	TableField,
+	TableFieldHead,
+	TableFieldHeadRow,
+	TableFieldBody,
+	TableFieldBodyRow,
+	TableFieldHeaderCell,
+	TableFieldDataCell,
+} from "@prismicio/client";
+
+import { JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
+
+type TableComponents = {
+	table?: (props: {
+		table: TableField<"filled">;
+		children: ReactNode;
+	}) => ReactNode;
+	thead?: (props: { head: TableFieldHead; children: ReactNode }) => ReactNode;
+	tbody?: (props: { body: TableFieldBody; children: ReactNode }) => ReactNode;
+	tr?: (props: {
+		row: TableFieldHeadRow | TableFieldBodyRow;
+		children: ReactNode;
+	}) => ReactNode;
+	th?: (props: {
+		cell: TableFieldHeaderCell;
+		children: ReactNode;
+	}) => ReactNode;
+	td?: (props: { cell: TableFieldDataCell; children: ReactNode }) => ReactNode;
+};
+
+const defaultComponents: Required<TableComponents> = {
+	table: ({ children }) => <table>{children}</table>,
+	thead: ({ children }) => <thead>{children}</thead>,
+	tbody: ({ children }) => <tbody>{children}</tbody>,
+	tr: ({ children }) => <tr>{children}</tr>,
+	th: ({ children }) => <th>{children}</th>,
+	td: ({ children }) => <td>{children}</td>,
+};
+
+/** Props for `<PrismicTable>`. */
+export type PrismicTableProps = {
+	/** The Prismic table field to render. */
+	field: TableField;
+
+	/**
+	 * An object that maps a table block to a React component.
+	 *
+	 * @example A map serializer.
+	 *
+	 * ```jsx
+	 * {
+	 *   table: ({children}) => <table>{children}</table>
+	 *   thead: ({children}) => <thead>{children}</thead>
+	 * }
+	 * ```
+	 */
+	components?: JSXMapSerializer & TableComponents;
+
+	/**
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` will be rendered.
+	 */
+	fallback?: ReactNode;
+};
+
+/**
+ * React component that renders content from a Prismic table field. By default,
+ * HTML elements are rendered for each piece of content. A `tbody` block will
+ * render a `<tbody>` HTML element, for example.
+ *
+ * To customize the components that are rendered, provide a map serializer to
+ * the `components` prop.
+ *
+ * @example Rendering a table field using the default HTMl elements.
+ *
+ * ```jsx
+ * <PrismicTable field={document.data.my_table} />;
+ * ```
+ *
+ * @example Rendering a table field using a custom set of React components.
+ *
+ * ```jsx
+ * <PrismicTable
+ * 	field={document.data.my_table}
+ * 	components={{
+ * 		tbody: ({ children }) => (
+ * 			<tbody className="my-class">{children}</tbody>
+ * 		),
+ * 	}}
+ * />;
+ * ```
+ *
+ * @param props - Props for the component.
+ *
+ * @returns The table field's content as React components.
+ *
+ * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}
+ */
+export function PrismicTable(props: PrismicTableProps) {
+	const { field, components, fallback = null } = props;
+
+	if (!isFilled.table(field)) {
+		return fallback;
+	}
+
+	const {
+		table: Table,
+		thead: Thead,
+		tbody: Tbody,
+	} = { ...defaultComponents, ...components };
+
+	return (
+		<Table table={field}>
+			{field.head && (
+				<Thead head={field.head}>
+					{field.head.rows.map((row) => (
+						<TableRow key={row.key} row={row} components={components} />
+					))}
+				</Thead>
+			)}
+			<Tbody body={field.body}>
+				{field.body.rows.map((row) => (
+					<TableRow key={row.key} row={row} components={components} />
+				))}
+			</Tbody>
+		</Table>
+	);
+}
+
+type TableRowProps = {
+	row: TableFieldHeadRow | TableFieldBodyRow;
+	components?: JSXMapSerializer & TableComponents;
+};
+
+function TableRow(props: TableRowProps) {
+	const { row, components } = props;
+
+	const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
+
+	return (
+		<Tr row={row}>
+			{row.cells.map((cell) =>
+				cell.type === "header" ? (
+					<Th key={cell.key} cell={cell}>
+						<PrismicRichText field={cell.content} components={components} />
+					</Th>
+				) : (
+					<Td key={cell.key} cell={cell}>
+						<PrismicRichText field={cell.content} components={components} />
+					</Td>
+				),
+			)}
+		</Tr>
+	);
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 export { PrismicLink } from "./PrismicLink.js";
 export type { PrismicLinkProps, LinkProps } from "./PrismicLink.js";
 
+export { PrismicTable } from "./PrismicTable.js";
+export type { PrismicTableProps } from "./PrismicTable.js";
+
 export { PrismicText } from "./PrismicText.js";
 export type { PrismicTextProps } from "./PrismicText.js";