@synerise/ds-date-picker 2.0.3 → 2.1.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@2.1.0...@synerise/ds-date-picker@2.1.1) (2026-09-16)
+
+### Bug Fixes
+
+- **date-picker:** keep the local clock when a day click crosses a DST boundary ([81fb588](https://github.com/Synerise/synerise-design/commit/81fb5883286faa1a938d3ec5909a1e48a6cb68b7))
+
+# [2.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@2.0.3...@synerise/ds-date-picker@2.1.0) (2026-09-10)
+
+### 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.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@2.0.2...@synerise/ds-date-picker@2.0.3) (2026-09-08)
 
 **Note:** Version bump only for package @synerise/ds-date-picker

package/CLAUDE.md

@@ -1,6 +1,6 @@
 # DatePicker (`@synerise/ds-date-picker`)
 
-> Single-date picker with a dropdown calendar, optional time picker, quick-pick presets, and a formatted text input trigger — built on `react-day-picker` v10 and `date-fns` 2.
+> Single-date picker with a dropdown calendar, optional time picker, quick-pick presets, and a formatted text input trigger — built on `react-day-picker` v10 and `date-fns` 4.
 
 ## Package structure
 
@@ -16,8 +16,8 @@ src/
   Elements/
     DayPicker/                — calendar grid (react-day-picker wrapper)
     MonthPicker/              — 12-month grid; clicking title switches to YearPicker
-    YearPicker/               — decade grid; clicking title switches to DecadePicker
-    DecadePicker/             — century grid
+    YearPicker/               — the decade's ten years; clicking title switches to DecadePicker
+    DecadePicker/             — century grid, plus a step cell either side
     TimePicker/               — HH:MM:SS column selector with prev/next day navigation
     PickerInput/              — formatted text input trigger (uses ds-input)
     Footer/                   — Apply / Now / Date / Time mode-switch buttons
@@ -27,10 +27,10 @@ src/
     GridPicker/               — shared grid layout used by Month/Year/DecadePicker
   utils/
     getDefaultTexts.tsx       — merges consumer texts with react-intl defaults
-  fns.tsx                     — date-fns v2 wrappers
+  fns.tsx                     — date-fns re-exports (named, from the package root)
   format.ts                   — fnsFormat wrapper
   localeUtils.ts              — weekday/month name tables; adapted into react-day-picker formatters/labels
-  utils.ts                    — changeDayWithHoursPreserved and other helpers
+  utils.ts                    — range / getDecadeRange / getCenturyRange helpers
   index.ts                    — public exports
 ```
 
@@ -60,7 +60,6 @@ src/
 | `quickPicks` | `QuickPick[]` | `undefined` | Preset date buttons rendered in a left column beside the calendar. |
 | `texts` | `Partial<Texts>` | `undefined` | Override i18n strings. |
 | `valueFormatOptions` | `DateToFormatOptions` | `undefined` | Format options for displaying the selected date in the input. |
-| `format` | `string` | `undefined` | **Deprecated** — use `valueFormatOptions` instead. |
 | `popoverPlacement` | `'topLeft' \| 'topCenter' \| 'topRight' \| 'bottomLeft' \| 'bottomCenter' \| 'bottomRight'` | `undefined` | Dropdown placement. |
 | `prefixel` | `ReactNode` | `undefined` | Content shown before the date value in the input. |
 | `suffixel` | `ReactNode` | `undefined` | Content shown after the date value in the input. |
@@ -127,9 +126,9 @@ import { RawDatePicker } from '@synerise/ds-date-picker';
 
 ## Key dependencies
 
-- `react-day-picker` v10 — calendar grid and day modifiers (brings its own `date-fns` 4 + `@date-fns/tz`, isolated from this package's `date-fns` 2)
-- `date-fns` 2.16.1 — all date arithmetic (pinned version)
-- `@date-fns/upgrade` — `legacyParse` compat shim for date-fns v1→v2 migration in `RawDatePicker`
+- `react-day-picker` v10 — calendar grid and day modifiers (shares this package's `date-fns` 4, plus `@date-fns/tz`)
+- `date-fns` ^4 — all date arithmetic, imported by name from the package root
+- Loosely-typed date inputs are normalised by `src/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, which only `parseISO` does
 - `@synerise/ds-dropdown` — wraps `RawDatePicker` as a popover triggered by `PickerInput`
 - `@synerise/ds-input` — base for `PickerInput`
 - `react-intl` (peer dep) — default label strings; `IntlProvider` required in tree
@@ -141,10 +140,10 @@ import { RawDatePicker } from '@synerise/ds-date-picker';
 - **`readOnly` short-circuits the Dropdown** — when `readOnly={true}`, the component renders only the `PickerInput` (or `renderTrigger` output) with no calendar attached.
 - **Mode switching** — clicking the month name in `DayPicker` switches to `'month'` mode; clicking the year name switches to `'year'` mode. The back navigation in those modes returns to `'date'`. Selecting a day when `showTime=true` switches to `'time'` mode automatically.
 - **`useStartOfDay` / `useEndOfDay`** — applied on day click, before `onValueChange` fires. `useStartOfDay` takes precedence if both are set (implemented as `if/else if` in `handleDayClick`).
-- **Time preserved on day change** — when changing the day while already having a time selected (`changed=true`), hours/minutes/seconds from the previous value are preserved (`changeDayWithHoursPreserved`).
+- **Time preserved on day change** — clicking a day rewrites only the calendar fields of the current `value` (`setYear`/`setMonth`/`setDate`), so its local clock carries over. Local fields are the whole mechanism, and they are what makes this correct across a DST boundary; do not reintroduce a seconds-difference round-trip here. The removed `changeDayWithHoursPreserved` did exactly that and multiplied a calendar-day count by a hard-coded `86400`, so any pair of dates straddling a transition came out an hour wrong — and with `useStartOfDay`/`useEndOfDay` that hour crossed midnight and moved the day.
 - **Apply vs onChange** — `onValueChange` fires on every day/time interaction. `onApply` fires only when the user explicitly clicks Apply (or selects a quick pick), and also closes the dropdown.
 - **`dropdownProps.open`** — if provided, it OR-s with internal `dropVisible` state: `open={(dropdownProps?.open || dropVisible) && !disabled}`. This means both sources can open the dropdown independently.
-- **`format` is deprecated** — use `valueFormatOptions: DateToFormatOptions` (from `@synerise/ds-core`) for display formatting.
+- **`format` has been removed** — use `valueFormatOptions: DateToFormatOptions` (from `@synerise/ds-core`). It took a token pattern, which no consumer passed and which disagreed with `formatValue` for every locale. `PickerInput` now renders a `Date` and an ISO string identically; whether a value is an *instant* is signalled by `isInstantValue`, not inferred from its runtime type.
 - **`inputPlaceholder` i18n default is empty** — `getDefaultTexts` calls `intl.formatMessage({ id: 'DS.DATE-PICKER.SELECT-DATE' })` with no `defaultMessage`, so the placeholder is empty if the message is not in the IntlProvider's messages.
 
 ## react-day-picker v10 notes
@@ -168,3 +167,22 @@ import { RawDatePicker } from '@synerise/ds-date-picker';
 - **v10 renders twice on mount**, so `disabledDates` is evaluated twice per day. It is a pure
   predicate, so this is a cost rather than a correctness issue; assert on distinct dates, not on
   call counts.
+
+## Month, year and decade grids
+
+The three grid views share `Elements/GridPicker` and follow the Figma `Date Picker` states
+(`Months`, `Year`, `Years range`):
+
+- **Every reachable cell carries a chip** — `grey-100` at rest, `grey-200` + `blue-600` text on
+  hover, `blue-600` + white when selected, at regular weight. A **disabled** cell drops the chip
+  and keeps only a `grey-400` label, matching the day grid, where the chip likewise marks a day as
+  reachable.
+- **Layout** is three columns on a 24px inset with an 8px column gap and 32px rows spread by
+  `align-content: space-between`, so the same rules give Figma's spacing in `DatePicker`'s 304px
+  panel and fit `DateRangePicker`'s 290px side.
+- **`YearPicker` renders the decade's ten years and nothing more.** The `±1 decade` cells it used
+  to append are gone — the navbar's chevrons already step by ten years. `DecadePicker` keeps its
+  two `cell--outside` cells because they are the only way to leave the century, and the design
+  draws them like any other cell.
+- **`Navbar` takes `singleStep`** for these views: one step per side, drawn as a single angle in
+  the outer slot the day view's double angle occupies, with the inner slot left out.

package/dist/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: ({ autoFocus, disabled, texts, format, valueFormatOptions, value, onApply, showTime, onValueChange, onClear, errorText, popoverPlacement, prefixel, error, onDropdownVisibleChange, dropdownProps, suffixel, hideNow, readOnly, renderTrigger, inputProps, allowClear, overlayHTMLAttributes, triggerHTMLAttributes, ...rest }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: ({ autoFocus, disabled, texts, valueFormatOptions, value, onApply, showTime, onValueChange, onClear, errorText, popoverPlacement, prefixel, error, onDropdownVisibleChange, dropdownProps, suffixel, hideNow, readOnly, renderTrigger, inputProps, allowClear, overlayHTMLAttributes, triggerHTMLAttributes, ...rest }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/dist/DatePicker.js

@@ -11,7 +11,6 @@ const DatePicker = ({
   autoFocus,
   disabled,
   texts,
-  format,
   valueFormatOptions,
   value,
   onApply,
@@ -61,7 +60,7 @@ const DatePicker = ({
   }, [onClear]);
   const trigger = renderTrigger?.() || /* @__PURE__ */ jsx(PickerInput, { ...inputProps, disabled, allowClear, autoFocus: !disabled && autoFocus, value: selectedDate, showTime, onClick: !readOnly ? () => {
     setDropVisible(!dropVisible);
-  } : void 0, format, valueFormatOptions, onClear: handleClear, placeholder: allTexts.inputPlaceholder, prefixel, suffixel, clearTooltip: allTexts.clearTooltip, highlight: !!dropVisible && !disabled, error, errorText, readOnly, triggerHTMLAttributes });
+  } : void 0, valueFormatOptions, onClear: handleClear, placeholder: allTexts.inputPlaceholder, prefixel, suffixel, clearTooltip: allTexts.clearTooltip, highlight: !!dropVisible && !disabled, error, errorText, readOnly, triggerHTMLAttributes });
   return readOnly ? trigger : /* @__PURE__ */ jsx(Dropdown, { overlay: /* @__PURE__ */ jsx(OverlayContainer, { "data-testid": "date-picker-overlay-container", ...overlayHTMLAttributes, children: /* @__PURE__ */ jsx(RawDatePicker, { ...rest, showTime, texts: allTexts, onApply: onApplyCallback, onValueChange: onValueChangeCallback, value: selectedDate, hideNow }) }), trigger: ["click"], placement: popoverPlacement, disabled, size: "min-match-trigger", asChild: false, ...dropdownProps, onOpenChange: handleOpenChange, open: (dropdownProps?.open || dropVisible) && !disabled, popoverProps: {
     testId: "date-picker",
     ...dropdownProps?.popoverProps

package/dist/DatePicker.types.d.ts

@@ -16,10 +16,6 @@ export type DatePickerProps = {
     disabledMinutes?: number[];
     disabledSeconds?: number[];
     dropdownProps?: Partial<Omit<DropdownSharedProps, 'children' | 'overlay'>>;
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     /**
      * @deprecated - will be dropped in 1.0

package/dist/Elements/DayPicker/DayPicker.js

@@ -3,28 +3,7 @@ import React from "react";
 import { SelectionState, DayFlag, UI } from "react-day-picker";
 import { injectIntl } from "react-intl";
 import { useDataFormat } from "@synerise/ds-core";
-import "date-fns/addDays";
-import fnsAddMonths from "date-fns/addMonths";
-import "date-fns/addSeconds";
-import fnsAddYears from "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-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 { addMonths, addYears } from "date-fns";
 import fnsFormat from "../../format.js";
 import localeUtils from "../../localeUtils.js";
 import Navbar from "../Navbar/Navbar.js";
@@ -102,7 +81,7 @@ const Picker = (props) => {
       /* @__PURE__ */ jsx(Link, { "data-testid": "datapicker-nav-title-monthpicker-link", onClick: onMonthNameClick, children: fnsFormat(month, "MMM", intl.locale) }),
       "  ",
       /* @__PURE__ */ jsx(Link, { "data-testid": "datapicker-nav-title-yearpicker-link", onClick: onYearNameClick, children: fnsFormat(month, "yyyy", intl.locale) })
-    ] }), onLongPrev: hideLongPrev ? void 0 : () => onMonthChange && onMonthChange(fnsAddYears(month, -1)), onShortPrev: hideShortPrev ? void 0 : () => onMonthChange && onMonthChange(fnsAddMonths(month, -1)), onLongNext: hideLongNext ? void 0 : () => onMonthChange && onMonthChange(fnsAddYears(month, 1)), onShortNext: hideShortNext ? void 0 : () => onMonthChange && onMonthChange(fnsAddMonths(month, 1)) }, "head"),
+    ] }), onLongPrev: hideLongPrev ? void 0 : () => onMonthChange && onMonthChange(addYears(month, -1)), onShortPrev: hideShortPrev ? void 0 : () => onMonthChange && onMonthChange(addMonths(month, -1)), onLongNext: hideLongNext ? void 0 : () => onMonthChange && onMonthChange(addYears(month, 1)), onShortNext: hideShortNext ? void 0 : () => onMonthChange && onMonthChange(addMonths(month, 1)) }, "head"),
     /* @__PURE__ */ jsx(
       DayPicker$1,
       {

package/dist/Elements/DayPicker/DayPicker.types.d.ts

@@ -28,7 +28,6 @@ export type DayPickerProps = {
     /** Day-of-month predicates or dates keyed by modifier name; each becomes a `DayPicker-Day--*` class. */
     modifiers?: Record<string, Matcher | Matcher[] | undefined>;
     localeUtils?: DateLocaleUtils;
-    title?: string;
     renderDay?: (day: Date) => React.ReactNode;
     renderNavbar?: (props: DayPickerProps) => React.ReactNode;
     onDayClick?: (day: Date, modifiers: Modifiers, e: React.MouseEvent) => void;

package/dist/Elements/DecadePicker/DecadePicker.js

@@ -1,29 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import range from "lodash.range";
 import React from "react";
-import { legacyParse } from "@date-fns/upgrade/v2";
-import "date-fns/addDays";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import fnsAddYears from "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import fnsGetYear from "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-import "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import fnsSetYear from "date-fns/setYear";
-import "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import { addYears, getYear, setYear } from "date-fns";
+import toDateValue from "../../toDateValue.js";
 import { getCenturyRange, getDecadeRange } from "../../utils.js";
 import GridPicker from "../GridPicker/GridPicker.js";
 import Navbar from "../Navbar/Navbar.js";
@@ -35,7 +14,7 @@ function getInitialState(props) {
 function getCells(cursor) {
   const startYear = getCenturyRange(cursor)[0];
   return range(0, 10).map((index) => {
-    const date = fnsAddYears(fnsSetYear(cursor, startYear), index * 10);
+    const date = addYears(setYear(cursor, startYear), index * 10);
     return {
       key: date.toISOString(),
       text: getDecadeRange(date).join("-")
@@ -51,7 +30,7 @@ class DecadePicker extends React.PureComponent {
         cursor
       } = this.state;
       this.setState({
-        cursor: fnsAddYears(cursor, -100)
+        cursor: addYears(cursor, -100)
       });
     };
     this.handleLongNext = () => {
@@ -59,7 +38,7 @@ class DecadePicker extends React.PureComponent {
         cursor
       } = this.state;
       this.setState({
-        cursor: fnsAddYears(cursor, 100)
+        cursor: addYears(cursor, 100)
       });
     };
     this.handleCellClick = (isoDate) => {
@@ -97,8 +76,8 @@ class DecadePicker extends React.PureComponent {
     const centuryRange = getCenturyRange(cursor);
     let cells = getCells(cursor);
     const valueCell = value ? cells.find((cell) => {
-      const valueYear = fnsGetYear(value);
-      const minYear = fnsGetYear(legacyParse(cell.key));
+      const valueYear = getYear(value);
+      const minYear = getYear(toDateValue(cell.key));
       const maxYear = minYear + 10;
       return valueYear >= minYear && valueYear < maxYear;
     }) : null;
@@ -112,7 +91,7 @@ class DecadePicker extends React.PureComponent {
       text: `${centuryRange[1] + 1}-${centuryRange[1] + 10}`,
       outside: true
     }];
-    return [/* @__PURE__ */ jsx(Navbar, { title: centuryRange.join("-"), onTitleClick, onLongPrev: this.handleLongPrev, onLongNext: this.handleLongNext }, "head"), /* @__PURE__ */ jsx(GridPicker, { selectedKey, cells, onCellClick: this.handleCellClick }, "body")];
+    return [/* @__PURE__ */ jsx(Navbar, { singleStep: true, title: centuryRange.join("-"), onTitleClick, onLongPrev: this.handleLongPrev, onLongNext: this.handleLongNext }, "head"), /* @__PURE__ */ jsx(GridPicker, { selectedKey, cells, onCellClick: this.handleCellClick }, "body")];
   }
 }
 export {

package/dist/Elements/GridPicker/GridPicker.styles.d.ts

@@ -1,2 +1,10 @@
-export declare const GridContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const CellContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * The month, year and decade grids: three columns of chips, laid out on the same 24px inset and
+ * 8px column gap the day grid uses, with the rows spread over whatever height the host gives the
+ * grid (304px in `DatePicker`, 290px in `DateRangePicker`'s side).
+ *
+ * Every cell carries a resting chip, so an empty trailing slot — the year grid holds ten years in
+ * a twelve-slot grid — is simply an absent cell rather than a blank chip.
+ */
+export declare const GridContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Elements/GridPicker/GridPicker.styles.js

@@ -1,12 +1,12 @@
 import styled from "styled-components";
-const GridContainer = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "GridPickerstyles__GridContainer",
-  componentId: "sc-i8w1ym-0"
-})(["display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;padding:0 8px;.cell{height:32px;margin:auto 8px;cursor:pointer;position:relative;vertical-align:middle;text-align:center;> div{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:16px;&:hover{background-color:", ";color:", ";}}&--selected{font-weight:500;}&--outside{color:", ";}&--disabled{cursor:default;color:", ";}}.cell--selected:not(.cell--disabled):not(.cell--outside){> div{background-color:", ";color:", ";&:hover{background-color:", ";}}}"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette.white, (props) => props.theme.palette["blue-600"]);
 const CellContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "GridPickerstyles__CellContainer",
-  componentId: "sc-i8w1ym-1"
+  componentId: "sc-i8w1ym-0"
 })([""]);
+const GridContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "GridPickerstyles__GridContainer",
+  componentId: "sc-i8w1ym-1"
+})(["display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:32px;align-content:space-between;column-gap:8px;padding:24px;font-size:13px;line-height:18px;.cell{cursor:pointer;> div{height:100%;display:flex;align-items:center;justify-content:center;border-radius:60px;background-color:", ";color:", ";&:hover{background-color:", ";color:", ";}}&--disabled{cursor:default;> div,> div:hover{background-color:transparent;color:", ";}}}.cell--selected:not(.cell--disabled){> div,> div:hover{background-color:", ";color:", ";}}"], (props) => props.theme.palette["grey-100"], (props) => props.theme.palette["grey-800"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette.white);
 export {
   CellContainer,
   GridContainer

package/dist/Elements/MonthPicker/MonthPicker.js

@@ -2,30 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import range from "lodash.range";
 import React from "react";
 import { injectIntl } from "react-intl";
-import { legacyParse } from "@date-fns/upgrade/v2";
-import "date-fns/addDays";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import fnsAddYears from "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import fnsEndOfMonth from "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import "date-fns/getYear";
-import fnsIsAfter from "date-fns/isAfter";
-import fnsIsBefore from "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-import fnsIsSameMonth from "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import fnsSetMonth from "date-fns/setMonth";
-import "date-fns/setYear";
-import "date-fns/startOfDay";
-import fnsStartOfMonth from "date-fns/startOfMonth";
+import { addYears, isSameMonth, startOfMonth, setMonth, endOfMonth, isAfter, isBefore } from "date-fns";
 import fnsFormat from "../../format.js";
+import toDateValue from "../../toDateValue.js";
 import GridPicker from "../GridPicker/GridPicker.js";
 import Navbar from "../Navbar/Navbar.js";
 import YearPicker from "../YearPicker/YearPicker.js";
@@ -36,14 +15,14 @@ function getInitialState(props) {
   };
 }
 function getCells(cursor, min, max, locale) {
-  const minDate = min ? fnsStartOfMonth(min) : fnsSetMonth(cursor, 0);
-  const maxDate = max ? fnsEndOfMonth(max) : fnsSetMonth(cursor, 12);
+  const minDate = min ? startOfMonth(min) : setMonth(cursor, 0);
+  const maxDate = max ? endOfMonth(max) : setMonth(cursor, 12);
   return range(0, 12).map((index) => {
-    const date = fnsSetMonth(cursor, index);
+    const date = setMonth(cursor, index);
     return {
       key: date.toISOString(),
       text: fnsFormat(date, "MMM", locale),
-      disabled: fnsIsAfter(date, maxDate) || fnsIsBefore(date, minDate)
+      disabled: isAfter(date, maxDate) || isBefore(date, minDate)
     };
   });
 }
@@ -56,7 +35,7 @@ class MonthPicker extends React.PureComponent {
         cursor
       } = this.state;
       this.setState({
-        cursor: fnsAddYears(cursor, -1)
+        cursor: addYears(cursor, -1)
       });
     };
     this.handleLongNext = () => {
@@ -64,7 +43,7 @@ class MonthPicker extends React.PureComponent {
         cursor
       } = this.state;
       this.setState({
-        cursor: fnsAddYears(cursor, 1)
+        cursor: addYears(cursor, 1)
       });
     };
   }
@@ -90,7 +69,7 @@ class MonthPicker extends React.PureComponent {
       onChange
     } = this.props;
     const cells = getCells(cursor, min, max, intl?.locale);
-    const valueCell = value ? cells.find((cell) => fnsIsSameMonth(value, legacyParse(cell.key))) : null;
+    const valueCell = value ? cells.find((cell) => isSameMonth(value, toDateValue(cell.key))) : null;
     const selectedKey = valueCell ? valueCell.key : null;
     if (yearMode) {
       return /* @__PURE__ */ jsx(YearPicker, { value: cursor, onChange: (changedDate) => this.setState({
@@ -98,7 +77,7 @@ class MonthPicker extends React.PureComponent {
         yearMode: false
       }) });
     }
-    return [/* @__PURE__ */ jsx(Navbar, { onTitleClick: () => this.setState({
+    return [/* @__PURE__ */ jsx(Navbar, { singleStep: true, onTitleClick: () => this.setState({
       yearMode: true
     }), title: fnsFormat(cursor, "yyyy"), onLongPrev: this.handleLongPrev, onLongNext: this.handleLongNext }, "head"), /* @__PURE__ */ jsx(GridPicker, { selectedKey, cells, onCellClick: (isoDate) => onChange(new Date(isoDate)) }, "body")];
   }

package/dist/Elements/Navbar/Navbar.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { v4 } from "uuid";
-import Icon, { DoubleAngleLeftS, AngleLeftS, AngleRightS, DoubleAngleRightS } from "@synerise/ds-icon";
+import Icon, { AngleLeftS, DoubleAngleLeftS, AngleRightS, DoubleAngleRightS } from "@synerise/ds-icon";
 import { Container, ArrowContainer, NavButton, ArrowPlaceholder, Text, Link } from "./Navbar.styles.js";
 const Navbar = (props) => {
   const {
@@ -13,17 +13,18 @@ const Navbar = (props) => {
     onShortPrev,
     onShortNext,
     inactivePrev,
-    inactiveNext
+    inactiveNext,
+    singleStep
   } = props;
   return /* @__PURE__ */ jsxs(Container, { className: "ds-date-picker-nav", children: [
     /* @__PURE__ */ jsxs(ArrowContainer, { children: [
-      onLongPrev && !hidePrev ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-long-prev", disabled: inactivePrev, mode: "single-icon", role: "button", type: "ghost", onClick: onLongPrev, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DoubleAngleLeftS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder long-prev" }),
-      onShortPrev && !hidePrev ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-short-prev", disabled: inactivePrev, mode: "single-icon", role: "button", type: "ghost", onClick: onShortPrev, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleLeftS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder short-prev" })
+      onLongPrev && !hidePrev ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-long-prev", disabled: inactivePrev, mode: "single-icon", role: "button", type: "ghost", onClick: onLongPrev, children: /* @__PURE__ */ jsx(Icon, { component: singleStep ? /* @__PURE__ */ jsx(AngleLeftS, {}) : /* @__PURE__ */ jsx(DoubleAngleLeftS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder long-prev" }),
+      !singleStep && (onShortPrev && !hidePrev ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-short-prev", disabled: inactivePrev, mode: "single-icon", role: "button", type: "ghost", onClick: onShortPrev, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleLeftS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder short-prev" }))
     ] }),
     /* @__PURE__ */ jsx(Text, { children: onTitleClick ? /* @__PURE__ */ jsx(Link, { onClick: onTitleClick, children: title }) : title }),
     /* @__PURE__ */ jsxs(ArrowContainer, { children: [
-      onShortNext && !hideNext ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-short-next", disabled: inactiveNext, mode: "single-icon", role: "button", type: "ghost", onClick: onShortNext, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder short-next" }),
-      onLongNext && !hideNext ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-long-next", disabled: inactiveNext, mode: "single-icon", role: "button", type: "ghost", onClick: onLongNext, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(DoubleAngleRightS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder long-next" })
+      !singleStep && (onShortNext && !hideNext ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-short-next", disabled: inactiveNext, mode: "single-icon", role: "button", type: "ghost", onClick: onShortNext, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder short-next" })),
+      onLongNext && !hideNext ? /* @__PURE__ */ jsx(NavButton, { "data-testid": "datapicker-long-next", disabled: inactiveNext, mode: "single-icon", role: "button", type: "ghost", onClick: onLongNext, children: /* @__PURE__ */ jsx(Icon, { component: singleStep ? /* @__PURE__ */ jsx(AngleRightS, {}) : /* @__PURE__ */ jsx(DoubleAngleRightS, {}) }) }, v4()) : /* @__PURE__ */ jsx(ArrowPlaceholder, { className: "arrow-placeholder long-next" })
     ] })
   ] });
 };

