@synerise/ds-date-picker 1.4.21 → 1.4.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/CLAUDE.md +148 -0
- package/package.json +11 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.4.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.4.22...@synerise/ds-date-picker@1.4.23) (2026-07-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-date-picker
|
|
9
|
+
|
|
10
|
+
## [1.4.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.4.21...@synerise/ds-date-picker@1.4.22) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-date-picker
|
|
13
|
+
|
|
6
14
|
## [1.4.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.4.20...@synerise/ds-date-picker@1.4.21) (2026-07-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-date-picker
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# DatePicker (`@synerise/ds-date-picker`)
|
|
2
|
+
|
|
3
|
+
> Single-date picker with a dropdown calendar, optional time picker, quick-pick presets, and a formatted text input trigger — built on `react-day-picker` v7 and `date-fns` 2.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
DatePicker.tsx — main functional component (wraps RawDatePicker in a Dropdown)
|
|
10
|
+
DatePicker.types.ts — DatePickerProps, Texts, QuickPick, State, Modifier
|
|
11
|
+
DatePicker.styles.ts — OverlayContainer, Container, PickerWrapper, etc.
|
|
12
|
+
DatePicker.const.ts — TRIGGER_PROPS (popover trigger config)
|
|
13
|
+
RawDatePicker/
|
|
14
|
+
RawDatePicker.tsx — class component; calendar logic + mode switching; wrapped with injectIntl
|
|
15
|
+
RawDatePicker.types.ts — RawDatePickerProps = Omit<DatePickerProps, 'dropdownProps'>
|
|
16
|
+
Elements/
|
|
17
|
+
DayPicker/ — calendar grid (react-day-picker wrapper)
|
|
18
|
+
MonthPicker/ — 12-month grid; clicking title switches to YearPicker
|
|
19
|
+
YearPicker/ — decade grid; clicking title switches to DecadePicker
|
|
20
|
+
DecadePicker/ — century grid
|
|
21
|
+
TimePicker/ — HH:MM:SS column selector with prev/next day navigation
|
|
22
|
+
PickerInput/ — formatted text input trigger (uses ds-input)
|
|
23
|
+
Footer/ — Apply / Now / Date / Time mode-switch buttons
|
|
24
|
+
QuickPicks/ — preset date buttons rendered in a left column
|
|
25
|
+
NavigationHint/ — keyboard hint (used in other packages, not DatePicker)
|
|
26
|
+
Navbar/ — prev/next month navigation bar
|
|
27
|
+
GridPicker/ — shared grid layout used by Month/Year/DecadePicker
|
|
28
|
+
utils/
|
|
29
|
+
getDefaultTexts.tsx — merges consumer texts with react-intl defaults
|
|
30
|
+
fns.tsx — date-fns v2 wrappers
|
|
31
|
+
format.ts — fnsFormat wrapper
|
|
32
|
+
localeUtils.ts — locale helpers for react-day-picker
|
|
33
|
+
utils.ts — changeDayWithHoursPreserved and other helpers
|
|
34
|
+
index.ts — public exports
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Public exports
|
|
38
|
+
|
|
39
|
+
### `DatePicker` (default + named)
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
|------|------|---------|-------------|
|
|
43
|
+
| `onApply` | `(date?: Date) => void` | _(required)_ | Called when user clicks Apply or selects a quick pick. Closes the dropdown. |
|
|
44
|
+
| `value` | `Date` | `undefined` | Controlled date value. |
|
|
45
|
+
| `showTime` | `boolean` | `false` | Enables the time picker panel (user can switch between date and time modes). |
|
|
46
|
+
| `disabled` | `boolean` | `undefined` | Disables input and prevents dropdown opening. |
|
|
47
|
+
| `readOnly` | `boolean` | `undefined` | Renders only the input trigger; no dropdown is rendered at all. |
|
|
48
|
+
| `autoFocus` | `boolean` | `undefined` | Opens the dropdown on mount. |
|
|
49
|
+
| `allowClear` | `boolean` | `true` | Shows the clear (✕) button on the input. |
|
|
50
|
+
| `onClear` | `() => void` | `undefined` | Called when user clicks the clear button. |
|
|
51
|
+
| `onValueChange` | `(date?: Date) => void` | `undefined` | Called on every date/time change (including before Apply). |
|
|
52
|
+
| `onDropdownVisibleChange` | `(visible: boolean) => void` | `undefined` | Called when the dropdown opens or closes. |
|
|
53
|
+
| `disabledDates` | `(date?: Date) => boolean` | `undefined` | Returns `true` for dates that should not be selectable. |
|
|
54
|
+
| `disabledHours` | `number[]` | `[]` | Hour values disabled in the time picker. |
|
|
55
|
+
| `disabledMinutes` | `number[]` | `[]` | Minute values disabled in the time picker. |
|
|
56
|
+
| `disabledSeconds` | `number[]` | `[]` | Second values disabled in the time picker. |
|
|
57
|
+
| `useStartOfDay` | `boolean` | `undefined` | Sets time to 00:00:00 when user selects a day. |
|
|
58
|
+
| `useEndOfDay` | `boolean` | `undefined` | Sets time to 23:59:59 when user selects a day. |
|
|
59
|
+
| `hideNow` | `boolean` | `undefined` | Hides the "Now" button in the footer. |
|
|
60
|
+
| `quickPicks` | `QuickPick[]` | `undefined` | Preset date buttons rendered in a left column beside the calendar. |
|
|
61
|
+
| `texts` | `Partial<Texts>` | `undefined` | Override i18n strings. |
|
|
62
|
+
| `valueFormatOptions` | `DateToFormatOptions` | `undefined` | Format options for displaying the selected date in the input. |
|
|
63
|
+
| `format` | `string` | `undefined` | **Deprecated** — use `valueFormatOptions` instead. |
|
|
64
|
+
| `popoverPlacement` | `'topLeft' \| 'topCenter' \| 'topRight' \| 'bottomLeft' \| 'bottomCenter' \| 'bottomRight'` | `undefined` | Dropdown placement. |
|
|
65
|
+
| `prefixel` | `ReactNode` | `undefined` | Content shown before the date value in the input. |
|
|
66
|
+
| `suffixel` | `ReactNode` | `undefined` | Content shown after the date value in the input. |
|
|
67
|
+
| `error` | `boolean` | `undefined` | Error state on the input. |
|
|
68
|
+
| `errorText` | `ReactNode` | `undefined` | Error message shown below the input. |
|
|
69
|
+
| `renderTrigger` | `() => ReactElement` | `undefined` | Replaces the default `PickerInput` with a custom trigger element. |
|
|
70
|
+
| `inputProps` | `Pick<InputProps, 'autoResize'>` | `undefined` | Extra props passed to the inner `PickerInput`. Currently only `autoResize`. |
|
|
71
|
+
| `dropdownProps` | `Partial<Omit<DropdownSharedProps, 'children' \| 'overlay'>>` | `undefined` | Extra props merged onto the `ds-dropdown` wrapper. |
|
|
72
|
+
| `overlayHTMLAttributes` | `HTMLAttributes<HTMLDivElement> & DataAttributes` | `undefined` | Extra HTML/data attributes on the overlay container div. |
|
|
73
|
+
| `triggerHTMLAttributes` | `HTMLAttributes<HTMLDivElement> & DataAttributes` | `undefined` | Extra HTML/data attributes on the trigger wrapper div. |
|
|
74
|
+
| `intl` | `IntlShape` | `undefined` | **Deprecated** — will be removed in 1.0. |
|
|
75
|
+
|
|
76
|
+
### `RawDatePicker` (named)
|
|
77
|
+
|
|
78
|
+
The calendar panel without the input trigger or dropdown wrapper. A class component wrapped with `injectIntl`. Accepts `RawDatePickerProps` = `Omit<DatePickerProps, 'dropdownProps'>`. Use directly when you need to embed the calendar inline without a trigger input.
|
|
79
|
+
|
|
80
|
+
### `DayPicker`, `MonthPicker`, `YearPicker`, `TimePicker` (named)
|
|
81
|
+
|
|
82
|
+
Low-level calendar sub-elements. Exported for advanced composition. See their `.types.ts` for individual prop interfaces. These are internal building blocks and not intended for typical consumer use.
|
|
83
|
+
|
|
84
|
+
### Types (exported)
|
|
85
|
+
|
|
86
|
+
| Export | Description |
|
|
87
|
+
|--------|-------------|
|
|
88
|
+
| `DatePickerProps` | Full props interface |
|
|
89
|
+
| `QuickPick` | `{ label: ReactNode; value: Date }` |
|
|
90
|
+
| `Texts` | `{ apply, now, inputPlaceholder, clearTooltip, quickPicks }` — all `ReactNode` except `inputPlaceholder: string` |
|
|
91
|
+
|
|
92
|
+
## Usage patterns
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
import DatePicker from '@synerise/ds-date-picker';
|
|
96
|
+
|
|
97
|
+
// Controlled
|
|
98
|
+
const [date, setDate] = useState<Date | undefined>(undefined);
|
|
99
|
+
|
|
100
|
+
<DatePicker
|
|
101
|
+
value={date}
|
|
102
|
+
onApply={(d) => setDate(d)}
|
|
103
|
+
onClear={() => setDate(undefined)}
|
|
104
|
+
/>
|
|
105
|
+
|
|
106
|
+
// With time picker
|
|
107
|
+
<DatePicker
|
|
108
|
+
value={date}
|
|
109
|
+
onApply={setDate}
|
|
110
|
+
showTime
|
|
111
|
+
/>
|
|
112
|
+
|
|
113
|
+
// With quick picks
|
|
114
|
+
<DatePicker
|
|
115
|
+
value={date}
|
|
116
|
+
onApply={setDate}
|
|
117
|
+
quickPicks={[
|
|
118
|
+
{ label: 'Today', value: new Date() },
|
|
119
|
+
{ label: 'Yesterday', value: subDays(new Date(), 1) },
|
|
120
|
+
]}
|
|
121
|
+
/>
|
|
122
|
+
|
|
123
|
+
// Inline calendar (no trigger input)
|
|
124
|
+
import { RawDatePicker } from '@synerise/ds-date-picker';
|
|
125
|
+
<RawDatePicker value={date} onApply={setDate} />
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## Key dependencies
|
|
129
|
+
|
|
130
|
+
- `react-day-picker` v7 — calendar grid, day modifiers, locale utilities
|
|
131
|
+
- `date-fns` 2.16.1 — all date arithmetic (pinned version)
|
|
132
|
+
- `@date-fns/upgrade` — `legacyParse` compat shim for date-fns v1→v2 migration in `RawDatePicker`
|
|
133
|
+
- `@synerise/ds-dropdown` — wraps `RawDatePicker` as a popover triggered by `PickerInput`
|
|
134
|
+
- `@synerise/ds-input` — base for `PickerInput`
|
|
135
|
+
- `react-intl` (peer dep) — default label strings; `IntlProvider` required in tree
|
|
136
|
+
|
|
137
|
+
## Implementation notes
|
|
138
|
+
|
|
139
|
+
- **`onApply` is required** — `DatePickerProps` has `onApply: (date?: Date) => void` without `?`.
|
|
140
|
+
- **`RawDatePicker` is a class component** — wrapped with `react-intl` legacy `injectIntl` HOC, not `useIntl`. It reads `this.props.intl` internally. The deprecated `intl` prop on `DatePickerProps` was a way to pass a custom `IntlShape` in older usage — now ignored.
|
|
141
|
+
- **`readOnly` short-circuits the Dropdown** — when `readOnly={true}`, the component renders only the `PickerInput` (or `renderTrigger` output) with no calendar attached.
|
|
142
|
+
- **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.
|
|
143
|
+
- **`useStartOfDay` / `useEndOfDay`** — applied on day click, before `onValueChange` fires. `useStartOfDay` takes precedence if both are set (implemented as `if/else if` in `handleDayClick`).
|
|
144
|
+
- **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`).
|
|
145
|
+
- **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.
|
|
146
|
+
- **`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.
|
|
147
|
+
- **`format` is deprecated** — use `valueFormatOptions: DateToFormatOptions` (from `@synerise/ds-core`) for display formatting.
|
|
148
|
+
- **`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.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-date-picker",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.23",
|
|
4
4
|
"description": "DatePicker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -42,14 +43,14 @@
|
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
45
|
"@date-fns/upgrade": "^1.0.3",
|
|
45
|
-
"@synerise/ds-button": "^1.5.
|
|
46
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
47
|
-
"@synerise/ds-icon": "^1.18.
|
|
48
|
-
"@synerise/ds-input": "^1.7.
|
|
49
|
-
"@synerise/ds-time-picker": "^1.2.
|
|
50
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
51
|
-
"@synerise/ds-typography": "^1.1.
|
|
52
|
-
"@synerise/ds-utils": "^1.10.
|
|
46
|
+
"@synerise/ds-button": "^1.5.35",
|
|
47
|
+
"@synerise/ds-dropdown": "^1.3.21",
|
|
48
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
49
|
+
"@synerise/ds-input": "^1.7.14",
|
|
50
|
+
"@synerise/ds-time-picker": "^1.2.43",
|
|
51
|
+
"@synerise/ds-tooltip": "^1.5.4",
|
|
52
|
+
"@synerise/ds-typography": "^1.1.27",
|
|
53
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
53
54
|
"classnames": "^2.5.1",
|
|
54
55
|
"date-fns": "2.16.1",
|
|
55
56
|
"lodash.range": "^3.2.0",
|
|
@@ -67,5 +68,5 @@
|
|
|
67
68
|
"react-intl": ">=3.12.0 <= 6.8",
|
|
68
69
|
"styled-components": "^5.3.3"
|
|
69
70
|
},
|
|
70
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
|
|
71
72
|
}
|