@synerise/ds-date-range-picker 2.0.3 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.4...@synerise/ds-date-range-picker@2.1.0) (2026-09-10)
+
+### Bug Fixes
+
+- **date-range-picker:** stop the contract spec depending on the calendar day ([b4f19a7](https://github.com/Synerise/synerise-design/commit/b4f19a764a8abfbfb6b452709bd7bae88297a023))
+
+### Features
+
+- **global:** move the pickers to date-fns 4 ([f878075](https://github.com/Synerise/synerise-design/commit/f878075940c2cd0d2d8a4a5603eb18d01f837640))
+- new month, year and decade picker views, side testids, no title tooltip ([e00f29b](https://github.com/Synerise/synerise-design/commit/e00f29bfc16795bc0ceafa97746c99da1bf3ed9c))
+
+## [2.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.3...@synerise/ds-date-range-picker@2.0.4) (2026-09-08)
+
+### Bug Fixes
+
+- **date-range-picker:** encode non-whole-hour timezone offsets correctly ([a51b393](https://github.com/Synerise/synerise-design/commit/a51b393cad84dcb2da67dcc3da2dabf7d22cf37a))
+
 ## [2.0.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.2...@synerise/ds-date-range-picker@2.0.3) (2026-09-07)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/CLAUDE.md

@@ -12,7 +12,7 @@ src/
   RawDateRangePicker.tsx    — core picker logic without popover
   date.types.ts             — DateRange, DateFilter, RelativeUnits, RangeKey
   constants.tsx             — MODES, COLUMNS, presets, POPOVER_*_CONFIG
-  utils.ts                  — normalizeRange, getDefaultTexts, toIsoString, DEFAULT_RANGE
+  utils.ts                  — normalizeRange, getDefaultTexts, DEFAULT_RANGE (toIsoString is re-exported from ds-core)
   fns.ts                    — re-exports / wrappers around date-fns
   RangePicker/              — absolute date picker (dual-month calendar)
   RelativeRangePicker/      — relative preset + custom range picker
@@ -20,7 +20,7 @@ src/
   Footer/                   — apply button + selected range summary
   RangeFilter/              — recurring schedule filters (Daily/Weekly/Monthly)
   AddonCollapse/            — collapsible section used by relative picker and filter
-  dateUtils/                — date utility functions (add, sub, format, startOf, endOf, …)
+  dateUtils/                — date utility functions (add, sub, startOf, endOf, toDateValue, …)
 ```
 
 ## Public exports
@@ -114,7 +114,7 @@ Re-export of `format` from `date-fns` — use for consistent date formatting acr
 
 ### `utils`
 
-Namespace export: `normalizeRange`, `toIsoString`, `toIsoStringWithoutZone`, `getDefaultTexts`, `DEFAULT_RANGE`, `START_OF`, `END_OF`.
+Namespace export: `normalizeRange`, `toIsoString` (re-exported from `@synerise/ds-core`), `toIsoStringWithoutZone`, `getDefaultTexts`, `DEFAULT_RANGE`, `START_OF`, `END_OF`.
 
 ### `CONST`
 
@@ -193,12 +193,15 @@ Addons (relative picker, filter) appear below the calendar and are toggled via `
 - All sub-components have co-located `*.styles.ts(x)` files
 - Uses `@synerise/ds-core` tokens — no hardcoded colour values
 - Popover overlay has `data-testid="ds-date-range-picker-overlay"` and class `ds-date-range-popover`
+- Each half of the panel is wrapped in `data-testid="date-range-picker-side-left"` / `-side-right` — the scope E2E suites use to reach the days and navigation of one side. The wrapper hosts whichever picker the side is in (day grid, month/year grid, or time picker), so the testid is stable across modes
 
 ## Key dependencies
 
 - `react-day-picker ^10` — calendar grid rendering inside `RangePicker` (see the v10 notes in `ds-date-picker`'s CLAUDE.md; day cells now contain a `<button class="DayPicker-Day-Button">`)
 - `@synerise/ds-popover` — floating popover (floating-ui underneath)
-- `date-fns ^2` + `date-fns-tz 1.1.4` — date arithmetic and timezone support
+- `date-fns ^4` — date arithmetic, imported **by name from the package root** (`import { addDays as fnsAddDays } from 'date-fns'`). v4 submodules are named-export-only, so the old `import fnsAddDays from 'date-fns/addDays'` form yields `undefined`
+- Loosely-typed date values are normalised by `dateUtils/toDateValue.ts`, which replaced `@date-fns/upgrade`'s `legacyParse`. Use it rather than `new Date` or `toDate`: a naive string must be read as *local* time, and only `parseISO` does that. Note `toDateValue(null)` is the **epoch**, which `isValid` accepts — preserved deliberately, since call sites are written around it
+- Timezone handling is not this package's: `toIsoString` is re-exported from `@synerise/ds-core`, which owns the wall-clock convention and the `@date-fns/tz` dependency behind it
 - `dayjs ^1.8` — used in parts of `RangeFilter`
 - `ramda ^0.27` — functional utilities in `RangeFilter`
 - `react-intl` — i18n (peer dependency via host app)

package/README.md

@@ -48,7 +48,6 @@ const value = {
 | disabledDate              | Function to specify if particular dates are disabled or not                      | (date:Date)=>boolean       | -                                                             |
 | disabledDefaultTexts      | Disables the default texts translations provided by `react-intl`                 | boolean                    | `false`                                                       |
 | forceAbsolute             | Force the outcome to be converted to an absolute date                            | boolean                    | `false`                                                       |
-| format                    | Format of the value displayed in the footer                                      | string                     | "MMM D, YYYY"                                                 |
 | onApply                   | Callback executed after applying changes                                         | (value: Partial<DateFilter> \| undefined) => void | -                                              |
 | ranges                    | An array containing custom ranges which may be used as a short-hand              | DateRangePreset[]          | []                                                            |
 | popoverProps              | Object representing props applied to the ds-popover component                    | Partial<PopoverProps>      | {}                                                            |

package/dist/DateRangePicker.types.d.ts

@@ -22,10 +22,6 @@ export type DateRangePickerProps = {
     disabled?: boolean;
     disableDefaultTexts?: boolean;
     disabledDate?: (date?: Date) => boolean;
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     forceAdjacentMonths?: boolean;
     forceAbsolute?: boolean;

package/dist/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { Props } from './Footer.types';
-declare const Footer: ({ canApply, onApply, canSwitchMode, onSwitchMode, mode, dateOnly, message, texts, value, format, valueFormatOptions, showTime, displayDateContainerClass, ...rest }: Props) => React.JSX.Element;
+declare const Footer: ({ canApply, onApply, canSwitchMode, onSwitchMode, mode, dateOnly, message, texts, value, valueFormatOptions, showTime, displayDateContainerClass, ...rest }: Props) => React.JSX.Element;
 export default Footer;

package/dist/Footer/Footer.js

@@ -1,15 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { parseISO, isValid } from "date-fns";
 import { useCallback, useMemo } from "react";
-import { useIntl } from "react-intl";
 import Button from "@synerise/ds-button";
 import { useDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
 import Icon, { ArrowRightS } from "@synerise/ds-icon";
 import Tooltip from "@synerise/ds-tooltip";
 import { isLifetime } from "../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.js";
 import { ALL_TIME } from "../constants.js";
-import format from "../dateUtils/format.js";
-import getDateFromString from "../dateUtils/getDateFromString.js";
-import { toIsoStringWithoutZone } from "../utils.js";
 import { ChosenRange, InvisibleTextContent, Container, ActionsPlaceholder, Actions } from "./Footer.styles.js";
 const Footer = ({
   canApply,
@@ -21,7 +18,6 @@ const Footer = ({
   message,
   texts,
   value,
-  format: format$1,
   valueFormatOptions,
   showTime,
   displayDateContainerClass = "ds-date-range-picker-value",
@@ -30,20 +26,16 @@ const Footer = ({
   const {
     formatValue
   } = useDataFormat();
-  const {
-    locale
-  } = useIntl();
-  const footerFormat = format$1 || (showTime ? "MMM D, YYYY, HH:mm" : "MMM D, YYYY");
   const footerDateToString = useCallback((date) => {
-    if (format$1 || typeof date === "string") {
-      return format(getDateFromString(date), footerFormat, locale);
+    const parsed = typeof date === "string" ? parseISO(date) : date;
+    if (!isValid(parsed)) {
+      return "";
     }
-    const parseDate = new Date(toIsoStringWithoutZone(date));
-    return formatValue(parseDate, {
+    return formatValue(parsed, {
       ...getDefaultDataTimeOptions(showTime),
       ...valueFormatOptions
     });
-  }, [footerFormat, format$1, formatValue, locale, valueFormatOptions, showTime]);
+  }, [formatValue, valueFormatOptions, showTime]);
   const ChosenRange$1 = useMemo(() => {
     if (value?.key === ALL_TIME || value && isLifetime(value)) {
       return /* @__PURE__ */ jsx(ChosenRange, { className: "ds-date-range-picker-value", children: value?.translationKey ? texts[value.translationKey] ?? value.translationKey : value?.key || "LIFETIME" });

package/dist/Footer/Footer.types.d.ts

@@ -11,10 +11,6 @@ export type Props = {
     onSwitchMode?: () => void;
     message?: React.ReactNode | string;
     texts: Texts;
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     displayDateContainerClass?: string;

package/dist/RangeFilter/constants.js

@@ -1,25 +1,6 @@
 import range from "lodash.range";
 import { v4 } from "uuid";
-import fnsAddDays from "date-fns/addDays";
-import "date-fns/addHours";
-import "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import fnsFormat from "date-fns/format";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import { format, addDays } from "date-fns";
 import DailyFilter from "./Filters/DailyFilter/DailyFilter.js";
 import MonthlyFilter from "./Filters/MonthlyFilter/MonthlyFilter.js";
 import WeeklyFilter from "./Filters/WeeklyFilter/WeeklyFilter.js";
@@ -27,7 +8,7 @@ const LONG_MONTH = new Date(0, 0, 1);
 const TIME_FORMAT = "HH:mm:ss.SSS";
 const DEFAULT_RANGE_START = "00:00:00.000";
 const DEFAULT_RANGE_END = "23:59:59.999";
-const MONTH_DAYS = (locale) => range(0, 31).map((i) => locale === "pl" ? `${i + 1}.` : fnsFormat(fnsAddDays(LONG_MONTH, i), "Do"));
+const MONTH_DAYS = (locale) => range(0, 31).map((i) => locale === "pl" ? `${i + 1}.` : format(addDays(LONG_MONTH, i), "Do"));
 var DAYS_OF_PERIOD_ENUM = /* @__PURE__ */ ((DAYS_OF_PERIOD_ENUM2) => {
   DAYS_OF_PERIOD_ENUM2["DAY_OF_MONTH"] = "MONTH";
   DAYS_OF_PERIOD_ENUM2["DAY_OF_WEEK"] = "WEEK";

package/dist/RangePicker/RangePicker.js

@@ -1,8 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import fnsIsSameDay from "date-fns/isSameDay";
-import fnsIsValid from "date-fns/isValid";
+import { startOfDay, endOfDay, addDays, isSameMonth, isAfter, isValid, isSameDay, addMinutes, isBefore } from "date-fns";
 import { PureComponent } from "react";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import { withDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
 import { YearPicker, MonthPicker, fnsDifferenceInYears, DayPicker, localeUtils, TimePicker, datePickerFormat } from "@synerise/ds-date-picker";
 import { DayBackground, DayText, DayForeground } from "@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker.styles";
@@ -12,29 +10,10 @@ import { Range } from "../RelativeRangePicker/RelativeRangePicker.styles.js";
 import { ABSOLUTE, COLUMNS, MODES } from "../constants.js";
 import ADD from "../dateUtils/add.js";
 import getDateFromString from "../dateUtils/getDateFromString.js";
-import fnsAddDays from "date-fns/addDays";
-import "date-fns/addHours";
-import fnsAddMinutes from "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import fnsEndOfDay from "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getYear";
-import fnsIsAfter from "date-fns/isAfter";
-import fnsIsBefore from "date-fns/isBefore";
-import fnsIsSameMonth from "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import fnsStartOfDay from "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import toDateValue from "../dateUtils/toDateValue.js";
 import { Sides, Side, PickerFooter, FooterSeparator, DateTimeModeSwitch } from "./RangePicker.styles.js";
 import { getModifiers, getDisabledTimeOptions, getSidesState } from "./utils.js";
-const isDayBefore = (day, reference) => fnsIsBefore(fnsStartOfDay(day), fnsStartOfDay(reference));
+const isDayBefore = (day, reference) => isBefore(startOfDay(day), startOfDay(reference));
 const NOOP = () => {
 };
 const TOOLTIP_FORMAT = "MMM d, yyyy, HH:mm";
@@ -51,10 +30,10 @@ function replaceRange(value, day) {
   }
   if (!from) {
     from = day;
-  } else if (from && to && fnsIsSameDay(from, to) && fnsIsSameDay(day, from)) {
+  } else if (from && to && isSameDay(from, to) && isSameDay(day, from)) {
     from = null;
     to = null;
-  } else if (to && fnsIsSameDay(day, to)) {
+  } else if (to && isSameDay(day, to)) {
     from = day;
     to = day;
   } else if (from && to) {
@@ -99,8 +78,8 @@ class RangePicker extends PureComponent {
         from,
         to
       } = replaceRange(value, day);
-      from = from ? fnsStartOfDay(from) : from;
-      to = to ? fnsEndOfDay(to) : to;
+      from = from ? startOfDay(from) : from;
+      to = to ? endOfDay(to) : to;
       onChange && onChange({
         type: ABSOLUTE,
         from,
@@ -138,7 +117,7 @@ class RangePicker extends PureComponent {
         onChange({
           ...value,
           type: ABSOLUTE,
-          from: fnsAddDays(legacyParse(value.from), numberOfDays)
+          from: addDays(toDateValue(value.from), numberOfDays)
         });
       }
       if (side === COLUMNS.RIGHT) {
@@ -149,7 +128,7 @@ class RangePicker extends PureComponent {
         onChange({
           ...value,
           type: ABSOLUTE,
-          to: fnsAddDays(legacyParse(value.to), numberOfDays)
+          to: addDays(toDateValue(value.to), numberOfDays)
         });
       }
     };
@@ -161,8 +140,8 @@ class RangePicker extends PureComponent {
       const {
         forceAdjacentMonths
       } = this.props;
-      if (fnsIsSameMonth(month, legacyParse(state[opposite].month))) {
-        const dir = fnsIsAfter(month, legacyParse(state[side].month)) ? 1 : -1;
+      if (isSameMonth(month, toDateValue(state[opposite].month))) {
+        const dir = isAfter(month, toDateValue(state[side].month)) ? 1 : -1;
         const adjacentMonth = ADD.MONTHS(month, dir);
         this.setState((prevState) => ({
           ...prevState,
@@ -217,7 +196,7 @@ class RangePicker extends PureComponent {
       } = this.props;
       const formatDate = (date) => {
         if (typeof date === "string") {
-          return datePickerFormat(legacyParse(date), TOOLTIP_FORMAT, intl.locale);
+          return datePickerFormat(toDateValue(date), TOOLTIP_FORMAT, intl.locale);
         }
         return formatValue(date, {
           ...getDefaultDataTimeOptions(true)
@@ -227,9 +206,9 @@ class RangePicker extends PureComponent {
         from,
         to
       } = value;
-      const rangeFrom = from ? legacyParse(from) : null;
-      const rangeTo = to ? legacyParse(to) : null;
-      const isSelectedRangeDay = !!rangeFrom && !!rangeTo && fnsIsValid(rangeFrom) && fnsIsValid(rangeTo) && !isDayBefore(day, rangeFrom) && !isDayBefore(rangeTo, day);
+      const rangeFrom = from ? toDateValue(from) : null;
+      const rangeTo = to ? toDateValue(to) : null;
+      const isSelectedRangeDay = !!rangeFrom && !!rangeTo && isValid(rangeFrom) && isValid(rangeTo) && !isDayBefore(day, rangeFrom) && !isDayBefore(rangeTo, day);
       const dayForeground = /* @__PURE__ */ jsx(DayForeground, { className: "DayPicker-Day-FG" });
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DayBackground, { className: "DayPicker-Day-BG" }),
@@ -252,7 +231,7 @@ class RangePicker extends PureComponent {
         [side]: currentSide,
         [opposite]: oppositeSide
       } = this.state;
-      const oppositeMonth = legacyParse(oppositeSide.month);
+      const oppositeMonth = toDateValue(oppositeSide.month);
       return /* @__PURE__ */ jsx(MonthPicker, { max: side === COLUMNS.LEFT ? ADD.MONTHS(oppositeMonth, -1) : void 0, min: side === COLUMNS.RIGHT ? ADD.MONTHS(oppositeMonth, 1) : void 0, value: currentSide.month instanceof Date ? currentSide.month : new Date(currentSide.month), onChange: (month) => this.handleSideMonthChange(side, month, "date") }, `month_picker_${opposite}`);
     };
     this.renderDatePicker = (side) => {
@@ -272,16 +251,16 @@ class RangePicker extends PureComponent {
         to,
         type
       } = value;
-      const modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
-      const selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [legacyParse(from), {
-        from: legacyParse(from),
-        to: legacyParse(to)
+      const modifiers = getModifiers(isValid(from) ? from : null, isValid(to) ? to : null, enteredTo);
+      const selectedDays = isValid(from) && isValid(to) ? [toDateValue(from), {
+        from: toDateValue(from),
+        to: toDateValue(to)
       }] : [];
-      const parsedLeft = legacyParse(left.month);
-      const parsedRight = legacyParse(right.month);
-      const adjacentMonths = forceAdjacentMonths || fnsIsSameMonth(ADD.MONTHS(parsedLeft, 1), parsedRight);
+      const parsedLeft = toDateValue(left.month);
+      const parsedRight = toDateValue(right.month);
+      const adjacentMonths = forceAdjacentMonths || isSameMonth(ADD.MONTHS(parsedLeft, 1), parsedRight);
       const adjacentYears = forceAdjacentMonths || fnsDifferenceInYears(ADD.MONTHS(parsedLeft, 1), parsedRight) === 0;
-      return /* @__PURE__ */ jsx(DayPicker, { className: type.toLowerCase(), canChangeMonth: false, disabledDays: disabledDate, localeUtils, month: getDateFromString(sideState.month), title: sideState.monthTitle, hideLongNext: side === COLUMNS.LEFT && adjacentYears, hideShortNext: side === COLUMNS.LEFT && adjacentMonths, hideLongPrev: side === COLUMNS.RIGHT && adjacentYears, hideShortPrev: side === COLUMNS.RIGHT && adjacentMonths, renderDay: this.renderDay, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, onMonthNameClick: () => this.handleSideModeChange(side, "month"), onYearNameClick: () => this.handleSideModeChange(side, "year"), onMonthChange: (month) => this.handleSideMonthChange(side, month, "date"), fixedWeeks: true, showOutsideDays: true, modifiers, onDayClick: this.handleDayClick, selectedDays }, `day_picker_${side}`);
+      return /* @__PURE__ */ jsx(DayPicker, { className: type.toLowerCase(), canChangeMonth: false, disabledDays: disabledDate, localeUtils, month: getDateFromString(sideState.month), hideLongNext: side === COLUMNS.LEFT && adjacentYears, hideShortNext: side === COLUMNS.LEFT && adjacentMonths, hideLongPrev: side === COLUMNS.RIGHT && adjacentYears, hideShortPrev: side === COLUMNS.RIGHT && adjacentMonths, renderDay: this.renderDay, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, onMonthNameClick: () => this.handleSideModeChange(side, "month"), onYearNameClick: () => this.handleSideModeChange(side, "year"), onMonthChange: (month) => this.handleSideMonthChange(side, month, "date"), fixedWeeks: true, showOutsideDays: true, modifiers, onDayClick: this.handleDayClick, selectedDays }, `day_picker_${side}`);
     };
     this.renderTimePicker = (side) => {
       const {
@@ -295,7 +274,7 @@ class RangePicker extends PureComponent {
       if (!from || !to) {
         return null;
       }
-      const sidesAreAdjacent = fnsIsSameDay(legacyParse(from), legacyParse(to));
+      const sidesAreAdjacent = isSameDay(toDateValue(from), toDateValue(to));
       switch (side) {
         case COLUMNS.LEFT: {
           return /* @__PURE__ */ jsx(TimePicker, { value: getDateFromString(from), onChange: this.handleFromTimeChange, disabledHours: getDisabledTimeOptions(from, "HOURS", null, to, is12HoursClock), disabledMinutes: getDisabledTimeOptions(from, "MINUTES", null, to, is12HoursClock), disabledSeconds: getDisabledTimeOptions(from, "SECONDS", null, to, is12HoursClock), onShortNext: sidesAreAdjacent ? void 0 : () => {
@@ -356,21 +335,21 @@ class RangePicker extends PureComponent {
     } = this.state;
     const toDateChanged = !!value?.to && value?.to !== prevProps?.value?.to;
     const fromDateChanged = !!value?.from && value?.from !== prevProps?.value?.from;
-    const startOnLeft = fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month));
-    const endOnLeft = fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month));
+    const startOnLeft = isSameMonth(toDateValue(value.from), toDateValue(left.month));
+    const endOnLeft = isSameMonth(toDateValue(value.to), toDateValue(left.month));
     if (fromDateChanged && !endOnLeft || toDateChanged && !endOnLeft || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
       if (startAlwaysOnTheLeft) {
         this.setState(getSidesState(value, forceAdjacentMonths));
       }
     }
     if (jumpToStartAndEnd && (fromDateChanged || toDateChanged)) {
-      const startOnRight = fnsIsSameMonth(legacyParse(value.from), legacyParse(right.month));
+      const startOnRight = isSameMonth(toDateValue(value.from), toDateValue(right.month));
       const isStartVisible = startOnLeft || startOnRight;
       if (!isStartVisible) {
         this.setState(getSidesState(value, forceAdjacentMonths));
         return null;
       }
-      const endOnRight = fnsIsSameMonth(legacyParse(value.to), legacyParse(right.month));
+      const endOnRight = isSameMonth(toDateValue(value.to), toDateValue(right.month));
       const isEndVisible = endOnLeft || endOnRight;
       if (!isEndVisible) {
         this.setState(getSidesState(value, forceAdjacentMonths));
@@ -394,8 +373,8 @@ class RangePicker extends PureComponent {
     } = this.props;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(Sides, { children: [
-        /* @__PURE__ */ jsx(Side, { mode, children: this.renderSide(COLUMNS.LEFT) }),
-        /* @__PURE__ */ jsx(Side, { mode, children: this.renderSide(COLUMNS.RIGHT) })
+        /* @__PURE__ */ jsx(Side, { mode, "data-testid": `date-range-picker-side-${COLUMNS.LEFT}`, children: this.renderSide(COLUMNS.LEFT) }),
+        /* @__PURE__ */ jsx(Side, { mode, "data-testid": `date-range-picker-side-${COLUMNS.RIGHT}`, children: this.renderSide(COLUMNS.RIGHT) })
       ] }),
       /* @__PURE__ */ jsxs(PickerFooter, { children: [
         showNowButton && /* @__PURE__ */ jsx(Range, { onClick: ({
@@ -407,7 +386,7 @@ class RangePicker extends PureComponent {
             translationKey: "now",
             type: "ABSOLUTE",
             from: now,
-            to: fnsAddMinutes(now, 1)
+            to: addMinutes(now, 1)
           };
           onChange(literallyNow);
           currentTarget.blur();

package/dist/RangePicker/RangePicker.types.d.ts

@@ -24,12 +24,10 @@ export interface State {
     enteredTo?: Date | null;
     left: {
         month: Date | string;
-        monthTitle: string;
         mode: string;
     };
     right: {
         month: Date | string;
-        monthTitle: string;
         mode: string;
     };
 }

package/dist/RangePicker/utils.js

@@ -1,35 +1,11 @@
-import fnsIsValid from "date-fns/isValid";
-import fnsIsWithinRange from "date-fns/isWithinInterval";
-import fnsMax from "date-fns/max";
-import fnsMin from "date-fns/min";
+import { isWithinInterval, endOfDay, startOfDay, isBefore, min, max, startOfMonth, isValid, isSameMonth } from "date-fns";
 import dayjs from "dayjs";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import { AM, HOUR_12, PM, MAP_24_HOUR_TO_12, DISABLE_CLOCK_MODE_HOUR, HOUR } from "@synerise/ds-time-picker";
 import { TIME_OPTIONS } from "../constants.js";
 import ADD from "../dateUtils/add.js";
-import format from "../dateUtils/format.js";
 import GET from "../dateUtils/get.js";
 import SET from "../dateUtils/set.js";
-import "date-fns/addDays";
-import "date-fns/addHours";
-import "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import fnsEndOfDay from "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import fnsIsBefore from "date-fns/isBefore";
-import fnsIsSameMonth from "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import fnsStartOfDay from "date-fns/startOfDay";
-import fnsStartOfMonth from "date-fns/startOfMonth";
+import toDateValue from "../dateUtils/toDateValue.js";
 const NOW = /* @__PURE__ */ new Date();
 const HOURS_GRANULARITY = "HOURS";
 const getAmOrPmFromDate = (date) => {
@@ -38,20 +14,20 @@ const getAmOrPmFromDate = (date) => {
 const getInterval = (initialDate, startDate, endDate) => {
   if (!startDate && !endDate) {
     return {
-      start: fnsStartOfDay(initialDate),
-      end: fnsEndOfDay(initialDate)
+      start: startOfDay(initialDate),
+      end: endOfDay(initialDate)
     };
   }
   if (!startDate && endDate) {
     return {
-      start: fnsIsBefore(initialDate, endDate) ? fnsStartOfDay(initialDate) : fnsStartOfDay(endDate),
+      start: isBefore(initialDate, endDate) ? startOfDay(initialDate) : startOfDay(endDate),
       end: endDate
     };
   }
   if (!endDate && startDate) {
     return {
       start: startDate,
-      end: fnsIsBefore(initialDate, startDate) ? fnsEndOfDay(startDate) : fnsEndOfDay(initialDate)
+      end: isBefore(initialDate, startDate) ? endOfDay(startDate) : endOfDay(initialDate)
     };
   }
   return {
@@ -67,7 +43,7 @@ const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = nul
     return [];
   }
   const dayBuilder = dayjs(day);
-  const dayAsDate = typeof day === "string" ? legacyParse(day) : day;
+  const dayAsDate = typeof day === "string" ? toDateValue(day) : day;
   const dayClockMode = getAmOrPmFromDate(dayAsDate);
   let disableMeridienToggle = false;
   if (is12HoursClock && granularity === HOURS_GRANULARITY) {
@@ -85,11 +61,11 @@ const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = nul
       }
     }
   }
-  const intervalStartDate = lowerLimit ? legacyParse(lowerLimit) : void 0;
-  const intervalEndDate = upperLimit ? legacyParse(upperLimit) : void 0;
+  const intervalStartDate = lowerLimit ? toDateValue(lowerLimit) : void 0;
+  const intervalEndDate = upperLimit ? toDateValue(upperLimit) : void 0;
   const interval = getInterval(dayAsDate, intervalStartDate, intervalEndDate);
   const options = TIME_OPTIONS[granularity].map((option) => SET[granularity](dayAsDate, option));
-  let result = options.filter((opt) => !fnsIsWithinRange(opt, interval)).map((option) => GET[granularity](option));
+  let result = options.filter((opt) => !isWithinInterval(opt, interval)).map((option) => GET[granularity](option));
   if (is12HoursClock && granularity === HOURS_GRANULARITY) {
     if (dayClockMode === AM) {
       result = result.filter((item) => item < HOUR_12);
@@ -104,20 +80,18 @@ const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = nul
   return result;
 };
 const getSidesState = (value, forceAdjacentMonths) => {
-  const from = fnsStartOfMonth(fnsIsValid(value.from) ? legacyParse(value.from) : /* @__PURE__ */ new Date());
-  let to = fnsIsValid(value.to) ? fnsStartOfMonth(legacyParse(value.to)) : from;
-  if (fnsIsSameMonth(from, to)) {
+  const from = startOfMonth(isValid(value.from) ? toDateValue(value.from) : /* @__PURE__ */ new Date());
+  let to = isValid(value.to) ? startOfMonth(toDateValue(value.to)) : from;
+  if (isSameMonth(from, to)) {
     to = ADD.MONTHS(to, 1);
   }
   return {
     left: {
       month: from,
-      monthTitle: fnsIsValid(from) ? format(legacyParse(from), "MMM yyyy") : "",
       mode: "date"
     },
     right: {
       month: forceAdjacentMonths ? ADD.MONTHS(from, 1) : to,
-      monthTitle: fnsIsValid(to) ? format(legacyParse(to), "MMM yyyy") : "",
       mode: "date"
     }
   };
@@ -126,15 +100,15 @@ const toDate = (value) => {
   if (value === null || value === void 0) {
     return void 0;
   }
-  return value instanceof Date ? value : legacyParse(value);
+  return value instanceof Date ? value : toDateValue(value);
 };
 const getModifiers = (from, to, enteredTo) => {
   const isSelecting = from && !to && enteredTo;
-  const enteredStart = isSelecting ? fnsMin([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
-  const enteredEnd = isSelecting ? fnsMax([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
-  const entered = isSelecting ? (day) => fnsIsWithinRange(legacyParse(day), {
-    start: legacyParse(enteredStart),
-    end: legacyParse(enteredEnd)
+  const enteredStart = isSelecting ? min([toDateValue(from), toDateValue(enteredTo)]) : enteredTo;
+  const enteredEnd = isSelecting ? max([toDateValue(from), toDateValue(enteredTo)]) : enteredTo;
+  const entered = isSelecting ? (day) => isWithinInterval(toDateValue(day), {
+    start: toDateValue(enteredStart),
+    end: toDateValue(enteredEnd)
   }) : enteredTo;
   const startModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? void 0 : from;
   const endModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? from : to;

package/dist/RangePickerInput/RangePickerInput.types.d.ts

@@ -5,10 +5,6 @@ import { Texts } from '../DateRangePicker.types';
 import { DateFilter, DateRange } from '../date.types';
 export type RangePickerInputProps = {
     size?: 'large' | 'default' | 'small';
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;

package/dist/RawDateRangePicker.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { DateRangePickerProps } from './DateRangePicker.types';
 import { DateRange } from './date.types';
 export declare function defaultValueTransformer(value: DateRange): DateRange;
-export declare const RawDateRangePicker: ({ showRelativePicker, showFilter, showTime, format, valueFormatOptions, disabledDate, validate, forceAdjacentMonths, savedFilters, onFilterSave, containerClass, footerProps, allowedFilterTypes, disableAbsoluteTimepickerInRelative, filterValueSelectionModes, filterRangeDisplayMode, showNowButton, relativeFuture, relativePast, ranges, relativeModes, rangeUnits, showCustomRange, valueTransformer, onValueChange, isTruncateMs, forceAbsolute, onApply, texts, value, }: Omit<DateRangePickerProps, "placement">) => React.JSX.Element;
+export declare const RawDateRangePicker: ({ showRelativePicker, showFilter, showTime, valueFormatOptions, disabledDate, validate, forceAdjacentMonths, savedFilters, onFilterSave, containerClass, footerProps, allowedFilterTypes, disableAbsoluteTimepickerInRelative, filterValueSelectionModes, filterRangeDisplayMode, showNowButton, relativeFuture, relativePast, ranges, relativeModes, rangeUnits, showCustomRange, valueTransformer, onValueChange, isTruncateMs, forceAbsolute, onApply, texts, value, }: Omit<DateRangePickerProps, "placement">) => React.JSX.Element;
 export default RawDateRangePicker;