@ifto/mantine-kit 0.3.0 → 0.5.1

package/dist/component/organism/ViewTable/ViewTable.js

@@ -1,113 +1,28 @@
 "use client";
 import { useKitConfig } from "../../../provider/useKit.js";
-import { columnComparator } from "./ColumnComparator.js";
-import { useRowKey } from "./useRowKey.js";
-import { useEffect, useMemo, useState } from "react";
+import DataTableView from "./DataTableView.js";
+import { useClientTableState } from "./useClientTableState.js";
 import { jsx } from "react/jsx-runtime";
-import { DataTable } from "mantine-datatable";
 // src/component/organism/ViewTable/ViewTable.tsx
-/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */
-var PAGE_SIZES = [
-	10,
-	20,
-	50,
-	200
-];
-/** Default sort when neither `defaultSortStatus` nor `compare` is given. */
-var DEFAULT_SORT_STATUS = {
-	columnAccessor: "id",
-	direction: "asc"
-};
 /**
-* Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no
-* header shows the sort indicator, and the first click on any column sorts it in ascending order.
+* Table that sorts (following the locale) and paginates in the browser all the given records, on top of the
+* mantine-datatable `DataTable`.
+* @template M type of the records, shown one per row
 */
-var NO_COLUMN_SORT_STATUS = {
-	columnAccessor: "",
-	direction: "asc"
-};
-/**
-* The ViewTable component is a wrapper for the Mantine DataTable component.
-* @template M - Model that extends from {@link Identifiable}
-* @param data the data to be displayed in this ViewTable
-* @param {DataTableColumn<M>[]} columns - The columns to be displayed in this ViewTable
-* @param loading Indicates if the data to be displayed is being loaded yet or not
-* @param pagination Indicates whether to show pagination or not.
-* @param getPaginationControlProps extra attributes for the pagination control buttons
-* @param compare comparison function of the initial order, replaced by the sort of the column chosen in the header
-* @param rest remaining props, passed to the DataTable
-* @return the table with the data, sortable and (optionally) paginated
-*/
-var ViewTable = ({ data, columns, loading, pagination = true, showIdColumn = true, defaultSortStatus, compare, getPaginationControlProps, ...rest }) => {
-	const { locale, messages } = useKitConfig();
-	const [page, setPage] = useState(1);
-	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
-	const [sortStatus, setSortStatus] = useState(defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS));
-	const [compareActive, setCompareActive] = useState(compare !== void 0);
-	const sortedData = useMemo(() => {
-		const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);
-		return [...data].sort(comparator);
-	}, [
+var ViewTable = ({ data, pagination = true, defaultSortStatus, compare, ...rest }) => {
+	const { locale } = useKitConfig();
+	const { records, ...state } = useClientTableState({
 		data,
-		sortStatus,
-		compareActive,
-		compare,
-		locale
-	]);
-	const records = useMemo(() => {
-		if (!pagination) return sortedData;
-		const from = (page - 1) * pageSize;
-		return sortedData.slice(from, from + pageSize);
-	}, [
-		sortedData,
 		pagination,
-		page,
-		pageSize
-	]);
-	const rowKey = useRowKey();
-	function changeSortStatus(status) {
-		setCompareActive(false);
-		setSortStatus(status);
-	}
-	const effectiveColumns = [{
-		title: "ID",
-		accessor: "id",
-		hidden: !showIdColumn,
-		sortable: true,
-		render: (item) => /* @__PURE__ */ jsx("span", { children: item.id })
-	}, ...columns];
-	useEffect(() => {
-		setPage(1);
-	}, [pageSize]);
-	useEffect(() => {
-		const totalPages = Math.ceil(data.length / pageSize);
-		setPage((currentPage) => totalPages && currentPage > totalPages ? totalPages : currentPage);
-	}, [data.length, pageSize]);
-	const paginationProps = pagination ? {
-		page,
-		onPageChange: (p) => setPage(p),
-		totalRecords: data.length,
-		recordsPerPage: pageSize,
-		recordsPerPageOptions: PAGE_SIZES,
-		onRecordsPerPageChange: setPageSize,
-		recordsPerPageLabel: messages.table.recordsPerPage,
-		paginationText: messages.table.pagination,
-		getPaginationControlProps
-	} : {};
-	return /* @__PURE__ */ jsx(DataTable, {
-		minHeight: 200,
-		verticalSpacing: "sm",
-		striped: true,
-		columns: effectiveColumns,
+		locale,
+		defaultSortStatus,
+		compare
+	});
+	return /* @__PURE__ */ jsx(DataTableView, {
+		...rest,
 		records,
-		idAccessor: rowKey,
-		noRecordsText: messages.table.noRecords,
-		fetching: loading,
-		sortStatus,
-		onSortStatusChange: changeSortStatus,
-		customRowAttributes: (record) => ({ "data-testid": `row-${record.id}` }),
-		...paginationProps,
-		...rest
+		state,
+		paginated: pagination
 	});
 };
 export { ViewTable as default };

package/dist/component/organism/ViewTable/ViewTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTable.js","names":[],"sources":["../../../../src/component/organism/ViewTable/ViewTable.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\n\nimport {\n    DataTable,\n    DataTableColumn,\n    DataTablePaginationProps,\n    DataTableProps,\n    DataTableSortStatus\n} from 'mantine-datatable';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { columnComparator, Comparator } from './ColumnComparator';\nimport { useRowKey } from './useRowKey';\n\n/** Options of records per page. The largest one lets long tables (and end-to-end tests) show every row in one page. */\nconst PAGE_SIZES = [10, 20, 50, 200];\n\n/** Default sort when neither `defaultSortStatus` nor `compare` is given. */\nconst DEFAULT_SORT_STATUS = { columnAccessor: 'id', direction: 'asc' } as const;\n\n/**\n * Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no\n * header shows the sort indicator, and the first click on any column sorts it in ascending order.\n */\nconst NO_COLUMN_SORT_STATUS = { columnAccessor: '', direction: 'asc' } as const;\n\n/** Function that defines extra attributes (e.g. aria-label) for each pagination control button. */\ntype PaginationControlPropsGetter = Extract<DataTablePaginationProps, { page: number }>['getPaginationControlProps'];\n\n/**\n * Props of the {@link DataTable} passed straight through by the ViewTable.\n * Only the props actually used by the callers are accepted: using `Partial<DataTableProps<M>>` makes TypeScript combine\n * the variants of the `DataTableProps` union with the ones of `paginationProps`, which exhausts the memory of `tsc`.\n */\ntype DataTablePassThroughProps<M extends Identifiable> = Pick<\n    DataTableProps<M>,\n    | 'onRowClick'\n    | 'rowStyle'\n    | 'noRecordsText'\n    | 'highlightOnHover'\n    | 'highlightOnHoverColor'\n    | 'className'\n    | 'minHeight'\n    | 'withColumnBorders'\n    | 'verticalSpacing'\n    | 'horizontalSpacing'\n>;\n\n/**\n * TableProps is a generic type for the ViewTable component props.\n */\ntype TableProps<M extends Identifiable> = {\n    data: M[];\n    columns: DataTableColumn<M>[];\n    loading?: boolean;\n    pagination?: boolean;\n    /** Shows the ID column, automatically added to the given columns. */\n    showIdColumn?: boolean;\n    /**\n     * Initial sort of the table. Default: by `id`, ascending.\n     * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already\n     * returns the data in an order to keep). Along with `compare`, it only tells which header shows the sort indicator\n     * in the initial order.\n     */\n    defaultSortStatus?: DataTableSortStatus<M>;\n    /**\n     * Comparison function that defines the initial order, instead of the column of `defaultSortStatus`. It allows\n     * sorting by more than one criterion (e.g. city and, in the same city, year descending). After the user clicks the\n     * header of a column, the sort of the column applies.\n     */\n    compare?: Comparator<M>;\n    /** Extra attributes for the pagination control buttons. It only has effect when `pagination` is true. */\n    getPaginationControlProps?: PaginationControlPropsGetter;\n} & DataTablePassThroughProps<M>;\n\n/**\n * The ViewTable component is a wrapper for the Mantine DataTable component.\n * @template M - Model that extends from {@link Identifiable}\n * @param data the data to be displayed in this ViewTable\n * @param {DataTableColumn<M>[]} columns - The columns to be displayed in this ViewTable\n * @param loading Indicates if the data to be displayed is being loaded yet or not\n * @param pagination Indicates whether to show pagination or not.\n * @param getPaginationControlProps extra attributes for the pagination control buttons\n * @param compare comparison function of the initial order, replaced by the sort of the column chosen in the header\n * @param rest remaining props, passed to the DataTable\n * @return the table with the data, sortable and (optionally) paginated\n */\nconst ViewTable = <M extends Identifiable>({\n    data,\n    columns,\n    loading,\n    pagination = true,\n    showIdColumn = true,\n    defaultSortStatus,\n    compare,\n    getPaginationControlProps,\n    ...rest\n}: TableProps<M>) => {\n    const { locale, messages } = useKitConfig();\n    const [page, setPage] = useState(1);\n    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);\n    const [sortStatus, setSortStatus] = useState<DataTableSortStatus<M>>(\n        defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS)\n    );\n    // The `compare` function applies until the user chooses a column in the header.\n    const [compareActive, setCompareActive] = useState(compare !== undefined);\n\n    /*\n     * Sorts all records before cutting the page, so each page (including in descending order) shows its part of the\n     * whole set. The copy keeps the order of the given array. It is separate from the page cut, so not everything is\n     * sorted again on every change of page or page size.\n     */\n    const sortedData = useMemo(() => {\n        const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);\n\n        return [...data].sort(comparator);\n    }, [data, sortStatus, compareActive, compare, locale]);\n\n    // Without pagination, shows all records (e.g. a printed report), not only the ones of the first page.\n    const records = useMemo(() => {\n        if (!pagination) return sortedData;\n\n        const from = (page - 1) * pageSize;\n        return sortedData.slice(from, from + pageSize);\n    }, [sortedData, pagination, page, pageSize]);\n    const rowKey = useRowKey<M>();\n\n    function changeSortStatus(status: DataTableSortStatus<M>): void {\n        setCompareActive(false);\n        setSortStatus(status);\n    }\n\n    const effectiveColumns: DataTableColumn<M>[] = [\n        {\n            title: 'ID',\n            accessor: 'id',\n            hidden: !showIdColumn,\n            sortable: true,\n            render: item => <span>{item.id}</span>\n        },\n        ...columns\n    ];\n\n    useEffect(() => {\n        setPage(1);\n    }, [pageSize]);\n\n    /* If the data shrinks, goes back to the last existing page. The functional update avoids using an outdated `page`\n       when the effect above has just gone back to page 1. */\n    useEffect(() => {\n        const totalPages = Math.ceil(data.length / pageSize);\n        setPage(currentPage => (totalPages && currentPage > totalPages ? totalPages : currentPage));\n    }, [data.length, pageSize]);\n\n    /* Typed only with the pagination props (and not as Partial<DataTableProps>) to not exhaust the memory of tsc.\n       See the comment of DataTablePassThroughProps. */\n    const paginationProps: DataTablePaginationProps = pagination\n        ? {\n              page,\n              onPageChange: p => setPage(p),\n              totalRecords: data.length,\n              recordsPerPage: pageSize,\n              recordsPerPageOptions: PAGE_SIZES,\n              onRecordsPerPageChange: setPageSize,\n              recordsPerPageLabel: messages.table.recordsPerPage,\n              paginationText: messages.table.pagination,\n              getPaginationControlProps\n          }\n        : {};\n\n    // This DataTable is the one of https://www.npmjs.com/package/mantine-datatable (there are other libraries with this name).\n    return (\n        <DataTable\n            minHeight={200}\n            verticalSpacing=\"sm\"\n            striped\n            columns={effectiveColumns}\n            records={records}\n            idAccessor={rowKey}\n            noRecordsText={messages.table.noRecords}\n            fetching={loading}\n            sortStatus={sortStatus}\n            onSortStatusChange={changeSortStatus}\n            customRowAttributes={record => ({ 'data-testid': `row-${record.id}` })}\n            {...paginationProps}\n            {...rest}\n        />\n    );\n};\n\nexport default ViewTable;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,aAAa;CAAC;CAAI;CAAI;CAAI;AAAG;;AAGnC,IAAM,sBAAsB;CAAE,gBAAgB;CAAM,WAAW;AAAM;;;;;AAMrE,IAAM,wBAAwB;CAAE,gBAAgB;CAAI,WAAW;AAAM;;;;;;;;;;;;;AA+DrE,IAAM,aAAqC,EACvC,MACA,SACA,SACA,aAAa,MACb,eAAe,MACf,mBACA,SACA,2BACA,GAAG,WACc;CACjB,MAAM,EAAE,QAAQ,aAAa,aAAa;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAClC,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW,EAAE;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAChC,sBAAsB,UAAU,wBAAwB,oBAC5D;CAEA,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY,KAAA,CAAS;CAOxE,MAAM,aAAa,cAAc;EAC7B,MAAM,aAAa,iBAAiB,UAAU,UAAU,iBAAiB,YAAY,MAAM;EAE3F,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,UAAU;CACpC,GAAG;EAAC;EAAM;EAAY;EAAe;EAAS;CAAM,CAAC;CAGrD,MAAM,UAAU,cAAc;EAC1B,IAAI,CAAC,YAAY,OAAO;EAExB,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,WAAW,MAAM,MAAM,OAAO,QAAQ;CACjD,GAAG;EAAC;EAAY;EAAY;EAAM;CAAQ,CAAC;CAC3C,MAAM,SAAS,UAAa;CAE5B,SAAS,iBAAiB,QAAsC;EAC5D,iBAAiB,KAAK;EACtB,cAAc,MAAM;CACxB;CAEA,MAAM,mBAAyC,CAC3C;EACI,OAAO;EACP,UAAU;EACV,QAAQ,CAAC;EACT,UAAU;EACV,SAAQ,SAAQ,oBAAC,QAAD,EAAA,UAAO,KAAK,GAAS,CAAA;CACzC,GACA,GAAG,OACP;CAEA,gBAAgB;EACZ,QAAQ,CAAC;CACb,GAAG,CAAC,QAAQ,CAAC;CAIb,gBAAgB;EACZ,MAAM,aAAa,KAAK,KAAK,KAAK,SAAS,QAAQ;EACnD,SAAQ,gBAAgB,cAAc,cAAc,aAAa,aAAa,WAAY;CAC9F,GAAG,CAAC,KAAK,QAAQ,QAAQ,CAAC;CAI1B,MAAM,kBAA4C,aAC5C;EACI;EACA,eAAc,MAAK,QAAQ,CAAC;EAC5B,cAAc,KAAK;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB,SAAS,MAAM;EACpC,gBAAgB,SAAS,MAAM;EAC/B;CACJ,IACA,CAAC;CAGP,OACI,oBAAC,WAAD;EACI,WAAW;EACX,iBAAgB;EAChB,SAAA;EACA,SAAS;EACA;EACT,YAAY;EACZ,eAAe,SAAS,MAAM;EAC9B,UAAU;EACE;EACZ,oBAAoB;EACpB,sBAAqB,YAAW,EAAE,eAAe,OAAO,OAAO,KAAK;EACpE,GAAI;EACJ,GAAI;CACP,CAAA;AAET"}
+{"version":3,"file":"ViewTable.js","names":[],"sources":["../../../../src/component/organism/ViewTable/ViewTable.tsx"],"sourcesContent":["'use client';\n\nimport { DataTableSortStatus } from 'mantine-datatable';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { Comparator } from './ColumnComparator';\nimport DataTableView, { DataTableViewBaseProps } from './DataTableView';\nimport { useClientTableState } from './useClientTableState';\n\n/** Props of the {@link ViewTable}. */\ntype ViewTableProps<M extends Identifiable> = DataTableViewBaseProps<M> & {\n    /** All records of the table. */\n    data: M[];\n\n    /** Whether the table is paginated; defaults to true. Without it, every record is shown (e.g. a printed report). */\n    pagination?: boolean;\n\n    /**\n     * Initial sort of the table. Default: by `id`, ascending.\n     * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already\n     * returns the data in an order to keep). Along with `compare`, it only tells which header shows the sort indicator\n     * in the initial order.\n     */\n    defaultSortStatus?: DataTableSortStatus<M>;\n\n    /**\n     * Comparison function that defines the initial order, instead of the column of `defaultSortStatus`. It allows\n     * sorting by more than one criterion (e.g. city and, in the same city, year descending). After the user clicks the\n     * header of a column, the sort of the column applies.\n     */\n    compare?: Comparator<M>;\n};\n\n/**\n * Table that sorts (following the locale) and paginates in the browser all the given records, on top of the\n * mantine-datatable `DataTable`.\n * @template M type of the records, shown one per row\n */\nconst ViewTable = <M extends Identifiable>({\n    data,\n    pagination = true,\n    defaultSortStatus,\n    compare,\n    ...rest\n}: ViewTableProps<M>) => {\n    const { locale } = useKitConfig();\n    const { records, ...state } = useClientTableState({ data, pagination, locale, defaultSortStatus, compare });\n\n    return <DataTableView {...rest} records={records} state={state} paginated={pagination} />;\n};\n\nexport default ViewTable;\n"],"mappings":";;;;;;;;;;;AAuCA,IAAM,aAAqC,EACvC,MACA,aAAa,MACb,mBACA,SACA,GAAG,WACkB;CACrB,MAAM,EAAE,WAAW,aAAa;CAChC,MAAM,EAAE,SAAS,GAAG,UAAU,oBAAoB;EAAE;EAAM;EAAY;EAAQ;EAAmB;CAAQ,CAAC;CAE1G,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAe;EAAgB;EAAO,WAAW;CAAa,CAAA;AAC5F"}

