fix(timeline-web): change month grouping in custom mode

Author: Illia Obukhau

packages/pluggableWidgets/timeline-web/src/Timeline.tsx

@@ -3,7 +3,7 @@ import { TimelineContainerProps } from "../typings/TimelineProps";
 import "./ui/Timeline.scss";
 import { ActionValue, WebIcon } from "mendix";
 import TimelineComponent, { getGroupHeaderByType } from "./components/TimelineComponent";
-import { getHeaderOption } from "./utils/utils";
+import { getGroupByMethodForCustomMode, getHeaderOption } from "./utils/utils";
 
 export interface BasicItemType {
     icon?: WebIcon;
@@ -44,7 +44,11 @@ export default function Timeline(props: TimelineContainerProps): ReactElement {
                     action: props.onClick?.get(item)
                 };
             } else {
-                groupKey = getGroupHeaderByType(groupAttribute?.formatter, props.groupByKey, date);
+                groupKey = getGroupHeaderByType(
+                    groupAttribute?.formatter,
+                    getGroupByMethodForCustomMode(props.groupByKey),
+                    date
+                );
                 constructedItem = {
                     icon: props.customIcon?.get(item),
                     groupHeader: props.customGroupHeader?.get(item),

packages/pluggableWidgets/timeline-web/src/utils/utils.ts

@@ -1,4 +1,4 @@
-import { TimelineContainerProps } from "../../typings/TimelineProps";
+import { GroupByKeyEnum, GroupByMonthOptionsEnum, TimelineContainerProps } from "../../typings/TimelineProps";
 
 export type GroupHeaderConfig = Pick<
     TimelineContainerProps,
@@ -8,3 +8,11 @@ export type GroupHeaderConfig = Pick<
 export function getHeaderOption({ groupByKey, groupByDayOptions, groupByMonthOptions }: GroupHeaderConfig) {
     return groupByKey === "day" ? groupByDayOptions : groupByKey === "month" ? groupByMonthOptions : "year";
 }
+
+export function getGroupByMethodForCustomMode(groupByKey: GroupByKeyEnum): GroupByMonthOptionsEnum | GroupByKeyEnum {
+    if (groupByKey === "month") {
+        return "monthYear";
+    }
+
+    return groupByKey;
+}

packages/pluggableWidgets/timeline-web/typings/TimelineProps.d.ts

@@ -40,7 +40,11 @@ export interface TimelineContainerProps {
 }
 
 export interface TimelinePreviewProps {
+    /**
+     * @deprecated Deprecated since version 9.18.0. Please use class property instead.
+     */
     className: string;
+    class: string;
     style: string;
     styleObject?: CSSProperties;
     readOnly: boolean;