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

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+## [2.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.1...@synerise/ds-date-range-picker@2.0.2) (2026-09-02)
+
+**Note:** Version bump only for package @synerise/ds-date-range-picker
+
 ## [2.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.0...@synerise/ds-date-range-picker@2.0.1) (2026-09-01)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/CLAUDE.md

@@ -196,7 +196,7 @@ Addons (relative picker, filter) appear below the calendar and are toggled via `
 
 ## Key dependencies
 
-- `react-day-picker ^7` — calendar grid rendering inside `RangePicker`
+- `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
 - `dayjs ^1.8` — used in parts of `RangeFilter`
@@ -210,6 +210,7 @@ Addons (relative picker, filter) appear below the calendar and are toggled via `
 - `valueTransformer` is applied inside `RawDateRangePicker` before calling `onApply` — default transformer strips `ALL_TIME`-specific props.
 - `forceAbsolute` converts relative `DateRange` values to absolute bounds before emitting — useful when downstream systems don't understand relative types.
 - `RangePicker` (absolute calendar) is a class-based `PureComponent` — avoid passing new function references on every render to prevent unnecessary re-renders.
+- `getModifiers()` in `RangePicker/utils.ts` returns react-day-picker `Matcher`s keyed by modifier name; each key becomes a `DayPicker-Day--<key>` class. It normalises the `Date | string | null` range bounds to `Date`, which the v7 code did with casts.
 - `RelativeRangePicker` is also a class-based `PureComponent`.
 - The `SINCE` mode is a variant of relative dating anchored to a specific timestamp rather than "now".
 - `normalizeRange()` from `utils` converts relative ranges to absolute `Date` objects — used internally and safe to call from consuming code.

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.styles.js

@@ -10,7 +10,7 @@ const Container = /* @__PURE__ */ styled.div.withConfig({
 const Row = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangeFormstyles__Row",
   componentId: "sc-4k3o5r-2"
-})(["width:100%;display:flex;justify-content:", ";min-height:32px;margin:8px 0;", " .ant-slider{width:100%;margin:24px 8px 8px;}.ant-tooltip-inner{white-space:nowrap;}&& .ant-slider-handle:focus,&& .ant-slider-handle:hover{.ant-tooltip-content{background-color:transparent;}.ant-tooltip-inner{color:", ";}}"], (props) => props.justifyContent, (props) => props.mode === "slider" && css(["&{column-gap:8px;margin-top:16px;", "{margin-top:14px;}}"], RemoveIconWrapper), (props) => props.theme.palette["grey-600"]);
+})(["width:100%;display:flex;justify-content:", ";min-height:32px;margin:8px 0;", " .ant-slider{width:100%;margin:24px 8px 8px;}"], (props) => props.justifyContent, (props) => props.mode === "slider" && css(["&{column-gap:8px;margin-top:16px;", "{margin-top:14px;}}"], RemoveIconWrapper));
 const Separator = /* @__PURE__ */ styled.span.withConfig({
   displayName: "RangeFormstyles__Separator",
   componentId: "sc-4k3o5r-3"

package/dist/RangePicker/RangePicker.js

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import fnsIsSameDay from "date-fns/isSameDay";
 import fnsIsValid from "date-fns/isValid";
 import { PureComponent } from "react";
-import { DateUtils } from "react-day-picker";
 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";
@@ -25,7 +24,7 @@ import "date-fns/endOfMonth";
 import "date-fns/format";
 import "date-fns/getYear";
 import fnsIsAfter from "date-fns/isAfter";
-import "date-fns/isBefore";
+import fnsIsBefore from "date-fns/isBefore";
 import fnsIsSameMonth from "date-fns/isSameMonth";
 import "date-fns/isSameYear";
 import "date-fns/setDate";
@@ -35,6 +34,7 @@ import fnsStartOfDay from "date-fns/startOfDay";
 import "date-fns/startOfMonth";
 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 NOOP = () => {
 };
 const TOOLTIP_FORMAT = "MMM d, yyyy, HH:mm";
@@ -51,10 +51,10 @@ function replaceRange(value, day) {
   }
   if (!from) {
     from = day;
-  } else if (from && to && DateUtils.isSameDay(from, to) && DateUtils.isSameDay(day, from)) {
+  } else if (from && to && fnsIsSameDay(from, to) && fnsIsSameDay(day, from)) {
     from = null;
     to = null;
-  } else if (to && DateUtils.isSameDay(day, to)) {
+  } else if (to && fnsIsSameDay(day, to)) {
     from = day;
     to = day;
   } else if (from && to) {
@@ -62,7 +62,7 @@ function replaceRange(value, day) {
     to = null;
   } else {
     to = day;
-    if (DateUtils.isDayBefore(to, from)) {
+    if (isDayBefore(to, from)) {
       to = from;
       from = day;
     }
@@ -229,7 +229,7 @@ class RangePicker extends PureComponent {
       } = value;
       const rangeFrom = from ? legacyParse(from) : null;
       const rangeTo = to ? legacyParse(to) : null;
-      const isSelectedRangeDay = !!rangeFrom && !!rangeTo && fnsIsValid(rangeFrom) && fnsIsValid(rangeTo) && !DateUtils.isDayBefore(day, rangeFrom) && !DateUtils.isDayBefore(rangeTo, day);
+      const isSelectedRangeDay = !!rangeFrom && !!rangeTo && fnsIsValid(rangeFrom) && fnsIsValid(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" }),
@@ -273,44 +273,15 @@ class RangePicker extends PureComponent {
         type
       } = value;
       const modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
-      const selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [from, {
-        from,
-        to
-      }] : [void 0, {
-        from: void 0,
-        to: void 0
-      }];
+      const selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [legacyParse(from), {
+        from: legacyParse(from),
+        to: legacyParse(to)
+      }] : [];
       const parsedLeft = legacyParse(left.month);
       const parsedRight = legacyParse(right.month);
       const adjacentMonths = forceAdjacentMonths || fnsIsSameMonth(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,
-          showOutsideDay: 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), 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}`);
     };
     this.renderTimePicker = (side) => {
       const {

package/dist/RangePicker/utils.d.ts

@@ -1,6 +1,6 @@
-import { Modifiers } from 'react-day-picker';
+import { Matcher } from 'react-day-picker';
 import { DateRange, NullableDateLimit } from '../date.types';
 import { State } from './RangePicker.types';
 export declare const getDisabledTimeOptions: (initialDay: string | Date | undefined, granularity: string, initialLowerLimit?: NullableDateLimit, initialUpperLimit?: NullableDateLimit, is12HoursClock?: boolean) => number[];
 export declare const getSidesState: (value: DateRange, forceAdjacentMonths?: boolean) => State;
-export declare const getModifiers: (from: NullableDateLimit | undefined, to: NullableDateLimit | undefined, enteredTo: NullableDateLimit | undefined) => Modifiers;
+export declare const getModifiers: (from: NullableDateLimit | undefined, to: NullableDateLimit | undefined, enteredTo: NullableDateLimit | undefined) => Record<string, Matcher | undefined>;

package/dist/RangePicker/utils.js

@@ -122,6 +122,12 @@ const getSidesState = (value, forceAdjacentMonths) => {
     }
   };
 };