package/dist/component/organism/ViewTable/useClientTableState.d.ts

@@ -0,0 +1,25 @@
+import type { DataTableSortStatus } from 'mantine-datatable';
+import { Comparator } from './ColumnComparator';
+import { TableState } from './TableState';
+/** Options of {@link useClientTableState}. */
+type ClientTableOptions<M> = {
+    /** All records of the table. */
+    data: M[];
+    /** Whether only the records of the current page are returned. */
+    pagination: boolean;
+    /** Locale of the text comparison. */
+    locale: string;
+    /** Initial sort; defaults to {@link DEFAULT_SORT_STATUS}, or to no column when `compare` is given. */
+    defaultSortStatus?: DataTableSortStatus<M>;
+    /** Comparison function of the initial order, replaced by the sort of the column chosen in the header. */
+    compare?: Comparator<M>;
+};
+/**
+ * Sorts and paginates in the browser all the records of a table.
+ * @template M type of the records
+ * @return the state of the table and the records to show
+ */
+export declare function useClientTableState<M>({ data, pagination, locale, defaultSortStatus, compare }: ClientTableOptions<M>): TableState<M> & {
+    records: M[];
+};
+export {};

package/dist/component/organism/ViewTable/useClientTableState.js

@@ -0,0 +1,68 @@
+"use client";
+import { columnComparator } from "./ColumnComparator.js";
+import { DEFAULT_SORT_STATUS, PAGE_SIZES } from "./TableState.js";
+import { useEffect, useMemo, useState } from "react";
+// src/component/organism/ViewTable/useClientTableState.ts
+/**
+* Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no
+* header shows the sort indicator, and the first click on any column sorts it in ascending order.
+*/
+var NO_COLUMN_SORT_STATUS = {
+	columnAccessor: "",
+	direction: "asc"
+};
+/**
+* Sorts and paginates in the browser all the records of a table.
+* @template M type of the records
+* @return the state of the table and the records to show
+*/
+function useClientTableState({ data, pagination, locale, defaultSortStatus, compare }) {
+	const [page, setPage] = useState(1);
+	const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
+	const [sortStatus, setSortStatus] = useState(defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS));
+	const [compareActive, setCompareActive] = useState(compare !== void 0);
+	const sortedData = useMemo(() => {
+		const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);
+		return [...data].sort(comparator);
+	}, [
+		data,
+		sortStatus,
+		compareActive,
+		compare,
+		locale
+	]);
+	const records = useMemo(() => {
+		if (!pagination) return sortedData;
+		const from = (page - 1) * pageSize;
+		return sortedData.slice(from, from + pageSize);
+	}, [
+		sortedData,
+		pagination,
+		page,
+		pageSize
+	]);
+	function changeSortStatus(status) {
+		setCompareActive(false);
+		setSortStatus(status);
+	}
+	useEffect(() => {
+		setPage(1);
+	}, [pageSize]);
+	useEffect(() => {
+		const totalPages = Math.ceil(data.length / pageSize);
+		setPage((currentPage) => totalPages && currentPage > totalPages ? totalPages : currentPage);
+	}, [data.length, pageSize]);
+	return {
+		records,
+		page,
+		pageSize,
+		sortStatus,
+		totalRecords: data.length,
+		onPageChange: setPage,
+		onPageSizeChange: setPageSize,
+		onSortStatusChange: changeSortStatus
+	};
+}
+export { useClientTableState };
+
+//# sourceMappingURL=useClientTableState.js.map

