@synerise/ds-date-picker 2.0.0 → 2.0.2
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 +25 -3
- package/dist/Elements/DayPicker/DayPicker.js +76 -3
- package/dist/Elements/DayPicker/DayPicker.styles.d.ts +1 -1
- package/dist/Elements/DayPicker/DayPicker.styles.js +8 -3
- package/dist/Elements/DayPicker/DayPicker.types.d.ts +15 -6
- package/dist/localeUtils.d.ts +20 -2
- package/dist/localeUtils.js +0 -2
- package/package.json +10 -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
|
+
## [2.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@2.0.1...@synerise/ds-date-picker@2.0.2) (2026-09-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-date-picker
|
|
9
|
+
|
|
10
|
+
## [2.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@2.0.0...@synerise/ds-date-picker@2.0.1) (2026-09-02)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-date-picker
|
|
13
|
+
|
|
6
14
|
# [2.0.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.4.26...@synerise/ds-date-picker@2.0.0) (2026-08-26)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-date-picker
|
package/CLAUDE.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# DatePicker (`@synerise/ds-date-picker`)
|
|
2
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`
|
|
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` v10 and `date-fns` 2.
|
|
4
4
|
|
|
5
5
|
## Package structure
|
|
6
6
|
|
|
@@ -29,7 +29,7 @@ src/
|
|
|
29
29
|
getDefaultTexts.tsx — merges consumer texts with react-intl defaults
|
|
30
30
|
fns.tsx — date-fns v2 wrappers
|
|
31
31
|
format.ts — fnsFormat wrapper
|
|
32
|
-
localeUtils.ts —
|
|
32
|
+
localeUtils.ts — weekday/month name tables; adapted into react-day-picker formatters/labels
|
|
33
33
|
utils.ts — changeDayWithHoursPreserved and other helpers
|
|
34
34
|
index.ts — public exports
|
|
35
35
|
```
|
|
@@ -127,7 +127,7 @@ import { RawDatePicker } from '@synerise/ds-date-picker';
|
|
|
127
127
|
|
|
128
128
|
## Key dependencies
|
|
129
129
|
|
|
130
|
-
- `react-day-picker`
|
|
130
|
+
- `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)
|
|
131
131
|
- `date-fns` 2.16.1 — all date arithmetic (pinned version)
|
|
132
132
|
- `@date-fns/upgrade` — `legacyParse` compat shim for date-fns v1→v2 migration in `RawDatePicker`
|
|
133
133
|
- `@synerise/ds-dropdown` — wraps `RawDatePicker` as a popover triggered by `PickerInput`
|
|
@@ -146,3 +146,25 @@ import { RawDatePicker } from '@synerise/ds-date-picker';
|
|
|
146
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
147
|
- **`format` is deprecated** — use `valueFormatOptions: DateToFormatOptions` (from `@synerise/ds-core`) for display formatting.
|
|
148
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.
|
|
149
|
+
|
|
150
|
+
## react-day-picker v10 notes
|
|
151
|
+
|
|
152
|
+
`Elements/DayPicker/DayPicker.tsx` is an adapter: it keeps the v7-era prop shape this package and
|
|
153
|
+
`ds-date-range-picker` were written against (`selectedDays`, `disabledDays`, `renderDay`,
|
|
154
|
+
`modifiers`, `canChangeMonth`, `localeUtils`) and translates it to v10 at that one boundary.
|
|
155
|
+
|
|
156
|
+
- **Class names are remapped back to v7's.** `CLASS_NAMES` / `MODIFIER_CLASS_NAMES` in
|
|
157
|
+
`DayPicker.tsx` turn v10's `rdp-*` into `DayPicker-*`, so `DayPicker.styles.ts`, the specs and
|
|
158
|
+
the Chromatic stories keep working. A modifier that stops being styled means a missing entry
|
|
159
|
+
there, not a stylesheet bug.
|
|
160
|
+
- **The day cell now contains a real `<button class="DayPicker-Day-Button">`.** v7 put the three
|
|
161
|
+
day layers straight into the cell. Anything clicking a day must target the button (or a
|
|
162
|
+
descendant) — a click on the `<td>` no longer reaches the handler.
|
|
163
|
+
- **`localeUtils` is deprecated** and no longer passed to the library; it feeds v10's `formatters`
|
|
164
|
+
and `labels` instead. Its moment-derived `formatDate` / `parseDate` / `getMonths` are gone, which
|
|
165
|
+
is what removed the undeclared `moment` dependency.
|
|
166
|
+
- **The weekday header row is `aria-hidden`** — upstream's choice, since each day button's
|
|
167
|
+
accessible name already carries the full date.
|
|
168
|
+
- **v10 renders twice on mount**, so `disabledDates` is evaluated twice per day. It is a pure
|
|
169
|
+
predicate, so this is a cost rather than a correctness issue; assert on distinct dates, not on
|
|
170
|
+
call counts.
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { jsxs, Fragment
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { SelectionState, DayFlag, UI } from "react-day-picker";
|
|
2
4
|
import { injectIntl } from "react-intl";
|
|
3
5
|
import { useDataFormat } from "@synerise/ds-core";
|
|
4
6
|
import "date-fns/addDays";
|
|
@@ -28,7 +30,33 @@ import localeUtils from "../../localeUtils.js";
|
|
|
28
30
|
import Navbar from "../Navbar/Navbar.js";
|
|
29
31
|
import { Link } from "../Navbar/Navbar.styles.js";
|
|
30
32
|
import { DayPicker as DayPicker$1 } from "./DayPicker.styles.js";
|
|
31
|
-
const
|
|
33
|
+
const CLASS_NAMES = {
|
|
34
|
+
[UI.Root]: "DayPicker DayPicker-wrapper",
|
|
35
|
+
[UI.Months]: "DayPicker-Months",
|
|
36
|
+
[UI.Month]: "DayPicker-Month-Wrapper",
|
|
37
|
+
[UI.MonthGrid]: "DayPicker-Month",
|
|
38
|
+
[UI.Weekdays]: "DayPicker-WeekdaysRow",
|
|
39
|
+
[UI.Weekday]: "DayPicker-Weekday",
|
|
40
|
+
[UI.Weeks]: "DayPicker-Body",
|
|
41
|
+
[UI.Week]: "DayPicker-Week",
|
|
42
|
+
[UI.Day]: "DayPicker-Day",
|
|
43
|
+
[UI.DayButton]: "DayPicker-Day-Button",
|
|
44
|
+
[DayFlag.today]: "DayPicker-Day--today",
|
|
45
|
+
[DayFlag.outside]: "DayPicker-Day--outside",
|
|
46
|
+
[DayFlag.disabled]: "DayPicker-Day--disabled",
|
|
47
|
+
[DayFlag.hidden]: "DayPicker-Day--hidden",
|
|
48
|
+
[DayFlag.focused]: "DayPicker-Day--focused",
|
|
49
|
+
[SelectionState.selected]: "DayPicker-Day--selected"
|
|
50
|
+
};
|
|
51
|
+
const MODIFIER_CLASS_NAMES = ["selected", "today", "start", "end", "entered", "entered-start", "entered-end", "initial", "initial-entered", "ghost"].reduce((acc, modifier) => {
|
|
52
|
+
acc[modifier] = `DayPicker-Day--${modifier}`;
|
|
53
|
+
return acc;
|
|
54
|
+
}, {});
|
|
55
|
+
const Weekdays = (props) => /* @__PURE__ */ jsx("thead", { className: "DayPicker-Weekdays", "aria-hidden": true, children: /* @__PURE__ */ jsx("tr", { ...props }) });
|
|
56
|
+
const MonthCaption = () => /* @__PURE__ */ jsx(Fragment, {});
|
|
57
|
+
const NOOP = () => {
|
|
58
|
+
};
|
|
59
|
+
const toMatchers = (value) => (Array.isArray(value) ? value : [value]).filter(Boolean);
|
|
32
60
|
const Picker = (props) => {
|
|
33
61
|
const {
|
|
34
62
|
month,
|
|
@@ -42,18 +70,63 @@ const Picker = (props) => {
|
|
|
42
70
|
renderNavbar,
|
|
43
71
|
intl,
|
|
44
72
|
modifiers,
|
|
73
|
+
canChangeMonth,
|
|
74
|
+
disabledDays,
|
|
75
|
+
selectedDays,
|
|
76
|
+
renderDay,
|
|
77
|
+
localeUtils: localeUtils$1 = localeUtils,
|
|
78
|
+
onDayClick,
|
|
45
79
|
...rest
|
|
46
80
|
} = props;
|
|
47
81
|
const {
|
|
48
82
|
firstDayOfWeek
|
|
49
83
|
} = useDataFormat();
|
|
84
|
+
const components = React.useMemo(() => ({
|
|
85
|
+
MonthCaption,
|
|
86
|
+
Weekdays,
|
|
87
|
+
DayButton: ({
|
|
88
|
+
day,
|
|
89
|
+
modifiers: _dayModifiers,
|
|
90
|
+
...buttonProps
|
|
91
|
+
}) => /* @__PURE__ */ jsx("button", { type: "button", ...buttonProps, children: renderDay?.(day.date) })
|
|
92
|
+
}), [renderDay]);
|
|
93
|
+
const formatters = React.useMemo(() => ({
|
|
94
|
+
formatWeekdayName: (weekday) => localeUtils$1.formatWeekdayShort(weekday.getDay(), intl.locale)
|
|
95
|
+
}), [localeUtils$1, intl.locale]);
|
|
96
|
+
const labels = React.useMemo(() => ({
|
|
97
|
+
labelDayButton: (date) => localeUtils$1.formatDay(date, void 0, intl.locale),
|
|
98
|
+
labelWeekday: (date) => localeUtils$1.formatWeekdayLong(date.getDay(), intl.locale)
|
|
99
|
+
}), [localeUtils$1, intl.locale]);
|
|
50
100
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
51
101
|
renderNavbar ? renderNavbar(props) : /* @__PURE__ */ jsx(Navbar, { title: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
102
|
/* @__PURE__ */ jsx(Link, { "data-testid": "datapicker-nav-title-monthpicker-link", onClick: onMonthNameClick, children: fnsFormat(month, "MMM", intl.locale) }),
|
|
53
103
|
" ",
|
|
54
104
|
/* @__PURE__ */ jsx(Link, { "data-testid": "datapicker-nav-title-yearpicker-link", onClick: onYearNameClick, children: fnsFormat(month, "yyyy", intl.locale) })
|
|
55
105
|
] }), 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"),
|
|
56
|
-
/* @__PURE__ */ jsx(
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
DayPicker$1,
|
|
108
|
+
{
|
|
109
|
+
month,
|
|
110
|
+
onMonthChange,
|
|
111
|
+
weekStartsOn: firstDayOfWeek,
|
|
112
|
+
lang: intl.locale,
|
|
113
|
+
hideNavigation: true,
|
|
114
|
+
disableNavigation: canChangeMonth === false,
|
|
115
|
+
disabled: disabledDays,
|
|
116
|
+
modifiers: {
|
|
117
|
+
...modifiers,
|
|
118
|
+
selected: toMatchers(selectedDays)
|
|
119
|
+
},
|
|
120
|
+
classNames: CLASS_NAMES,
|
|
121
|
+
modifiersClassNames: MODIFIER_CLASS_NAMES,
|
|
122
|
+
components,
|
|
123
|
+
formatters,
|
|
124
|
+
labels,
|
|
125
|
+
onDayClick: onDayClick ?? NOOP,
|
|
126
|
+
...rest
|
|
127
|
+
},
|
|
128
|
+
"body"
|
|
129
|
+
)
|
|
57
130
|
] });
|
|
58
131
|
};
|
|
59
132
|
const DayPicker = injectIntl(Picker);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DayPicker as DayPickerBase } from 'react-day-picker';
|
|
2
2
|
export declare const DayBackground: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export declare const DayForeground: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export declare const DayText: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { DayPicker as DayPicker$1 } from "react-day-picker";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
const DaySelectorPrefix = `.DayPicker-Day`;
|
|
4
4
|
const daySelector = (modifier) => `${DaySelectorPrefix}--${modifier}`;
|
|
5
|
+
const DayButton = `.DayPicker-Day-Button`;
|
|
6
|
+
const dayLayers = `& > * > div`;
|
|
7
|
+
const rangeBreak = daySelector("outside");
|
|
8
|
+
const rangeDay = (modifier) => `${daySelector(modifier)}:not(${daySelector("outside")})`;
|
|
9
|
+
const rangeCovered = (modifier) => `${daySelector(modifier) + daySelector("disabled")}:not(${daySelector("outside")})`;
|
|
5
10
|
const DayBackground = /* @__PURE__ */ styled.div.withConfig({
|
|
6
11
|
displayName: "DayPickerstyles__DayBackground",
|
|
7
12
|
componentId: "sc-oi7l9r-0"
|
|
@@ -18,10 +23,10 @@ const DayTooltip = /* @__PURE__ */ styled.div.withConfig({
|
|
|
18
23
|
displayName: "DayPickerstyles__DayTooltip",
|
|
19
24
|
componentId: "sc-oi7l9r-3"
|
|
20
25
|
})(["display:none;"]);
|
|
21
|
-
const DayPicker = /* @__PURE__ */ styled(
|
|
26
|
+
const DayPicker = /* @__PURE__ */ styled(DayPicker$1).withConfig({
|
|
22
27
|
displayName: "DayPickerstyles__DayPicker",
|
|
23
28
|
componentId: "sc-oi7l9r-4"
|
|
24
|
-
})(["display:inline-block;font-size:12px
|
|
29
|
+
})(["display:inline-block;font-size:12px;position:relative;.DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center;}.DayPicker-Month{display:table;margin:8px;border-spacing:0;border-collapse:collapse;}.DayPicker-Weekdays{display:table-header-group;}.DayPicker-WeekdaysRow{display:table-row;}.DayPicker-Weekday{min-width:39px;height:32px;display:table-cell;vertical-align:middle;text-align:center;font-weight:500;}.DayPicker-Body{display:table-row-group;}.DayPicker-Week{display:table-row;}", "{width:40px;height:40px;display:table-cell;cursor:pointer;position:relative;box-sizing:border-box;", "{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:inherit;}", "{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:4px;min-width:32px;}&:not(", "):not(", "):not(", "):not(", "):not(", "){& ", "{background-color:", ";border-radius:50%;}}&--start ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;}&--end ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;}&--today{font-weight:500;}&--today", "{& ", "{font-weight:400;}}&--entered", ":not(", "):not(", "):not(", "){& ", "{border-color:", ";margin-right:0;margin-left:4px;}& ", "{margin-right:0;background-color:", ";}}&--entered", ":not(", "):not(", "):not(", "){& ", "{border-color:", ";margin-right:4px;margin-left:4px;}& ", "{margin-right:4px;background-color:", ";}}&--entered:not(", "):not(", "):not(", "):not(", "){& ", "{background-color:", ";}}&--today", ":not(", "):not(", "):not(", "){& ", "{background-color:", ";}}&--today", ":not(", "):not(", "):not(", "){& ", "{background-color:transparent;font-weight:400;color:", ";}& ", "{background-color:", ";}& ", "{border:2px solid transparent;}}&--today:not(", "){& ", "{background-color:", ";color:", ";}& ", "{border:2px solid ", ";}}&--entered:not(", "):not(", ") ", "{background-color:", ";}&--entered ", "{color:", ";}&--entered-start:not(", ") ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;}&--entered-end:not(", ") ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;}&--outside{& ", "{color:", ";}}&--outside", ":not(", "),&--outside", ":not(", "){& ", "{color:", ";}}&--disabled{cursor:default;& ", "{color:", ";}}}", ":not(", "):not(", "):not(", "),", ":not(", "):not(", "):not(", "){&:last-child ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;margin-right:4px;padding-right:0;}&:first-child ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;margin-left:4px;padding-left:0;}}& ", " + ", ",& ", " + ", "{& ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;margin-left:4px;padding-left:0;}}", ":has(+ ", "),", ":has(+ ", "){& ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;margin-right:4px;padding-right:0;}}", ",", "{", "{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;}& ", "{background-color:", ";}& ", "{color:", ";}}", ":not(", "):not(", "){", "{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;}& ", "{background-color:", ";}& ", "{color:", ";}&", "{& ", "{background-color:", ";}& ", "{color:inherit;}}}", ":not(", "):not(", "){", "{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;text-align:center;}&& ", "{background-color:", ";}&& ", "{color:", ";}&", "{&& ", "{background-color:", ";}&& ", "{color:inherit;}}}", ":not(", "):not(", "){& ", "{border-radius:50%;font-weight:500;color:", ";background-color:", ";margin-right:4px;padding-left:0px;padding-right:0px;}& ", "{background-color:", ";}", "{padding-left:0px;margin-left:4px;}}", ":not(", "):not(", "):last-child,", ":not(", "):not(", "):first-child{", "{margin-right:4px;}& ", "{background-color:", ";}}", ":not(", "):not(", "){& ", "{border-radius:50%;font-weight:500;background-color:", ";color:", ";margin-left:4px;padding-left:4px;}", "{padding-right:4px;margin-right:4px;}}", ":not(", "):not(", "){", "{padding-right:4px;}}", ":not(", "):hover{position:relative;", "{height:24px;position:absolute;top:-30px;margin-left:calc(-50% + 16px);display:block;white-space:nowrap;background-color:rgba(56,67,80,0.9);padding:3px 8px;border-radius:3px;z-index:9;font-weight:400;color:", ";}}", ":not(", "):not(", "),", ":not(", "){& ", "{background:transparent;}}", "{& ", "{border-radius:50%;}}&.relative{", ":not(", "):not(", "){& ", "{font-weight:500;}", ":not(", "):not(", "){& ", "{background-color:", ";}& ", "{color:", ";}}}"], DaySelectorPrefix, DayButton, dayLayers, daySelector("selected"), daySelector("entered"), daySelector("outside"), daySelector("disabled"), daySelector("initial-entered"), DayBackground, (props) => props.theme.palette["grey-100"], DayBackground, DayBackground, daySelector("selected"), DayText, daySelector("entered-start"), daySelector("entered-end"), daySelector("outside"), daySelector("disabled"), DayForeground, (props) => props.theme.palette["blue-300"], DayBackground, (props) => props.theme.palette["blue-100"], daySelector("entered-end"), daySelector("entered-start"), daySelector("outside"), daySelector("disabled"), DayForeground, (props) => props.theme.palette["blue-300"], DayBackground, (props) => props.theme.palette["blue-100"], daySelector("entered-start"), daySelector("entered-end"), daySelector("outside"), daySelector("disabled"), DayBackground, (props) => props.theme.palette["blue-100"], daySelector("entered-start") + daySelector("entered-end"), daySelector("selected"), daySelector("outside"), daySelector("disabled"), DayBackground, (props) => props.theme.palette["grey-050"], daySelector("entered"), daySelector("selected"), daySelector("outside"), daySelector("disabled"), DayText, (props) => props.theme.palette["blue-600"], DayBackground, (props) => props.theme.palette["blue-100"], DayForeground, daySelector("selected"), DayText, (props) => props.theme.palette["yellow-100"], (props) => props.theme.palette["yellow-600"], DayForeground, (props) => props.theme.palette["yellow-600"], daySelector("outside"), daySelector("disabled"), DayBackground, (props) => props.theme.palette["grey-050"], DayText, (props) => props.theme.palette["blue-600"], daySelector("selected"), DayBackground, daySelector("selected"), DayBackground, DayText, (props) => props.theme.palette["grey-400"], daySelector("selected"), daySelector("disabled"), daySelector("entered"), daySelector("disabled"), DayText, (props) => props.theme.palette["blue-600"], DayText, (props) => props.theme.palette["grey-400"], daySelector("selected"), daySelector("outside"), daySelector("end"), daySelector("start"), daySelector("entered"), daySelector("outside"), daySelector("end"), daySelector("start"), DayBackground, DayBackground, rangeBreak, rangeDay("selected"), rangeBreak, rangeDay("entered"), DayBackground, rangeDay("selected"), rangeBreak, rangeDay("entered"), rangeBreak, DayBackground, rangeCovered("selected"), rangeCovered("entered"), dayLayers, DayBackground, (props) => props.theme.palette["grey-100"], DayText, (props) => props.theme.palette["grey-400"], daySelector("selected"), daySelector("disabled"), daySelector("outside"), dayLayers, DayBackground, (props) => props.theme.palette["blue-100"], DayText, (props) => props.theme.palette["blue-600"], daySelector("ghost"), DayBackground, (props) => props.theme.palette["blue-600"], DayText, daySelector("entered"), daySelector("disabled"), daySelector("entered-start"), dayLayers, DayBackground, (props) => props.theme.palette["grey-050"], DayText, (props) => props.theme.palette["blue-600"], daySelector("ghost"), DayBackground, (props) => props.theme.palette["blue-600"], DayText, daySelector("start"), daySelector("disabled"), daySelector("outside"), DayText, (props) => props.theme.palette.white, (props) => props.theme.palette["blue-600"], DayBackground, (props) => props.theme.palette["blue-100"], dayLayers, daySelector("start"), daySelector("disabled"), daySelector("outside"), daySelector("end"), daySelector("disabled"), daySelector("outside"), dayLayers, DayBackground, (props) => props.theme.palette.white, daySelector("end"), daySelector("disabled"), daySelector("outside"), DayText, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette.white, dayLayers, daySelector("end") + daySelector("start"), daySelector("disabled"), daySelector("outside"), dayLayers, daySelector("selected"), daySelector("disabled"), DayTooltip, (props) => props.theme.palette.white, daySelector("initial"), daySelector("disabled"), daySelector("entered"), daySelector("initial-entered"), daySelector("disabled"), DayBackground, daySelector("outside") + daySelector("entered") + daySelector("selected"), DayBackground, daySelector("start") + daySelector("selected"), daySelector("disabled"), daySelector("outside"), DayText, daySelector("selected"), daySelector("disabled"), daySelector("outside"), DayBackground, (props) => props.theme.palette["blue-100"], DayText, (props) => props.theme.palette["blue-600"]);
|
|
25
30
|
export {
|
|
26
31
|
DayBackground,
|
|
27
32
|
DayForeground,
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { DayModifiers, Modifier, Modifiers } from 'react-day-picker/types/Modifiers';
|
|
2
|
+
import { Matcher, Modifiers } from 'react-day-picker';
|
|
4
3
|
import { IntlShape } from 'react-intl';
|
|
4
|
+
import { DateLocaleUtils } from '../../localeUtils';
|
|
5
|
+
/**
|
|
6
|
+
* Props of the design-system calendar wrapper.
|
|
7
|
+
*
|
|
8
|
+
* The shape is deliberately unchanged from the `react-day-picker` v7 era so that
|
|
9
|
+
* `RawDatePicker` and `RangePicker` keep passing what they always passed; `DayPicker.tsx`
|
|
10
|
+
* translates it into the v10 API at that single boundary.
|
|
11
|
+
*/
|
|
5
12
|
export type DayPickerProps = {
|
|
6
13
|
month: Date;
|
|
14
|
+
className?: string;
|
|
7
15
|
onMonthChange?: (month: Date) => void;
|
|
8
16
|
onMonthNameClick?: () => void;
|
|
9
17
|
onYearNameClick?: () => void;
|
|
@@ -16,13 +24,14 @@ export type DayPickerProps = {
|
|
|
16
24
|
showOutsideDays?: boolean;
|
|
17
25
|
canChangeMonth?: boolean;
|
|
18
26
|
disabledDays?: (day?: Date) => boolean;
|
|
19
|
-
selectedDays?:
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
selectedDays?: Matcher | Matcher[];
|
|
28
|
+
/** Day-of-month predicates or dates keyed by modifier name; each becomes a `DayPicker-Day--*` class. */
|
|
29
|
+
modifiers?: Record<string, Matcher | Matcher[] | undefined>;
|
|
30
|
+
localeUtils?: DateLocaleUtils;
|
|
22
31
|
title?: string;
|
|
23
32
|
renderDay?: (day: Date) => React.ReactNode;
|
|
24
33
|
renderNavbar?: (props: DayPickerProps) => React.ReactNode;
|
|
25
|
-
onDayClick?: (day: Date, modifiers:
|
|
34
|
+
onDayClick?: (day: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
|
|
26
35
|
onDayMouseEnter?: (day: Date) => void;
|
|
27
36
|
onDayMouseLeave?: () => void;
|
|
28
37
|
};
|
package/dist/localeUtils.d.ts
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* The locale helpers the calendar needs. Previously a `react-day-picker` v7 `LocaleUtils`
|
|
3
|
+
* object built by spreading `react-day-picker/moment`; v10 has no such concept, so the type is
|
|
4
|
+
* declared here and the moment-derived `formatDate` / `parseDate` / `getMonths` are gone. That
|
|
5
|
+
* spread was also the only thing pulling `moment` into this package, which never declared it.
|
|
6
|
+
*
|
|
7
|
+
* `DayPicker.tsx` adapts these into v10's `formatters` and `labels`.
|
|
8
|
+
*/
|
|
9
|
+
export type DateLocaleUtils = {
|
|
10
|
+
formatDay: (d: Date, format?: string, locale?: string) => string;
|
|
11
|
+
formatMonthTitle: (d: Date, locale?: string) => string;
|
|
12
|
+
formatWeekdayShort: (i: number, locale?: string) => string;
|
|
13
|
+
formatWeekdayLong: (weekday: number, locale?: string) => string;
|
|
14
|
+
getFirstDayOfWeek: (locale?: string) => number;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Kept for backwards compatibility of the published surface. The calendar no longer
|
|
18
|
+
* consumes this object directly.
|
|
19
|
+
*/
|
|
20
|
+
declare const localeUtils: DateLocaleUtils;
|
|
3
21
|
export default localeUtils;
|
package/dist/localeUtils.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import MomentLocaleUtils from "react-day-picker/moment";
|
|
2
1
|
const LOCALES = ["en", "pl"];
|
|
3
2
|
const WEEKDAYS_LONG = {
|
|
4
3
|
en: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
|
@@ -38,7 +37,6 @@ function getFirstDayOfWeek(locale = DEFAULT_LOCALE) {
|
|
|
38
37
|
return FIRST_DAY[getValidLocale(locale)];
|
|
39
38
|
}
|
|
40
39
|
const localeUtils = {
|
|
41
|
-
...MomentLocaleUtils,
|
|
42
40
|
formatDay,
|
|
43
41
|
formatMonthTitle,
|
|
44
42
|
formatWeekdayShort,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-date-picker",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "DatePicker UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -43,18 +43,18 @@
|
|
|
43
43
|
"types": "dist/index.d.ts",
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@date-fns/upgrade": "^1.0.3",
|
|
46
|
-
"@synerise/ds-button": "^2.0.
|
|
47
|
-
"@synerise/ds-dropdown": "^2.0.
|
|
48
|
-
"@synerise/ds-icon": "^2.
|
|
49
|
-
"@synerise/ds-input": "^2.0.
|
|
50
|
-
"@synerise/ds-time-picker": "^2.0.
|
|
51
|
-
"@synerise/ds-tooltip": "^2.0.
|
|
52
|
-
"@synerise/ds-typography": "^2.0.
|
|
46
|
+
"@synerise/ds-button": "^2.0.1",
|
|
47
|
+
"@synerise/ds-dropdown": "^2.0.2",
|
|
48
|
+
"@synerise/ds-icon": "^2.1.0",
|
|
49
|
+
"@synerise/ds-input": "^2.0.2",
|
|
50
|
+
"@synerise/ds-time-picker": "^2.0.2",
|
|
51
|
+
"@synerise/ds-tooltip": "^2.0.1",
|
|
52
|
+
"@synerise/ds-typography": "^2.0.1",
|
|
53
53
|
"@synerise/ds-utils": "^2.0.0",
|
|
54
54
|
"classnames": "^2.5.1",
|
|
55
55
|
"date-fns": "2.16.1",
|
|
56
56
|
"lodash.range": "^3.2.0",
|
|
57
|
-
"react-day-picker": "^
|
|
57
|
+
"react-day-picker": "^10.0.1",
|
|
58
58
|
"uuid": "^8.3.2"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"react-intl": ">=3.12.0 <= 6.8",
|
|
68
68
|
"styled-components": "^5.3.3"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "788eba77544b291f7e938864a3994df4b4d904e2"
|
|
71
71
|
}
|