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

package/lib/components/datatable/DataTableServer.tsx

@@ -25,6 +25,7 @@ import {
   MdClose,
   MdOutlineFilterAlt,
   MdOutlineFilterAltOff,
+  MdOutlineUnfoldMore,
   MdSearch,
 } from "react-icons/md";
 import SelectField from "../form/SelectField";
@@ -116,6 +117,11 @@ function DataTableServer<T extends DataTableInternalItems>({
   setMinWidth = false,
 }: DataTableServerProps<T>) {
   const abortControllerRef = useRef<AbortController | null>(null);
+  const topScrollbarRef = useRef<HTMLDivElement | null>(null);
+  const bottomScrollbarRef = useRef<HTMLDivElement | null>(null);
+  const tableRef = useRef<HTMLTableElement | null>(null);
+  const syncWidthRef = useRef<HTMLDivElement | null>(null);
+
   const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>();
   const federationContext = useFederationContext();
   const [data, setData] = useState<IPageable<T>>();
@@ -374,18 +380,10 @@ function DataTableServer<T extends DataTableInternalItems>({
       ) : sortConfig.direction === "desc" ? (
         <MdArrowDownward fontSize="small" />
       ) : (
-        <MdArrowUpward
-          fontSize="small"
-          className="text-gray-300 invisible group-hover:visible "
-        />
+        <MdOutlineUnfoldMore fontSize="small" className=" " />
       );
     }
-    return (
-      <MdArrowUpward
-        fontSize="small"
-        className="text-gray-300 invisible group-hover:visible "
-      />
-    );
+    return <MdOutlineUnfoldMore fontSize="small" className=" " />;
   };
 
   const handleSelectItem = (item: T) => {
@@ -633,6 +631,53 @@ function DataTableServer<T extends DataTableInternalItems>({
     columns,
   ]);
 
+  // Update sync width to match table content width
+  const updateSyncWidth = useCallback(() => {
+    if (tableRef.current && syncWidthRef.current && setMinWidth) {
+      syncWidthRef.current.style.width = tableRef.current.scrollWidth + "px";
+    }
+  }, [setMinWidth]);
+
+  // Set up scroll synchronization between top and bottom scrollbars
+  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]);
+
+  // Set up ResizeObserver to update sync width when table content changes
+  useEffect(() => {
+    if (!tableRef.current) return;
+
+    const resizeObserver = new ResizeObserver(updateSyncWidth);
+    resizeObserver.observe(tableRef.current);
+
+    // Initial update
+    updateSyncWidth();
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateSyncWidth, data, isLoading]);
+
   const handleItemsPerPageChange = (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
@@ -706,8 +751,17 @@ function DataTableServer<T extends DataTableInternalItems>({
             )}
           </div>
         )}
-        <div className="overflow-auto min-h-[500px]">
+        {/* Top horizontal scrollbar */}
+        {setMinWidth && (
+          <div ref={topScrollbarRef} className="overflow-x-auto h-4 mb-1 mmmmm">
+            <div ref={syncWidthRef} className="h-full"></div>
+          </div>
+        )}
+
+        {/* Main scrollable content area */}
+        <div ref={bottomScrollbarRef} className="overflow-auto min-h-[500px]">
           <table
+            ref={tableRef}
             className="w-full leading-normal"
             key={tableKey}
             data-cy={"datatable-table-" + id}

package/lib/components/layout/PageTitle.tsx

@@ -9,7 +9,7 @@ export default function PageTitle({
   ...props
 }: IPageTitleProps) {
   // Combine textSize with the other fixed class names
-  const className = ` text-muted-foreground ${textSize} font-medium font-['Inter'] leading-7 mb-5`;
+  const className = ` text-foreground ${textSize} font-medium font-['Inter'] leading-7 mb-5`;
 
   return (
     <h1 {...props} className={className}>

package/lib/components/layout/SectionTitle.tsx

@@ -10,7 +10,7 @@ export default function SectionTitle({
   ...props
 }: ISectionTitleProps) {
   // Combine textSize with the other fixed class names
-  const className = ` text-muted-foreground ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;
+  const className = `text-foreground ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;
 
   return (
     <div className="border-b border-gray-300 pt-2 mb-5  ">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.50",
+  "version": "2.0.51",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",