package/dist/Elements/Navbar/Navbar.types.d.ts

@@ -8,6 +8,12 @@ export type NavbarProps = {
     onTitleClick?: () => void;
     onLongPrev?: () => void;
     onLongNext?: () => void;
+    /**
+     * One step per side instead of two: the month, year and decade grids move by a single unit,
+     * so the step keeps the outer position the double angle holds in the day view but is drawn as
+     * a single angle, and the unused inner slot is left out rather than held open by a placeholder.
+     */
+    singleStep?: boolean;
     onShortPrev?: () => void;
     onShortNext?: () => void;
 };

package/dist/Elements/PickerInput/PickerInput.d.ts

@@ -2,7 +2,6 @@ import { default as React } from 'react';
 declare const PickerInput: React.ForwardRefExoticComponent<Pick<import('@synerise/ds-input').InputProps, "autoResize"> & {
     autoFocus?: boolean;
     size?: import('@synerise/ds-input').InputSize;
-    format?: string;
     valueFormatOptions?: import('@synerise/ds-core').DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;

package/dist/Elements/PickerInput/PickerInput.js

@@ -1,16 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { parseISO, isValid } from "date-fns";
 import { forwardRef, useState, useCallback, useMemo } from "react";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import { useDataFormat, useTheme, getDefaultDataTimeOptions } from "@synerise/ds-core";
 import Icon, { Close3S, CalendarM } from "@synerise/ds-icon";
 import Tooltip from "@synerise/ds-tooltip";
-import fnsFormat from "../../format.js";
 import { ClearIconWrapper, DefaultIconWrapper, PickerInputWrapper, Prefixel, Container, Input, Suffixel } from "./PickerInput.styles.js";
 const PickerInput = forwardRef(({
   disabled,
   readOnly,
   value,
-  format: dateFormat,
   valueFormatOptions,
   onChange,
   showTime,
@@ -33,17 +31,15 @@ const PickerInput = forwardRef(({
     if (!value) {
       return "";
     }
-    if (dateFormat) {
-      return fnsFormat(legacyParse(value), dateFormat);
-    }
-    if (typeof value === "string") {
-      return fnsFormat(legacyParse(value), dateFormat || showTime ? "MMM d, yyyy, HH:mm" : "MMM d, yyyy");
+    const date = typeof value === "string" ? parseISO(value) : value;
+    if (!isValid(date)) {
+      return "";
     }
-    return formatValue(value, {
+    return formatValue(date, {
       ...getDefaultDataTimeOptions(showTime),
       ...valueFormatOptions
     });
-  }, [value, dateFormat, showTime, formatValue, valueFormatOptions]);
+  }, [value, showTime, formatValue, valueFormatOptions]);
   const handleApply = useCallback((date) => {
     if (!onChange) {
       return;

package/dist/Elements/PickerInput/PickerInput.types.d.ts

@@ -7,10 +7,6 @@ type InputProps = DatePickerProps['inputProps'];
 export type Props = InputProps & {
     autoFocus?: boolean;
     size?: InputSize;
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;

package/dist/Elements/QuickPicks/QuickPicks.js

@@ -2,31 +2,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { ButtonToggle } from "@synerise/ds-button";
 import { useDataFormat } from "@synerise/ds-core";
 import { Title } from "@synerise/ds-typography";
-import "date-fns/addDays";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import fnsIsSameDay from "date-fns/isSameDay";
-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 { isSameDay } from "date-fns";
 import { QuickPicksWrapper } from "./QuickPicks.styles.js";
 const quickPickMatchesValue = (item, value) => {
-  return value ? fnsIsSameDay(item.value, value) : false;
+  return value ? isSameDay(item.value, value) : false;
 };
 const QuickPicks = ({
   value,

package/dist/Elements/YearPicker/YearPicker.js

@@ -1,29 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
-import { legacyParse } from "@date-fns/upgrade/v2";
-import "date-fns/addDays";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import fnsAddYears from "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-import "date-fns/isSameMonth";
-import fnsIsSameYear from "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import fnsSetYear from "date-fns/setYear";
-import "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import { addYears, isSameYear, setYear } from "date-fns";
 import fnsFormat from "../../format.js";
+import toDateValue from "../../toDateValue.js";
 import { getDecadeRange } from "../../utils.js";
 import DecadePicker from "../DecadePicker/DecadePicker.js";
 import GridPicker from "../GridPicker/GridPicker.js";
@@ -37,7 +16,7 @@ function getInitialState(props) {
 function getCells(cursor) {
   const startYear = getDecadeRange(cursor)[0];
   return Array.from(Array(10)).map((_, index) => {
-    const date = fnsAddYears(fnsSetYear(cursor, startYear), index);
+    const date = addYears(setYear(cursor, startYear), index);
     return {
       key: date.toISOString(),
       text: fnsFormat(date, "yyyy")
@@ -53,7 +32,7 @@ class YearPicker extends React.PureComponent {
         cursor
       } = this.state;
       this.setState({
-        cursor: fnsAddYears(cursor, -10)
+        cursor: addYears(cursor, -10)
       });
     };
     this.handleLongNext = () => {
@@ -61,21 +40,13 @@ class YearPicker extends React.PureComponent {
         cursor
       } = this.state;
       this.setState({
-        cursor: fnsAddYears(cursor, 10)
+        cursor: addYears(cursor, 10)
       });
     };
     this.handleCellClick = (isoDate) => {
       const {
         onChange
       } = this.props;
-      if (isoDate === -1) {
-        this.handleLongPrev();
-        return;
-      }
-      if (isoDate === 1) {
-        this.handleLongNext();
-        return;
-      }
       onChange && onChange(new Date(isoDate));
     };
   }
@@ -97,18 +68,9 @@ class YearPicker extends React.PureComponent {
       value
     } = this.props;
     const decadeRange = getDecadeRange(cursor);
-    let cells = getCells(cursor);
-    const valueCell = value ? cells.find((cell) => fnsIsSameYear(value, legacyParse(cell.key))) : null;
+    const cells = getCells(cursor);
+    const valueCell = value ? cells.find((cell) => isSameYear(value, toDateValue(cell.key))) : null;
     const selectedKey = valueCell ? valueCell.key : null;
-    cells = [{
-      key: -1,
-      text: decadeRange[0] - 1,
-      outside: true
-    }, ...cells, {
-      key: 1,
-      text: decadeRange[1] + 1,
-      outside: true
-    }];
     if (decadeMode) {
       return /* @__PURE__ */ jsx(DecadePicker, { value: cursor, onChange: (selectedDecade) => this.setState({
         cursor: selectedDecade,
@@ -116,7 +78,7 @@ class YearPicker extends React.PureComponent {
       }) });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Navbar, { onTitleClick: () => this.setState({
+      /* @__PURE__ */ jsx(Navbar, { singleStep: true, onTitleClick: () => this.setState({
         decadeMode: true
       }), title: decadeRange.join("-"), onLongPrev: this.handleLongPrev, onLongNext: this.handleLongNext }, "head"),
       /* @__PURE__ */ jsx(GridPicker, { selectedKey, cells, onCellClick: this.handleCellClick }, "body")

package/dist/RawDatePicker/RawDatePicker.js

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React from "react";
 import { injectIntl } from "react-intl";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import { Container, ContentWrapper, PickerWrapper } from "../DatePicker.styles.js";
 import DayPicker from "../Elements/DayPicker/DayPicker.js";
 import { DayBackground, DayText, DayForeground } from "../Elements/DayPicker/DayPicker.styles.js";
@@ -10,30 +9,8 @@ import MonthPicker from "../Elements/MonthPicker/MonthPicker.js";
 import { QuickPicks } from "../Elements/QuickPicks/QuickPicks.js";
 import TimePicker from "../Elements/TimePicker/TimePicker.js";
 import YearPicker from "../Elements/YearPicker/YearPicker.js";
-import fnsAddDays from "date-fns/addDays";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import fnsEndOfDay from "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-import "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import fnsSetDate from "date-fns/setDate";
-import fnsSetMonth from "date-fns/setMonth";
-import fnsSetYear from "date-fns/setYear";
-import fnsStartOfDay from "date-fns/startOfDay";
-import fnsStartOfMonth from "date-fns/startOfMonth";
-import fnsFormat from "../format.js";
-import { changeDayWithHoursPreserved } from "../utils.js";
+import { setYear, setMonth, setDate, startOfDay, endOfDay, addDays, startOfMonth } from "date-fns";
+import toDateValue from "../toDateValue.js";
 import { getDefaultTexts } from "../utils/getDefaultTexts.js";
 const _RawDatePicker = class _RawDatePicker extends React.Component {
   constructor(props) {
@@ -42,24 +19,11 @@ const _RawDatePicker = class _RawDatePicker extends React.Component {
       const {
         onValueChange
       } = this.props;
-      const {
-        mode,
-        value: valueFromState
-      } = this.state;
-      if (mode === "date" && !!valueFromState && !!value) {
-        const dateToBeUpdated = changeDayWithHoursPreserved(valueFromState, value);
-        this.setState({
-          value: dateToBeUpdated,
-          changed: true
-        });
-        onValueChange && onValueChange(dateToBeUpdated);
-      } else {
-        this.setState({
-          value,
-          changed: true
-        });
-        onValueChange && onValueChange(value);
-      }
+      this.setState({
+        value,
+        changed: true
+      });
+      onValueChange && onValueChange(value);
     };
     this.handleDayMouseEnter = (day) => this.setState({
       enteredTo: day
@@ -69,7 +33,6 @@ const _RawDatePicker = class _RawDatePicker extends React.Component {
     });
     this.handleDayClick = (day, modifiers) => {
       const {
-        changed: isChanged,
         value
       } = this.state;
       const {
@@ -80,14 +43,14 @@ const _RawDatePicker = class _RawDatePicker extends React.Component {
       if (modifiers.disabled) {
         return;
       }
-      let nextDateWithCurrentTime = isChanged && value ? value : /* @__PURE__ */ new Date();
-      nextDateWithCurrentTime = fnsSetYear(nextDateWithCurrentTime, day.getFullYear());
-      nextDateWithCurrentTime = fnsSetMonth(nextDateWithCurrentTime, day.getMonth());
-      nextDateWithCurrentTime = fnsSetDate(nextDateWithCurrentTime, day.getDate());
+      let nextDateWithCurrentTime = value || /* @__PURE__ */ new Date();
+      nextDateWithCurrentTime = setYear(nextDateWithCurrentTime, day.getFullYear());
+      nextDateWithCurrentTime = setMonth(nextDateWithCurrentTime, day.getMonth());
+      nextDateWithCurrentTime = setDate(nextDateWithCurrentTime, day.getDate());
       if (useStartOfDay) {
-        this.handleChange(fnsStartOfDay(nextDateWithCurrentTime));
+        this.handleChange(startOfDay(nextDateWithCurrentTime));
       } else if (useEndOfDay) {
-        this.handleChange(fnsEndOfDay(nextDateWithCurrentTime));
+        this.handleChange(endOfDay(nextDateWithCurrentTime));
       } else {
         this.handleChange(nextDateWithCurrentTime);
       }
@@ -159,7 +122,7 @@ const _RawDatePicker = class _RawDatePicker extends React.Component {
       const {
         month
       } = this.state;
-      return /* @__PURE__ */ jsx(DayPicker, { fixedWeeks: true, showOutsideDays: true, canChangeMonth: false, disabledDays: disabledDates, selectedDays, month, title: fnsFormat(month, "MMM yyyy"), renderDay: this.renderDay, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, onMonthNameClick: () => this.handleModeSwitch("month"), onYearNameClick: () => this.handleModeSwitch("year"), onMonthChange: (selectedMonth) => this.handleMonthChange(selectedMonth, "date"), modifiers });
+      return /* @__PURE__ */ jsx(DayPicker, { fixedWeeks: true, showOutsideDays: true, canChangeMonth: false, disabledDays: disabledDates, selectedDays, month, renderDay: this.renderDay, onDayClick: this.handleDayClick, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, onMonthNameClick: () => this.handleModeSwitch("month"), onYearNameClick: () => this.handleModeSwitch("year"), onMonthChange: (selectedMonth) => this.handleMonthChange(selectedMonth, "date"), modifiers });
     };
     this.handleDaySwitch = (day) => {
       const {
@@ -179,15 +142,15 @@ const _RawDatePicker = class _RawDatePicker extends React.Component {
         disabledSeconds,
         disabledDates
       } = this.props;
-      const prevDay = fnsAddDays(legacyParse(value), -1);
-      const nextDay = fnsAddDays(legacyParse(value), 1);
+      const prevDay = addDays(toDateValue(value), -1);
+      const nextDay = addDays(toDateValue(value), 1);
       const inactivePrev = disabledDates ? disabledDates(prevDay) : false;
       const inactiveNext = disabledDates ? disabledDates(nextDay) : false;
       return /* @__PURE__ */ jsx(TimePicker, { value, onChange: this.handleChange, disabledHours, disabledMinutes, disabledSeconds, inactiveNext, inactivePrev, onShortNext: () => this.handleDaySwitch(nextDay), onShortPrev: () => this.handleDaySwitch(prevDay) });
     };
     this.state = {
       mode: "date",
-      month: fnsStartOfMonth(props.value || /* @__PURE__ */ new Date()),
+      month: startOfMonth(props.value || /* @__PURE__ */ new Date()),
       value: props.value,
       changed: false,
       enteredTo: void 0,
@@ -211,7 +174,7 @@ const _RawDatePicker = class _RawDatePicker extends React.Component {
     if (prevProps?.value !== value) {
       this.setState({
         value,
-        month: fnsStartOfMonth(value || /* @__PURE__ */ new Date()),
+        month: startOfMonth(value || /* @__PURE__ */ new Date()),
         changed: true,
         mode: value === void 0 ? "date" : mode
       });

package/dist/fns.d.ts

@@ -1,25 +1,4 @@
-import { default as fnsAddDays } from 'date-fns/addDays';
-import { default as fnsAddMonths } from 'date-fns/addMonths';
-import { default as fnsAddSeconds } from 'date-fns/addSeconds';
-import { default as fnsAddYears } from 'date-fns/addYears';
-import { default as fnsDifferenceInSeconds } from 'date-fns/differenceInSeconds';
-import { default as fnsDifferenceInYears } from 'date-fns/differenceInYears';
-import { default as fnsEndOfDay } from 'date-fns/endOfDay';
-import { default as fnsEndOfMonth } from 'date-fns/endOfMonth';
-import { default as fnsFormat } from 'date-fns/format';
-import { default as fnsGetSeconds } from 'date-fns/getSeconds';
-import { default as fnsGetYear } from 'date-fns/getYear';
-import { default as fnsIsAfter } from 'date-fns/isAfter';
-import { default as fnsIsBefore } from 'date-fns/isBefore';
-import { default as fnsIsEqual } from 'date-fns/isEqual';
-import { default as fnsIsSameDay } from 'date-fns/isSameDay';
-import { default as fnsIsSameMonth } from 'date-fns/isSameMonth';
-import { default as fnsIsSameYear } from 'date-fns/isSameYear';
-import { default as fnsSetDate } from 'date-fns/setDate';
-import { default as fnsSetMonth } from 'date-fns/setMonth';
-import { default as fnsSetYear } from 'date-fns/setYear';
-import { default as fnsStartOfDay } from 'date-fns/startOfDay';
-import { default as fnsStartOfMonth } from 'date-fns/startOfMonth';
+import { addDays as fnsAddDays, addMonths as fnsAddMonths, addSeconds as fnsAddSeconds, addYears as fnsAddYears, differenceInSeconds as fnsDifferenceInSeconds, differenceInYears as fnsDifferenceInYears, endOfDay as fnsEndOfDay, endOfMonth as fnsEndOfMonth, format as fnsFormat, getSeconds as fnsGetSeconds, getYear as fnsGetYear, isAfter as fnsIsAfter, isBefore as fnsIsBefore, isEqual as fnsIsEqual, isSameDay as fnsIsSameDay, isSameMonth as fnsIsSameMonth, isSameYear as fnsIsSameYear, setDate as fnsSetDate, setMonth as fnsSetMonth, setYear as fnsSetYear, startOfDay as fnsStartOfDay, startOfMonth as fnsStartOfMonth } from 'date-fns';
 export { fnsGetSeconds };
 export { fnsDifferenceInSeconds };
 export { fnsStartOfMonth };

package/dist/fns.js

@@ -1,46 +1,25 @@
-import { default as default2 } from "date-fns/addDays";
-import { default as default3 } from "date-fns/addMonths";
-import { default as default4 } from "date-fns/addSeconds";
-import { default as default5 } from "date-fns/addYears";
-import { default as default6 } from "date-fns/differenceInSeconds";
-import { default as default7 } from "date-fns/differenceInYears";
-import { default as default8 } from "date-fns/endOfDay";
-import { default as default9 } from "date-fns/endOfMonth";
-import { default as default10 } from "date-fns/format";
-import { default as default11 } from "date-fns/getSeconds";
-import { default as default12 } from "date-fns/getYear";
-import { default as default13 } from "date-fns/isAfter";
-import { default as default14 } from "date-fns/isBefore";
-import { default as default15 } from "date-fns/isEqual";
-import { default as default16 } from "date-fns/isSameDay";
-import { default as default17 } from "date-fns/isSameMonth";
-import { default as default18 } from "date-fns/isSameYear";
-import { default as default19 } from "date-fns/setDate";
-import { default as default20 } from "date-fns/setMonth";
-import { default as default21 } from "date-fns/setYear";
-import { default as default22 } from "date-fns/startOfDay";
-import { default as default23 } from "date-fns/startOfMonth";
+import { addDays, addMonths, addSeconds, addYears, differenceInSeconds, differenceInYears, endOfDay, endOfMonth, format, getSeconds, getYear, isAfter, isBefore, isEqual, isSameDay, isSameMonth, isSameYear, setDate, setMonth, setYear, startOfDay, startOfMonth } from "date-fns";
 export {
-  default2 as fnsAddDays,
-  default3 as fnsAddMonths,
-  default4 as fnsAddSeconds,
-  default5 as fnsAddYears,
-  default6 as fnsDifferenceInSeconds,
-  default7 as fnsDifferenceInYears,
-  default8 as fnsEndOfDay,
-  default9 as fnsEndOfMonth,
-  default10 as fnsFormat,
-  default11 as fnsGetSeconds,
-  default12 as fnsGetYear,
-  default13 as fnsIsAfter,
-  default14 as fnsIsBefore,
-  default15 as fnsIsEqual,
-  default16 as fnsIsSameDay,
-  default17 as fnsIsSameMonth,
-  default18 as fnsIsSameYear,
-  default19 as fnsSetDate,
-  default20 as fnsSetMonth,
-  default21 as fnsSetYear,
-  default22 as fnsStartOfDay,
-  default23 as fnsStartOfMonth
+  addDays as fnsAddDays,
+  addMonths as fnsAddMonths,
+  addSeconds as fnsAddSeconds,
+  addYears as fnsAddYears,
+  differenceInSeconds as fnsDifferenceInSeconds,
+  differenceInYears as fnsDifferenceInYears,
+  endOfDay as fnsEndOfDay,
+  endOfMonth as fnsEndOfMonth,
+  format as fnsFormat,
+  getSeconds as fnsGetSeconds,
+  getYear as fnsGetYear,
+  isAfter as fnsIsAfter,
+  isBefore as fnsIsBefore,
+  isEqual as fnsIsEqual,
+  isSameDay as fnsIsSameDay,
+  isSameMonth as fnsIsSameMonth,
+  isSameYear as fnsIsSameYear,
+  setDate as fnsSetDate,
+  setMonth as fnsSetMonth,
+  setYear as fnsSetYear,
+  startOfDay as fnsStartOfDay,
+  startOfMonth as fnsStartOfMonth
 };

package/dist/format.js

@@ -1,27 +1,5 @@
-import fnsIsValid from "date-fns/isValid";
+import { isValid, format } from "date-fns";
 import { es, pl, enGB } from "date-fns/locale";
-import "date-fns/addDays";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addYears";
-import "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import fnsFormat$1 from "date-fns/format";
-import "date-fns/getSeconds";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-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";
 const locales = {
   en: enGB,
   pl,
@@ -32,11 +10,11 @@ const isLocaleKey = (key) => {
 };
 const defaultLocale = "en";
 function fnsFormat(date, formatStr, locale = defaultLocale) {
-  if (!fnsIsValid(date)) {
+  if (!isValid(date)) {
     return "";
   }
   const localeKey = locale.substring(0, 2);
-  return fnsFormat$1(date, formatStr, {
+  return format(date, formatStr, {
     locale: isLocaleKey(localeKey) ? locales[localeKey] : locales[defaultLocale]
   });
 }

package/dist/index.js

@@ -6,28 +6,7 @@ import { default as default7 } from "./Elements/DayPicker/DayPicker.js";
 import { default as default8 } from "./Elements/TimePicker/TimePicker.js";
 import { default as default9 } from "./format.js";
 import { default as default10 } from "./localeUtils.js";
-import { default as default11 } from "date-fns/addDays";
-import { default as default12 } from "date-fns/addMonths";
-import { default as default13 } from "date-fns/addSeconds";
-import { default as default14 } from "date-fns/addYears";
-import { default as default15 } from "date-fns/differenceInSeconds";
-import { default as default16 } from "date-fns/differenceInYears";
-import { default as default17 } from "date-fns/endOfDay";
-import { default as default18 } from "date-fns/endOfMonth";
-import { default as default19 } from "date-fns/format";
-import { default as default20 } from "date-fns/getSeconds";
-import { default as default21 } from "date-fns/getYear";
-import { default as default22 } from "date-fns/isAfter";
-import { default as default23 } from "date-fns/isBefore";
-import { default as default24 } from "date-fns/isEqual";
-import { default as default25 } from "date-fns/isSameDay";
-import { default as default26 } from "date-fns/isSameMonth";
-import { default as default27 } from "date-fns/isSameYear";
-import { default as default28 } from "date-fns/setDate";
-import { default as default29 } from "date-fns/setMonth";
-import { default as default30 } from "date-fns/setYear";
-import { default as default31 } from "date-fns/startOfDay";
-import { default as default32 } from "date-fns/startOfMonth";
+import { addDays, addMonths, addSeconds, addYears, differenceInSeconds, differenceInYears, endOfDay, endOfMonth, format, getSeconds, getYear, isAfter, isBefore, isEqual, isSameDay, isSameMonth, isSameYear, setDate, setMonth, setYear, startOfDay, startOfMonth } from "date-fns";
 import { getDefaultTexts } from "./utils/getDefaultTexts.js";
 export {
   default2 as DatePicker,
@@ -38,28 +17,28 @@ export {
   default6 as YearPicker,
   default9 as datePickerFormat,
   default3 as default,
-  default11 as fnsAddDays,
-  default12 as fnsAddMonths,
-  default13 as fnsAddSeconds,
-  default14 as fnsAddYears,
-  default15 as fnsDifferenceInSeconds,
-  default16 as fnsDifferenceInYears,
-  default17 as fnsEndOfDay,
-  default18 as fnsEndOfMonth,
-  default19 as fnsFormat,
-  default20 as fnsGetSeconds,
-  default21 as fnsGetYear,
-  default22 as fnsIsAfter,
-  default23 as fnsIsBefore,
-  default24 as fnsIsEqual,
-  default25 as fnsIsSameDay,
-  default26 as fnsIsSameMonth,
-  default27 as fnsIsSameYear,
-  default28 as fnsSetDate,
-  default29 as fnsSetMonth,
-  default30 as fnsSetYear,
-  default31 as fnsStartOfDay,
-  default32 as fnsStartOfMonth,
+  addDays as fnsAddDays,
+  addMonths as fnsAddMonths,
+  addSeconds as fnsAddSeconds,
+  addYears as fnsAddYears,
+  differenceInSeconds as fnsDifferenceInSeconds,
+  differenceInYears as fnsDifferenceInYears,
+  endOfDay as fnsEndOfDay,
+  endOfMonth as fnsEndOfMonth,
+  format as fnsFormat,
+  getSeconds as fnsGetSeconds,
+  getYear as fnsGetYear,
+  isAfter as fnsIsAfter,
+  isBefore as fnsIsBefore,
+  isEqual as fnsIsEqual,
+  isSameDay as fnsIsSameDay,
+  isSameMonth as fnsIsSameMonth,
+  isSameYear as fnsIsSameYear,
+  setDate as fnsSetDate,
+  setMonth as fnsSetMonth,
+  setYear as fnsSetYear,
+  startOfDay as fnsStartOfDay,
+  startOfMonth as fnsStartOfMonth,
   getDefaultTexts,
   default10 as localeUtils
 };

package/dist/toDateValue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Normalises the loosely-typed date values this package accepts into a `Date`.
+ *
+ * Replaces `legacyParse` from `@date-fns/upgrade`, a shim reimplementing date-fns v1's `parse()`,
+ * and reproduces its branches exactly — verified identical across every input kind the call sites
+ * reach, including the two that surprise:
+ *
+ * - `null` yields the **epoch**, which `isValid` reports as a valid date, not a rejected one.
+ * - `undefined`, `''` and unparseable strings yield an `Invalid Date`.
+ *
+ * The string branch is load-bearing. `legacyParse` reads a naive string as *local* time, including
+ * date-only forms where the ECMAScript spec says UTC. `parseISO` agrees; `toDate` and `new Date`
+ * do not, and would shift `'2024-01-15'` by the local offset — a whole day either side of UTC.
+ */
+export declare const toDateValue: (value: Date | string | number | null | undefined) => Date;
+export default toDateValue;

package/dist/toDateValue.js

@@ -0,0 +1,14 @@
+import { parseISO } from "date-fns";
+const toDateValue = (value) => {
+  if (value instanceof Date) {
+    return new Date(value.getTime());
+  }
+  if (typeof value === "string") {
+    return parseISO(value);
+  }
+  return new Date(value);
+};
+export {
+  toDateValue as default,
+  toDateValue
+};

package/dist/utils.d.ts

@@ -1,4 +1,3 @@
 export declare const range: (start: number, end: number) => number[];
 export declare function getDecadeRange(cursor: Date): number[];
 export declare function getCenturyRange(cursor: Date): number[];
-export declare function changeDayWithHoursPreserved(oldDate: Date, chosenDate: Date): Date;

package/dist/utils.js

@@ -1,27 +1,4 @@
-import { differenceInCalendarDays } from "date-fns";
-import { legacyParse } from "@date-fns/upgrade/v2";
-import "date-fns/addDays";
-import "date-fns/addMonths";
-import fnsAddSeconds from "date-fns/addSeconds";
-import "date-fns/addYears";
-import fnsDifferenceInSeconds from "date-fns/differenceInSeconds";
-import "date-fns/differenceInYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getSeconds";
-import fnsGetYear from "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isEqual";
-import "date-fns/isSameDay";
-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 { getYear } from "date-fns";
 const range = (start, end) => {
   if (end <= start) {
     return [];
@@ -30,23 +7,16 @@ const range = (start, end) => {
   return [...Array(size).keys()].map((i) => i + start);
 };
 function getDecadeRange(cursor) {
-  const startYear = Math.floor(fnsGetYear(cursor) / 10) * 10;
+  const startYear = Math.floor(getYear(cursor) / 10) * 10;
   const endYear = startYear + 9;
   return [startYear, endYear];
 }
 function getCenturyRange(cursor) {
-  const startYear = Math.floor(fnsGetYear(cursor) / 100) * 100;
+  const startYear = Math.floor(getYear(cursor) / 100) * 100;
   const endYear = startYear + 99;
   return [startYear, endYear];
 }
-function changeDayWithHoursPreserved(oldDate, chosenDate) {
-  const dayDifferenceInSeconds = differenceInCalendarDays(legacyParse(oldDate), legacyParse(chosenDate)) * 24 * 60 * 60;
-  const difference = fnsDifferenceInSeconds(oldDate, chosenDate) - dayDifferenceInSeconds;
-  const dateToBeUpdated = fnsAddSeconds(chosenDate, difference);
-  return dateToBeUpdated;
-}
 export {
-  changeDayWithHoursPreserved,
   getCenturyRange,
   getDecadeRange,
   range

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -30,7 +30,8 @@
     "build:watch": "vite build --watch",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
-    "test": "vitest run",
+    "test": "vitest run && pnpm test:dst",
+    "test:dst": "TZ=Europe/Warsaw vitest run -t DaylightSavings",
     "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
@@ -42,17 +43,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^2.0.2",
-    "@synerise/ds-dropdown": "^2.0.3",
-    "@synerise/ds-icon": "^2.1.0",
-    "@synerise/ds-input": "^2.0.3",
-    "@synerise/ds-time-picker": "^2.0.3",
-    "@synerise/ds-tooltip": "^2.0.2",
-    "@synerise/ds-typography": "^2.0.2",
-    "@synerise/ds-utils": "^2.0.0",
+    "@synerise/ds-button": "^2.0.3",
+    "@synerise/ds-dropdown": "^2.1.0",
+    "@synerise/ds-icon": "^2.1.1",
+    "@synerise/ds-input": "^2.0.4",
+    "@synerise/ds-time-picker": "^2.0.4",
+    "@synerise/ds-tooltip": "^2.0.3",
+    "@synerise/ds-typography": "^2.0.3",
+    "@synerise/ds-utils": "^2.1.0",
     "classnames": "^2.5.1",
-    "date-fns": "2.16.1",
+    "date-fns": "^4.1.0",
     "lodash.range": "^3.2.0",
     "react-day-picker": "^10.0.1",
     "uuid": "^8.3.2"
@@ -67,5 +67,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "e0dced8fd3a1194eff2fafc1b7e385b29238af88"
+  "gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db"
 }