@ifto/mantine-kit 0.0.0-stage → 0.1.0

package/dist/component/organism/PageHeader/PageHeader.js

@@ -0,0 +1,55 @@
+"use client";
+import { useKitConfig } from "../../../provider/useKit.js";
+import Surface from "../../atom/Surface/Surface.js";
+import Breadcrumb from "../../molecule/Breadcrumb/Breadcrumb.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Divider, Flex, Paper, Stack, Title } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+// src/component/organism/PageHeader/PageHeader.tsx
+/**
+* Header of a page: the title, the breadcrumb and, in list pages, the "Add" button. With the button, the breadcrumb
+* starts at the home page.
+*/
+var PageHeader = (props) => {
+	const { breadcrumbItems, title, addActionRoute, ...others } = props;
+	const { router, messages } = useKitConfig();
+	const { Link } = router;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Surface, {
+		component: Paper,
+		style: { backgroundColor: "transparent" },
+		...others,
+		children: addActionRoute ? /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			justify: "space-between",
+			direction: {
+				base: "row",
+				sm: "row"
+			},
+			gap: {
+				base: "sm",
+				sm: 4
+			},
+			children: [/* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(Title, {
+				order: 3,
+				children: title
+			}), /* @__PURE__ */ jsx(Breadcrumb, { items: [{
+				title: messages.common.home,
+				href: "/"
+			}, ...breadcrumbItems ?? []] })] }), /* @__PURE__ */ jsx(Button, {
+				leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 18 }),
+				component: Link,
+				href: addActionRoute,
+				children: messages.common.add
+			})]
+		}) : /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [/* @__PURE__ */ jsx(Title, {
+				order: 3,
+				children: title
+			}), /* @__PURE__ */ jsx(Breadcrumb, { items: breadcrumbItems ?? [] })]
+		})
+	}), /* @__PURE__ */ jsx(Divider, {})] });
+};
+export { PageHeader as default };
+
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","names":["_Fragment"],"sources":["../../../../src/component/organism/PageHeader/PageHeader.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Divider, Flex, Paper, PaperProps, Stack, Title } from '@mantine/core';\nimport { IconPlus } from '@tabler/icons-react';\n\nimport { useKitConfig } from '../../../provider/useKit';\nimport Surface from '../../atom/Surface/Surface';\nimport Breadcrumb, { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\n\ntype PageHeaderProps = {\n    title: string;\n    breadcrumbItems?: BreadcrumbItem[];\n\n    /** Route of the \"Add\" button. Without it, the page has no \"Add\" button. */\n    addActionRoute?: string;\n} & PaperProps;\n\n/**\n * Header of a page: the title, the breadcrumb and, in list pages, the \"Add\" button. With the button, the breadcrumb\n * starts at the home page.\n */\nconst PageHeader = (props: PageHeaderProps) => {\n    const { breadcrumbItems, title, addActionRoute, ...others } = props;\n    const { router, messages } = useKitConfig();\n    const { Link } = router;\n\n    return (\n        <>\n            <Surface component={Paper} style={{ backgroundColor: 'transparent' }} {...others}>\n                {addActionRoute ? (\n                    <Flex\n                        align=\"center\"\n                        justify=\"space-between\"\n                        direction={{ base: 'row', sm: 'row' }}\n                        gap={{ base: 'sm', sm: 4 }}\n                    >\n                        <Stack>\n                            <Title order={3}>{title}</Title>\n                            <Breadcrumb\n                                items={[{ title: messages.common.home, href: '/' }, ...(breadcrumbItems ?? [])]}\n                            />\n                        </Stack>\n\n                        <Button leftSection={<IconPlus size={18} />} component={Link} href={addActionRoute}>\n                            {messages.common.add}\n                        </Button>\n                    </Flex>\n                ) : (\n                    <Stack gap=\"sm\">\n                        <Title order={3}>{title}</Title>\n                        <Breadcrumb items={breadcrumbItems ?? []} />\n                    </Stack>\n                )}\n            </Surface>\n            <Divider />\n        </>\n    );\n};\n\nexport default PageHeader;\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAM,cAAc,UAA2B;CAC3C,MAAM,EAAE,iBAAiB,OAAO,gBAAgB,GAAG,WAAW;CAC9D,MAAM,EAAE,QAAQ,aAAa,aAAa;CAC1C,MAAM,EAAE,SAAS;CAEjB,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD;EAAS,WAAW;EAAO,OAAO,EAAE,iBAAiB,cAAc;EAAG,GAAI;EACrE,UAAA,iBACG,qBAAC,MAAD;GACI,OAAM;GACN,SAAQ;GACR,WAAW;IAAE,MAAM;IAAO,IAAI;GAAM;GACpC,KAAK;IAAE,MAAM;IAAM,IAAI;GAAE;GAJ7B,UAAA,CAMI,qBAAC,OAAD,EAAA,UAAA,CACI,oBAAC,OAAD;IAAO,OAAO;IAAI,UAAA;GAAa,CAAA,GAC/B,oBAAC,YAAD,EACI,OAAO,CAAC;IAAE,OAAO,SAAS,OAAO;IAAM,MAAM;GAAI,GAAG,GAAI,mBAAmB,CAAC,CAAE,EACjF,CAAA,CACE,EAAA,CAAA,GAEP,oBAAC,QAAD;IAAQ,aAAa,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;IAAG,WAAW;IAAM,MAAM;IAC/D,UAAA,SAAS,OAAO;GACb,CAAA,CACN;EAEN,CAAA,IAAA,qBAAC,OAAD;GAAO,KAAI;GAAX,UAAA,CACI,oBAAC,OAAD;IAAO,OAAO;IAAI,UAAA;GAAa,CAAA,GAC/B,oBAAC,YAAD,EAAY,OAAO,mBAAmB,CAAC,EAAI,CAAA,CACxC;;CAEN,CAAA,GACT,oBAAC,SAAD,CAAU,CAAA,CACZ,EAAA,CAAA;AAEV"}

package/dist/component/organism/StatsGrid/StatsGrid.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement, ReactNode } from 'react';
+import { PaperProps } from '@mantine/core';
+import { StatsCardData } from '../../molecule/StatsCard/StatsCard';
+type StatsGridProps = {
+    data?: StatsCardData[];
+    paperProps?: PaperProps;
+    error?: ReactNode;
+    loading?: boolean;
+};
+/** Responsive grid of {@link StatsCard}s, with placeholders while loading and an alert on error. */
+export default function StatsGrid({ data, loading, error, paperProps }: StatsGridProps): ReactElement;
+export {};

package/dist/component/organism/StatsGrid/StatsGrid.js

@@ -0,0 +1,46 @@
+"use client";
+import { useKitMessages } from "../../../provider/useKit.js";
+import StatsGrid_module_default from "./StatsGrid.module.js";
+import ErrorAlert from "../../atom/ErrorAlert/ErrorAlert.js";
+import StatsCard from "../../molecule/StatsCard/StatsCard.js";
+import { jsx } from "react/jsx-runtime";
+import { SimpleGrid, Skeleton } from "@mantine/core";
+// src/component/organism/StatsGrid/StatsGrid.tsx
+/** Number of placeholder cards shown while loading. */
+var LOADING_CARDS = 4;
+/** Responsive grid of {@link StatsCard}s, with placeholders while loading and an alert on error. */
+function StatsGrid({ data, loading, error, paperProps }) {
+	const messages = useKitMessages();
+	const stats = data?.map((stat) => /* @__PURE__ */ jsx(StatsCard, {
+		data: stat,
+		...paperProps
+	}, stat.title));
+	return /* @__PURE__ */ jsx("div", {
+		className: StatsGrid_module_default.root,
+		children: error ? /* @__PURE__ */ jsx(ErrorAlert, {
+			title: messages.common.loadError,
+			message: String(error)
+		}) : /* @__PURE__ */ jsx(SimpleGrid, {
+			cols: {
+				base: 1,
+				sm: 2,
+				lg: 4
+			},
+			spacing: {
+				base: 10,
+				sm: "xl"
+			},
+			verticalSpacing: {
+				base: "md",
+				sm: "xl"
+			},
+			children: loading ? Array.from({ length: LOADING_CARDS }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, {
+				visible: true,
+				height: 130
+			}, `stats-loading-${i}`)) : stats
+		})
+	});
+}
+export { StatsGrid as default };
+
+//# sourceMappingURL=StatsGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatsGrid.js","names":["classes"],"sources":["../../../../src/component/organism/StatsGrid/StatsGrid.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { PaperProps, SimpleGrid, Skeleton } from '@mantine/core';\n\nimport { useKitMessages } from '../../../provider/useKit';\nimport classes from './StatsGrid.module.css';\nimport ErrorAlert from '../../atom/ErrorAlert/ErrorAlert';\nimport StatsCard, { StatsCardData } from '../../molecule/StatsCard/StatsCard';\n\n/** Number of placeholder cards shown while loading. */\nconst LOADING_CARDS = 4;\n\ntype StatsGridProps = {\n    data?: StatsCardData[];\n    paperProps?: PaperProps;\n    error?: ReactNode;\n    loading?: boolean;\n};\n\n/** Responsive grid of {@link StatsCard}s, with placeholders while loading and an alert on error. */\nexport default function StatsGrid({ data, loading, error, paperProps }: StatsGridProps): ReactElement {\n    const messages = useKitMessages();\n    const stats = data?.map(stat => <StatsCard key={stat.title} data={stat} {...paperProps} />);\n\n    return (\n        <div className={classes.root}>\n            {error ? (\n                <ErrorAlert title={messages.common.loadError} message={String(error)} />\n            ) : (\n                <SimpleGrid\n                    cols={{ base: 1, sm: 2, lg: 4 }}\n                    spacing={{ base: 10, sm: 'xl' }}\n                    verticalSpacing={{ base: 'md', sm: 'xl' }}\n                >\n                    {loading\n                        ? Array.from({ length: LOADING_CARDS }).map((_, i) => (\n                              <Skeleton key={`stats-loading-${i}`} visible height={130} />\n                          ))\n                        : stats}\n                </SimpleGrid>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AAUA,IAAM,gBAAgB;;AAUtB,SAAwB,UAAU,EAAE,MAAM,SAAS,OAAO,cAA4C;CAClG,MAAM,WAAW,eAAe;CAChC,MAAM,QAAQ,MAAM,KAAI,SAAQ,oBAAC,WAAD;EAA4B,MAAM;EAAM,GAAI;CAAa,GAAzC,KAAK,KAAoC,CAAC;CAE1F,OACI,oBAAC,OAAD;EAAK,WAAWA,yBAAQ;EACnB,UAAA,QACG,oBAAC,YAAD;GAAY,OAAO,SAAS,OAAO;GAAW,SAAS,OAAO,KAAK;EAAI,CAAA,IAEvE,oBAAC,YAAD;GACI,MAAM;IAAE,MAAM;IAAG,IAAI;IAAG,IAAI;GAAE;GAC9B,SAAS;IAAE,MAAM;IAAI,IAAI;GAAK;GAC9B,iBAAiB;IAAE,MAAM;IAAM,IAAI;GAAK;GAEvC,UAAA,UACK,MAAM,KAAK,EAAE,QAAQ,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,MAC1C,oBAAC,UAAD;IAAqC,SAAA;IAAQ,QAAQ;GAAM,GAA5C,iBAAiB,GAA2B,CAC9D,IACD;EACE,CAAA;CAEf,CAAA;AAEb"}

package/dist/component/organism/StatsGrid/StatsGrid.module.js

@@ -0,0 +1,17 @@
+"use client";
+// src/component/organism/StatsGrid/StatsGrid.module.css
+var root = "mk-StatsGrid-module-root-zSIO5";
+var value = "mk-StatsGrid-module-value-wk1kb";
+var diff = "mk-StatsGrid-module-diff-AUfON";
+var icon = "mk-StatsGrid-module-icon-ERQtf";
+var title = "mk-StatsGrid-module-title-yuu3f";
+var StatsGrid_module_default = {
+	root,
+	value,
+	diff,
+	icon,
+	title
+};
+export { StatsGrid_module_default as default, diff, icon, root, title, value };
+
+//# sourceMappingURL=StatsGrid.module.js.map

package/dist/component/organism/StatsGrid/StatsGrid.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsGrid.module.js","names":[],"sources":["../../../../src/component/organism/StatsGrid/StatsGrid.module.css"],"sourcesContent":[".root {\n    padding: 0;\n}\n\n.value {\n    font-size: rem(24px);\n    font-weight: 500;\n    line-height: 1;\n}\n\n.diff {\n    line-height: 1;\n    display: flex;\n    align-items: center;\n}\n\n.icon {\n    @mixin dark {\n        color: var(--mantine-color-dark-3);\n    }\n\n    @mixin light {\n        color: var(--mantine-color-gray-4);\n    }\n}\n\n.title {\n    font-weight: 500;\n    text-transform: uppercase;\n}\n"],"mappings":""}

package/dist/component/organism/Table/RowActions.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+/** Which actions of a row are shown. */
+export type RowActionsSettings = {
+    canView?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+};
+type Props = RowActionsSettings & {
+    /** URL opened by the view action. */
+    viewUrl: string;
+    /** URL opened by the edit action, when there is no `onEdit`; absent for a record not saved yet. */
+    editUrl?: string;
+    /** Called by the edit action instead of opening `editUrl` (e.g. to edit the row in place). */
+    onEdit?: () => void;
+    /** Called after the user confirms the deletion. */
+    onDelete: () => void;
+};
+/**
+ * Action buttons of a table row: view, edit and delete (with confirmation). It reads the router and the texts from
+ * the `KitProvider`, so the table does not need to pass them down.
+ */
+declare function RowActions({ canView, canEdit, canDelete, viewUrl, editUrl, onEdit, onDelete }: Props): ReactElement;
+export default RowActions;

package/dist/component/organism/Table/RowActions.js

@@ -0,0 +1,121 @@
+"use client";
+import { useKitMessages, useKitRouter } from "../../../provider/useKit.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Button, Group, Text, Tooltip } from "@mantine/core";
+import { IconEdit, IconEye, IconTrash } from "@tabler/icons-react";
+import { closeAllModals, openModal } from "@mantine/modals";
+// src/component/organism/Table/RowActions.tsx
+/** Size of the action icons (px). */
+var ICON_SIZE = 16;
+/**
+* Stops the click on an action from reaching the row, which would navigate again and duplicate the history entry.
+* @param event click event
+*/
+var stopPropagation = (event) => event.stopPropagation();
+/**
+* Asks the user to confirm the deletion of a record.
+* @param messages texts of the table
+* @param cancelLabel text of the cancel button
+* @param confirmLabel text of the confirm button
+* @param onConfirm called when the user confirms
+*/
+function openDeleteModal(messages, { cancelLabel, confirmLabel, title }, onConfirm) {
+	openModal({
+		title,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, { children: messages.deleteConfirm }), /* @__PURE__ */ jsxs(Group, {
+			mt: "md",
+			gap: "sm",
+			justify: "flex-end",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "transparent",
+				c: "dimmed",
+				onClick: () => closeAllModals(),
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				color: "red",
+				onClick: () => {
+					onConfirm();
+					closeAllModals();
+				},
+				children: confirmLabel
+			})]
+		})] })
+	});
+}
+/**
+* Action buttons of a table row: view, edit and delete (with confirmation). It reads the router and the texts from
+* the `KitProvider`, so the table does not need to pass them down.
+*/
+function RowActions({ canView, canEdit, canDelete, viewUrl, editUrl, onEdit, onDelete }) {
+	const { Link } = useKitRouter();
+	const { table, common } = useKitMessages();
+	const modalTexts = {
+		title: common.warning,
+		cancelLabel: common.cancel,
+		confirmLabel: common.confirm
+	};
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: 4,
+		justify: "right",
+		wrap: "nowrap",
+		children: [
+			canView && /* @__PURE__ */ jsx(Tooltip, {
+				label: table.view,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "sm",
+					variant: "subtle",
+					color: "green",
+					component: Link,
+					onClick: stopPropagation,
+					href: viewUrl,
+					"aria-label": table.view,
+					children: /* @__PURE__ */ jsx(IconEye, { size: ICON_SIZE })
+				})
+			}),
+			canEdit && onEdit && /* @__PURE__ */ jsx(Tooltip, {
+				label: table.edit,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "sm",
+					variant: "subtle",
+					color: "blue",
+					onClick: (event) => {
+						stopPropagation(event);
+						onEdit();
+					},
+					"aria-label": table.edit,
+					children: /* @__PURE__ */ jsx(IconEdit, { size: ICON_SIZE })
+				})
+			}),
+			canEdit && !onEdit && editUrl && /* @__PURE__ */ jsx(Tooltip, {
+				label: table.edit,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "sm",
+					variant: "subtle",
+					color: "blue",
+					component: Link,
+					onClick: stopPropagation,
+					href: editUrl,
+					"aria-label": table.edit,
+					children: /* @__PURE__ */ jsx(IconEdit, { size: ICON_SIZE })
+				})
+			}),
+			canDelete && /* @__PURE__ */ jsx(Tooltip, {
+				label: table.delete,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					size: "sm",
+					variant: "subtle",
+					color: "red",
+					onClick: (event) => {
+						stopPropagation(event);
+						openDeleteModal(table, modalTexts, onDelete);
+					},
+					"aria-label": table.delete,
+					children: /* @__PURE__ */ jsx(IconTrash, { size: ICON_SIZE })
+				})
+			})
+		]
+	});
+}
+export { RowActions as default };
+
+//# sourceMappingURL=RowActions.js.map