package/dist/component/organism/ViewTable/useClientTableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientTableState.js","names":[],"sources":["../../../../src/component/organism/ViewTable/useClientTableState.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport type { DataTableSortStatus } from 'mantine-datatable';\n\nimport { columnComparator, Comparator } from './ColumnComparator';\nimport { DEFAULT_SORT_STATUS, FIRST_PAGE, PAGE_SIZES, TableState } from './TableState';\n\n/**\n * Sort used while the `compare` function applies, when `defaultSortStatus` is not given: it matches no column, so no\n * header shows the sort indicator, and the first click on any column sorts it in ascending order.\n */\nconst NO_COLUMN_SORT_STATUS = { columnAccessor: '', direction: 'asc' } as const;\n\n/** Options of {@link useClientTableState}. */\ntype ClientTableOptions<M> = {\n    /** All records of the table. */\n    data: M[];\n\n    /** Whether only the records of the current page are returned. */\n    pagination: boolean;\n\n    /** Locale of the text comparison. */\n    locale: string;\n\n    /** Initial sort; defaults to {@link DEFAULT_SORT_STATUS}, or to no column when `compare` is given. */\n    defaultSortStatus?: DataTableSortStatus<M>;\n\n    /** Comparison function of the initial order, replaced by the sort of the column chosen in the header. */\n    compare?: Comparator<M>;\n};\n\n/**\n * Sorts and paginates in the browser all the records of a table.\n * @template M type of the records\n * @return the state of the table and the records to show\n */\nexport function useClientTableState<M>({\n    data,\n    pagination,\n    locale,\n    defaultSortStatus,\n    compare\n}: ClientTableOptions<M>): TableState<M> & { records: M[] } {\n    const [page, setPage] = useState(FIRST_PAGE);\n    const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);\n    const [sortStatus, setSortStatus] = useState<DataTableSortStatus<M>>(\n        defaultSortStatus ?? (compare ? NO_COLUMN_SORT_STATUS : DEFAULT_SORT_STATUS)\n    );\n    // The `compare` function applies until the user chooses a column in the header.\n    const [compareActive, setCompareActive] = useState(compare !== undefined);\n\n    /*\n     * Sorts all records before cutting the page, so each page (including in descending order) shows its part of the\n     * whole set. The copy keeps the order of the given array. It is separate from the page cut, so not everything is\n     * sorted again on every change of page or page size.\n     */\n    const sortedData = useMemo(() => {\n        const comparator = compareActive && compare ? compare : columnComparator(sortStatus, locale);\n\n        return [...data].sort(comparator);\n    }, [data, sortStatus, compareActive, compare, locale]);\n\n    // Without pagination, shows all records (e.g. a printed report), not only the ones of the first page.\n    const records = useMemo(() => {\n        if (!pagination) return sortedData;\n\n        const from = (page - 1) * pageSize;\n        return sortedData.slice(from, from + pageSize);\n    }, [sortedData, pagination, page, pageSize]);\n\n    function changeSortStatus(status: DataTableSortStatus<M>): void {\n        setCompareActive(false);\n        setSortStatus(status);\n    }\n\n    useEffect(() => {\n        setPage(FIRST_PAGE);\n    }, [pageSize]);\n\n    /* If the data shrinks, goes back to the last existing page. The functional update avoids using an outdated `page`\n       when the effect above has just gone back to page 1. */\n    useEffect(() => {\n        const totalPages = Math.ceil(data.length / pageSize);\n        setPage(currentPage => (totalPages && currentPage > totalPages ? totalPages : currentPage));\n    }, [data.length, pageSize]);\n\n    return {\n        records,\n        page,\n        pageSize,\n        sortStatus,\n        totalRecords: data.length,\n        onPageChange: setPage,\n        onPageSizeChange: setPageSize,\n        onSortStatusChange: changeSortStatus\n    };\n}\n"],"mappings":";;;;;;;;;AAWA,IAAM,wBAAwB;CAAE,gBAAgB;CAAI,WAAW;AAAM;;;;;;AAyBrE,SAAgB,oBAAuB,EACnC,MACA,YACA,QACA,mBACA,WACwD;CACxD,MAAM,CAAC,MAAM,WAAW,SAAA,CAAmB;CAC3C,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW,EAAE;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAChC,sBAAsB,UAAU,wBAAwB,oBAC5D;CAEA,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY,KAAA,CAAS;CAOxE,MAAM,aAAa,cAAc;EAC7B,MAAM,aAAa,iBAAiB,UAAU,UAAU,iBAAiB,YAAY,MAAM;EAE3F,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,UAAU;CACpC,GAAG;EAAC;EAAM;EAAY;EAAe;EAAS;CAAM,CAAC;CAGrD,MAAM,UAAU,cAAc;EAC1B,IAAI,CAAC,YAAY,OAAO;EAExB,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,WAAW,MAAM,MAAM,OAAO,QAAQ;CACjD,GAAG;EAAC;EAAY;EAAY;EAAM;CAAQ,CAAC;CAE3C,SAAS,iBAAiB,QAAsC;EAC5D,iBAAiB,KAAK;EACtB,cAAc,MAAM;CACxB;CAEA,gBAAgB;EACZ,QAAA,CAAkB;CACtB,GAAG,CAAC,QAAQ,CAAC;CAIb,gBAAgB;EACZ,MAAM,aAAa,KAAK,KAAK,KAAK,SAAS,QAAQ;EACnD,SAAQ,gBAAgB,cAAc,cAAc,aAAa,aAAa,WAAY;CAC9F,GAAG,CAAC,KAAK,QAAQ,QAAQ,CAAC;CAE1B,OAAO;EACH;EACA;EACA;EACA;EACA,cAAc,KAAK;EACnB,cAAc;EACd,kBAAkB;EAClB,oBAAoB;CACxB;AACJ"}

