@wger-project/react-components 26.1.18 → 26.2.26

package/package.json

@@ -11,7 +11,7 @@
   "exports": {
     ".": "./build/index.js"
   },
-  "version": "26.1.18",
+  "version": "26.2.26",
   "repository": "https://github.com/wger-project/react",
   "type": "module",
   "publishConfig": {
@@ -22,12 +22,12 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mui/icons-material": "^7.3.5",
+    "@mui/icons-material": "^7.3.7",
     "@mui/lab": "^7.0.1-beta.18",
     "@mui/material": "^7.3.4",
     "@mui/system": "^7.3.3",
-    "@mui/x-data-grid": "^8.18.0",
-    "@mui/x-date-pickers": "^8.18.0",
+    "@mui/x-data-grid": "^8.26.0",
+    "@mui/x-date-pickers": "^8.26.0",
     "@tanstack/react-query": "^5.90.2",
     "@vitejs/plugin-react": "^5.1.1",
     "axios": "^1.12.2",
@@ -38,12 +38,12 @@
     "i18next-http-backend": "^3.0.2",
     "luxon": "^3.7.2",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-grid-layout": "^1.5.2",
+    "react-dom": "^19.2.4",
+    "react-grid-layout": "^2.2.2",
     "react-i18next": "^16.3.3",
-    "react-is": "^19.2.0",
+    "react-is": "^19.2.4",
     "react-responsive": "^10.0.1",
-    "react-router-dom": "^7.9.4",
+    "react-router-dom": "^7.12.0",
     "react-simple-wysiwyg": "^3.4.1",
     "react-slick": "^0.31.0",
     "recharts": "^3.4.1",
@@ -67,26 +67,25 @@
     "@types/node": "^22.18.9",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
-    "@types/react-grid-layout": "^1.3.5",
     "@types/react-is": "^19.2.0",
     "@types/react-slick": "^0.23.13",
     "@types/slug": "^5.0.9",
     "@typescript-eslint/eslint-plugin": "^8.47.0",
     "@typescript-eslint/parser": "^8.47.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.0",
-    "i18next-parser": "^9.3.0",
+    "i18next-cli": "^1.46.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^27.2.0",
     "ts-jest": "^29.4.5",
     "typescript-eslint": "^8.46.0",
-    "vite": "^7.2.2",
+    "vite": "^7.3.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.18",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "scripts": {

package/src/components/Dashboard/ConfigurableDashboard.test.ts

@@ -54,8 +54,9 @@ describe('loadDashboardState migration', () => {
         expect(res).not.toBeNull();
         expect(res!.selectedWidgetIds).not.toContain('foo');
         expect(res!.selectedWidgetIds).toContain('routine');
-        expect(res!.layouts!.lg.length).toEqual(1);
-        expect(res!.layouts!.lg[0].i).toEqual('routine');
+        const lg = res?.layouts?.lg ?? [];
+        expect(lg.length).toEqual(1);
+        expect(lg[0]?.i).toEqual('routine');
     });
 
     test('migrates old top-level structure', () => {

package/src/components/Dashboard/ConfigurableDashboard.tsx

@@ -10,13 +10,11 @@ import { RoutineCard } from "components/Dashboard/RoutineCard";
 import { TrophiesCard } from "components/Dashboard/TrophiesCard";
 import { WeightCard } from "components/Dashboard/WeightCard";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Layout, Layouts, Responsive, WidthProvider } from "react-grid-layout";
+import { Layout, LayoutItem, Responsive, ResponsiveLayouts, useContainerWidth, } from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 import { useTranslation } from "react-i18next";
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
 const DASHBOARD_STORAGE_KEY = "dashboard-state";
 
 const VERSION = 1;
@@ -25,7 +23,7 @@ type DashboardState = {
     version: number;
     selectedWidgetIds: string[];
     hiddenWidgetIds: string[];
-    layouts: Layouts | null;
+    layouts: ResponsiveLayouts | null;
 };
 
 const BREAKPOINTS = ['lg', 'md', 'sm', 'xs'] as const;
@@ -143,9 +141,11 @@ export const loadDashboardState = (): DashboardState | null => {
 
         // -> remove unknown ids from the layout
         for (const bp of BREAKPOINTS) {
-            const arr = (out.layouts as Layouts)[bp] as Layout[] | undefined;
+            const arr = (out.layouts as ResponsiveLayouts)[bp] as Layout | undefined;
             if (Array.isArray(arr)) {
-                (out.layouts as Layouts)[bp] = arr.filter((item: Layout) => item && allowedWidgets.has(String(item.i)));
+                (out.layouts as ResponsiveLayouts)[bp] = arr.filter(
+                    (item: LayoutItem) => item && allowedWidgets.has(String(item.i))
+                );
             }
         }
 
@@ -191,16 +191,16 @@ const migrateOldDashboardState = (parsedAny: any): DashboardState => {
     // If selectedWidgetIds missing, try to extract from layouts (or top-level breakpoints)
     if (!Array.isArray(parsed.selectedWidgetIds)) {
         const ids = new Set<string>();
-        let layoutsSource: Layouts | undefined;
+        let layoutsSource: ResponsiveLayouts | undefined;
         if (parsed && parsed.layouts) {
-            layoutsSource = parsed.layouts as Layouts;
+            layoutsSource = parsed.layouts as ResponsiveLayouts;
         } else if (parsedAny && (parsedAny.lg || parsedAny.md || parsedAny.sm || parsedAny.xs)) {
             layoutsSource = {
                 lg: parsedAny.lg ?? [],
                 md: parsedAny.md ?? [],
                 sm: parsedAny.sm ?? [],
                 xs: parsedAny.xs ?? [],
-            } as Layouts;
+            } as ResponsiveLayouts;
             parsed.layouts = layoutsSource;
 
             delete parsedAny.lg;
@@ -211,8 +211,8 @@ const migrateOldDashboardState = (parsedAny: any): DashboardState => {
 
         if (layoutsSource) {
             for (const bp of BREAKPOINTS) {
-                const arr = layoutsSource[bp] as Layout[] | undefined;
-                if (Array.isArray(arr)) arr.forEach((item: Layout) => {
+                const arr = layoutsSource[bp] as Layout | undefined;
+                if (Array.isArray(arr)) arr.forEach((item: LayoutItem) => {
                     if (item && item.i) ids.add(String(item.i));
                 });
             }
@@ -228,14 +228,14 @@ const migrateOldDashboardState = (parsedAny: any): DashboardState => {
 
 
 // Generate default layouts for all breakpoints
-const generateDefaultLayouts = (widgets: WidgetConfig[] = AVAILABLE_WIDGETS): Layouts => {
-    const lg: Layout[] = widgets.map((widget) => ({
+const generateDefaultLayouts = (widgets: WidgetConfig[] = AVAILABLE_WIDGETS): ResponsiveLayouts => {
+    const lg: Layout = widgets.map((widget) => ({
         i: widget.id,
         ...widget.defaultLayout,
     }));
 
     // For medium screens, make widgets full width in pairs
-    const md: Layout[] = widgets.map((widget, index) => ({
+    const md: Layout = widgets.map((widget, index) => ({
         i: widget.id,
         w: 6,
         h: widget.defaultLayout.h,
@@ -246,7 +246,7 @@ const generateDefaultLayouts = (widgets: WidgetConfig[] = AVAILABLE_WIDGETS): La
     }));
 
     // For small screens, stack vertically
-    const sm: Layout[] = widgets.map((widget, index) => ({
+    const sm: Layout = widgets.map((widget, index) => ({
         i: widget.id,
         w: 12,
         h: widget.defaultLayout.h,
@@ -269,6 +269,8 @@ export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ en
     // Cast t to a looser signature so we can call dynamic keys like `dashboard.widgets` without TS errors
     const t = tRaw as unknown as (key: string) => string;
 
+    const { width, containerRef, mounted } = useContainerWidth();
+
     const [isEditMode, setIsEditMode] = useState(false);
 
     // Selected widgets (internal state) - initialize from prop or persisted single-state
@@ -295,7 +297,7 @@ export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ en
         return AVAILABLE_WIDGETS.filter((w) => selectedWidgetIds.includes(w.id));
     }, [selectedWidgetIds]);
 
-    const [layouts, setLayouts] = useState<Layouts>(() => {
+    const [layouts, setLayouts] = useState<ResponsiveLayouts>(() => {
         const saved = loadDashboardState();
         return (saved && saved.layouts) || generateDefaultLayouts(visibleWidgets);
     });
@@ -316,7 +318,7 @@ export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ en
         setLayouts(generateDefaultLayouts(visibleWidgets));
     }, [selectedWidgetIds, visibleWidgets]);
 
-    const handleLayoutChange = useCallback((_: Layout[], allLayouts: Layouts) => {
+    const handleLayoutChange = useCallback((_: Layout, allLayouts: ResponsiveLayouts) => {
         setLayouts(allLayouts);
     }, []);
 
@@ -361,19 +363,25 @@ export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ en
     }, [selectedWidgetIds, hiddenWidgetIds, layouts]);
 
     // Grid configuration
-    const gridConfig = useMemo(
+    const gridProps = useMemo(
         () => ({
             className: "layout",
             layouts: layouts,
             breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 },
             cols: { lg: 12, md: 12, sm: 12, xs: 12 },
-            rowHeight: 100,
-            isDraggable: isEditMode,
-            isResizable: isEditMode,
             onLayoutChange: handleLayoutChange,
-            draggableHandle: isEditMode ? undefined : ".no-drag",
-            margin: [16, 16] as [number, number],
-            containerPadding: [0, 0] as [number, number],
+            dragConfig: {
+                enabled: isEditMode,
+                handle: isEditMode ? undefined : ".no-drag",
+            },
+            resizeConfig: {
+                enabled: isEditMode,
+            },
+            gridConfig: {
+                rowHeight: 100,
+                margin: [16, 16],
+                containerPadding: [0, 0],
+            },
         }),
         [layouts, isEditMode, handleLayoutChange]
     );
@@ -449,31 +457,35 @@ export const ConfigurableDashboard: React.FC<ConfigurableDashboardProps> = ({ en
                 </Tooltip>
             </Box>
 
-            <ResponsiveGridLayout {...gridConfig}>
-                {visibleWidgets.map((widget) => {
-                    const WidgetComponent = widget.component;
-                    return (
-                        <Box
-                            key={widget.id}
-                            sx={{
-                                // Add visual feedback in edit mode
-                                border: isEditMode ? "1px dashed" : "none",
-                                borderColor: "primary.main",
-                                borderRadius: 1,
-                                transition: "border 0.2s",
-                                cursor: isEditMode ? "move" : "default",
-                                "&:hover": isEditMode
-                                    ? {
-                                        borderColor: "primary.dark",
-                                    }
-                                    : {},
-                            }}
-                        >
-                            <WidgetComponent />
-                        </Box>
-                    );
-                })}
-            </ResponsiveGridLayout>
+            <Box ref={containerRef}>
+                {mounted && (
+                    <Responsive {...gridProps} width={width}>
+                        {visibleWidgets.map((widget) => {
+                            const WidgetComponent = widget.component;
+                            return (
+                                <Box
+                                    key={widget.id}
+                                    sx={{
+                                        // Add visual feedback in edit mode
+                                        border: isEditMode ? "1px dashed" : "none",
+                                        borderColor: "primary.main",
+                                        borderRadius: 1,
+                                        transition: "border 0.2s",
+                                        cursor: isEditMode ? "move" : "default",
+                                        "&:hover": isEditMode
+                                            ? {
+                                                borderColor: "primary.dark",
+                                            }
+                                            : {},
+                                    }}
+                                >
+                                    <WidgetComponent />
+                                </Box>
+                            );
+                        })}
+                    </Responsive>
+                )}
+            </Box>
         </Box>
     );
 };

package/src/components/Dashboard/RoutineCard.tsx

@@ -44,7 +44,7 @@ const RoutineCardContent = (props: { routine: Routine }) => {
             }
         >
             <List>
-                {props.routine.dayDataCurrentIterationNoNulls.map((dayData) => (
+                {props.routine.dayDataCurrentIterationFiltered.map((dayData) => (
                     <DayListItem dayData={dayData} key={`dayDetails-${dayData.date.toISOString()}`} />
                 ))}
             </List>

package/src/components/WorkoutRoutines/Detail/RoutineDetail.tsx

@@ -51,7 +51,7 @@ export const RoutineDetail = () => {
                             href={makeLink(WgerLink.ROUTINE_COPY, i18n.language, { id: routineId })}
                             variant={"contained"}
                         >{t('routines.copyAndUseTemplate')}</Button>}
-                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                        {routine!.dayDataCurrentIterationFiltered.map((dayData) =>
                             <DayDetailsCard
                                 routineId={routineId}
                                 dayData={dayData}

package/src/components/WorkoutRoutines/Detail/TemplateDetail.tsx

@@ -48,7 +48,7 @@ export const TemplateDetail = () => {
                             variant={"contained"}
                         >{t('routines.copyAndUseTemplate')}</Button>
 
-                        {routine!.dayDataCurrentIterationNoNulls.map((dayData) =>
+                        {routine!.dayDataCurrentIterationFiltered.map((dayData) =>
                             <DayDetailsCard
                                 dayData={dayData}
                                 routineId={routineId}

package/src/components/WorkoutRoutines/models/Routine.test.ts

@@ -110,4 +110,21 @@ describe('Routine model tests', () => {
         // Assert
         expect(routine.dayDataCurrentIteration).toEqual(testRoutineDayData1);
     });
+
+    test('correctly filters out null days', () => {
+
+        // Arrange
+        routine.dayData = [
+            ...testRoutineDayData1,
+            ...testRoutineDayData1,
+            ...testRoutineDayData1,
+        ];
+        routine.dayData[0].date = new Date('2026-01-01');
+        routine.dayData[1].date = new Date('2026-01-02');
+        routine.dayData[2].date = new Date('2026-01-03');
+
+        // Assert
+        expect(routine.dayDataCurrentIteration.length).toEqual(3);
+        expect(routine.dayDataCurrentIterationFiltered).toEqual(testRoutineDayData1);
+    });
 });

package/src/components/WorkoutRoutines/models/Routine.ts

@@ -62,12 +62,29 @@ export class Routine {
     }
 
     /*
-     * Filter out dayData entries with null days
+     * Filter out dayData entries with null days as well as duplicated days from
+     * the "fixed weekly schedule" toggle.
      */
-    get dayDataCurrentIterationNoNulls() {
-        return this.dayDataCurrentIteration
+    get dayDataCurrentIterationFiltered() {
+        const sorted = this.dayDataCurrentIteration
             .filter((dayData) => dayData.day !== null)
             .sort((a, b) => a.day!.order - b.day!.order);
+
+        // Filter out entries where the day is the same as the previous one. This is
+        // necessary because if the user has the "Fixed weekly schedule" option enabled,
+        // there would be multiple entries for the same day.
+        const unique: RoutineDayData[] = [];
+        for (const dd of sorted) {
+            if (unique.length === 0 || unique[unique.length - 1].day!.id !== dd.day!.id) {
+                unique.push(dd);
+            } else {
+                // If the day id is the same as the previous entry, replace it with the current one
+                // so the last occurrence is kept.
+                unique[unique.length - 1] = dd;
+            }
+        }
+
+        return unique;
     }
 
     get groupedDayDataByIteration() {

package/src/components/WorkoutRoutines/widgets/RoutineDetailsCard.tsx

@@ -53,7 +53,7 @@ export const RoutineDetailsCard = () => {
                     </Typography>
                 }
                 <Stack spacing={2} sx={{ mt: 2 }}>
-                    {routineQuery.data!.dayDataCurrentIteration.filter((dayData) => dayData.day !== null).map((dayData, index) =>
+                    {routineQuery.data!.dayDataCurrentIterationFiltered.map((dayData, index) =>
                         <DayDetailsCard routineId={routineId} dayData={dayData} key={`dayDetails-${index}`} />
                     )}
                 </Stack>