@ifto/mantine-kit 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,123 @@
+"use client";
+import { useKitConfig } from "../../../provider/useKit.js";
+import { columnComparator } from "./ColumnComparator.js";
+import { useEffect, useMemo, useState } from "react";
+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.
+*/
+var NO_COLUMN_SORT_STATUS = {
+	columnAccessor: "",
+	direction: "asc"
+};
+/**
+* Adds a unique key to each record shown in the table.
+* The array is changed in place, instead of copying each object with destructuring: a copy is a plain object, which
+* loses the accessors (get and set) of class instances, so reading an attribute through them would return nothing.
+* @param data records shown in the table
+* @return the same array, now with a `key` in each object
+*/
+function addKeyToDataArray(data) {
+	data.forEach((element, index) => Object.assign(element, { key: index.toString() }));
+	return data;
+}
+/**
+* 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);
+	}, [
+		data,
+		sortStatus,
+		compareActive,
+		compare,
+		locale
+	]);
+	const recordsWithKeys = addKeyToDataArray(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);
+	}
+	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,
+		records: recordsWithKeys,
+		noRecordsText: messages.table.noRecords,
+		fetching: loading,
+		sortStatus,
+		onSortStatusChange: changeSortStatus,
+		customRowAttributes: (record) => ({ "data-testid": `row-${record.id}` }),
+		...paginationProps,
+		...rest
+	});
+};
+export { ViewTable as default };
+
+//# sourceMappingURL=ViewTable.js.map

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

@@ -0,0 +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';\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 * Adds a unique key to each record shown in the table.\n * The array is changed in place, instead of copying each object with destructuring: a copy is a plain object, which\n * loses the accessors (get and set) of class instances, so reading an attribute through them would return nothing.\n * @param data records shown in the table\n * @return the same array, now with a `key` in each object\n */\nfunction addKeyToDataArray<M extends Identifiable>(data: M[]): M[] {\n    data.forEach((element, index) => Object.assign(element, { key: index.toString() }));\n    return data;\n}\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 recordsWithKeys = addKeyToDataArray(records);\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={recordsWithKeys}\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":";;;;;;;;AAiBA,IAAM,aAAa;CAAC;CAAI;CAAI;CAAI;AAAG;;AAGnC,IAAM,sBAAsB;CAAE,gBAAgB;CAAM,WAAW;AAAM;;;;;AAMrE,IAAM,wBAAwB;CAAE,gBAAgB;CAAI,WAAW;AAAM;;;;;;;;AA0DrE,SAAS,kBAA0C,MAAgB;CAC/D,KAAK,SAAS,SAAS,UAAU,OAAO,OAAO,SAAS,EAAE,KAAK,MAAM,SAAS,EAAE,CAAC,CAAC;CAClF,OAAO;AACX;;;;;;;;;;;;;AAcA,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;CASrD,MAAM,kBAAkB,kBANR,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,CACA,CAAO;CAEjD,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;EACT,SAAS;EACT,eAAe,SAAS,MAAM;EAC9B,UAAU;EACE;EACZ,oBAAoB;EACpB,sBAAqB,YAAW,EAAE,eAAe,OAAO,OAAO,KAAK;EACpE,GAAI;EACJ,GAAI;CACP,CAAA;AAET"}

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

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import type { UseFormReturnType } from '@mantine/form';
+import { Identifiable } from '../../../model/Identifiable';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+interface CreateFormPageProps<T extends Identifiable, D extends object> {
+    /** Name of the record (e.g. "Region"). */
+    title: string;
+    breadcrumbItems: BreadcrumbItem[];
+    /** Sends the data of the new record (e.g. to the API). */
+    fetchMethod: (data: D) => Promise<T>;
+    form: UseFormReturnType<D>;
+    backRoute: string;
+    isSubmitDisabled?: boolean;
+    /** Question shown in a confirmation dialog before saving; absent to save right away. */
+    confirmationMessage?: string;
+}
+/** Form page to create a record, which sends the data with `fetchMethod`. */
+declare function CreateFormPage<T extends Identifiable, D extends object>(props: React.PropsWithChildren<CreateFormPageProps<T, D>>): ReactElement;
+export default CreateFormPage;