+const toDate = (value) => {
+  if (value === null || value === void 0) {
+    return void 0;
+  }
+  return value instanceof Date ? value : legacyParse(value);
+};
 const getModifiers = (from, to, enteredTo) => {
   const isSelecting = from && !to && enteredTo;
   const enteredStart = isSelecting ? fnsMin([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
@@ -133,15 +139,14 @@ const getModifiers = (from, to, enteredTo) => {
   const startModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? void 0 : from;
   const endModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? from : to;
   return {
-    start: startModifier,
-    end: endModifier,
-    entered,
-    outside: void 0,
+    start: toDate(startModifier),
+    end: toDate(endModifier),
+    entered: typeof entered === "function" ? entered : toDate(entered),
     today: NOW,
-    "entered-start": enteredStart,
-    "entered-end": enteredEnd,
-    "initial-entered": !endModifier ? startModifier : void 0,
-    initial: !entered && !endModifier ? startModifier : void 0
+    "entered-start": toDate(enteredStart),
+    "entered-end": toDate(enteredEnd),
+    "initial-entered": !endModifier ? toDate(startModifier) : void 0,
+    initial: !entered && !endModifier ? toDate(startModifier) : void 0
   };
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -43,25 +43,25 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-badge": "^2.0.0",
-    "@synerise/ds-button": "^2.0.0",
-    "@synerise/ds-button-group": "^2.0.0",
-    "@synerise/ds-date-picker": "^2.0.0",
-    "@synerise/ds-dropdown": "^2.0.0",
-    "@synerise/ds-form-field": "^2.0.0",
-    "@synerise/ds-icon": "^2.0.0",
-    "@synerise/ds-inline-edit": "^2.0.0",
-    "@synerise/ds-input": "^2.0.0",
-    "@synerise/ds-input-number": "^2.0.0",
-    "@synerise/ds-list-item": "^2.0.0",
-    "@synerise/ds-manageable-list": "^2.0.0",
+    "@synerise/ds-badge": "^2.0.1",
+    "@synerise/ds-button": "^2.0.1",
+    "@synerise/ds-button-group": "^2.0.1",
+    "@synerise/ds-date-picker": "^2.0.2",
+    "@synerise/ds-dropdown": "^2.0.2",
+    "@synerise/ds-form-field": "^2.0.1",
+    "@synerise/ds-icon": "^2.1.0",
+    "@synerise/ds-inline-edit": "^2.0.2",
+    "@synerise/ds-input": "^2.0.2",
+    "@synerise/ds-input-number": "^2.0.2",
+    "@synerise/ds-list-item": "^2.0.1",
+    "@synerise/ds-manageable-list": "^2.0.2",
     "@synerise/ds-popover": "^2.0.0",
-    "@synerise/ds-scrollbar": "^2.0.0",
-    "@synerise/ds-select": "^2.0.1",
-    "@synerise/ds-slider": "^2.0.0",
-    "@synerise/ds-tag": "^2.0.0",
-    "@synerise/ds-time-picker": "^2.0.0",
-    "@synerise/ds-tooltip": "^2.0.0",
+    "@synerise/ds-scrollbar": "^2.0.1",
+    "@synerise/ds-select": "^2.0.3",
+    "@synerise/ds-slider": "^2.0.1",
+    "@synerise/ds-tag": "^2.0.1",
+    "@synerise/ds-time-picker": "^2.0.2",
+    "@synerise/ds-tooltip": "^2.0.1",
     "@synerise/ds-utils": "^2.0.0",
     "date-fns": "^2.16.1",
     "date-fns-tz": "1.1.4",
@@ -78,7 +78,7 @@
     "lodash.reverse": "^4.0.1",
     "lodash.values": "^4.3.0",
     "ramda": "^0.27.0",
-    "react-day-picker": "^7.4.8",
+    "react-day-picker": "^10.0.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
@@ -102,5 +102,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a57eb7eaf98318b364468368d1aa4fd9fa6a6dc8"
+  "gitHead": "788eba77544b291f7e938864a3994df4b4d904e2"
 }