foris 6.6.1 → 6.6.2-beta.0a839bf3

package/bootstrap/Input.js

@@ -34,12 +34,14 @@ const Input = forwardRef(
 
         return (
             <div className="mb-3">
-                <label
-                    className={`form-label ${labelClassName || ""}`.trim()}
-                    htmlFor={uid}
-                >
-                    {label}
-                </label>
+                {label && (
+                    <label
+                        className={`form-label ${labelClassName || ""}`.trim()}
+                        htmlFor={uid}
+                    >
+                        {label}
+                    </label>
+                )}
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
                         className={`form-control ${inputClassName}`.trim()}
@@ -65,7 +67,7 @@ Input.displayName = "Input";
 
 Input.propTypes = {
     type: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
+    label: PropTypes.string,
     helpText: PropTypes.string,
     error: PropTypes.string,
     className: PropTypes.string,

package/common/RichTable/RichTable.js

@@ -1,94 +1,118 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
-import React, {
-    useMemo,
-    useState,
-    useImperativeHandle,
-    forwardRef,
-} from "react";
+import React, { useMemo, useState } from "react";
 
+import { rankItem } from "@tanstack/match-sorter-utils";
 import {
     flexRender,
     getCoreRowModel,
     getSortedRowModel,
+    getFilteredRowModel,
     getPaginationRowModel,
     useReactTable,
 } from "@tanstack/react-table";
 import PropTypes from "prop-types";
 
 import RichTableBody from "./RichTableBody";
+import RichTableColumnsDropdown from "./RichTableColumnsDropdown";
 import RichTableHeader from "./RichTableHeader";
 import RichTablePagination from "./RichTablePagination";
+import Input from "../../bootstrap/Input";
 
-const fallbackData = [];
-
-const RichTable = forwardRef(
-    ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
-        const tableColumns = useMemo(() => columns, [columns]);
-        const [tableData, setTableData] = useState(data ?? fallbackData);
-        const [sorting, setSorting] = useState([]);
-        const [pagination, setPagination] = useState({
-            pageIndex,
-            pageSize,
-        });
+RichTable.propTypes = {
+    /** Columns to be displayed in the table */
+    columns: PropTypes.array.isRequired,
+    /** Data to be displayed in the table, must be passed as a stable reference, for example, useState */
+    data: PropTypes.array.isRequired,
+    /** Whether to display pagination */
+    withPagination: PropTypes.bool,
+    /** Number of rows per page, the default is 5 */
+    pageSize: PropTypes.number,
+    /** Index of the current page */
+    pageIndex: PropTypes.number,
+};
 
-        useImperativeHandle(ref, () => ({
-            setTableData,
-        }));
+export default function RichTable({
+    columns,
+    data,
+    withPagination,
+    pageSize = 5,
+    pageIndex = 0,
+}) {
+    const tableColumns = useMemo(() => columns, [columns]);
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex,
+        pageSize,
+    });
+    const [globalFilter, setGlobalFilter] = useState("");
+    const [columnVisibility, setColumnVisibility] = useState({});
 
-        const table = useReactTable({
-            data: tableData,
-            columns: tableColumns,
-            getCoreRowModel: getCoreRowModel(),
-            getSortedRowModel: getSortedRowModel(),
-            getPaginationRowModel: getPaginationRowModel(),
-            onPaginationChange: setPagination,
-            onSortingChange: setSorting,
-            state: {
-                sorting,
-                pagination,
-            },
-        });
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        filterFns: {
+            fuzzy: fuzzyFilter,
+        },
+        globalFilterFn: "fuzzy",
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onSortingChange: setSorting,
+        onPaginationChange: setPagination,
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+            sorting,
+            pagination,
+            globalFilter,
+            columnVisibility,
+        },
+    });
 
-        const paginationIsNeeded =
-            tableData.length > pageSize && withPagination;
+    const paginationIsNeeded = data.length > pageSize && withPagination;
 
-        return (
+    return (
+        <div>
+            <div className="d-flex justify-content-between align-items-center">
+                <Input
+                    className="me-3"
+                    type="text"
+                    placeholder={_("Search…")}
+                    value={globalFilter ?? ""}
+                    onChange={(e) => setGlobalFilter(String(e.target.value))}
+                />
+                <RichTableColumnsDropdown columns={table.getAllLeafColumns()} />
+            </div>
             <div className="table-responsive">
                 <table className="table table-hover text-nowrap">
                     <RichTableHeader table={table} flexRender={flexRender} />
-                    <RichTableBody table={table} flexRender={flexRender} />
+                    <RichTableBody
+                        table={table}
+                        columns={tableColumns}
+                        flexRender={flexRender}
+                    />
                 </table>
                 {paginationIsNeeded && (
                     <RichTablePagination
                         table={table}
                         tablePageSize={pageSize}
-                        allRows={tableData.length}
+                        allRows={data.length}
                     />
                 )}
             </div>
-        );
-    }
-);
-
-RichTable.propTypes = {
-    /** Columns to be displayed in the table */
-    columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table */
-    data: PropTypes.array.isRequired,
-    /** Whether to display pagination */
-    withPagination: PropTypes.bool,
-    /** Number of rows per page */
-    pageSize: PropTypes.number,
-    /** Index of the current page */
-    pageIndex: PropTypes.number,
-};
-
-RichTable.displayName = "RichTable";
+        </div>
+    );
+}
 