package/dist/component/template/CreateFormPage/CreateFormPage.js

@@ -0,0 +1,41 @@
+"use client";
+import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
+import DataForm from "../../organism/DataForm/DataForm.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mantine/core";
+// src/component/template/CreateFormPage/CreateFormPage.tsx
+/** Form page to create a record, which sends the data with `fetchMethod`. */
+function CreateFormPage(props) {
+	const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } = props;
+	const messages = useKitMessages();
+	const pageTitle = `${messages.form.action.create} ${title}`;
+	const documentTitle = useDocumentTitle(pageTitle);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: pageTitle,
+			breadcrumbItems: [...breadcrumbItems, {
+				title: pageTitle,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(DataForm, {
+			form,
+			fetchMethod,
+			title,
+			backRoute,
+			submit: {
+				title: messages.common.save,
+				successMsg: messages.form.createSuccess,
+				errorMsg: messages.form.createError,
+				disabled: isSubmitDisabled,
+				confirmationMessage
+			},
+			children
+		})]
+	})] });
+}
+export { CreateFormPage as default };
+
+//# sourceMappingURL=CreateFormPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateFormPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/CreateFormPage/CreateFormPage.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Stack } from '@mantine/core';\nimport type { UseFormReturnType } from '@mantine/form';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport DataForm from '../../organism/DataForm/DataForm';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\ninterface CreateFormPageProps<T extends Identifiable, D extends object> {\n    /** Name of the record (e.g. \"Region\"). */\n    title: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Sends the data of the new record (e.g. to the API). */\n    fetchMethod: (data: D) => Promise<T>;\n    form: UseFormReturnType<D>;\n    backRoute: string;\n    isSubmitDisabled?: boolean;\n\n    /** Question shown in a confirmation dialog before saving; absent to save right away. */\n    confirmationMessage?: string;\n}\n\n/** Form page to create a record, which sends the data with `fetchMethod`. */\nfunction CreateFormPage<T extends Identifiable, D extends object>(\n    props: React.PropsWithChildren<CreateFormPageProps<T, D>>\n): ReactElement {\n    const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } =\n        props;\n    const messages = useKitMessages();\n    const pageTitle = `${messages.form.action.create} ${title}`;\n    const documentTitle = useDocumentTitle(pageTitle);\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={pageTitle} breadcrumbItems={[...breadcrumbItems, { title: pageTitle, href: '#' }]} />\n\n                <DataForm\n                    form={form}\n                    fetchMethod={fetchMethod}\n                    title={title}\n                    backRoute={backRoute}\n                    submit={{\n                        title: messages.common.save,\n                        successMsg: messages.form.createSuccess,\n                        errorMsg: messages.form.createError,\n                        disabled: isSubmitDisabled,\n                        confirmationMessage\n                    }}\n                >\n                    {children}\n                </DataForm>\n            </Stack>\n        </>\n    );\n}\n\nexport default CreateFormPage;\n"],"mappings":";;;;;;;;;AA2BA,SAAS,eACL,OACY;CACZ,MAAM,EAAE,OAAO,iBAAiB,aAAa,MAAM,WAAW,kBAAkB,UAAU,wBACtF;CACJ,MAAM,WAAW,eAAe;CAChC,MAAM,YAAY,GAAG,SAAS,KAAK,OAAO,OAAO,GAAG;CACpD,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA,CACI,oBAAC,YAAD;GAAY,OAAO;GAAW,iBAAiB,CAAC,GAAG,iBAAiB;IAAE,OAAO;IAAW,MAAM;GAAI,CAAC;EAAI,CAAA,GAEvG,oBAAC,UAAD;GACU;GACO;GACN;GACI;GACX,QAAQ;IACJ,OAAO,SAAS,OAAO;IACvB,YAAY,SAAS,KAAK;IAC1B,UAAU,SAAS,KAAK;IACxB,UAAU;IACV;GACJ;GAEC;EACK,CAAA,CACP;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

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