package/dist/component/template/ListPage/ListPage.d.ts

@@ -1,10 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
-import { DataTableColumn } from 'mantine-datatable';
-import { ListDataSource } from '../../../data/ListDataSource';
-import { Identifiable } from '../../../model/Identifiable';
 import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
-import { ActionsSettings } from '../../organism/Table/Table';
-interface ListPageProps<T, S> {
+/** Props of the {@link ListPage}. */
+type ListPageProps = {
     /** Title of the page (e.g. "Regions"). */
     title: string;
     /** Plural name of the records, used in the title of the table card. */
@@ -12,21 +9,14 @@ interface ListPageProps<T, S> {
     breadcrumbItems: BreadcrumbItem[];
     /** Route of the "Add" button; absent for no button. */
     addActionRoute?: string;
-    /** Source of the records and of their deletion. */
-    service: S;
-    tableColumns: DataTableColumn<T>[];
-    /** Base path of the pages of the records (e.g. `/region`). */
-    resourceBasePath: string;
-    actionsSettings?: Partial<ActionsSettings>;
     /** Extra content above the table (e.g. filters). */
-    children?: ReactNode;
-    customFetchMethod?: () => Promise<T[]>;
-    /** Builds the URL opened to view a record. If absent, the default view route is used. */
-    getViewUrl?: (item: T) => string;
-}
+    filters?: ReactNode;
+    /** Table of the records (e.g. a `Table`). */
+    children: ReactNode;
+};
 /**
- * List page of records: header with the "Add" button, optional extra content (e.g. filters) and the table of the
- * records, with the view, edit and delete actions.
+ * List page of records: header with the "Add" button, optional filters and the table of the records, given as
+ * children, inside a card.
  */
-declare function ListPage<M extends Identifiable, S extends ListDataSource<M>>(props: ListPageProps<M, S>): ReactElement;
+declare function ListPage({ title, titlePlural, breadcrumbItems, addActionRoute, filters, children }: ListPageProps): ReactElement;
 export default ListPage;

package/dist/component/template/ListPage/ListPage.js

@@ -2,16 +2,14 @@
 import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
 import PaperCard from "../../molecule/PaperCard/PaperCard.js";
 import PageHeader from "../../organism/PageHeader/PageHeader.js";
-import Table from "../../organism/Table/Table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Group, Stack, Text } from "@mantine/core";
 // src/component/template/ListPage/ListPage.tsx
 /**
-* List page of records: header with the "Add" button, optional extra content (e.g. filters) and the table of the
-* records, with the view, edit and delete actions.
+* List page of records: header with the "Add" button, optional filters and the table of the records, given as
+* children, inside a card.
 */
-function ListPage(props) {
-	const { title, titlePlural, breadcrumbItems, addActionRoute, service, tableColumns, resourceBasePath, actionsSettings, children, customFetchMethod, getViewUrl } = props;
+function ListPage({ title, titlePlural, breadcrumbItems, addActionRoute, filters, children }) {
 	const documentTitle = useDocumentTitle(title);
 	const messages = useKitMessages();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
@@ -22,7 +20,7 @@ function ListPage(props) {
 				breadcrumbItems,
 				addActionRoute
 			}),
-			children && /* @__PURE__ */ jsx(Stack, { children }),
+			filters && /* @__PURE__ */ jsx(Stack, { children: filters }),
 			/* @__PURE__ */ jsxs(PaperCard, { children: [/* @__PURE__ */ jsx(Group, {
 				justify: "space-between",
 				mb: "md",
@@ -31,14 +29,7 @@ function ListPage(props) {
 					fw: 600,
 					children: messages.table.listTitle(titlePlural)
 				})
-			}), /* @__PURE__ */ jsx(Table, {
-				service,
-				basePath: resourceBasePath,
-				columns: tableColumns,
-				customFetchMethod,
-				actionsSettings,
-				getViewUrl
-			})] })
+			}), children] })
 		]
 	})] });
 }