package/dist/component/organism/Table/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","names":["_Fragment"],"sources":["../../../../src/component/organism/Table/RowActions.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { ActionIcon, Button, Group, Text, Tooltip } from '@mantine/core';\nimport { closeAllModals, openModal } from '@mantine/modals';\nimport { IconEdit, IconEye, IconTrash } from '@tabler/icons-react';\n\nimport { TableMessages } from '../../../i18n/KitMessages';\nimport { useKitMessages, useKitRouter } from '../../../provider/useKit';\n\n/** Size of the action icons (px). */\nconst ICON_SIZE = 16;\n\n/** Which actions of a row are shown. */\nexport type RowActionsSettings = {\n    canView?: boolean;\n    canEdit?: boolean;\n    canDelete?: boolean;\n};\n\ntype Props = RowActionsSettings & {\n    /** URL opened by the view action. */\n    viewUrl: string;\n\n    /** URL opened by the edit action, when there is no `onEdit`; absent for a record not saved yet. */\n    editUrl?: string;\n\n    /** Called by the edit action instead of opening `editUrl` (e.g. to edit the row in place). */\n    onEdit?: () => void;\n\n    /** Called after the user confirms the deletion. */\n    onDelete: () => void;\n};\n\n/**\n * Stops the click on an action from reaching the row, which would navigate again and duplicate the history entry.\n * @param event click event\n */\nconst stopPropagation = (event: React.MouseEvent): void => event.stopPropagation();\n\n/**\n * Asks the user to confirm the deletion of a record.\n * @param messages texts of the table\n * @param cancelLabel text of the cancel button\n * @param confirmLabel text of the confirm button\n * @param onConfirm called when the user confirms\n */\nfunction openDeleteModal(\n    messages: TableMessages,\n    { cancelLabel, confirmLabel, title }: { cancelLabel: string; confirmLabel: string; title: string },\n    onConfirm: () => void\n): void {\n    openModal({\n        title,\n        children: (\n            <>\n                <Text>{messages.deleteConfirm}</Text>\n\n                <Group mt=\"md\" gap=\"sm\" justify=\"flex-end\">\n                    <Button variant=\"transparent\" c=\"dimmed\" onClick={() => closeAllModals()}>\n                        {cancelLabel}\n                    </Button>\n                    <Button\n                        color=\"red\"\n                        onClick={() => {\n                            onConfirm();\n                            closeAllModals();\n                        }}\n                    >\n                        {confirmLabel}\n                    </Button>\n                </Group>\n            </>\n        )\n    });\n}\n\n/**\n * Action buttons of a table row: view, edit and delete (with confirmation). It reads the router and the texts from\n * the `KitProvider`, so the table does not need to pass them down.\n */\nfunction RowActions({ canView, canEdit, canDelete, viewUrl, editUrl, onEdit, onDelete }: Props): ReactElement {\n    const { Link } = useKitRouter();\n    const { table, common } = useKitMessages();\n    const modalTexts = { title: common.warning, cancelLabel: common.cancel, confirmLabel: common.confirm };\n\n    return (\n        <Group gap={4} justify=\"right\" wrap=\"nowrap\">\n            {canView && (\n                <Tooltip label={table.view}>\n                    <ActionIcon\n                        size=\"sm\"\n                        variant=\"subtle\"\n                        color=\"green\"\n                        component={Link}\n                        onClick={stopPropagation}\n                        href={viewUrl}\n                        aria-label={table.view}\n                    >\n                        <IconEye size={ICON_SIZE} />\n                    </ActionIcon>\n                </Tooltip>\n            )}\n\n            {canEdit && onEdit && (\n                <Tooltip label={table.edit}>\n                    <ActionIcon\n                        size=\"sm\"\n                        variant=\"subtle\"\n                        color=\"blue\"\n                        onClick={event => {\n                            stopPropagation(event);\n                            onEdit();\n                        }}\n                        aria-label={table.edit}\n                    >\n                        <IconEdit size={ICON_SIZE} />\n                    </ActionIcon>\n                </Tooltip>\n            )}\n\n            {canEdit && !onEdit && editUrl && (\n                <Tooltip label={table.edit}>\n                    <ActionIcon\n                        size=\"sm\"\n                        variant=\"subtle\"\n                        color=\"blue\"\n                        component={Link}\n                        onClick={stopPropagation}\n                        href={editUrl}\n                        aria-label={table.edit}\n                    >\n                        <IconEdit size={ICON_SIZE} />\n                    </ActionIcon>\n                </Tooltip>\n            )}\n\n            {canDelete && (\n                <Tooltip label={table.delete}>\n                    <ActionIcon\n                        size=\"sm\"\n                        variant=\"subtle\"\n                        color=\"red\"\n                        onClick={event => {\n                            stopPropagation(event);\n                            openDeleteModal(table, modalTexts, onDelete);\n                        }}\n                        aria-label={table.delete}\n                    >\n                        <IconTrash size={ICON_SIZE} />\n                    </ActionIcon>\n                </Tooltip>\n            )}\n        </Group>\n    );\n}\n\nexport default RowActions;\n"],"mappings":";;;;;;;;AAUA,IAAM,YAAY;;;;;AA2BlB,IAAM,mBAAmB,UAAkC,MAAM,gBAAgB;;;;;;;;AASjF,SAAS,gBACL,UACA,EAAE,aAAa,cAAc,SAC7B,WACI;CACJ,UAAU;EACN;EACA,UACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,MAAD,EAAA,UAAO,SAAS,cAAoB,CAAA,GAEpC,qBAAC,OAAD;GAAO,IAAG;GAAK,KAAI;GAAK,SAAQ;GAAhC,UAAA,CACI,oBAAC,QAAD;IAAQ,SAAQ;IAAc,GAAE;IAAS,eAAe,eAAe;IAClE,UAAA;GACG,CAAA,GACR,oBAAC,QAAD;IACI,OAAM;IACN,eAAe;KACX,UAAU;KACV,eAAe;IACnB;IAEC,UAAA;GACG,CAAA,CACL;EACT,CAAA,CAAA,EAAA,CAAA;CAEV,CAAC;AACL;;;;;AAMA,SAAS,WAAW,EAAE,SAAS,SAAS,WAAW,SAAS,SAAS,QAAQ,YAAiC;CAC1G,MAAM,EAAE,SAAS,aAAa;CAC9B,MAAM,EAAE,OAAO,WAAW,eAAe;CACzC,MAAM,aAAa;EAAE,OAAO,OAAO;EAAS,aAAa,OAAO;EAAQ,cAAc,OAAO;CAAQ;CAErG,OACI,qBAAC,OAAD;EAAO,KAAK;EAAG,SAAQ;EAAQ,MAAK;EAApC,UAAA;GACK,WACG,oBAAC,SAAD;IAAS,OAAO,MAAM;IAClB,UAAA,oBAAC,YAAD;KACI,MAAK;KACL,SAAQ;KACR,OAAM;KACN,WAAW;KACX,SAAS;KACT,MAAM;KACN,cAAY,MAAM;KAElB,UAAA,oBAAC,SAAD,EAAS,MAAM,UAAY,CAAA;IACnB,CAAA;GACP,CAAA;GAGZ,WAAW,UACR,oBAAC,SAAD;IAAS,OAAO,MAAM;IAClB,UAAA,oBAAC,YAAD;KACI,MAAK;KACL,SAAQ;KACR,OAAM;KACN,UAAS,UAAS;MACd,gBAAgB,KAAK;MACrB,OAAO;KACX;KACA,cAAY,MAAM;KAElB,UAAA,oBAAC,UAAD,EAAU,MAAM,UAAY,CAAA;IACpB,CAAA;GACP,CAAA;GAGZ,WAAW,CAAC,UAAU,WACnB,oBAAC,SAAD;IAAS,OAAO,MAAM;IAClB,UAAA,oBAAC,YAAD;KACI,MAAK;KACL,SAAQ;KACR,OAAM;KACN,WAAW;KACX,SAAS;KACT,MAAM;KACN,cAAY,MAAM;KAElB,UAAA,oBAAC,UAAD,EAAU,MAAM,UAAY,CAAA;IACpB,CAAA;GACP,CAAA;GAGZ,aACG,oBAAC,SAAD;IAAS,OAAO,MAAM;IAClB,UAAA,oBAAC,YAAD;KACI,MAAK;KACL,SAAQ;KACR,OAAM;KACN,UAAS,UAAS;MACd,gBAAgB,KAAK;MACrB,gBAAgB,OAAO,YAAY,QAAQ;KAC/C;KACA,cAAY,MAAM;KAElB,UAAA,oBAAC,WAAD,EAAW,MAAM,UAAY,CAAA;IACrB,CAAA;GACP,CAAA;EAEV;;AAEf"}

package/dist/component/organism/Table/Table.d.ts

@@ -0,0 +1,51 @@
+import { ReactElement } from 'react';
+import { DataTableColumn } from 'mantine-datatable';
+import { ListDataSource } from '../../../data/ListDataSource';
+import { Identifiable } from '../../../model/Identifiable';
+/** Which actions the table shows for each record. */
+export type ActionsSettings = {
+    /** Whether the actions column is shown. */
+    canShowActions: boolean;
+    /** Whether the view action is shown. */
+    canView: boolean;
+    /** Whether the edit action is shown. */
+    canEdit: boolean;
+    /** Whether the delete action is shown. */
+    canDelete: boolean;
+};
+/** Props of the {@link Table}. */
+type TableProps<M extends Identifiable, S extends ListDataSource<M>> = {
+    /** Source of the records and of their deletion (e.g. a service that accesses an API). */
+    service: S;
+    /**
+     * Fetches the records shown, instead of `service.findAll()`. To show data already available, use
+     * `() => Promise.resolve(data)`.
+     */
+    customFetchMethod?: () => Promise<M[]>;
+    /** Columns of the table. */
+    columns: DataTableColumn<M>[];
+    /** Base path of the pages of the records (e.g. `/region`), used to build the view and edit URLs. */
+    basePath: string;
+    /** Which actions are shown; the ones not given are shown. */
+    actionsSettings?: Partial<ActionsSettings>;
+    /** Whether the table is paginated. */
+    pagination?: boolean;
+    /**
+     * Called by the edit action instead of opening the edit page of the record.
+     * @param itemId id of the record to edit
+     */
+    customEditFunction?: (itemId: M['id']) => void;
+    /**
+     * Builds the URL opened to view a record (click on the row or on the view icon).
+     * If absent, the default route is used: `${basePath}/<view segment>/${item.id}`.
+     */
+    getViewUrl?: (item: M) => string;
+};
+/**
+ * A table that shows the records of a data source, with the view, edit and delete actions. Clicking a row opens the
+ * record.
+ * @template M type of the records, shown one per row
+ * @template S source of the records (e.g. a service that accesses an API)
+ */
+declare const Table: <M extends Identifiable, S extends ListDataSource<M>>(props: TableProps<M, S>) => ReactElement;
+export default Table;

package/dist/component/organism/Table/Table.js

@@ -0,0 +1,108 @@
+"use client";
+import ViewTable from "../ViewTable/ViewTable.js";
+import RowActions from "./RowActions.js";
+import { useKitConfig } from "../../../provider/useKit.js";
+import ErrorAlert from "../../atom/ErrorAlert/ErrorAlert.js";
+import useService from "../../../hook/useService.js";
+import { showErrorNotification, showSuccessNotification } from "../../../util/Notifications.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mantine/core";
+// src/component/organism/Table/Table.tsx
+var ROW_HOVER_COLOR = "var(--mantine-primary-color-light)";
+/** Every action shown, used for the settings the caller does not give. */
+var DEFAULT_ACTIONS_SETTINGS = {
+	canShowActions: true,
+	canView: true,
+	canEdit: true,
+	canDelete: true
+};
+/**
+* Returns the view URL of a record: the one of `getViewUrl`, if given; otherwise, the default view route.
+* @param props props of the table
+* @param item record
+* @param segments URL segments of the form pages
+*/
+function viewUrl(props, item, segments) {
+	return props.getViewUrl ? props.getViewUrl(item) : `${props.basePath}/${segments.view}/${item.id}`;
+}
+/**
+* Creates the function that deletes a record and reloads the table.
+* @param setData function that sets the records of the table, obtained from `useState`
+* @param service source of the records, which deletes them
+* @param fetchMethod fetches the records again after the deletion
+* @param messages texts of the locale
+* @return a function that receives the record to delete and returns a promise resolved when it is deleted
+*/
+function getDeleteRecordFn(setData, service, fetchMethod, messages) {
+	return async (item) => {
+		const id = item?.id ?? 0;
+		if (!id) {
+			setData((prevData) => prevData.filter((current) => current !== item));
+			return;
+		}
+		try {
+			await service.delete(id);
+			showSuccessNotification(messages.table.deleteSuccess, messages.common.success);
+			setData(await fetchMethod());
+		} catch (e) {
+			showErrorNotification(e, void 0, messages.common.error);
+		}
+	};
+}
+/**
+* A table that shows the records of a data source, with the view, edit and delete actions. Clicking a row opens the
+* record.
+* @template M type of the records, shown one per row
+* @template S source of the records (e.g. a service that accesses an API)
+*/
+var Table = (props) => {
+	const { customFetchMethod, service, columns, basePath, customEditFunction } = props;
+	const fetchMethod = useCallback(() => customFetchMethod ? customFetchMethod() : service.findAll(), [customFetchMethod, service]);
+	const { router, messages, formRouteSegments } = useKitConfig();
+	const navigate = router.useNavigate();
+	const settings = {
+		...DEFAULT_ACTIONS_SETTINGS,
+		...props.actionsSettings
+	};
+	const { data: fetchedData, loading, error } = useService(fetchMethod);
+	const [data, setData] = useState([]);
+	useEffect(() => setData(fetchedData), [fetchedData]);
+	const deleteRecord = useMemo(() => getDeleteRecordFn(setData, service, fetchMethod, messages), [
+		service,
+		fetchMethod,
+		messages
+	]);
+	const actionsColumn = {
+		accessor: "actions",
+		title: /* @__PURE__ */ jsx(Box, {
+			mr: 6,
+			children: messages.table.actions
+		}),
+		textAlign: "right",
+		render: (item) => /* @__PURE__ */ jsx(RowActions, {
+			...settings,
+			viewUrl: viewUrl(props, item, formRouteSegments),
+			editUrl: item.id ? `${basePath}/${formRouteSegments.edit}/${item.id}` : void 0,
+			onEdit: customEditFunction && item.id ? () => customEditFunction(item.id) : void 0,
+			onDelete: () => deleteRecord(item)
+		})
+	};
+	const effectiveColumns = settings.canShowActions ? [...columns, actionsColumn] : columns;
+	if (error) return /* @__PURE__ */ jsx(ErrorAlert, {
+		title: messages.common.loadError,
+		message: String(error)
+	});
+	return /* @__PURE__ */ jsx(ViewTable, {
+		data,
+		columns: effectiveColumns,
+		loading,
+		pagination: props.pagination,
+		highlightOnHover: true,
+		highlightOnHoverColor: ROW_HOVER_COLOR,
+		onRowClick: ({ record }) => navigate(viewUrl(props, record, formRouteSegments))
+	});
+};
+export { Table as default };
+
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../../../src/component/organism/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { Box } from '@mantine/core';\nimport { DataTableColumn } from 'mantine-datatable';\n\nimport ViewTable from '../ViewTable/ViewTable';\nimport RowActions from './RowActions';\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport { KitMessages } from '../../../i18n/KitMessages';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useKitConfig } from '../../../provider/useKit';\nimport { FormRouteSegments } from '../../../router/FormRouteSegments';\nimport ErrorAlert from '../../atom/ErrorAlert/ErrorAlert';\nimport useService from '../../../hook/useService';\nimport { showErrorNotification, showSuccessNotification } from '../../../util/Notifications';\n\n/*\nColor of the row under the mouse. The default color of mantine-datatable (gray-1) is barely distinguishable from the\nzebra stripes (gray-0), so the highlight went unnoticed. The light variant of the primary color adapts to the light and\ndark color schemes.\n*/\nconst ROW_HOVER_COLOR = 'var(--mantine-primary-color-light)';\n\n/** Which actions the table shows for each record. */\nexport type ActionsSettings = {\n    /** Whether the actions column is shown. */\n    canShowActions: boolean;\n\n    /** Whether the view action is shown. */\n    canView: boolean;\n\n    /** Whether the edit action is shown. */\n    canEdit: boolean;\n\n    /** Whether the delete action is shown. */\n    canDelete: boolean;\n};\n\n/** Every action shown, used for the settings the caller does not give. */\nconst DEFAULT_ACTIONS_SETTINGS: ActionsSettings = {\n    canShowActions: true,\n    canView: true,\n    canEdit: true,\n    canDelete: true\n};\n\n/** Props of the {@link Table}. */\ntype TableProps<M extends Identifiable, S extends ListDataSource<M>> = {\n    /** Source of the records and of their deletion (e.g. a service that accesses an API). */\n    service: S;\n\n    /**\n     * Fetches the records shown, instead of `service.findAll()`. To show data already available, use\n     * `() => Promise.resolve(data)`.\n     */\n    customFetchMethod?: () => Promise<M[]>;\n\n    /** Columns of the table. */\n    columns: DataTableColumn<M>[];\n\n    /** Base path of the pages of the records (e.g. `/region`), used to build the view and edit URLs. */\n    basePath: string;\n\n    /** Which actions are shown; the ones not given are shown. */\n    actionsSettings?: Partial<ActionsSettings>;\n\n    /** Whether the table is paginated. */\n    pagination?: boolean;\n\n    /**\n     * Called by the edit action instead of opening the edit page of the record.\n     * @param itemId id of the record to edit\n     */\n    customEditFunction?: (itemId: M['id']) => void;\n\n    /**\n     * Builds the URL opened to view a record (click on the row or on the view icon).\n     * If absent, the default route is used: `${basePath}/<view segment>/${item.id}`.\n     */\n    getViewUrl?: (item: M) => string;\n};\n\n/**\n * Returns the view URL of a record: the one of `getViewUrl`, if given; otherwise, the default view route.\n * @param props props of the table\n * @param item record\n * @param segments URL segments of the form pages\n */\nfunction viewUrl<M extends Identifiable, S extends ListDataSource<M>>(\n    props: TableProps<M, S>,\n    item: M,\n    segments: FormRouteSegments\n): string {\n    return props.getViewUrl ? props.getViewUrl(item) : `${props.basePath}/${segments.view}/${item.id}`;\n}\n\n/**\n * Creates the function that deletes a record and reloads the table.\n * @param setData function that sets the records of the table, obtained from `useState`\n * @param service source of the records, which deletes them\n * @param fetchMethod fetches the records again after the deletion\n * @param messages texts of the locale\n * @return a function that receives the record to delete and returns a promise resolved when it is deleted\n */\nfunction getDeleteRecordFn<M extends Identifiable, S extends ListDataSource<M>>(\n    setData: (value: ((prevState: M[]) => M[]) | M[]) => void,\n    service: S,\n    fetchMethod: () => Promise<M[]>,\n    messages: KitMessages\n): (item: M) => Promise<void> {\n    return async (item: M) => {\n        const id = item?.id ?? 0;\n\n        // Without an id, the record was added only to the array and was not sent to the backend: just remove it.\n        if (!id) {\n            setData(prevData => prevData.filter(current => current !== item));\n            return;\n        }\n\n        try {\n            await service.delete(id);\n            showSuccessNotification(messages.table.deleteSuccess, messages.common.success);\n            setData(await fetchMethod());\n        } catch (e) {\n            showErrorNotification(e, undefined, messages.common.error);\n        }\n    };\n}\n\n/**\n * A table that shows the records of a data source, with the view, edit and delete actions. Clicking a row opens the\n * record.\n * @template M type of the records, shown one per row\n * @template S source of the records (e.g. a service that accesses an API)\n */\nconst Table = <M extends Identifiable, S extends ListDataSource<M>>(props: TableProps<M, S>): ReactElement => {\n    const { customFetchMethod, service, columns, basePath, customEditFunction } = props;\n    const fetchMethod = useCallback(\n        () => (customFetchMethod ? customFetchMethod() : service.findAll()),\n        [customFetchMethod, service]\n    );\n    const { router, messages, formRouteSegments } = useKitConfig();\n    const navigate = router.useNavigate();\n    const settings: ActionsSettings = { ...DEFAULT_ACTIONS_SETTINGS, ...props.actionsSettings };\n\n    const { data: fetchedData, loading, error } = useService(fetchMethod);\n    const [data, setData] = useState<M[]>([]);\n\n    useEffect(() => setData(fetchedData), [fetchedData]);\n\n    const deleteRecord = useMemo(\n        () => getDeleteRecordFn(setData, service, fetchMethod, messages),\n        [service, fetchMethod, messages]\n    );\n\n    const actionsColumn: DataTableColumn<M> = {\n        accessor: 'actions',\n        title: <Box mr={6}>{messages.table.actions}</Box>,\n        textAlign: 'right',\n        render: item => (\n            <RowActions\n                {...settings}\n                viewUrl={viewUrl(props, item, formRouteSegments)}\n                editUrl={item.id ? `${basePath}/${formRouteSegments.edit}/${item.id}` : undefined}\n                onEdit={customEditFunction && item.id ? () => customEditFunction(item.id) : undefined}\n                onDelete={() => deleteRecord(item)}\n            />\n        )\n    };\n    const effectiveColumns = settings.canShowActions ? [...columns, actionsColumn] : columns;\n\n    if (error) {\n        return <ErrorAlert title={messages.common.loadError} message={String(error)} />;\n    }\n\n    return (\n        <ViewTable\n            data={data}\n            columns={effectiveColumns}\n            loading={loading}\n            pagination={props.pagination}\n            // Highlights the row under the mouse, to show that clicking it opens the record, as the view icon does.\n            highlightOnHover\n            highlightOnHoverColor={ROW_HOVER_COLOR}\n            onRowClick={({ record }) => navigate(viewUrl(props, record, formRouteSegments))}\n        />\n    );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;AAuBA,IAAM,kBAAkB;;AAkBxB,IAAM,2BAA4C;CAC9C,gBAAgB;CAChB,SAAS;CACT,SAAS;CACT,WAAW;AACf;;;;;;;AA4CA,SAAS,QACL,OACA,MACA,UACM;CACN,OAAO,MAAM,aAAa,MAAM,WAAW,IAAI,IAAI,GAAG,MAAM,SAAS,GAAG,SAAS,KAAK,GAAG,KAAK;AAClG;;;;;;;;;AAUA,SAAS,kBACL,SACA,SACA,aACA,UAC0B;CAC1B,OAAO,OAAO,SAAY;EACtB,MAAM,KAAK,MAAM,MAAM;EAGvB,IAAI,CAAC,IAAI;GACL,SAAQ,aAAY,SAAS,QAAO,YAAW,YAAY,IAAI,CAAC;GAChE;EACJ;EAEA,IAAI;GACA,MAAM,QAAQ,OAAO,EAAE;GACvB,wBAAwB,SAAS,MAAM,eAAe,SAAS,OAAO,OAAO;GAC7E,QAAQ,MAAM,YAAY,CAAC;EAC/B,SAAS,GAAG;GACR,sBAAsB,GAAG,KAAA,GAAW,SAAS,OAAO,KAAK;EAC7D;CACJ;AACJ;;;;;;;AAQA,IAAM,SAA8D,UAA0C;CAC1G,MAAM,EAAE,mBAAmB,SAAS,SAAS,UAAU,uBAAuB;CAC9E,MAAM,cAAc,kBACT,oBAAoB,kBAAkB,IAAI,QAAQ,QAAQ,GACjE,CAAC,mBAAmB,OAAO,CAC/B;CACA,MAAM,EAAE,QAAQ,UAAU,sBAAsB,aAAa;CAC7D,MAAM,WAAW,OAAO,YAAY;CACpC,MAAM,WAA4B;EAAE,GAAG;EAA0B,GAAG,MAAM;CAAgB;CAE1F,MAAM,EAAE,MAAM,aAAa,SAAS,UAAU,WAAW,WAAW;CACpE,MAAM,CAAC,MAAM,WAAW,SAAc,CAAC,CAAC;CAExC,gBAAgB,QAAQ,WAAW,GAAG,CAAC,WAAW,CAAC;CAEnD,MAAM,eAAe,cACX,kBAAkB,SAAS,SAAS,aAAa,QAAQ,GAC/D;EAAC;EAAS;EAAa;CAAQ,CACnC;CAEA,MAAM,gBAAoC;EACtC,UAAU;EACV,OAAO,oBAAC,KAAD;GAAK,IAAI;GAAI,UAAA,SAAS,MAAM;EAAa,CAAA;EAChD,WAAW;EACX,SAAQ,SACJ,oBAAC,YAAD;GACI,GAAI;GACJ,SAAS,QAAQ,OAAO,MAAM,iBAAiB;GAC/C,SAAS,KAAK,KAAK,GAAG,SAAS,GAAG,kBAAkB,KAAK,GAAG,KAAK,OAAO,KAAA;GACxE,QAAQ,sBAAsB,KAAK,WAAW,mBAAmB,KAAK,EAAE,IAAI,KAAA;GAC5E,gBAAgB,aAAa,IAAI;EACpC,CAAA;CAET;CACA,MAAM,mBAAmB,SAAS,iBAAiB,CAAC,GAAG,SAAS,aAAa,IAAI;CAEjF,IAAI,OACA,OAAO,oBAAC,YAAD;EAAY,OAAO,SAAS,OAAO;EAAW,SAAS,OAAO,KAAK;CAAI,CAAA;CAGlF,OACI,oBAAC,WAAD;EACU;EACN,SAAS;EACA;EACT,YAAY,MAAM;EAElB,kBAAA;EACA,uBAAuB;EACvB,aAAa,EAAE,aAAa,SAAS,QAAQ,OAAO,QAAQ,iBAAiB,CAAC;CACjF,CAAA;AAET"}

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

@@ -0,0 +1,11 @@
+import { DataTableSortStatus } from 'mantine-datatable';
+/** Comparison function for `Array.prototype.sort`: negative if `a` comes before `b`, positive if it comes after. */
+export type Comparator<M> = (a: M, b: M) => number;
+/**
+ * Returns the function that sorts the records by the column and direction chosen in the table header. Texts follow
+ * the locale (see {@link compareValues}). Records without a value in the column always come last, so they do not take
+ * the first pages in the descending order.
+ * @param sortStatus column (path of the attribute, e.g. `city.name`) and direction of the sort
+ * @param locale locale of the text comparison; defaults to `en-US`
+ */
+export declare function columnComparator<M>(sortStatus: DataTableSortStatus<M>, locale?: string): Comparator<M>;

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

@@ -0,0 +1,25 @@
+"use client";
+import { DEFAULT_LOCALE } from "../../../i18n/KitLocale.js";
+import { compareValues, isAbsent } from "../../../util/CompareUtil.js";
+import { getValueAtPath } from "mantine-datatable";
+// src/component/organism/ViewTable/ColumnComparator.ts
+/**
+* Returns the function that sorts the records by the column and direction chosen in the table header. Texts follow
+* the locale (see {@link compareValues}). Records without a value in the column always come last, so they do not take
+* the first pages in the descending order.
+* @param sortStatus column (path of the attribute, e.g. `city.name`) and direction of the sort
+* @param locale locale of the text comparison; defaults to `en-US`
+*/
+function columnComparator(sortStatus, locale = DEFAULT_LOCALE) {
+	const accessor = String(sortStatus.columnAccessor);
+	const descending = sortStatus.direction === "desc";
+	return (a, b) => {
+		const valueA = getValueAtPath(a, accessor);
+		const valueB = getValueAtPath(b, accessor);
+		const result = compareValues(valueA, valueB, locale);
+		return descending && !isAbsent(valueA) && !isAbsent(valueB) ? -result : result;
+	};
+}
+export { columnComparator };
+
+//# sourceMappingURL=ColumnComparator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnComparator.js","names":[],"sources":["../../../../src/component/organism/ViewTable/ColumnComparator.ts"],"sourcesContent":["import { DataTableSortStatus, getValueAtPath } from 'mantine-datatable';\n\nimport { DEFAULT_LOCALE } from '../../../i18n/KitLocale';\nimport { compareValues, isAbsent } from '../../../util/CompareUtil';\n\n/** Comparison function for `Array.prototype.sort`: negative if `a` comes before `b`, positive if it comes after. */\nexport type Comparator<M> = (a: M, b: M) => number;\n\n/**\n * Returns the function that sorts the records by the column and direction chosen in the table header. Texts follow\n * the locale (see {@link compareValues}). Records without a value in the column always come last, so they do not take\n * the first pages in the descending order.\n * @param sortStatus column (path of the attribute, e.g. `city.name`) and direction of the sort\n * @param locale locale of the text comparison; defaults to `en-US`\n */\nexport function columnComparator<M>(\n    sortStatus: DataTableSortStatus<M>,\n    locale: string = DEFAULT_LOCALE\n): Comparator<M> {\n    const accessor = String(sortStatus.columnAccessor);\n    const descending = sortStatus.direction === 'desc';\n\n    return (a, b) => {\n        const valueA: unknown = getValueAtPath(a, accessor);\n        const valueB: unknown = getValueAtPath(b, accessor);\n        const result = compareValues(valueA, valueB, locale);\n\n        return descending && !isAbsent(valueA) && !isAbsent(valueB) ? -result : result;\n    };\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAgB,iBACZ,YACA,SAAiB,gBACJ;CACb,MAAM,WAAW,OAAO,WAAW,cAAc;CACjD,MAAM,aAAa,WAAW,cAAc;CAE5C,QAAQ,GAAG,MAAM;EACb,MAAM,SAAkB,eAAe,GAAG,QAAQ;EAClD,MAAM,SAAkB,eAAe,GAAG,QAAQ;EAClD,MAAM,SAAS,cAAc,QAAQ,QAAQ,MAAM;EAEnD,OAAO,cAAc,CAAC,SAAS,MAAM,KAAK,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS;CAC5E;AACJ"}

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

@@ -0,0 +1,53 @@
+import { DataTableColumn, DataTablePaginationProps, DataTableProps, DataTableSortStatus } from 'mantine-datatable';
+import { Identifiable } from '../../../model/Identifiable';
+import { Comparator } from './ColumnComparator';
+/** Function that defines extra attributes (e.g. aria-label) for each pagination control button. */
+type PaginationControlPropsGetter = Extract<DataTablePaginationProps, {
+    page: number;
+}>['getPaginationControlProps'];
+/**
+ * Props of the {@link DataTable} passed straight through by the ViewTable.
+ * Only the props actually used by the callers are accepted: using `Partial<DataTableProps<M>>` makes TypeScript combine
+ * the variants of the `DataTableProps` union with the ones of `paginationProps`, which exhausts the memory of `tsc`.
+ */
+type DataTablePassThroughProps<M extends Identifiable> = Pick<DataTableProps<M>, 'onRowClick' | 'rowStyle' | 'noRecordsText' | 'highlightOnHover' | 'highlightOnHoverColor' | 'className' | 'minHeight' | 'withColumnBorders' | 'verticalSpacing' | 'horizontalSpacing'>;
+/**
+ * TableProps is a generic type for the ViewTable component props.
+ */
+type TableProps<M extends Identifiable> = {
+    data: M[];
+    columns: DataTableColumn<M>[];
+    loading?: boolean;
+    pagination?: boolean;
+    /** Shows the ID column, automatically added to the given columns. */
+    showIdColumn?: boolean;
+    /**
+     * Initial sort of the table. Default: by `id`, ascending.
+     * Give another value when the natural order of the data should not be by `id` (e.g. when the backend already
+     * returns the data in an order to keep). Along with `compare`, it only tells which header shows the sort indicator
+     * in the initial order.
+     */
+    defaultSortStatus?: DataTableSortStatus<M>;
+    /**
+     * Comparison function that defines the initial order, instead of the column of `defaultSortStatus`. It allows
+     * sorting by more than one criterion (e.g. city and, in the same city, year descending). After the user clicks the
+     * header of a column, the sort of the column applies.
+     */
+    compare?: Comparator<M>;
+    /** Extra attributes for the pagination control buttons. It only has effect when `pagination` is true. */
+    getPaginationControlProps?: PaginationControlPropsGetter;
+} & DataTablePassThroughProps<M>;
+/**
+ * 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
+ */
+declare const ViewTable: <M extends Identifiable>({ data, columns, loading, pagination, showIdColumn, defaultSortStatus, compare, getPaginationControlProps, ...rest }: TableProps<M>) => import("react/jsx-runtime").JSX.Element;
+export default ViewTable;