-export default RichTable;
+function fuzzyFilter(row, columnId, value, addMeta) {
+    const itemRank = rankItem(row.getValue(columnId), value);
+    addMeta({ itemRank });
+    return itemRank.passed;
+}

package/common/RichTable/RichTableBody.js

@@ -13,34 +13,44 @@ RichTableBody.propTypes = {
     table: propTypes.shape({
         getRowModel: propTypes.func.isRequired,
     }).isRequired,
+    columns: propTypes.array.isRequired,
     flexRender: propTypes.func.isRequired,
 };
 
-function RichTableBody({ table, flexRender }) {
+function RichTableBody({ table, columns, flexRender }) {
     return (
         <tbody>
-            {table.getRowModel().rows.map((row) => {
-                return (
-                    <tr key={row.id} className="align-middle">
-                        {row.getVisibleCells().map((cell) => {
-                            return (
-                                <td
-                                    key={cell.id}
-                                    {...(cell.column.columnDef.className && {
-                                        className:
-                                            cell.column.columnDef.className,
-                                    })}
-                                >
-                                    {flexRender(
-                                        cell.column.columnDef.cell,
-                                        cell.getContext()
-                                    )}
-                                </td>
-                            );
-                        })}
-                    </tr>
-                );
-            })}
+            {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => {
+                    return (
+                        <tr key={row.id} className="align-middle">
+                            {row.getVisibleCells().map((cell) => {
+                                return (
+                                    <td
+                                        key={cell.id}
+                                        {...(cell.column.columnDef
+                                            .className && {
+                                            className:
+                                                cell.column.columnDef.className,
+                                        })}
+                                    >
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext()
+                                        )}
+                                    </td>
+                                );
+                            })}
+                        </tr>
+                    );
+                })
+            ) : (
+                <tr>
+                    <td colSpan={columns.length} className="text-center py-4">
+                        <span>{_("No results.")}</span>
+                    </td>
+                </tr>
+            )}
         </tbody>
     );
 }