package/dist/component/template/ListPage/ListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/ListPage/ListPage.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { Group, Stack, Text } from '@mantine/core';\nimport { DataTableColumn } from 'mantine-datatable';\n\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\nimport Table, { ActionsSettings } from '../../organism/Table/Table';\n\ninterface ListPageProps<T, S> {\n    /** Title of the page (e.g. \"Regions\"). */\n    title: string;\n\n    /** Plural name of the records, used in the title of the table card. */\n    titlePlural: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Route of the \"Add\" button; absent for no button. */\n    addActionRoute?: string;\n\n    /** Source of the records and of their deletion. */\n    service: S;\n    tableColumns: DataTableColumn<T>[];\n\n    /** Base path of the pages of the records (e.g. `/region`). */\n    resourceBasePath: string;\n    actionsSettings?: Partial<ActionsSettings>;\n\n    /** Extra content above the table (e.g. filters). */\n    children?: ReactNode;\n    customFetchMethod?: () => Promise<T[]>;\n\n    /** Builds the URL opened to view a record. If absent, the default view route is used. */\n    getViewUrl?: (item: T) => string;\n}\n\n/**\n * List page of records: header with the \"Add\" button, optional extra content (e.g. filters) and the table of the\n * records, with the view, edit and delete actions.\n */\nfunction ListPage<M extends Identifiable, S extends ListDataSource<M>>(props: ListPageProps<M, S>): ReactElement {\n    const {\n        title,\n        titlePlural,\n        breadcrumbItems,\n        addActionRoute,\n        service,\n        tableColumns,\n        resourceBasePath,\n        actionsSettings,\n        children,\n        customFetchMethod,\n        getViewUrl\n    } = props;\n    const documentTitle = useDocumentTitle(title);\n    const messages = useKitMessages();\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={title} breadcrumbItems={breadcrumbItems} addActionRoute={addActionRoute} />\n                {children && <Stack>{children}</Stack>}\n                <PaperCard>\n                    <Group justify=\"space-between\" mb=\"md\">\n                        <Text fz=\"lg\" fw={600}>\n                            {messages.table.listTitle(titlePlural)}\n                        </Text>\n                    </Group>\n                    <Table<M, S>\n                        service={service}\n                        basePath={resourceBasePath}\n                        columns={tableColumns}\n                        customFetchMethod={customFetchMethod}\n                        actionsSettings={actionsSettings}\n                        getViewUrl={getViewUrl}\n                    />\n                </PaperCard>\n            </Stack>\n        </>\n    );\n}\n\nexport default ListPage;\n"],"mappings":";;;;;;;;;;;;AA4CA,SAAS,SAA8D,OAA0C;CAC7G,MAAM,EACF,OACA,aACA,iBACA,gBACA,SACA,cACA,kBACA,iBACA,UACA,mBACA,eACA;CACJ,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,WAAW,eAAe;CAEhC,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA;GACI,oBAAC,YAAD;IAAmB;IAAwB;IAAiC;GAAiB,CAAA;GAC5F,YAAY,oBAAC,OAAD,EAAQ,SAAgB,CAAA;GACrC,qBAAC,WAAD,EAAA,UAAA,CACI,oBAAC,OAAD;IAAO,SAAQ;IAAgB,IAAG;IAC9B,UAAA,oBAAC,MAAD;KAAM,IAAG;KAAK,IAAI;KACb,UAAA,SAAS,MAAM,UAAU,WAAW;IACnC,CAAA;GACH,CAAA,GACP,oBAAC,OAAD;IACa;IACT,UAAU;IACV,SAAS;IACU;IACF;IACL;GACf,CAAA,CACM,EAAA,CAAA;EACR;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}
+{"version":3,"file":"ListPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/ListPage/ListPage.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { Group, Stack, Text } from '@mantine/core';\n\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\n/** Props of the {@link ListPage}. */\ntype ListPageProps = {\n    /** Title of the page (e.g. \"Regions\"). */\n    title: string;\n\n    /** Plural name of the records, used in the title of the table card. */\n    titlePlural: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Route of the \"Add\" button; absent for no button. */\n    addActionRoute?: string;\n\n    /** Extra content above the table (e.g. filters). */\n    filters?: ReactNode;\n\n    /** Table of the records (e.g. a `Table`). */\n    children: ReactNode;\n};\n\n/**\n * List page of records: header with the \"Add\" button, optional filters and the table of the records, given as\n * children, inside a card.\n */\nfunction ListPage({\n    title,\n    titlePlural,\n    breadcrumbItems,\n    addActionRoute,\n    filters,\n    children\n}: ListPageProps): ReactElement {\n    const documentTitle = useDocumentTitle(title);\n    const messages = useKitMessages();\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={title} breadcrumbItems={breadcrumbItems} addActionRoute={addActionRoute} />\n                {filters && <Stack>{filters}</Stack>}\n                <PaperCard>\n                    <Group justify=\"space-between\" mb=\"md\">\n                        <Text fz=\"lg\" fw={600}>\n                            {messages.table.listTitle(titlePlural)}\n                        </Text>\n                    </Group>\n                    {children}\n                </PaperCard>\n            </Stack>\n        </>\n    );\n}\n\nexport default ListPage;\n"],"mappings":";;;;;;;;;;;AAgCA,SAAS,SAAS,EACd,OACA,aACA,iBACA,gBACA,SACA,YAC4B;CAC5B,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,WAAW,eAAe;CAEhC,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA;GACI,oBAAC,YAAD;IAAmB;IAAwB;IAAiC;GAAiB,CAAA;GAC5F,WAAW,oBAAC,OAAD,EAAA,UAAQ,QAAe,CAAA;GACnC,qBAAC,WAAD,EAAA,UAAA,CACI,oBAAC,OAAD;IAAO,SAAQ;IAAgB,IAAG;IAC9B,UAAA,oBAAC,MAAD;KAAM,IAAG;KAAK,IAAI;KACb,UAAA,SAAS,MAAM,UAAU,WAAW;IACnC,CAAA;GACH,CAAA,GACN,QACM,EAAA,CAAA;EACR;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