@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import type { UseFormReturnType } from '@mantine/form';
+import { Identifiable } from '../../../model/Identifiable';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+interface EditFormPageProps<T extends Identifiable, D extends object> {
+    /** Name of the record (e.g. "Region"). */
+    title: string;
+    breadcrumbItems: BreadcrumbItem[];
+    /** Sends the changed data of the record (e.g. to the API). */
+    fetchMethod: (data: D) => Promise<T>;
+    form: UseFormReturnType<D>;
+    backRoute: string;
+    isSubmitDisabled?: boolean;
+    /** Question shown in a confirmation dialog before saving; absent to save right away. */
+    confirmationMessage?: string;
+}
+/** Form page to update a record, which sends the data with `fetchMethod`. */
+declare function EditFormPage<T extends Identifiable, D extends object>(props: React.PropsWithChildren<EditFormPageProps<T, D>>): ReactElement;
+export default EditFormPage;

package/dist/component/template/EditFormPage/EditFormPage.js

@@ -0,0 +1,42 @@
+"use client";
+import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
+import DataForm from "../../organism/DataForm/DataForm.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mantine/core";
+// src/component/template/EditFormPage/EditFormPage.tsx
+/** Form page to update a record, which sends the data with `fetchMethod`. */
+function EditFormPage(props) {
+	const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } = props;
+	const messages = useKitMessages();
+	const action = messages.form.action.edit;
+	const pageTitle = `${action} ${title}`;
+	const documentTitle = useDocumentTitle(pageTitle);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: pageTitle,
+			breadcrumbItems: [...breadcrumbItems, {
+				title: pageTitle,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(DataForm, {
+			form,
+			fetchMethod,
+			title,
+			backRoute,
+			submit: {
+				title: action,
+				successMsg: messages.form.updateSuccess,
+				errorMsg: messages.form.updateError,
+				disabled: isSubmitDisabled,
+				confirmationMessage
+			},
+			children
+		})]
+	})] });
+}
+export { EditFormPage as default };
+
+//# sourceMappingURL=EditFormPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditFormPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/EditFormPage/EditFormPage.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Stack } from '@mantine/core';\nimport type { UseFormReturnType } from '@mantine/form';\n\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport DataForm from '../../organism/DataForm/DataForm';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\ninterface EditFormPageProps<T extends Identifiable, D extends object> {\n    /** Name of the record (e.g. \"Region\"). */\n    title: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Sends the changed data of the record (e.g. to the API). */\n    fetchMethod: (data: D) => Promise<T>;\n    form: UseFormReturnType<D>;\n    backRoute: string;\n    isSubmitDisabled?: boolean;\n\n    /** Question shown in a confirmation dialog before saving; absent to save right away. */\n    confirmationMessage?: string;\n}\n\n/** Form page to update a record, which sends the data with `fetchMethod`. */\nfunction EditFormPage<T extends Identifiable, D extends object>(\n    props: React.PropsWithChildren<EditFormPageProps<T, D>>\n): ReactElement {\n    const { title, breadcrumbItems, fetchMethod, form, backRoute, isSubmitDisabled, children, confirmationMessage } =\n        props;\n    const messages = useKitMessages();\n    const action = messages.form.action.edit;\n    const pageTitle = `${action} ${title}`;\n    const documentTitle = useDocumentTitle(pageTitle);\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={pageTitle} breadcrumbItems={[...breadcrumbItems, { title: pageTitle, href: '#' }]} />\n\n                <DataForm\n                    form={form}\n                    fetchMethod={fetchMethod}\n                    title={title}\n                    backRoute={backRoute}\n                    submit={{\n                        title: action,\n                        successMsg: messages.form.updateSuccess,\n                        errorMsg: messages.form.updateError,\n                        disabled: isSubmitDisabled,\n                        confirmationMessage\n                    }}\n                >\n                    {children}\n                </DataForm>\n            </Stack>\n        </>\n    );\n}\n\nexport default EditFormPage;\n"],"mappings":";;;;;;;;;AA2BA,SAAS,aACL,OACY;CACZ,MAAM,EAAE,OAAO,iBAAiB,aAAa,MAAM,WAAW,kBAAkB,UAAU,wBACtF;CACJ,MAAM,WAAW,eAAe;CAChC,MAAM,SAAS,SAAS,KAAK,OAAO;CACpC,MAAM,YAAY,GAAG,OAAO,GAAG;CAC/B,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA,CACI,oBAAC,YAAD;GAAY,OAAO;GAAW,iBAAiB,CAAC,GAAG,iBAAiB;IAAE,OAAO;IAAW,MAAM;GAAI,CAAC;EAAI,CAAA,GAEvG,oBAAC,UAAD;GACU;GACO;GACN;GACI;GACX,QAAQ;IACJ,OAAO;IACP,YAAY,SAAS,KAAK;IAC1B,UAAU,SAAS,KAAK;IACxB,UAAU;IACV;GACJ;GAEC;EACK,CAAA,CACP;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

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

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react';
+import { UseFormReturnType } from '@mantine/form';
+import { SaveDataSource } from '../../../data/SaveDataSource';
+import { Identifiable } from '../../../model/Identifiable';
+import { FormType } from './FormType';
+interface FormPageProps<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>> {
+    /** Destination of the data (e.g. a service that accesses an API). */
+    service: S;
+    /** Name of the record (e.g. "Region"), shown after the action verb in the title. */
+    title: string;
+    formType: FormType;
+    form: UseFormReturnType<D & Identifiable>;
+    /** Page opened after saving and by the back button; absent for the first segment of the current path. */
+    backRoute?: string;
+    /** Shows a loading overlay over the form (e.g. while the record is fetched). */
+    isLoading?: boolean;
+    /** Whether the form takes the whole width, instead of half of it on large screens. */
+    isFullWidth?: boolean;
+}
+/**
+ * CRUD form page to create, edit or view a record (according to `formType`), which saves the data in `service` and
+ * goes back to the list page.
+ */
+declare function FormPage<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>>(props: React.PropsWithChildren<FormPageProps<T, D, S>>): ReactElement;
+export default FormPage;