package/common/RichTable/RichTableColumnsDropdown.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+import { faCheck, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import PropTypes from "prop-types";
+
+import Button from "../../bootstrap/Button";
+
+RichTableColumnsDropdown.propTypes = {
+    columns: PropTypes.array.isRequired,
+};
+
+function RichTableColumnsDropdown({ columns }) {
+    return (
+        <div className="dropdown mb-3">
+            <Button
+                className="btn btn-outline-secondary dropdown-toggle"
+                data-bs-toggle="dropdown"
+            >
+                {_("Columns")}
+            </Button>
+            <ul className="dropdown-menu dropdown-menu-end">
+                {columns.map((column) => {
+                    return (
+                        <li key={column.id}>
+                            <button
+                                type="button"
+                                className="dropdown-item d-flex align-items-center"
+                                onClick={column.getToggleVisibilityHandler()}
+                                style={{ paddingLeft: "2rem" }}
+                                disabled={
+                                    column.columnDef?.enableHiding === false
+                                }
+                            >
+                                {column.getIsVisible() && (
+                                    <FontAwesomeIcon
+                                        icon={faCheck}
+                                        className="position-absolute text-secondary me-2"
+                                        style={{ left: "0.6rem" }}
+                                        width="1rem"
+                                    />
+                                )}
+                                <span>{column.columnDef.header}</span>
+                            </button>
+                        </li>
+                    );
+                })}
+                {columns.some((column) => !column.getIsVisible()) && (
+                    <>
+                        <li>
+                            <hr className="dropdown-divider" />
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                className="dropdown-item d-flex align-items-center"
+                                style={{ paddingLeft: "2rem" }}
+                                onClick={() => {
+                                    // toggleVisibility for columns that are hidden
+                                    columns.forEach((column) => {
+                                        if (!column.getIsVisible()) {
+                                            column.toggleVisibility();
+                                        }
+                                    });
+                                }}
+                            >
+                                <FontAwesomeIcon
+                                    icon={faRotateLeft}
+                                    className="position-absolute text-secondary me-2"
+                                    width="1rem"
+                                    style={{ left: "0.6rem" }}
+                                />
+                                {_("Reset")}
+                            </button>
+                        </li>
+                    </>
+                )}
+            </ul>
+        </div>
+    );
+}
+
+export default RichTableColumnsDropdown;

package/common/RichTable/RichTableHeader.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -32,7 +32,7 @@ function RichTableHeader({ table, flexRender }) {
     };
 
     return (
-        <thead className="thead-light">
+        <thead className="table-light">
             {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id} role="row">
                     {headerGroup.headers.map((header) => (
@@ -55,6 +55,12 @@ function RichTableHeader({ table, flexRender }) {
                             ) : (
                                 <button
                                     type="button"
+                                    style={
+                                        header.column.columnDef
+                                            .headerClassName === "text-center"
+                                            ? { justifySelf: "center" }
+                                            : {}
+                                    }
                                     className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
                                                     ${
                                                         header.column.getCanSort()

package/common/RichTable/RichTablePagination.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.

package/form/components/SubmitButton.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -20,22 +20,25 @@ export const STATES = {
 SubmitButton.propTypes = {
     disabled: PropTypes.bool,
     state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
+    label: PropTypes.string,
 };
 
-export function SubmitButton({ disabled, state, ...props }) {
+export function SubmitButton({ disabled, state, label, ...props }) {
     const disableSubmitButton = disabled || state !== STATES.READY;
     const loadingSubmitButton = state !== STATES.READY;
 
-    let labelSubmitButton;
-    switch (state) {
-        case STATES.SAVING:
-            labelSubmitButton = _("Updating");
-            break;
-        case STATES.LOAD:
-            labelSubmitButton = _("Load settings");
-            break;
-        default:
-            labelSubmitButton = _("Save");
+    let labelSubmitButton = label;
+    if (!labelSubmitButton) {
+        switch (state) {
+            case STATES.SAVING:
+                labelSubmitButton = _("Updating");
+                break;
+            case STATES.LOAD:
+                labelSubmitButton = _("Load settings");
+                break;
+            default:
+                labelSubmitButton = _("Save");
+        }
     }
 
     return (

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.6.1",
+    "version": "6.6.2-beta.0a839bf3",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -14,17 +14,18 @@
     "license": "GPL-3.0",
     "main": "./index.js",
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.6.0",
-        "@fortawesome/free-regular-svg-icons": "^6.6.0",
-        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@tanstack/react-table": "^8.20.5",
-        "axios": "^1.7.2",
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/react-table": "^8.21.2",
+        "axios": "^1.7.9",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",
-        "qrcode.react": "^3.1.0",
-        "react-datetime": "^3.2.0",
-        "react-uid": "^2.3.3"
+        "qrcode.react": "^4.2.0",
+        "react-datetime": "^3.3.1",
+        "react-uid": "^2.4.0"
     },
     "peerDependencies": {
         "bootstrap": "^5.3.3",
@@ -34,32 +35,32 @@
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.7",
-        "@babel/core": "^7.24.7",
-        "@babel/plugin-transform-runtime": "^7.24.7",
-        "@babel/preset-env": "^7.24.7",
-        "@babel/preset-react": "^7.24.7",
-        "@testing-library/react": "^8.0.9",
-        "babel-loader": "^8.1.0",
+        "@babel/cli": "^7.26.4",
+        "@babel/core": "^7.26.9",
+        "@babel/plugin-transform-runtime": "^7.26.9",
+        "@babel/preset-env": "^7.26.9",
+        "@babel/preset-react": "^7.26.3",
+        "@testing-library/react": "^12.1.5",
+        "babel-loader": "^9.2.1",
         "babel-polyfill": "^6.26.0",
         "bootstrap": "^5.3.3",
-        "css-loader": "^5.2.4",
+        "css-loader": "^7.1.2",
         "eslint": "^8.57.0",
         "eslint-config-reforis": "^2.1.1",
         "file-loader": "^6.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jest-mock-axios": "^4.7.3",
-        "moment-timezone": "^0.5.45",
-        "prettier": "^3.3.2",
+        "jest-mock-axios": "^4.8.0",
+        "moment-timezone": "^0.5.47",
+        "prettier": "^3.5.2",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
         "react-styleguidist": "^12.0.1",
         "snapshot-diff": "^0.10.0",
-        "style-loader": "^1.2.1",
-        "webpack": "^5.92.1"
+        "style-loader": "^4.0.0",
+        "webpack": "^5.98.0"
     },
     "scripts": {
         "lint": "eslint src",
@@ -70,4 +71,4 @@
         "docs": "npx styleguidist build ",
         "docs:watch": "styleguidist server"
     }
-}
+}