@synerise/ds-date-range-picker 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
 ## [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

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
@@ -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`
 
@@ -196,9 +196,9 @@ 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
+- `date-fns ^2` — date arithmetic. 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)
@@ -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/dist/RawDateRangePicker.js

@@ -16,7 +16,8 @@ import { isLifetime } from "./RelativeRangePicker/Elements/RangeDropdown/RangeDr
 import RelativeRangePicker from "./RelativeRangePicker/RelativeRangePicker.js";
 import { MODES, ALL_TIME, RELATIVE, ABSOLUTE, RELATIVE_PRESETS, ABSOLUTE_PRESETS, CUSTOM_RANGE_KEY } from "./constants.js";
 import relativeToAbsolute from "./dateUtils/relativeToAbsolute.js";
-import { normalizeRange, getDefaultTexts, toIsoString } from "./utils.js";
+import { normalizeRange, getDefaultTexts } from "./utils.js";
+import { toIsoString } from "@synerise/ds-core";
 const isRelative = (dateRange) => {
   const isLegacyCustom = Object.keys(dateRange).includes("key") && dateRange.key === void 0;
   return dateRange.key && (RELATIVE_PRESETS.map((preset) => preset.key).includes(dateRange.key) || dateRange.key === CUSTOM_RANGE_KEY) || isLegacyCustom;

package/dist/utils.d.ts

@@ -4,7 +4,16 @@ import { DateRange } from './date.types';
 import { default as END_OF } from './dateUtils/endOf';
 import { default as START_OF } from './dateUtils/startOf';
 export { START_OF, END_OF };
-export declare function toIsoString(date: Date, timeZone?: string | undefined): string;
+/**
+ * Re-exported rather than implemented here. This package used to carry its own copy, which took
+ * `Math.abs(offset) % 60` of an offset in *milliseconds* — so every zone that is not a whole number
+ * of hours ahead of UTC (India, Adelaide, Kathmandu, Chatham, Newfoundland) encoded as `:00`
+ * minutes. It also looked the offset up against the date's UTC fields rather than the wall clock it
+ * carries, which picked the wrong side of a DST transition.
+ *
+ * Kept exported because `utils` is part of this package's public surface (`export * as utils`).
+ */
+export { toIsoString } from '@synerise/ds-core';
 export declare function toIsoStringWithoutZone(date: Date): string;
 export declare const normalizeRange: (range: DateRange) => DateRange;
 export declare const getDefaultTexts: (intl: IntlShape, disableDefault?: boolean, texts?: Partial<Texts>) => Texts;

package/dist/utils.js

@@ -1,4 +1,3 @@
-import { getTimezoneOffset } from "date-fns-tz";
 import fnsMax from "date-fns/max";
 import fnsMin from "date-fns/min";
 import omit from "lodash.omit";
@@ -6,20 +5,13 @@ import { ABSOLUTE, RELATIVE, CUSTOM_RANGE_KEY } from "./constants.js";
 import ADD from "./dateUtils/add.js";
 import END_OF from "./dateUtils/endOf.js";
 import START_OF from "./dateUtils/startOf.js";
+import { toIsoString } from "@synerise/ds-core";
 const rmvTZOffset = (dateString) => {
   const date = dateString.toString();
   const finalDate = date.replace(/[+-]\d\d:\d\d$/, "");
   return finalDate;
 };
 const pad = (num) => (num < 10 ? "0" : "") + num;
-function toIsoString(date, timeZone = "UTC") {
-  if (!timeZone) {
-    return new Date(date).toISOString();
-  }
-  const timeZoneOffset = getTimezoneOffset(timeZone, date);
-  const dif = timeZoneOffset >= 0 ? "+" : "-";
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}${dif}${pad(Math.floor(Math.abs(timeZoneOffset) / 60 / 60 / 1e3))}:${pad(Math.abs(timeZoneOffset) % 60)}`;
-}
 function toIsoStringWithoutZone(date) {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -43,28 +43,27 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@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.1",
-    "@synerise/ds-dropdown": "^2.0.1",
-    "@synerise/ds-form-field": "^2.0.1",
+    "@synerise/ds-badge": "^2.0.2",
+    "@synerise/ds-button": "^2.0.2",
+    "@synerise/ds-button-group": "^2.0.2",
+    "@synerise/ds-date-picker": "^2.0.3",
+    "@synerise/ds-dropdown": "^2.0.3",
+    "@synerise/ds-form-field": "^2.0.2",
     "@synerise/ds-icon": "^2.1.0",
-    "@synerise/ds-inline-edit": "^2.0.1",
-    "@synerise/ds-input": "^2.0.1",
-    "@synerise/ds-input-number": "^2.0.1",
-    "@synerise/ds-list-item": "^2.0.1",
-    "@synerise/ds-manageable-list": "^2.0.1",
-    "@synerise/ds-popover": "^2.0.0",
+    "@synerise/ds-inline-edit": "^2.0.3",
+    "@synerise/ds-input": "^2.0.3",
+    "@synerise/ds-input-number": "^2.0.3",
+    "@synerise/ds-list-item": "^2.0.2",
+    "@synerise/ds-manageable-list": "^2.1.0",
+    "@synerise/ds-popover": "^2.0.1",
     "@synerise/ds-scrollbar": "^2.0.1",
-    "@synerise/ds-select": "^2.0.2",
-    "@synerise/ds-slider": "^2.0.1",
-    "@synerise/ds-tag": "^2.0.1",
-    "@synerise/ds-time-picker": "^2.0.1",
-    "@synerise/ds-tooltip": "^2.0.1",
+    "@synerise/ds-select": "^2.0.4",
+    "@synerise/ds-slider": "^2.0.2",
+    "@synerise/ds-tag": "^2.0.2",
+    "@synerise/ds-time-picker": "^2.0.3",
+    "@synerise/ds-tooltip": "^2.0.2",
     "@synerise/ds-utils": "^2.0.0",
     "date-fns": "^2.16.1",
-    "date-fns-tz": "1.1.4",
     "dayjs": "^1.8.35",
     "lodash.clonedeep": "^4.5.0",
     "lodash.flatten": "^4.4.0",
@@ -78,7 +77,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 +101,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "1dc97a2bae9f1d20c3f35e6672d059d502c90d1a"
+  "gitHead": "e0dced8fd3a1194eff2fafc1b7e385b29238af88"
 }