@tsed/react-formio 3.0.0-rc.12 → 3.0.0-rc.14

package/src/molecules/table/components/DefaultCell.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+
+import { DefaultCell } from "./DefaultCell";
+
+function createCellContext(value: unknown, rendered: unknown) {
+  return {
+    getValue: () => value,
+    renderValue: () => rendered
+  } as any;
+}
+
+describe("DefaultCell", () => {
+  it("should render an empty span when value is undefined", () => {
+    render(<DefaultCell {...createCellContext(undefined, undefined)} />);
+
+    expect(screen.getByText("", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it("should render html when rendered value differs from raw value", () => {
+    render(<DefaultCell {...createCellContext("hello", "<strong>hello</strong>")} />);
+
+    expect(screen.getByText("hello", { selector: "strong" })).toBeInTheDocument();
+  });
+
+  it("should render text when rendered value matches raw value", () => {
+    render(<DefaultCell {...createCellContext("hello", "hello")} />);
+
+    expect(screen.getByText("hello", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText("hello", { selector: "strong" })).not.toBeInTheDocument();
+  });
+});

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

@@ -1,22 +1,21 @@
-import { registerComponent } from "../../../registries/components";
+import type { CellContext } from "@tanstack/react-table";
 
-export interface DefaultCellProps<Data = any> {
-  value: Data;
-  render?: (value: Data) => any;
-}
+import { registerComponent } from "../../../registries/components";
 
-export function DefaultCell<Data = any>({ value, render = (f: any) => f }: DefaultCellProps<Data>): JSX.Element {
+export function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<Data, any>): JSX.Element {
+  const value = getValue();
   if (value === undefined) {
     return <span></span>;
   }
 
-  const rendered = render(value);
+  const rendered = renderValue();
 
-  if (value !== rendered) {
-    return <div dangerouslySetInnerHTML={{ __html: rendered }} />;
+  if (rendered != null && value !== rendered) {
+    return <div dangerouslySetInnerHTML={{ __html: String(rendered) }} />;
   }
 
   return <span>{String(value)}</span>;
 }
 
 registerComponent("Cell", DefaultCell);
+registerComponent("Cell.string", DefaultCell);

package/src/molecules/table/components/DefaultDateCell.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+
+import { DefaultDateCell } from "./DefaultDateCell";
+
+function createCellContext(value: string | undefined, format?: string) {
+  return {
+    getValue: () => value,
+    column: {
+      columnDef: {
+        meta: {
+          format
+        }
+      }
+    }
+  } as any;
+}
+
+describe("DefaultDateCell", () => {
+  it("should render an empty span when value is undefined", () => {
+    render(<DefaultDateCell {...createCellContext(undefined)} />);
+
+    expect(screen.getByText("", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it("should render the formatted date with the default format", () => {
+    render(<DefaultDateCell {...createCellContext("2026-03-12T10:30:00.000Z")} />);
+
+    expect(screen.getByText("03/12/2026", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should render the formatted date with a custom format", () => {
+    render(<DefaultDateCell {...createCellContext("2026-03-12T10:30:00.000Z", "YYYY-MM-DD HH:mm")} />);
+
+    expect(screen.getByText("2026-03-12 10:30", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should fallback to the raw value when the date is invalid", () => {
+    render(<DefaultDateCell {...createCellContext("not-a-date")} />);
+
+    expect(screen.getByText("not-a-date", { selector: "span" })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { CellContext } from "@tanstack/react-table";
+import moment from "moment";
+
+import { registerComponent } from "../../../registries/components";
+
+export function DefaultDateCell<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, string>) {
+  const value = getValue();
+
+  if (!value) {
+    return <span />;
+  }
+
+  const date = moment.parseZone(value, moment.ISO_8601, true);
+
+  if (!date.isValid()) {
+    return <span>{String(value)}</span>;
+  }
+
+  return <span>{date.format(columnDef.meta?.format || "L")}</span>;
+}
+
+registerComponent("Cell.date", DefaultDateCell);
+registerComponent("Cell.datetime", DefaultDateCell);

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/filters/Filters.d.ts

@@ -8,6 +8,7 @@ export interface FilterBaseOptions extends Record<string, unknown> {
 
 export interface FilterTextOptions extends FilterBaseOptions {
   variant: "text";
+  disabled?: boolean;
   disableDatalist?: boolean;
 }
 

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

@@ -34,6 +34,7 @@ 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}`}

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,55 @@
+import { DefaultCell } from "../components/DefaultCell";
+import { DefaultDateCell } from "../components/DefaultDateCell";
+import { mapFormToColumns } from "./mapFormToColumns";
+
+describe("mapFormToColumns", () => {
+  it("should use DefaultCell for mapped table columns", () => {
+    const form = {
+      components: [
+        {
+          type: "checkbox",
+          key: "enabled",
+          label: "Enabled:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const [column] = mapFormToColumns(form) as any[];
+
+    expect(column.accessorKey).toEqual("data.enabled");
+    expect(column.header).toEqual("Enabled");
+    expect(column.meta.filter.variant).toEqual("boolean");
+    expect(column.cell).toBe(DefaultCell);
+  });
+
+  it("should fallback to DefaultCell for kept columns without a cell renderer", () => {
+    const form = {
+      components: []
+    } as any;
+
+    const [column] = mapFormToColumns(form, [{ accessorKey: "data.other", header: "Other" } as any]) as any[];
+
+    expect(column.accessorKey).toEqual("data.other");
+    expect(column.cell).toBe(DefaultCell);
+  });
+
+  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) as any[];
+
+    expect(column.accessorKey).toEqual("data.createdAt");
+    expect(column.meta.type).toEqual("date");
+    expect(column.cell).toBe(DefaultDateCell);
+  });
+});

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";
@@ -10,18 +9,24 @@ import { getComponent } from "../../../registries/components";
 import type { DefaultCell } from "../components/DefaultCell";
 import type { FilterVariants } from "../filters/Filters.js";
 
-const MAP_TYPES: Record<string, FilterVariants> = {
+const MAP_FILTER_TYPES: Record<string, FilterVariants> = {
   number: "range",
   currency: "range",
   checkbox: "boolean"
-};
+} as const;
+
+const MAP_TYPES = {
+  date: "date",
+  datetime: "date",
+  number: "number",
+  currency: "currency",
+  checkbox: "boolean"
+} as const;
 
 export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): 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,7 +38,6 @@ 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 columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
         return accessorKey === `data.${component.key}`;
@@ -47,29 +51,30 @@ export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefR
 
       return columnHelper.accessor(`data.${component.key}` 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,
+          filter: {
+            ...column?.meta?.filter,
+            variant: MAP_FILTER_TYPES[component.type!] || "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 mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).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/dist/interfaces/QueryOptions.d.ts

@@ -1,23 +0,0 @@
-import { ColumnIdentifier } from './ColumnIdentifier';
-export type QueryOptions = {
-    /**
-     * Current displayed page
-     */
-    pageIndex: any;
-    /**
-     * Pagination size
-     */
-    pageSize: any;
-    /**
-     * SortBy state
-     */
-    sortBy: ColumnIdentifier[];
-    /**
-     * Filters state
-     */
-    filters: ColumnIdentifier[];
-    /**
-     * Focused input filter (let the Table component retrieve focus state when we fill the filter)
-     */
-    filterId: string;
-};

package/dist/interfaces/QueryOptions.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=QueryOptions.js.map

package/dist/interfaces/QueryOptions.js.map

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

package/src/interfaces/QueryOptions.ts

@@ -1,24 +0,0 @@
-import { ColumnIdentifier } from "./ColumnIdentifier";
-
-export type QueryOptions = {
-  /**
-   * Current displayed page
-   */
-  pageIndex: any;
-  /**
-   * Pagination size
-   */
-  pageSize: any;
-  /**
-   * SortBy state
-   */
-  sortBy: ColumnIdentifier[];
-  /**
-   * Filters state
-   */
-  filters: ColumnIdentifier[];
-  /**
-   * Focused input filter (let the Table component retrieve focus state when we fill the filter)
-   */
-  filterId: string;
-};