@addsign/moje-agenda-shared-lib 2.0.49 → 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";
@@ -54,6 +55,7 @@ interface DataTableServerProps<T> {
   filters?: object;
   selectedItemKey?: string;
   itemsPerPageOptions?: IOptionItem[];
+  setMinWidth?: boolean;
 }
 const defaultItemsPerPageOptions: IOptionItem[] = [
   { value: 10, label: "10" },
@@ -112,8 +114,14 @@ function DataTableServer<T extends DataTableInternalItems>({
   filters,
   selectedItemKey = "id",
   itemsPerPageOptions = defaultItemsPerPageOptions,
+  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>>();
@@ -372,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) => {
@@ -631,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>
   ) => {
@@ -704,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}
@@ -749,6 +805,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                       tableId={id}
                       colKey={String(key)}
                       defaultWidth={width || "auto"}
+                      setMinWidth={setMinWidth}
                     >
                       {({ ref }: { ref: any }) => (
                         <th

package/lib/components/datatable/Resizable.tsx

@@ -5,6 +5,7 @@ interface IResizableProps {
   colKey: string;
   children: any;
   defaultWidth: string;
+  setMinWidth?: boolean;
 }
 
 export const Resizable = ({
@@ -12,6 +13,7 @@ export const Resizable = ({
   colKey,
   defaultWidth,
   children,
+  setMinWidth = false,
 }: IResizableProps) => {
   const [node, setNode] = React.useState<HTMLElement | null>(null);
 
@@ -62,7 +64,9 @@ export const Resizable = ({
         const newWidth = w + dx + "px";
 
         parent?.style.setProperty("width", newWidth);
-        parent?.style.setProperty("min-width", newWidth);
+        if (setMinWidth) {
+          parent?.style.setProperty("min-width", newWidth);
+        }
         setWidth(newWidth);
       };
 
@@ -85,10 +89,14 @@ export const Resizable = ({
     const parent = node.parentElement;
     if (node.parentNode !== node.parentNode?.parentNode?.lastChild) {
       parent?.style.setProperty("width", `${width}`);
-      parent?.style.setProperty("min-width", `${width}`);
+      if (setMinWidth) {
+        parent?.style.setProperty("min-width", `${width}`);
+      }
     } else {
       parent?.style.setProperty("width", `auto`);
-      parent?.style.setProperty("min-width", `auto`);
+      if (setMinWidth) {
+        parent?.style.setProperty("min-width", `auto`);
+      }
     }
 
     node.addEventListener("mousedown", handleMouseDown);

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/lib/components/ui/multi-select.tsx

@@ -310,7 +310,7 @@ export const MultiSelect = React.forwardRef<
                   <div
                     className={cn(
                       "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                      selectedValues.length === options.length
+                      selectedValues && selectedValues.length === options.length
                         ? "bg-primary text-primary-foreground"
                         : "opacity-50 [&_svg]:invisible"
                     )}
@@ -321,7 +321,8 @@ export const MultiSelect = React.forwardRef<
                 </CommandItem>
                 {options.map((option) => {
                   const optionStr = String(option.value);
-                  const isSelected = selectedValues.includes(optionStr);
+                  const isSelected =
+                    selectedValues?.includes(optionStr) || false;
                   return (
                     <CommandItem
                       key={optionStr}

package/package.json

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