package/dist/data/PageDataSource.d.ts

@@ -0,0 +1,10 @@
+import type { PageRequest, PageResult } from './PageRequest';
+/**
+ * Source of the pages of a table, sorted and paginated by the backend (e.g. a service that accesses a paginated API).
+ * Any object with this method works, without extending a class.
+ * @template M type of the records
+ */
+export interface PageDataSource<M> {
+    /** Fetches a page of records. */
+    findPage(request: PageRequest<M>): Promise<PageResult<M>>;
+}

package/dist/data/PageDataSource.js

@@ -0,0 +1 @@
+"use client";

package/dist/data/PageRequest.d.ts

@@ -0,0 +1,29 @@
+import type { DataTableSortStatus } from 'mantine-datatable';
+/**
+ * Page of records requested from the backend.
+ * @template M type of the records
+ */
+export type PageRequest<M> = {
+    /** Number of the page, starting at the `firstPage` option of `useServerPagination` (1 by default). */
+    page: number;
+    /** Maximum number of records of the page. */
+    size: number;
+    /** Sort to apply. `columnAccessor` holds the `sortKey` of the column, if it has one, or else its `accessor`. */
+    sort: DataTableSortStatus<M>;
+};
+/**
+ * Page of records returned by the backend.
+ * @template M type of the records
+ */
+export type PageResult<M> = {
+    /** Records of the page, already sorted by the backend. */
+    records: M[];
+    /** Total of records of all pages. */
+    totalRecords: number;
+};
+/**
+ * Fetches a page of records, as the `findPage` of a `PageDataSource`. It must be stable (e.g. with `useCallback`),
+ * since a new function means that the filter changed, so the table fetches again from page 1.
+ * @template M type of the records
+ */
+export type FetchPage<M> = (request: PageRequest<M>) => Promise<PageResult<M>>;

