[AP-6452] Add preserve day of selection to TimeRangePicker

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "11.5.3",
+  "version": "11.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/timeRangePicker/TimeRangePicker.mdx

@@ -9,15 +9,16 @@ import * as TimeRangePickerStories from "./TimeRangePicker.stories";
 
 ## TimeRangePicker properties
 
-|    properties | required | type                                          | description                                                                                               |
-| ------------: | :------: | :-------------------------------------------- | :-------------------------------------------------------------------------------------------------------- |
-| initTimeRange |  false   | Interval                                      | Start date and end date should be within the same day, current date will be used otherwise and by default |
-|          type |  false   | <code>Days</code>, <code>Hours</code>         | Type of time selected in component                                                                        |
-|    weekCounts |  false   | DailyCount\[]                                 | Item counts in each time range (Type "Hours" only)                                                        |
-| countsLoading |  false   | boolean                                       | Loading state of week counts (Type "Hours" only)                                                          |
-|  disabledDays |  false   | Matcher\[]                                    | Dates not allowed to select                                                                               |
-|      onChange |   true   | <code>(newTimeRange: Interval) => void</code> | Function to handle timeRange change                                                                       |
-|  onWeekChange |  false   | <code>(monday: Date) => void</code>           | Function to submit when showing week updates (Type "Hours" only)                                          |
+|           properties | required | type                                          | description                                                                                               |
+| -------------------: | :------: | :-------------------------------------------- | :-------------------------------------------------------------------------------------------------------- |
+|        initTimeRange |  false   | Interval                                      | Start date and end date should be within the same day, current date will be used otherwise and by default |
+|                 type |  false   | <code>Days</code>, <code>Hours</code>         | Type of time selected in component                                                                        |
+|           weekCounts |  false   | DailyCount\[]                                 | Item counts in each time range (Type "Hours" only)                                                        |
+|        countsLoading |  false   | boolean                                       | Loading state of week counts (Type "Hours" only)                                                          |
+|         disabledDays |  false   | Matcher\[]                                    | Dates not allowed to select                                                                               |
+|             onChange |   true   | <code>(newTimeRange: Interval) => void</code> | Function to handle timeRange change                                                                       |
+|         onWeekChange |  false   | <code>(monday: Date) => void</code>           | Function to submit when showing week updates (Type "Hours" only)                                          |
+| preserveDaySelection |  false   | boolean                                       | Whether to preserve week day selection when changing week (Type "Hours" only)                             |
 
 ```typescript
 import { Interval } from "date-fns";
@@ -49,6 +50,12 @@ type Matcher = (boolean | (date: Date)) => boolean | Date | Date[] | DateRange |
   <Story of={TimeRangePickerStories.TimerangepickerOfHours} />
 </Canvas>
 
+## Type "Hours" with preserved day selection
+
+<Canvas>
+  <Story of={TimeRangePickerStories.TimerangepickerOfHoursWithPreservedDaySelection} />
+</Canvas>
+
 ## Type "Hours" with Histogram
 
 <Canvas>

src/components/timeRangePicker/TimeRangePicker.stories.tsx

@@ -58,9 +58,28 @@
   name: "timerangepicker of hours ",
 };
 
+export const TimerangepickerOfHoursWithPreservedDaySelection: StoryObj = {
+  render: () => {
+    const [value, setValue] = useState<{
+      start: Date | number;
+      end: Date | number;
+    }>();
+
+    return (
+      <>
+        <TimeRangePicker preserveDaySelection onChange={setValue} />
+        <Spacer height="20rem" />
+        <div id="result-hours">Current Value:{JSON.stringify(value)}</div>
+      </>
+    );
+  },
+
+  name: "timerangepicker of hours with preserved day selection",
+};
+
 export const TimerangepickerOfHoursWithHistogram: StoryObj = {
   render: () => {
     const [value, setValue] = useState<{
       start: Date | number;
       end: Date | number;
     }>();

src/components/timeRangePicker/TimeRangePicker.tsx

@@ -4,6 +4,7 @@ import { DatesPicker, DateHourPicker } from "./components";
 type Props = Omit<ComponentProps<typeof DateHourPicker>, "initTimeRange"> & {
   initTimeRange?: Interval;
   type?: "Days" | "Hours";
+  preserveDaySelection?: boolean;
 };
 
 const DEFAULT_TIME_RANGE: Interval = {
@@ -19,6 +20,7 @@ export function TimeRangePicker({
   disabledDays,
   onChange,
   onWeekChange,
+  preserveDaySelection = false,
 }: Props) {
   if (type === "Days") {
     return (
@@ -35,6 +37,7 @@ export function TimeRangePicker({
       weekCounts={weekCounts}
       countsLoading={countsLoading}
       disabledDays={disabledDays}
+      preserveDaySelection={preserveDaySelection}
       onChange={onChange}
       onWeekChange={onWeekChange}
     />

src/components/timeRangePicker/components/DateHourPicker/DateHourPicker.tsx

@@ -15,13 +15,15 @@ import {
   getMonday,
   getTimeRangeDate,
   isSameTimeRange,
+  getNewSelectedDate,
 } from "../utils";
 import { DateSelector, HourSelector } from "./components";
 
 type Props = DatesPickerProps & {
   weekCounts?: DailyCount[];
   countsLoading?: boolean;
   onWeekChange?: (monday: Date) => void;
+  preserveDaySelection?: boolean;
 };
 
 export function DateHourPicker({
@@ -31,9 +33,10 @@ export function DateHourPicker({
   disabledDays,
   onChange,
   onWeekChange,
+  preserveDaySelection = false,
 }: Props) {
   const [selectedDate, setSelectedDate] = useState<Date>(
-    getTimeRangeDate(initTimeRange)
+    getTimeRangeDate(initTimeRange, "Hours")
   );
   const [dateOptions, setDateOptions] = useState<DateOption[]>(
     getDateOptions(getMonday(initTimeRange.start))
@@ -93,6 +96,15 @@ export function DateHourPicker({
     if (onWeekChange) {
       onWeekChange(newMonday);
     }
+    if (preserveDaySelection) {
+      const newSeletedDate = getNewSelectedDate(
+        selectedDate,
+        currentMonday,
+        newMonday
+      );
+      setSelectedDate(newSeletedDate);
+      submitDateHour(newSeletedDate, selectedTimeRange);
+    }
   };
 
   // Function to update time range options

src/components/timeRangePicker/components/utils.ts

@@ -9,6 +9,10 @@ import {
   addMonths,
   addYears,
   getHours,
+  differenceInCalendarDays,
+  startOfDay,
+  set,
+  subMilliseconds,
 } from "date-fns";
 import { RANGE_TYPE, DateOption, TimeRangeOption } from "../types";
 import {
@@ -23,8 +27,16 @@ export const getMonday = (date: Date | number): Date => {
   return isMonday(currentDate) ? currentDate : previousMonday(currentDate);
 };
 
-export const getTimeRangeDate = (initRange: Interval): Date => {
-  return isSameDay(initRange.start, initRange.end)
+export const getTimeRangeDate = (
+  initRange: Interval,
+  timePickerType?: "Days" | "Hours"
+): Date => {
+  // 18-24 time slot technically ends in different day
+  const end =
+    timePickerType === "Hours"
+      ? subMilliseconds(initRange.end, 1)
+      : initRange.end;
+  return isSameDay(initRange.start, end)
     ? new Date(new Date(initRange.start).setSeconds(0, 0))
     : new Date();
 };
@@ -139,3 +151,23 @@ export const isSameTimeRange = (
     getHours(interval.end) === optionEnd
   );
 };
+
+export const getNewSelectedDate = (
+  selectedDate: Date,
+  currentMonday: Date,
+  newMonday: Date
+) => {
+  const dayOffset = differenceInCalendarDays(
+    startOfDay(selectedDate),
+    startOfDay(currentMonday)
+  );
+
+  const baseDate = addDays(startOfDay(newMonday), dayOffset);
+
+  return set(baseDate, {
+    hours: selectedDate.getHours(),
+    minutes: selectedDate.getMinutes(),
+    seconds: selectedDate.getSeconds(),
+    milliseconds: selectedDate.getMilliseconds(),
+  });
+};