@tsed/react-formio 3.0.0-rc.2 → 3.0.0-rc.21

package/src/molecules/table/components/DefaultFilter.tsx

@@ -1,22 +1,21 @@
 import "../interfaces/extends";
 
-import { Header } from "@tanstack/react-table";
+import { Header, RowData } from "@tanstack/react-table";
 import type { ComponentType } from "react";
 
 import { getComponent, registerComponent } from "../../../registries/components";
 
-export interface DefaultFilterProps<Data = any> {
-  header: Header<Data, unknown>;
+export interface DefaultFilterProps<Data extends RowData = any, TValue = unknown> {
+  header: Header<Data, TValue>;
   i18n?: (f: string) => string;
 }
 
-export interface FilterProps<Data = any, Opts = Record<string, unknown>> {
-  header: Header<Data, unknown>;
+export interface FilterProps<Data extends RowData = any, Opts = Record<string, unknown>> extends DefaultFilterProps<Data> {
   options: Opts;
-  i18n?: (f: string) => string;
 }
 
-export function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<Data>) {
+export function DefaultFilter<Data extends RowData = any, TValue = unknown>(props: DefaultFilterProps<Data, TValue>) {
+  const { header, i18n } = props;
   const {
     filter = {
       variant: "text"
@@ -32,6 +31,10 @@ export function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<D
     return null;
   }
 
+  if (filter.disabled) {
+    return null;
+  }
+
   return (
     <div className='table-cell-header__filter'>
       <Filter header={header} options={filter} i18n={i18n} />

package/src/molecules/table/components/DefaultOperationButton.tsx

@@ -2,13 +2,13 @@ import { CellContext } from "@tanstack/react-table";
 import cx from "classnames";
 import { HTMLAttributes } from "react";
 
-import { type CellMetadata, type JSON, Operation } from "../../../interfaces";
+import { type CellMetadata, Operation } from "../../../interfaces";
+import type { JSONRecord } from "../../../interfaces/JSONRecord.js";
 import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
-  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+export interface OperationButtonProps<Data extends object = JSONRecord> extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
   operation: Operation<Data>;
   info: CellContext<Data, unknown>;
   metadata?: CellMetadata;
@@ -16,7 +16,7 @@ export interface OperationButtonProps<Data extends { [key: string]: JSON } = { [
   i18n?: (i18n: string) => string;
 }
 
-export function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {
+export function DefaultOperationButton<Data extends object = JSONRecord>(props: OperationButtonProps<Data>) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;
   const { className = "btn", buttonSize = "xs", buttonType = "primary", buttonOutline, action, title = "", icon = "" } = operation;

package/src/molecules/table/filters/{Filters.d.ts → Filters.ts}

@@ -1,4 +1,7 @@
-import { SelectOptionProps, SelectProps } from "../../forms/select/Select.interface";
+import type { RowData } from "@tanstack/react-table";
+
+import type { SelectOptionProps, SelectProps } from "../../forms/select/Select.interface";
+import type { FilterProps } from "../components/DefaultFilter";
 
 export type FilterVariants = "text" | "range" | "select" | "boolean";
 
@@ -8,6 +11,7 @@ export interface FilterBaseOptions extends Record<string, unknown> {
 
 export interface FilterTextOptions extends FilterBaseOptions {
   variant: "text";
+  disabled?: boolean;
   disableDatalist?: boolean;
 }
 
@@ -18,9 +22,9 @@ export interface FilterRangeOptions extends FilterBaseOptions {
   step?: number;
 }
 
-export interface FilterSelectOptions extends FilterBaseOptions, SelectProps<string> {
+export interface FilterSelectOptions<Data extends RowData = any> extends FilterBaseOptions, Omit<SelectProps<string>, "options"> {
   variant: "select";
-  options?: SelectOptionProps<string>[];
+  options?: SelectOptionProps<string>[] | ((props: FilterProps<Data, FilterSelectOptions>) => SelectOptionProps<string>)[];
 }
 
 export interface FilterBooleanOptions extends FilterBaseOptions {

package/src/molecules/table/filters/SelectFilter.tsx

@@ -8,7 +8,7 @@ import { FilterSelectOptions } from "./Filters";
 export function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {
   const Select = getComponent<typeof DefaultSelect>("Select");
   const columnFilterValue = header.column.getFilterValue();
-  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+  const uniqValues = useUniqValues<Data>({ header, options });
 
   const opts =
     options.layout === "choicesjs"
@@ -26,7 +26,7 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
         value: ""
       }
     ] as SelectOptionProps[]
-  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));
+  ).concat(uniqValues);
 
   return (
     <>
@@ -34,10 +34,11 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
         size='small'
         {...(options as any)}
         {...opts}
+        autoComplete='off'
         options={listOptions}
         name={`filter_${header.column.id}`}
         data-testid={`filter_${header.column.id}`}
-        value={columnFilterValue as string}
+        value={(columnFilterValue ?? "") as string}
         onChange={(_, value) => header.column.setFilterValue(value)}
       />
     </>
@@ -45,3 +46,4 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
 }
 
 registerComponent("Filter.select", SelectFilter);
+registerComponent("Filter.boolean", SelectFilter);

package/src/molecules/table/filters/TextFieldFilter.tsx

@@ -7,15 +7,17 @@ import { FilterTextOptions } from "./Filters";
 export function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {
   const InputText = getComponent<typeof DefaultInputText>("InputText");
   const columnFilterValue = header.column.getFilterValue();
-  const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
+  const uniqValues = useUniqValues<Data>({ header });
   const datalistId = `data_list_${header.column.id}`;
 
   return (
     <>
       {!options.disableDatalist && (
         <datalist id={datalistId}>
-          {uniqValues.map((value: any) => (
-            <option value={value} key={value} />
+          {uniqValues.map((item) => (
+            <option value={item.value} key={item.value}>
+              {item.label || item.value}
+            </option>
           ))}
         </datalist>
       )}

package/src/molecules/table/hooks/useTable.tsx

@@ -13,12 +13,12 @@ import {
 import { useEffect } from "react";
 
 import { useI18n } from "../../../hooks/useI18n.js";
-import { type FormOptions, type JSON, Operation } from "../../../interfaces";
+import { type FormOptions, Operation } from "../../../interfaces";
+import type { JSONRecord } from "../../../interfaces/JSONRecord.js";
 import { getComponent } from "../../../registries/components";
 import type { DefaultCellOperations } from "../components/DefaultCellOperations";
 
-export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
-  extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
+export interface UseTableProps<Data extends object = JSONRecord> extends Omit<TableOptions<Data>, "onClick" | "getCoreRowModel"> {
   operations: Operation<Data>[];
   metadata?: Record<string, unknown>;
   i18n?: FormOptions["i18n"];
@@ -28,15 +28,10 @@ export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: st
   pageSizes?: number[];
 }
 
-export function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {
+export function useTable<Data extends object = JSONRecord>(props: UseTableProps<Data>) {
   const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
   const { t } = useI18n(props.i18n);
 
-  // const [pagination, setPagination] = useState({
-  //   pageIndex: 0, //initial page index
-  //   pageSize: 10 //default page size
-  // });
-
   const operations = props.operations.length
     ? ([
         {
@@ -54,10 +49,10 @@ export function useTable<Data extends { [key: string]: JSON } = { [key: string]:
     columns: [...props.columns, ...operations],
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,
-    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,
-    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting
-    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
+    getFilteredRowModel: !props.manualFiltering ? props.getFilteredRowModel || getFilteredRowModel() : undefined,
+    getSortedRowModel: !props.manualSorting ? props.getSortedRowModel || getSortedRowModel() : undefined,
+    getFacetedRowModel: !props.manualFaceted ? props.getFacetedRowModel || getFacetedRowModel() : undefined, // client-side faceting
+    getFacetedUniqueValues: !props.manualFaceted ? props.getFacetedUniqueValues || getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete
   });
 
   const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =

package/src/molecules/table/hooks/useUniqValues.spec.tsx

@@ -0,0 +1,82 @@
+import { renderHook } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { useUniqValues } from "./useUniqValues";
+
+function createHeader({ variant, labels, values = [] }: { variant?: string; labels?: Record<string, string>; values?: string[] }) {
+  return {
+    column: {
+      columnDef: {
+        meta: {
+          filter: {
+            variant
+          },
+          labels
+        }
+      },
+      getFacetedUniqueValues: () => new Map(values.map((value) => [value, 1]))
+    }
+  } as any;
+}
+
+describe("useUniqValues", () => {
+  it("should return boolean options with the custom labels", () => {
+    const header = createHeader({
+      variant: "boolean",
+      labels: {
+        yes: "Enabled",
+        No: "Disabled"
+      }
+    });
+
+    const { result } = renderHook(() => useUniqValues({ header }));
+
+    expect(result.current).toEqual([
+      { label: "Enabled", value: "true" },
+      { label: "Disabled", value: "false" }
+    ]);
+  });
+
+  it("should map faceted unique values to select options", () => {
+    const header = createHeader({
+      values: ["beta", "alpha"]
+    });
+
+    const { result } = renderHook(() => useUniqValues({ header }));
+
+    expect(result.current).toEqual([
+      { label: "alpha", value: "alpha" },
+      { label: "beta", value: "beta" }
+    ]);
+  });
+
+  it("should return provided select options", () => {
+    const header = createHeader({});
+    const options = [
+      { label: "First", value: "first" },
+      { label: "Second", value: "second" }
+    ];
+
+    const { result } = renderHook(() => useUniqValues({ header, options: { variant: "select", options } as any }));
+
+    expect(result.current).toEqual(options);
+  });
+
+  it("should resolve select options from callback", () => {
+    const header = createHeader({});
+    const optionsFn = vi.fn().mockReturnValue([{ label: "From callback", value: "callback" }]);
+
+    const { result } = renderHook(() =>
+      useUniqValues({
+        header,
+        options: { variant: "select", options: optionsFn } as any
+      })
+    );
+
+    expect(optionsFn).toHaveBeenCalledWith({
+      header,
+      options: { variant: "select", options: optionsFn }
+    });
+    expect(result.current).toEqual([{ label: "From callback", value: "callback" }]);
+  });
+});

package/src/molecules/table/hooks/useUniqValues.tsx

@@ -1,10 +1,42 @@
-import type { Header } from "@tanstack/react-table";
 import { useMemo } from "react";
 
-export function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {
-  return useMemo(
-    () => (filterVariant === "range" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),
+import { SelectOptionProps } from "../../../molecules/forms/select/Select.interface";
+import type { FilterProps } from "../components/DefaultFilter";
+import { FilterSelectOptions } from "../filters/Filters";
 
-    [header.column, filterVariant]
-  );
+export function useUniqValues<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>): SelectOptionProps[] {
+  return useMemo(() => {
+    const providedOptions = options?.options;
+
+    if (providedOptions) {
+      if (typeof providedOptions === "function") {
+        return providedOptions({ header, options: options as FilterSelectOptions });
+      }
+
+      return providedOptions;
+    }
+
+    switch (header.column.columnDef.meta?.filter?.variant) {
+      case "boolean":
+        return [
+          { label: header.column.columnDef.meta?.labels?.["yes"] || "Yes", value: "true" },
+          {
+            label: header.column.columnDef.meta?.labels?.["no"] || header.column.columnDef.meta?.labels?.["No"] || "No",
+            value: "false"
+          }
+        ];
+
+      default:
+        return Array.from(header.column.getFacetedUniqueValues().keys())
+          .flat()
+          .filter((value) => value !== undefined && value !== null)
+          .map((value) => String(value))
+          .sort()
+          .slice(0, 5000)
+          .map((value) => ({
+            label: value,
+            value
+          }));
+    }
+  }, [header, options]);
 }

package/src/molecules/table/interfaces/extends.ts

@@ -7,6 +7,9 @@ declare module "@tanstack/react-table" {
   //allows us to define custom properties for our columns
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
+    type?: "string" | "number" | "boolean" | "date" | string;
+    format?: string;
+    labels?: Record<string, string>;
     filter?: FilterOptions;
     sort?: string;
     cellProps?: TdHTMLAttributes<HTMLTableCellElement>;

package/src/molecules/table/utils/mapFormToColumns.spec.tsx

@@ -0,0 +1,116 @@
+import { DefaultCellBoolean } from "../components/DefaultBooleanCell";
+import { DefaultCell } from "../components/DefaultCell";
+import { DefaultDateCell } from "../components/DefaultDateCell";
+import { mapFormToColumns } from "./mapFormToColumns";
+
+describe("mapFormToColumns", () => {
+  it("should use DefaultCellBoolean for mapped checkbox table columns", () => {
+    const form = {
+      components: [
+        {
+          type: "checkbox",
+          key: "enabled",
+          label: "Enabled:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const [column] = mapFormToColumns({ form: form }) as any[];
+
+    expect(column.accessorKey).toEqual("data.enabled");
+    expect(column.header).toEqual("Enabled");
+    expect(column.meta.type).toEqual("boolean");
+    expect(column.meta.filter.variant).toEqual("boolean");
+    expect(column.cell).toBe(DefaultCellBoolean);
+  });
+
+  it("should fallback to DefaultCell for kept columns without a cell renderer", () => {
+    const form = {
+      components: []
+    } as any;
+
+    const [column] = mapFormToColumns({ form: form, columns: [{ accessorKey: "data.other", header: "Other" } as any] }) as any[];
+
+    expect(column.accessorKey).toEqual("data.other");
+    expect(column.cell).toBe(DefaultCell);
+  });
+
+  it("should merge a kept column matched by component key", () => {
+    const form = {
+      components: [
+        {
+          type: "textfield",
+          key: "name",
+          label: "Name:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const [column] = mapFormToColumns({
+      form: form,
+      columns: [
+        {
+          id: "name",
+          header: "Custom name",
+          meta: {
+            order: 5,
+            filter: {
+              variant: "text"
+            }
+          }
+        } as any
+      ]
+    }) as any[];
+
+    expect(column.accessorKey).toEqual("data.name");
+    expect(column.header).toEqual("Custom name");
+    expect(column.meta.order).toEqual(5);
+  });
+
+  it("should use DefaultDateCell for mapped datetime columns", () => {
+    const form = {
+      components: [
+        {
+          type: "datetime",
+          key: "createdAt",
+          label: "Created at:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const [column] = mapFormToColumns({ form: form }) as any[];
+
+    expect(column.accessorKey).toEqual("data.createdAt");
+    expect(column.meta.type).toEqual("date");
+    expect(column.cell).toBe(DefaultDateCell);
+  });
+
+  it("should dedupe columns when a kept column matches a mapped accessor key", () => {
+    const form = {
+      components: [
+        {
+          type: "textfield",
+          key: "email",
+          label: "Email:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const columns = mapFormToColumns({
+      form: form,
+      columns: [
+        {
+          accessorKey: "data.email",
+          header: "Email"
+        } as any
+      ]
+    }) as any[];
+
+    expect(columns).toHaveLength(1);
+    expect(columns[0].accessorKey).toEqual("data.email");
+  });
+});

package/src/molecules/table/utils/mapFormToColumns.tsx

@@ -1,6 +1,5 @@
 import "../interfaces/extends";
 
-import { Components } from "@formio/js";
 import { ColumnDef, ColumnDefResolved, createColumnHelper } from "@tanstack/react-table";
 import cloneDeep from "lodash/cloneDeep";
 import get from "lodash/get";
@@ -8,20 +7,46 @@ import get from "lodash/get";
 import type { ComponentType, FormType } from "../../../interfaces";
 import { getComponent } from "../../../registries/components";
 import type { DefaultCell } from "../components/DefaultCell";
-import type { FilterVariants } from "../filters/Filters.js";
+import type { FilterVariants } from "../filters/Filters";
 
-const MAP_TYPES: Record<string, FilterVariants> = {
+const MAP_FILTER_TYPES: Record<string, FilterVariants> = {
   number: "range",
   currency: "range",
   checkbox: "boolean"
-};
+} as const;
 
-export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {
+const MAP_TYPES = {
+  date: "date",
+  datetime: "date",
+  number: "number",
+  currency: "currency",
+  checkbox: "boolean"
+} as const;
+
+function getColumnIdentity<Data>(column: ColumnDef<Data, any> | ColumnDefResolved<Data, any>) {
+  if ("id" in column && typeof column.id === "string") {
+    return column.id;
+  }
+
+  if ("accessorKey" in column && typeof column.accessorKey === "string") {
+    return column.accessorKey;
+  }
+
+  return undefined;
+}
+
+export function mapFormToColumns<Data = any>({
+  form,
+  columns = [],
+  prefix = "data."
+}: {
+  form: FormType;
+  columns?: ColumnDefResolved<Data, any>[];
+  prefix?: string;
+}): ColumnDef<Data, any>[] {
   const columnHelper = createColumnHelper<Data>();
   const columnsToKeep = cloneDeep(columns);
 
-  const Cell = getComponent<typeof DefaultCell>("Cell");
-
   const columnsFromComponents = form.components
     .flatMap((component) => {
       if (component.type === "tabs") {
@@ -33,10 +58,13 @@ export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefR
     .filter((component) => component?.tableView)
     .map((c) => {
       const component = c as ComponentType;
-      const cmp: any = Components.create(component, {}, null);
+      const componentColumnKey = `${prefix}${component.key}`;
+      const matchingKeys = new Set([component.key, componentColumnKey]);
 
-      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
-        return accessorKey === `data.${component.key}`;
+      const columnIndex = columnsToKeep.findIndex((column) => {
+        const identity = getColumnIdentity(column);
+
+        return identity ? matchingKeys.has(identity) : false;
       });
 
       let column = columnsToKeep[columnIndex];
@@ -45,31 +73,43 @@ export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefR
         columnsToKeep.splice(columnIndex, 1);
       }
 
-      return columnHelper.accessor(`data.${component.key}` as any, {
+      return columnHelper.accessor(componentColumnKey as any, {
         header: (component.label || component.title || component.key)?.replace(/:/, ""),
-        cell: (info) => {
-          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;
-        },
         meta: {
-          filter: { variant: MAP_TYPES[component.type!] || "text" },
+          type: (MAP_TYPES[component.type as keyof typeof MAP_TYPES] || component.type) as any,
+          filter: {
+            ...column?.meta?.filter,
+            variant: MAP_FILTER_TYPES[component.type as keyof typeof MAP_FILTER_TYPES] || "text"
+          },
           ...(column?.meta || {})
         },
         ...(column || {})
       });
     });
 
-  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({
-    ...column,
-    meta: {
-      ...(column.meta || {}),
-      order: get(column, "meta.order", index * 10)
-    },
-    cell:
-      column.cell ||
-      ((info) => {
-        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;
-      })
-  }));
+  const dedupedColumns = [...columnsFromComponents, ...(columnsToKeep as any[])].reduce<ColumnDef<Data, any>[]>((acc, column) => {
+    const identity = getColumnIdentity(column);
+
+    if (identity && acc.some((existingColumn) => getColumnIdentity(existingColumn) === identity)) {
+      return acc;
+    }
+
+    acc.push(column);
+    return acc;
+  }, []);
+
+  const mergedColumns = dedupedColumns.map((column, index) => {
+    const Cell = getComponent<typeof DefaultCell>([`Cell.${column.id}`, `Cell.${column.meta?.type}`, "Cell"]);
+
+    return {
+      ...column,
+      meta: {
+        ...column?.meta,
+        order: get(column, "meta.order", index * 10)
+      },
+      cell: column.cell || Cell
+    };
+  });
 
   return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];
 }

package/src/organisms/form/Form.stories.tsx

@@ -260,12 +260,17 @@ export const WithSubmissionData: Story = {
  */
 export const WithOnSubmit: Story = {
   render(args) {
+    type OnSubmitData = {
+      firstName?: string;
+      [key: string]: unknown;
+    };
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [data, setData] = useState(() => args.submission!.data);
+    const [data, setData] = useState<OnSubmitData>(() => args.submission!.data as OnSubmitData);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-      setData(args.submission!.data);
+      setData(args.submission!.data as OnSubmitData);
     }, [args.submission]);
 
     return (

package/src/organisms/form/Form.tsx

@@ -1,9 +1,9 @@
-import { JSON } from "../../interfaces";
+import type { JSONRecord } from "../../interfaces/JSONRecord.js";
 import { useForm, UseFormProps } from "./useForm";
 
 class CSSProperties {}
 
-export interface FormProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseFormProps<Data> {
+export interface FormProps<Data extends object = JSONRecord> extends UseFormProps<Data> {
   ["data-testid"]?: string;
   /**
    *
@@ -13,7 +13,7 @@ export interface FormProps<Data extends { [key: string]: JSON } = { [key: string
   style?: CSSProperties;
 }
 
-export function Form<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+export function Form<Data extends object = JSONRecord>({
   style,
   className,
   "data-testid": dataTestId = "formio-container",

package/src/organisms/form/types.ts

@@ -1,8 +1,3 @@
-import { ComponentType, JSON, SubmissionType } from "../../interfaces";
-
-export interface FormPageChangeProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
-  page: number;
-  submission: SubmissionType<Data>;
-}
+import { ComponentType } from "../../interfaces";
 
 export type FormCustomEvent = { type: string; event: string; component: ComponentType; data: any };