package/dist/component/template/FormPage/FormPage.js

@@ -0,0 +1,130 @@
+"use client";
+import { useDocumentTitle, useKitConfig } from "../../../provider/useKit.js";
+import { formatValues } from "../../../util/TransformData.js";
+import { showErrorNotification, showSuccessNotification } from "../../../util/Notifications.js";
+import PaperCard from "../../molecule/PaperCard/PaperCard.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import { FormType } from "./FormType.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Grid, Group, LoadingOverlay, Stack, Text } from "@mantine/core";
+import { IconArrowBack, IconDeviceFloppy, IconInfoCircle } from "@tabler/icons-react";
+// src/component/template/FormPage/FormPage.tsx
+/** Action of each form type, the key of its verb in the texts. */
+var FORM_ACTIONS = {
+	[FormType.Create]: "create",
+	[FormType.Edit]: "edit",
+	[FormType.View]: "view"
+};
+/**
+* CRUD form page to create, edit or view a record (according to `formType`), which saves the data in `service` and
+* goes back to the list page.
+*/
+function FormPage(props) {
+	const { title, formType, service, form, backRoute, isLoading, isFullWidth, children } = props;
+	const { router, messages } = useKitConfig();
+	const { Link } = router;
+	const navigate = router.useNavigate();
+	const pathname = router.usePathname();
+	/**
+	* Checks whether a field of the validation schema is missing in the form.
+	* @param fieldName name of the field to find
+	*/
+	function isFormFieldMissing(fieldName) {
+		return !form.getInputNode(fieldName);
+	}
+	/**
+	* Shows the errors of the fields that are in the validation schema given to `useForm`, but not in the form.
+	* Without it, these errors are not shown to the user (not even in the console), so neither the user nor the
+	* developer can understand why the form is not submitted.
+	*/
+	function showErrorsForMissingFormFields() {
+		const errors = Object.entries(form.errors).map(([fieldName, errorMsg]) => ({
+			fieldName,
+			errorMsg
+		})).filter(({ fieldName }) => isFormFieldMissing(fieldName)).map(({ fieldName, errorMsg }) => /* @__PURE__ */ jsx("li", { children: errorMsg }, fieldName));
+		const icon = /* @__PURE__ */ jsx(IconInfoCircle, {});
+		return errors.length > 0 && /* @__PURE__ */ jsx(Alert, {
+			color: "red",
+			icon,
+			children: /* @__PURE__ */ jsx("ul", { children: errors })
+		});
+	}
+	const { id } = form.values;
+	const [loading, setLoading] = useState(false);
+	const effectiveBackRoute = backRoute || `/${pathname.split("/").at(1)}`;
+	const canShowSubmitButton = formType === FormType.Create || formType === FormType.Edit;
+	const formTypeTitle = messages.form.action[FORM_ACTIONS[formType] ?? "custom"];
+	const documentTitle = useDocumentTitle(`${formTypeTitle} ${title}`);
+	const handleSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const effectiveData = formatValues(data);
+			await service.save(id, effectiveData);
+			showSuccessNotification(messages.form.saveSuccess(formTypeTitle), messages.common.success);
+			if (effectiveBackRoute) navigate(effectiveBackRoute);
+		} catch (e) {
+			showErrorNotification(e, messages.form.saveError(formTypeTitle), messages.common.error);
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: `${formTypeTitle} ${title}`,
+			breadcrumbItems: [{
+				title,
+				href: effectiveBackRoute
+			}, {
+				title: `${formTypeTitle} ${title}`,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Grid.Col, {
+			span: {
+				base: 12,
+				lg: isFullWidth ? 12 : 6
+			},
+			children: /* @__PURE__ */ jsx(PaperCard, { children: /* @__PURE__ */ jsxs(Box, {
+				component: "form",
+				onSubmit: form.onSubmit(handleSubmit),
+				pos: "relative",
+				children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+					visible: isLoading,
+					zIndex: 1e3,
+					overlayProps: {
+						radius: "sm",
+						blur: 2
+					}
+				}), /* @__PURE__ */ jsxs(Stack, { children: [
+					/* @__PURE__ */ jsxs(Text, {
+						size: "lg",
+						fw: 600,
+						children: [
+							formTypeTitle,
+							" ",
+							title
+						]
+					}),
+					children,
+					showErrorsForMissingFormFields(),
+					/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Button, {
+						leftSection: /* @__PURE__ */ jsx(IconArrowBack, { size: 16 }),
+						component: Link,
+						href: effectiveBackRoute,
+						variant: "default",
+						children: messages.common.back
+					}), canShowSubmitButton && /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						leftSection: /* @__PURE__ */ jsx(IconDeviceFloppy, { size: 16 }),
+						loading,
+						children: formTypeTitle
+					})] })
+				] })]
+			}) })
+		}) })]
+	})] });
+}
+export { FormPage as default };
+
+//# sourceMappingURL=FormPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/FormPage/FormPage.tsx"],"sourcesContent":["import React, { ReactElement, useState } from 'react';\n\nimport { Alert, Box, Button, Grid, Group, LoadingOverlay, Stack, Text } from '@mantine/core';\nimport { UseFormReturnType } from '@mantine/form';\nimport { IconArrowBack, IconDeviceFloppy, IconInfoCircle } from '@tabler/icons-react';\n\nimport { SaveDataSource } from '../../../data/SaveDataSource';\nimport { FormAction } from '../../../i18n/KitMessages';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitConfig } from '../../../provider/useKit';\nimport { formatValues } from '../../../util/TransformData';\nimport { showErrorNotification, showSuccessNotification } from '../../../util/Notifications';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\nimport { FormType } from './FormType';\n\ninterface FormPageProps<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>> {\n    /** Destination of the data (e.g. a service that accesses an API). */\n    service: S;\n\n    /** Name of the record (e.g. \"Region\"), shown after the action verb in the title. */\n    title: string;\n    formType: FormType;\n    form: UseFormReturnType<D & Identifiable>;\n\n    /** Page opened after saving and by the back button; absent for the first segment of the current path. */\n    backRoute?: string;\n\n    /** Shows a loading overlay over the form (e.g. while the record is fetched). */\n    isLoading?: boolean;\n\n    /** Whether the form takes the whole width, instead of half of it on large screens. */\n    isFullWidth?: boolean;\n}\n\n/** Action of each form type, the key of its verb in the texts. */\nconst FORM_ACTIONS: Record<FormType, FormAction> = {\n    [FormType.Create]: 'create',\n    [FormType.Edit]: 'edit',\n    [FormType.View]: 'view'\n};\n\n/**\n * CRUD form page to create, edit or view a record (according to `formType`), which saves the data in `service` and\n * goes back to the list page.\n */\nfunction FormPage<T extends Identifiable, D extends object, S extends SaveDataSource<T, D>>(\n    props: React.PropsWithChildren<FormPageProps<T, D, S>>\n): ReactElement {\n    const { title, formType, service, form, backRoute, isLoading, isFullWidth, children } = props;\n    const { router, messages } = useKitConfig();\n    const { Link } = router;\n    const navigate = router.useNavigate();\n    const pathname = router.usePathname();\n\n    /**\n     * Checks whether a field of the validation schema is missing in the form.\n     * @param fieldName name of the field to find\n     */\n    function isFormFieldMissing(fieldName: string): boolean {\n        return !form.getInputNode(fieldName);\n    }\n\n    /**\n     * Shows the errors of the fields that are in the validation schema given to `useForm`, but not in the form.\n     * Without it, these errors are not shown to the user (not even in the console), so neither the user nor the\n     * developer can understand why the form is not submitted.\n     */\n    function showErrorsForMissingFormFields(): ReactElement | false {\n        const errors = Object.entries(form.errors)\n            .map(([fieldName, errorMsg]) => ({ fieldName, errorMsg }))\n            .filter(({ fieldName }) => isFormFieldMissing(fieldName))\n            .map(({ fieldName, errorMsg }) => <li key={fieldName}>{errorMsg}</li>);\n\n        const icon = <IconInfoCircle />;\n        return (\n            errors.length > 0 && (\n                <Alert color=\"red\" icon={icon}>\n                    <ul>{errors}</ul>\n                </Alert>\n            )\n        );\n    }\n\n    const { id } = form.values;\n\n    const [loading, setLoading] = useState(false);\n    const effectiveBackRoute = backRoute || `/${pathname.split('/').at(1)}`;\n\n    const canShowSubmitButton = formType === FormType.Create || formType === FormType.Edit;\n    const formTypeTitle = messages.form.action[FORM_ACTIONS[formType] ?? 'custom'];\n    const documentTitle = useDocumentTitle(`${formTypeTitle} ${title}`);\n\n    const handleSubmit = async (data: D) => {\n        setLoading(true);\n        try {\n            const effectiveData = formatValues(data) as D;\n            await service.save(id, effectiveData);\n            showSuccessNotification(messages.form.saveSuccess(formTypeTitle), messages.common.success);\n\n            if (effectiveBackRoute) navigate(effectiveBackRoute);\n        } catch (e) {\n            showErrorNotification(e, messages.form.saveError(formTypeTitle), messages.common.error);\n        } finally {\n            setLoading(false);\n        }\n    };\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader\n                    title={`${formTypeTitle} ${title}`}\n                    breadcrumbItems={[\n                        { title, href: effectiveBackRoute },\n                        { title: `${formTypeTitle} ${title}`, href: '#' }\n                    ]}\n                />\n                <Grid>\n                    <Grid.Col span={{ base: 12, lg: isFullWidth ? 12 : 6 }}>\n                        <PaperCard>\n                            <Box component=\"form\" onSubmit={form.onSubmit(handleSubmit)} pos=\"relative\">\n                                <LoadingOverlay\n                                    visible={isLoading}\n                                    zIndex={1000}\n                                    overlayProps={{ radius: 'sm', blur: 2 }}\n                                />\n\n                                <Stack>\n                                    <Text size=\"lg\" fw={600}>\n                                        {formTypeTitle} {title}\n                                    </Text>\n\n                                    {children}\n                                    {showErrorsForMissingFormFields()}\n\n                                    <Group>\n                                        <Button\n                                            leftSection={<IconArrowBack size={16} />}\n                                            component={Link}\n                                            href={effectiveBackRoute}\n                                            variant=\"default\"\n                                        >\n                                            {messages.common.back}\n                                        </Button>\n                                        {canShowSubmitButton && (\n                                            <Button\n                                                type=\"submit\"\n                                                leftSection={<IconDeviceFloppy size={16} />}\n                                                loading={loading}\n                                            >\n                                                {formTypeTitle}\n                                            </Button>\n                                        )}\n                                    </Group>\n                                </Stack>\n                            </Box>\n                        </PaperCard>\n                    </Grid.Col>\n                </Grid>\n            </Stack>\n        </>\n    );\n}\n\nexport default FormPage;\n"],"mappings":"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"}