package/dist/data/PageRequest.js

@@ -0,0 +1 @@
+"use client";

package/dist/hook/useService.d.ts

@@ -1,10 +1,10 @@
 /** Values returned by {@link useService}. */
 export type UseService<D> = {
-    /** Data of the fetch, or the initial value while it has not finished (or if it failed). */
+    /** Data of the last successful fetch, or the initial value if none has finished yet. */
     data: D;
-    /** Error of the fetch; `null` if it has not finished yet or succeeded. */
+    /** Error of the current fetch; `null` if it has not finished yet or succeeded. */
     error: unknown | null;
-    /** Whether the fetch has not finished yet. */
+    /** Whether the current fetch has not finished yet. */
     loading: boolean;
 };
 /**

package/dist/hook/useService.js

@@ -7,6 +7,8 @@ function useService(fetchMethod, initialData) {
 	const [loading, setLoading] = useState(true);
 	useEffect(() => {
 		let obsolete = false;
+		setLoading(true);
+		setError(null);
 		fetchMethod().then((responseData) => !obsolete && setData(responseData)).catch((e) => !obsolete && setError(e)).finally(() => !obsolete && setLoading(false));
 		return () => {
 			obsolete = true;

package/dist/hook/useService.js.map

@@ -1 +1 @@
-{"version":3,"file":"useService.js","names":[],"sources":["../../src/hook/useService.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** Values returned by {@link useService}. */\nexport type UseService<D> = {\n    /** Data of the fetch, or the initial value while it has not finished (or if it failed). */\n    data: D;\n\n    /** Error of the fetch; `null` if it has not finished yet or succeeded. */\n    error: unknown | null;\n\n    /** Whether the fetch has not finished yet. */\n    loading: boolean;\n};\n\n/**\n * Fetches data when the component mounts and every time `fetchMethod` changes.\n * Without an initial value, `data` is `undefined` while loading (or after a failure), so the caller must handle it.\n * @param fetchMethod function that fetches the data. It must be stable (e.g. with `useCallback`), since a new function\n *        triggers a new fetch\n * @return the data (`undefined` until the fetch finishes), the error and whether the fetch is still running\n */\nfunction useService<T>(fetchMethod: () => Promise<T>): UseService<T | undefined>;\n\n/**\n * Fetches data when the component mounts and every time `fetchMethod` changes, starting with the given value (e.g. an\n * empty array for a list), so `data` always has the type of the fetched data.\n * @param fetchMethod function that fetches the data. It must be stable (e.g. with `useCallback`), since a new function\n *        triggers a new fetch\n * @param initialData value of `data` until the fetch finishes (and after a failure)\n * @return the data, the error and whether the fetch is still running\n */\nfunction useService<T>(fetchMethod: () => Promise<T>, initialData: T): UseService<T>;\n\nfunction useService<T>(fetchMethod: () => Promise<T>, initialData?: T): UseService<T | undefined> {\n    const [data, setData] = useState<T | undefined>(initialData);\n    const [error, setError] = useState<unknown | null>(null);\n    const [loading, setLoading] = useState(true);\n\n    useEffect(() => {\n        /* When fetchMethod changes (e.g. another filter), the previous fetch becomes obsolete. If its response arrives\n           after the one of the new fetch, it cannot overwrite the current data. */\n        let obsolete = false;\n        fetchMethod()\n            .then(responseData => !obsolete && setData(responseData))\n            .catch(e => !obsolete && setError(e))\n            .finally(() => !obsolete && setLoading(false));\n\n        return () => {\n            obsolete = true;\n        };\n    }, [fetchMethod]);\n\n    return { data, error, loading };\n}\n\nexport default useService;\n"],"mappings":";;;AAiCA,SAAS,WAAc,aAA+B,aAA4C;CAC9F,MAAM,CAAC,MAAM,WAAW,SAAwB,WAAW;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAyB,IAAI;CACvD,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,gBAAgB;EAGZ,IAAI,WAAW;EACf,YAAY,CAAC,CACR,MAAK,iBAAgB,CAAC,YAAY,QAAQ,YAAY,CAAC,CAAC,CACxD,OAAM,MAAK,CAAC,YAAY,SAAS,CAAC,CAAC,CAAC,CACpC,cAAc,CAAC,YAAY,WAAW,KAAK,CAAC;EAEjD,aAAa;GACT,WAAW;EACf;CACJ,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO;EAAE;EAAM;EAAO;CAAQ;AAClC"}
+{"version":3,"file":"useService.js","names":[],"sources":["../../src/hook/useService.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/** Values returned by {@link useService}. */\nexport type UseService<D> = {\n    /** Data of the last successful fetch, or the initial value if none has finished yet. */\n    data: D;\n\n    /** Error of the current fetch; `null` if it has not finished yet or succeeded. */\n    error: unknown | null;\n\n    /** Whether the current fetch has not finished yet. */\n    loading: boolean;\n};\n\n/**\n * Fetches data when the component mounts and every time `fetchMethod` changes.\n * Without an initial value, `data` is `undefined` while loading (or after a failure), so the caller must handle it.\n * @param fetchMethod function that fetches the data. It must be stable (e.g. with `useCallback`), since a new function\n *        triggers a new fetch\n * @return the data (`undefined` until the fetch finishes), the error and whether the fetch is still running\n */\nfunction useService<T>(fetchMethod: () => Promise<T>): UseService<T | undefined>;\n\n/**\n * Fetches data when the component mounts and every time `fetchMethod` changes, starting with the given value (e.g. an\n * empty array for a list), so `data` always has the type of the fetched data.\n * @param fetchMethod function that fetches the data. It must be stable (e.g. with `useCallback`), since a new function\n *        triggers a new fetch\n * @param initialData value of `data` until the fetch finishes (and after a failure)\n * @return the data, the error and whether the fetch is still running\n */\nfunction useService<T>(fetchMethod: () => Promise<T>, initialData: T): UseService<T>;\n\nfunction useService<T>(fetchMethod: () => Promise<T>, initialData?: T): UseService<T | undefined> {\n    const [data, setData] = useState<T | undefined>(initialData);\n    const [error, setError] = useState<unknown | null>(null);\n    const [loading, setLoading] = useState(true);\n\n    useEffect(() => {\n        /* When fetchMethod changes (e.g. another filter), the previous fetch becomes obsolete. If its response arrives\n           after the one of the new fetch, it cannot overwrite the current data. */\n        let obsolete = false;\n        setLoading(true);\n        setError(null);\n        fetchMethod()\n            .then(responseData => !obsolete && setData(responseData))\n            .catch(e => !obsolete && setError(e))\n            .finally(() => !obsolete && setLoading(false));\n\n        return () => {\n            obsolete = true;\n        };\n    }, [fetchMethod]);\n\n    return { data, error, loading };\n}\n\nexport default useService;\n"],"mappings":";;;AAiCA,SAAS,WAAc,aAA+B,aAA4C;CAC9F,MAAM,CAAC,MAAM,WAAW,SAAwB,WAAW;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAyB,IAAI;CACvD,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,gBAAgB;EAGZ,IAAI,WAAW;EACf,WAAW,IAAI;EACf,SAAS,IAAI;EACb,YAAY,CAAC,CACR,MAAK,iBAAgB,CAAC,YAAY,QAAQ,YAAY,CAAC,CAAC,CACxD,OAAM,MAAK,CAAC,YAAY,SAAS,CAAC,CAAC,CAAC,CACpC,cAAc,CAAC,YAAY,WAAW,KAAK,CAAC;EAEjD,aAAa;GACT,WAAW;EACf;CACJ,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO;EAAE;EAAM;EAAO;CAAQ;AAClC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ifto/mantine-kit",
-    "version": "0.3.0",
+    "version": "0.5.1",
     "description": "General purpose Mantine components for React apps: CRUD tables and forms, layout, ECharts charts, Excel/CSV export, print pages and a REST HTTP client, with i18n (en-US and pt-BR).",
     "license": "MIT",
     "author": "IFTO - Campus Palmas",