ref: Move label and declaration into Customizable Table (#1056)

src/components/Table/Table.tsx

@@ -1,56 +1,48 @@
 import type { LunaticComponentProps } from '../type';
 import { LunaticComponents } from '../LunaticComponents';
 import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
-import { Label } from '../shared/Label/Label';
 import {
 	Td,
 	Tbody,
 	Tr,
 	TableHeader,
 	Table as BaseTable,
 } from '../shared/Table';
-import { Declarations } from '../shared/Declarations/Declarations';
 import type { PropsWithChildren } from 'react';
 
 export function Table(props: LunaticComponentProps<'Table'>) {
-	const { id, body, header, errors, label, declarations } = props;
-	const labelId = `label-${id}`;
+	const { id, body, header, errors, declarations, label } = props;
 
 	return (
-		<>
-			<Label htmlFor={id} id={labelId}>
-				{label}
-			</Label>
-			<Declarations
-				type="AFTER_QUESTION_TEXT"
-				declarations={declarations}
-				id={id}
-			/>
-			<BaseTable id={id} errors={getComponentErrors(errors, id)}>
-				<TableHeader header={header} />
-				<Tbody>
-					{body.map((row, rowIndex) => (
-						<Tr row={rowIndex} key={rowIndex}>
-							<LunaticComponents<
-								PropsWithChildren<{
-									colspan?: number;
-									rowspan?: number;
-								}>
-							>
-								components={row}
-								wrapper={({ colspan, rowspan, ...props }) => (
-									<Td
-										row={rowIndex}
-										colSpan={colspan}
-										rowSpan={rowspan}
-										{...props}
-									/>
-								)}
-							/>
-						</Tr>
-					))}
-				</Tbody>
-			</BaseTable>
-		</>
+		<BaseTable
+			id={id}
+			errors={getComponentErrors(errors, id)}
+			declarations={declarations}
+			label={label}
+		>
+			<TableHeader header={header} />
+			<Tbody>
+				{body.map((row, rowIndex) => (
+					<Tr row={rowIndex} key={rowIndex}>
+						<LunaticComponents<
+							PropsWithChildren<{
+								colspan?: number;
+								rowspan?: number;
+							}>
+						>
+							components={row}
+							wrapper={({ colspan, rowspan, ...props }) => (
+								<Td
+									row={rowIndex}
+									colSpan={colspan}
+									rowSpan={rowspan}
+									{...props}
+								/>
+							)}
+						/>
+					</Tr>
+				))}
+			</Tbody>
+		</BaseTable>
 	);
 }

src/components/shared/Table/Table.tsx

@@ -3,20 +3,41 @@ import classnames from 'classnames';
 import { slottableComponent } from '../HOC/slottableComponent';
 import type { LunaticError } from '../../../use-lunatic/type';
 import { ComponentErrors } from '../ComponentErrors/ComponentErrors';
+import type { LunaticComponentProps } from '../../type';
+import { Label } from '../Label/Label';
+import { Declarations } from '../Declarations/Declarations';
 
-type Props = PropsWithChildren<{
-	className?: string;
-	id?: string;
-	errors?: LunaticError[];
-}>;
+type Props = PropsWithChildren<
+	Pick<
+		LunaticComponentProps<'Table'>,
+		'className' | 'id' | 'label' | 'declarations'
+	> & {
+		errors?: LunaticError[];
+	}
+>;
+
+function LunaticTable({
+	id,
+	className,
+	children,
+	errors,
+	declarations,
+	label,
+}: Props) {
+	const tableId = `table-${id}`;
+	const labelId = `label-${id}`;
 
-function LunaticTable({ id, className, children, errors }: Props) {
 	return (
 		<>
-			<table
-				id={`table-${id}`}
-				className={classnames('lunatic-table', className)}
-			>
+			<Label htmlFor={tableId} id={labelId}>
+				{label}
+			</Label>
+			<Declarations
+				type="AFTER_QUESTION_TEXT"
+				declarations={declarations}
+				id={id}
+			/>
+			<table id={tableId} className={classnames('lunatic-table', className)}>
 				{children}
 			</table>
 			<ComponentErrors errors={errors} />