package/dist/component/template/FormPage/FormType.d.ts

@@ -0,0 +1,6 @@
+/** Mode in which a CRUD form is opened. */
+export declare enum FormType {
+    Create = 0,
+    Edit = 1,
+    View = 2
+}

package/dist/component/template/FormPage/FormType.js

@@ -0,0 +1,12 @@
+"use client";
+// src/component/template/FormPage/FormType.ts
+/** Mode in which a CRUD form is opened. */
+var FormType = /* @__PURE__ */ function(FormType) {
+	FormType[FormType["Create"] = 0] = "Create";
+	FormType[FormType["Edit"] = 1] = "Edit";
+	FormType[FormType["View"] = 2] = "View";
+	return FormType;
+}({});
+export { FormType };
+
+//# sourceMappingURL=FormType.js.map

package/dist/component/template/FormPage/FormType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormType.js","names":[],"sources":["../../../../src/component/template/FormPage/FormType.ts"],"sourcesContent":["/** Mode in which a CRUD form is opened. */\nexport enum FormType {\n    Create,\n    Edit,\n    View\n}\n"],"mappings":";;;AACA,IAAY,WAAL,yBAAA,UAAA;CACH,SAAA,SAAA,YAAA,KAAA;CACA,SAAA,SAAA,UAAA,KAAA;CACA,SAAA,SAAA,UAAA,KAAA;;AACJ,EAAA,CAAA,CAAA"}

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

