@addsign/moje-agenda-shared-lib 2.0.50 → 2.0.52

package/dist/assets/style.css

@@ -738,6 +738,9 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }

package/dist/components/datatable/DataTable.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import "../../tailwind-l0sNRNKZ.js";
 import Button from "../Button.js";
-import { f as MdOutlineFilterAlt, g as MdOutlineFilterAltOff, h as MdSearch, b as MdClose, i as MdArrowBack, j as MdArrowForward, k as MdArrowUpward, l as MdArrowDownward } from "../../index-DVD0PiGU.js";
+import { f as MdOutlineFilterAlt, g as MdOutlineFilterAltOff, h as MdSearch, b as MdClose, i as MdArrowBack, j as MdArrowForward, k as MdArrowUpward, l as MdArrowDownward } from "../../index-CrfjcbOs.js";
 import FormField from "../form/FormField.js";
 import Spinner from "../Spinner.js";
 import "../ui/multi-select.js";

package/dist/components/datatable/DataTableServer.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useEffect, useCallback } from "react";
 import "../../tailwind-l0sNRNKZ.js";
 import Button from "../Button.js";
-import { f as MdOutlineFilterAlt, g as MdOutlineFilterAltOff, h as MdSearch, b as MdClose, i as MdArrowBack, j as MdArrowForward, k as MdArrowUpward, l as MdArrowDownward } from "../../index-DVD0PiGU.js";
+import { f as MdOutlineFilterAlt, g as MdOutlineFilterAltOff, h as MdSearch, b as MdClose, i as MdArrowBack, j as MdArrowForward, k as MdArrowUpward, l as MdArrowDownward, n as MdOutlineUnfoldMore } from "../../index-CrfjcbOs.js";
 import FormField from "../form/FormField.js";
 import InputField from "../form/InputField.js";
 import SelectField from "../form/SelectField.js";
@@ -21731,6 +21731,10 @@ function DataTableServer({
 }) {
   var _a, _b;
   const abortControllerRef = useRef(null);
+  const topScrollbarRef = useRef(null);
+  const bottomScrollbarRef = useRef(null);
+  const tableRef = useRef(null);
+  const syncWidthRef = useRef(null);
   const [itemsPerPageLocal, setItemsPerPageLocal] = useState();
   const federationContext = useFederationContext();
   const [data, setData] = useState();
@@ -21932,21 +21936,9 @@ function DataTableServer({
   };
   const getSortIcon = (sortParam) => {
     if ((sortConfig == null ? void 0 : sortConfig.sortParam) === sortParam) {
-      return sortConfig.direction === "asc" ? /* @__PURE__ */ jsx(MdArrowUpward, { fontSize: "small" }) : sortConfig.direction === "desc" ? /* @__PURE__ */ jsx(MdArrowDownward, { fontSize: "small" }) : /* @__PURE__ */ jsx(
-        MdArrowUpward,
-        {
-          fontSize: "small",
-          className: "text-gray-300 invisible group-hover:visible "
-        }
-      );
+      return sortConfig.direction === "asc" ? /* @__PURE__ */ jsx(MdArrowUpward, { fontSize: "small" }) : sortConfig.direction === "desc" ? /* @__PURE__ */ jsx(MdArrowDownward, { fontSize: "small" }) : /* @__PURE__ */ jsx(MdOutlineUnfoldMore, { fontSize: "small", className: " " });
     }
-    return /* @__PURE__ */ jsx(
-      MdArrowUpward,
-      {
-        fontSize: "small",
-        className: "text-gray-300 invisible group-hover:visible "
-      }
-    );
+    return /* @__PURE__ */ jsx(MdOutlineUnfoldMore, { fontSize: "small", className: " " });
   };
   const handleSelectItem = (item) => {
     setSelectedItems((prevSelectedItems) => {
@@ -22131,6 +22123,41 @@ function DataTableServer({
     handleErrors,
     columns
   ]);
+  const updateSyncWidth = useCallback(() => {
+    if (tableRef.current && syncWidthRef.current && setMinWidth) {
+      syncWidthRef.current.style.width = tableRef.current.scrollWidth + "px";
+    }
+  }, [setMinWidth]);
+  useEffect(() => {
+    if (!setMinWidth)
+      return;
+    const topScrollbar = topScrollbarRef.current;
+    const bottomScrollbar = bottomScrollbarRef.current;
+    if (!topScrollbar || !bottomScrollbar)
+      return;
+    const handleTopScroll = () => {
+      bottomScrollbar.scrollLeft = topScrollbar.scrollLeft;
+    };
+    const handleBottomScroll = () => {
+      topScrollbar.scrollLeft = bottomScrollbar.scrollLeft;
+    };
+    topScrollbar.addEventListener("scroll", handleTopScroll);
+    bottomScrollbar.addEventListener("scroll", handleBottomScroll);
+    return () => {
+      topScrollbar.removeEventListener("scroll", handleTopScroll);
+      bottomScrollbar.removeEventListener("scroll", handleBottomScroll);
+    };
+  }, [setMinWidth]);
+  useEffect(() => {
+    if (!tableRef.current)
+      return;
+    const resizeObserver = new ResizeObserver(updateSyncWidth);
+    resizeObserver.observe(tableRef.current);
+    updateSyncWidth();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateSyncWidth, data, isLoading]);
   const handleItemsPerPageChange = (event) => {
     const selectedItemsPerPage = Number(event.target.value);
     setItemsPerPageLocal(selectedItemsPerPage);
@@ -22186,9 +22213,11 @@ function DataTableServer({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "overflow-auto min-h-[500px]", children: /* @__PURE__ */ jsxs(
+        setMinWidth && /* @__PURE__ */ jsx("div", { ref: topScrollbarRef, className: "overflow-x-auto h-4 mb-1 mmmmm", children: /* @__PURE__ */ jsx("div", { ref: syncWidthRef, className: "h-full" }) }),
+        /* @__PURE__ */ jsx("div", { ref: bottomScrollbarRef, className: "overflow-auto min-h-[500px]", children: /* @__PURE__ */ jsxs(
           "table",
           {
+            ref: tableRef,
             className: "w-full leading-normal",
             "data-cy": "datatable-table-" + id,
             children: [