@@ -0,0 +1,21 @@
+import { NavItem } from '../../organism/Navbar/NavItem';
+interface Props {
+    children: React.ReactNode;
+    /** Brand of the app in the header (e.g. the logo with a link to the home page). */
+    logo: React.ReactNode;
+    /** Items of the side menu. */
+    navItems: NavItem[];
+    /** Content fixed at the bottom of the side menu (e.g. a link to log out). */
+    navFooter?: React.ReactNode;
+    /**
+     * Items of the user menu (e.g. `Menu.Item`s for the profile and to log out), opened by the avatar in the header.
+     * Without them, the avatar is not shown.
+     */
+    userMenu?: React.ReactNode;
+}
+/**
+ * Structure of the pages of the app: header with the brand, the color scheme toggle and the user menu, collapsible side
+ * menu and the content area.
+ */
+export declare const Layout: ({ children, logo, navItems, navFooter, userMenu }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/component/template/Layout/Layout.js

@@ -0,0 +1,121 @@
+"use client";
+import AppMain from "../../atom/AppMain/AppMain.js";
+import { Navbar } from "../../organism/Navbar/Navbar.js";
+import { useKitMessages } from "../../../provider/useKit.js";
+import Layout_module_default from "./Layout.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDisclosure, useMediaQuery, useMounted } from "@mantine/hooks";
+import { ActionIcon, AppShell, Avatar, Burger, Container, Group, Menu, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import cx from "clsx";
+// src/component/template/Layout/Layout.tsx
+/**
+* Structure of the pages of the app: header with the brand, the color scheme toggle and the user menu, collapsible side
+* menu and the content area.
+*/
+var Layout = ({ children, logo, navItems, navFooter, userMenu }) => {
+	const messages = useKitMessages().layout;
+	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+	const { setColorScheme } = useMantineColorScheme();
+	const savedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+	const nextColorScheme = (useMounted() ? savedColorScheme : "light") === "light" ? "dark" : "light";
+	const colorSchemeLabel = nextColorScheme === "dark" ? messages.enableDarkTheme : messages.enableLightTheme;
+	const theme = useMantineTheme();
+	const isMobile = !useMediaQuery(`(min-width: ${theme.breakpoints.sm})`);
+	const isOpened = isMobile ? mobileOpened : desktopOpened;
+	const toggleBurgerFn = isMobile ? toggleMobile : toggleDesktop;
+	return /* @__PURE__ */ jsxs(AppShell, {
+		header: { height: {
+			base: 60,
+			sm: 68
+		} },
+		navbar: {
+			width: { base: 300 },
+			breakpoint: "sm",
+			collapsed: {
+				mobile: !mobileOpened,
+				desktop: !desktopOpened
+			}
+		},
+		padding: 0,
+		children: [
+			/* @__PURE__ */ jsx(AppShell.Header, { children: /* @__PURE__ */ jsxs(Group, {
+				h: "100%",
+				justify: "space-between",
+				wrap: "nowrap",
+				gap: "xs",
+				px: {
+					base: "xs",
+					sm: "md"
+				},
+				children: [/* @__PURE__ */ jsxs(Group, {
+					wrap: "nowrap",
+					className: cx(Layout_module_default.shrinkable, Layout_module_default.headerGap),
+					children: [/* @__PURE__ */ jsx(Burger, {
+						opened: isOpened,
+						onClick: toggleBurgerFn,
+						size: "sm",
+						"aria-label": isOpened ? messages.collapseNavigation : messages.expandNavigation,
+						"aria-expanded": isOpened,
+						className: Layout_module_default.fixed
+					}), logo]
+				}), /* @__PURE__ */ jsxs(Group, {
+					wrap: "nowrap",
+					gap: "xs",
+					className: Layout_module_default.fixed,
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						label: colorSchemeLabel,
+						children: /* @__PURE__ */ jsxs(ActionIcon, {
+							onClick: () => setColorScheme(nextColorScheme),
+							variant: "subtle",
+							size: 40,
+							radius: "xl",
+							"aria-label": colorSchemeLabel,
+							children: [/* @__PURE__ */ jsx(IconSun, {
+								className: cx(Layout_module_default.icon, Layout_module_default.light),
+								stroke: 1.5
+							}), /* @__PURE__ */ jsx(IconMoon, {
+								className: cx(Layout_module_default.icon, Layout_module_default.dark),
+								stroke: 1.5
+							})]
+						})
+					}), userMenu && /* @__PURE__ */ jsxs(Menu, {
+						shadow: "lg",
+						width: 200,
+						children: [/* @__PURE__ */ jsx(Tooltip, {
+							label: messages.userMenu,
+							children: /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+								"aria-label": messages.userMenu,
+								style: { borderRadius: "50%" },
+								children: /* @__PURE__ */ jsx(Avatar, {
+									color: theme.primaryColor,
+									radius: "xl",
+									size: 40
+								})
+							}) })
+						}), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsx(Menu.Label, {
+							tt: "uppercase",
+							ta: "center",
+							fw: 600,
+							children: messages.userMenuTitle
+						}), userMenu] })]
+					})]
+				})]
+			}) }),
+			/* @__PURE__ */ jsx(Navbar, {
+				items: navItems,
+				footer: navFooter,
+				linkClickHandler: () => isMobile && toggleBurgerFn()
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsx(AppMain, { children: /* @__PURE__ */ jsx(Container, {
+				p: "md",
+				fluid: true,
+				children
+			}) }) })
+		]
+	});
+};
+export { Layout };
+
+//# sourceMappingURL=Layout.js.map