diff --git a/.changeset/old-turkeys-smash.md b/.changeset/old-turkeys-smash.md
new file mode 100644
index 00000000000..a396d7b4c2b
--- /dev/null
+++ b/.changeset/old-turkeys-smash.md
@@ -0,0 +1,5 @@
+---
+'@keystone-ui/fields': minor
+---
+
+Upgrade `react-day-picker` to v8
diff --git a/design-system/packages/fields/package.json b/design-system/packages/fields/package.json
index aca9951913f..1c0b7bb4910 100644
--- a/design-system/packages/fields/package.json
+++ b/design-system/packages/fields/package.json
@@ -14,7 +14,7 @@
"@keystone-ui/popover": "^5.0.1",
"date-fns": "^2.26.0",
"react": "^17.0.2",
- "react-day-picker": "npm:react-day-picker@^7.4.8",
+ "react-day-picker": "^8.0.4",
"react-focus-lock": "^2.7.1",
"react-select": "^5.2.1"
},
diff --git a/design-system/packages/fields/src/DatePicker/Calendar.tsx b/design-system/packages/fields/src/DatePicker/Calendar.tsx
index 9158708fd30..2bae98cb515 100644
--- a/design-system/packages/fields/src/DatePicker/Calendar.tsx
+++ b/design-system/packages/fields/src/DatePicker/Calendar.tsx
@@ -1,8 +1,7 @@
/** @jsxRuntime classic */
/** @jsx jsx */
-import { useMemo } from 'react';
-import DayPicker, { DayPickerProps } from 'react-day-picker';
+import { DayPicker, DayPickerProps } from 'react-day-picker';
import { jsx, useTheme } from '@keystone-ui/core';
import { getContrastText } from './utils/getContrastText';
import { hexToRgb } from './utils/hexToRgb';
@@ -10,17 +9,10 @@ import { hexToRgb } from './utils/hexToRgb';
export const Calendar = ({ modifiers, ...props }: DayPickerProps) => {
const styles = useCalendarStyles();
const indexOfMonday = 1;
- const augmentedModifiers = useMemo(
- () => ({
- ...modifiers,
- weekend: { daysOfWeek: [0, 6] },
- }),
- [modifiers]
- );
return (
-
+
);
};
@@ -39,22 +31,38 @@ const useCalendarStyles = () => {
padding: 8, //theme.spacing.small,
// resets and wrapper stuff
- '.DayPicker': {
+ '.rdp': {
display: 'inline-block',
fontSize: '1rem',
},
- '.DayPicker-wrapper': {
+ '.rdp-vhidden': {
+ boxSizing: 'border-box',
+ padding: 0,
+ margin: 0,
+ background: 'transparent',
+ border: 0,
+ MozAppearance: 'none',
+ WebkitAppearance: 'none',
+ appearance: 'none',
+ top: 0,
+ width: '1px !important',
+ height: '1px !important',
+ overflow: 'hidden !important',
+ clip: 'rect(1px, 1px, 1px, 1px) !important',
+ display: 'block !important',
+ },
+ '.rdp-wrapper': {
position: 'relative',
flexDirection: 'row',
userSelect: 'none',
outline: 0,
},
- '.DayPicker-Months': {
+ '.rdp-months': {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
},
- '.DayPicker-Month': {
+ '.rdp-month': {
display: 'table',
// separate weeks for easier parsing of range selection
@@ -67,26 +75,28 @@ const useCalendarStyles = () => {
// NOTE: resolve weird safari bug:
// https://bugs.webkit.org/show_bug.cgi?id=187903
position: 'relative',
- '.DayPicker-Caption > div': { position: 'absolute' },
+ '.rdp-caption_label': { position: 'absolute' },
},
// the caption is the day/month title e.g. "July 2020"
- '.DayPicker-Caption': {
- display: 'table-caption',
+ '.rdp-caption': {
+ display: 'flex',
height: navButtonSize,
marginBottom: '0.5em',
padding: '0 0.5em',
textAlign: 'left',
+ alignItems: 'center',
+ justifyContent: 'space-between',
},
- '.DayPicker-Caption > div': {
+ '.rdp-caption_label': {
fontWeight: 500, //theme.typography.fontWeight.medium,
fontSize: '1rem', //theme.typography.fontSize.medium,
},
// weekdays
- '.DayPicker-Weekdays': { display: 'table-header-group', marginTop: '1em' },
- '.DayPicker-WeekdaysRow': { display: 'table-row' },
- '.DayPicker-Weekday': {
+ '.rdp-head': { display: 'table-header-group', marginTop: '1em' },
+ '.rdp-head_row': { display: 'table-row' },
+ '.rdp-head_cell': {
color: colors.foregroundDim, //theme.palette.text.dim,
display: 'table-cell',
fontSize: '0.875rem', //theme.typography.fontSize.small,
@@ -94,17 +104,17 @@ const useCalendarStyles = () => {
padding: '0.5em',
textAlign: 'center',
},
- '.DayPicker-Weekday abbr[title]': {
+ '.rdp-head_cell abbr[title]': {
borderBottom: 'none',
textDecoration: 'none',
},
- '.DayPicker-Body': {
+ '.rdp-body': {
display: 'table-row-group',
fontSize: '0.875rem', //theme.typography.fontSize.small,
fontWeight: 500, // theme.typography.fontWeight.medium,
},
- '.DayPicker-Week': { display: 'table-row' },
- '.DayPicker-WeekNumber': {
+ '.rdp-week': { display: 'table-row' },
+ '.rdp-weeknumber': {
display: 'table-cell',
padding: '0.5em',
minWidth: '1em',
@@ -115,19 +125,18 @@ const useCalendarStyles = () => {
fontSize: '0.75em',
cursor: 'pointer',
},
- '.DayPicker--interactionDisabled .DayPicker-Day': { cursor: 'default' },
+ '.rdp_interactionDisabled .rdp-day': { cursor: 'default' },
// nav buttons
- '.DayPicker-NavBar': {
- display: 'flex',
+ '.rdp-nav': {
position: 'absolute',
right: 4, //theme.spacing.xsmall,
- top: 4, //theme.spacing.xsmall,
zIndex: 1,
},
- '.DayPicker-NavButton': {
+ '.rdp-nav_button': {
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
+ backgroundColor: 'transparent',
// backgroundSize: '66.667%',
borderRadius: 4, //theme.radii.xsmall,
color: colors.foreground, // theme.palette.listItem.text,
@@ -147,30 +156,18 @@ const useCalendarStyles = () => {
color: colors.foreground, //theme.palette.listItem.textPressed,
},
},
- '.DayPicker-NavButton--next': {
- backgroundImage:
- `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='${encodeURIComponent(
- colors.foreground //theme.palette.listItem.text
- )}' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E")` as string,
- },
- '.DayPicker-NavButton--prev': {
- backgroundImage:
- `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='${encodeURIComponent(
- colors.foreground //theme.palette.listItem.text
- )}' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E")` as string,
- },
// "day" or grid cell
- '.DayPicker-Day--outside': {
+ '.rdp-day_outside': {
color: colors.foregroundDim, // theme.palette.text.dim,
cursor: 'default',
},
- '.DayPicker-Day--disabled': {
+ '.rdp-day_disabled': {
color: colors.foregroundDim, // theme.palette.text.dim,
cursor: 'default',
},
- '.DayPicker-Day': {
+ '.rdp-day': {
borderRadius: '50%',
display: 'table-cell',
height: cellSize,
@@ -180,11 +177,12 @@ const useCalendarStyles = () => {
textAlign: 'center',
verticalAlign: 'middle',
width: cellSize,
+ backgroundColor: 'transparent',
},
- '.DayPicker-Day--weekend': {
+ '.rdp-day_weekend': {
color: colors.foregroundMuted, // theme.palette.text.muted,
},
- '.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside)': {
+ '.rdp-day:not(.rdp-day_disabled):not(.rdp-day_outside)': {
cursor: 'pointer',
'&:hover, &.focus-visible': {
@@ -203,11 +201,11 @@ const useCalendarStyles = () => {
},
},
},
- '.DayPicker-Day--today': {
+ '.rdp-day_today': {
color: palette.red400, // theme.palette.text.critical,
fontWeight: 700, // theme.typography.fontWeight.bold,
},
- '.DayPicker-Day--selected:not(.DayPicker-Day--outside)': {
+ '.rdp-day_selected:not(.rdp-day_outside)': {
color: getContrastText(interactionColor),
'&, &:hover, &.focus-visible': {
@@ -216,42 +214,41 @@ const useCalendarStyles = () => {
},
// range-specific day styles
- '.DayPicker-Day--rangeStart:not(.DayPicker-Day--outside), .DayPicker-Day--rangeEnd:not(.DayPicker-Day--outside)':
- {
- '&::before': {
- backgroundColor: rangeBetweenColor,
- position: 'absolute',
- content: '" "',
- width: cellSize / 2,
- height: cellSize,
- top: 0,
- zIndex: -1,
- },
+ '.rdp-day_range_start:not(.rdp-day_outside), .rdp-day_range_end:not(.rdp-day_outside)': {
+ '&::before': {
+ backgroundColor: rangeBetweenColor,
+ position: 'absolute',
+ content: '" "',
+ width: cellSize / 2,
+ height: cellSize,
+ top: 0,
+ zIndex: -1,
},
- '.DayPicker-Day--rangeStart': {
+ },
+ '.rdp-day_range_start': {
'&::before': {
right: 0,
},
},
- '.DayPicker-Day--rangeEnd': {
+ '.rdp-day_range_end': {
'&::before': {
left: 0,
},
},
- '.DayPicker-Day--rangeBetween.DayPicker-Day--selected:not(.DayPicker-Day--outside)': {
+ '.rdp-day_range_between.rdp-day_selected:not(.rdp-day_outside)': {
'&, &:hover, &.focus-visible': {
backgroundColor: rangeBetweenColor,
borderRadius: 0,
color: colors.foreground, // theme.palette.text.base,
},
},
- '.DayPicker-Day--rangeBetween.DayPicker-Day--firstOfMonth:not(.DayPicker-Day--outside)': {
+ '.rdp-day_rangeBetween.rdp-day_firstOfMonth:not(.rdp-day_outside)': {
'&, &:hover, &.focus-visible': {
// background: `linear-gradient(to left, ${rangeBetweenColor}, ${theme.palette.background.dialog})`,
background: `linear-gradient(to left, ${rangeBetweenColor}, ${colors.overlayBackground})`,
},
},
- '.DayPicker-Day--rangeBetween.DayPicker-Day--lastOfMonth:not(.DayPicker-Day--outside)': {
+ '.rdp-day_rangeBetween.rdp-day_lastOfMonth:not(.rdp-day_outside)': {
'&, &:hover, &.focus-visible': {
// background: `linear-gradient(to right, ${rangeBetweenColor}, ${theme.palette.background.dialog})`,
background: `linear-gradient(to right, ${rangeBetweenColor}, ${colors.overlayBackground})`,
diff --git a/design-system/packages/fields/src/DatePicker/index.tsx b/design-system/packages/fields/src/DatePicker/index.tsx
index 0d1a51f8879..abccf86928f 100644
--- a/design-system/packages/fields/src/DatePicker/index.tsx
+++ b/design-system/packages/fields/src/DatePicker/index.tsx
@@ -117,7 +117,7 @@ export const DatePicker = ({
-
+
diff --git a/yarn.lock b/yarn.lock
index f2d5c5f92e4..435cc5f2238 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2624,6 +2624,22 @@
resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
+"@reach/auto-id@^0.16.0":
+ version "0.16.0"
+ resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
+ integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
+ dependencies:
+ "@reach/utils" "0.16.0"
+ tslib "^2.3.0"
+
+"@reach/utils@0.16.0":
+ version "0.16.0"
+ resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
+ integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
+ dependencies:
+ tiny-warning "^1.0.3"
+ tslib "^2.3.0"
+
"@rollup/plugin-alias@^3.1.1":
version "3.1.8"
resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.8.tgz#645fd84659e08d3d1b059408fcdf69c1dd435a6b"
@@ -11019,12 +11035,12 @@ react-clientside-effect@^1.2.5:
dependencies:
"@babel/runtime" "^7.12.13"
-"react-day-picker@npm:react-day-picker@^7.4.8":
- version "7.4.10"
- resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.10.tgz#d3928fa65c04379ad28c76de22aa85374a8361e1"
- integrity sha512-/QkK75qLKdyLmv0kcVzhL7HoJPazoZXS8a6HixbVoK6vWey1Od1WRLcxfyEiUsRfccAlIlf6oKHShqY2SM82rA==
+react-day-picker@^8.0.4:
+ version "8.0.4"
+ resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.0.4.tgz#1d6f2627ecec30752bbfd706edd6e664b1a04ed1"
+ integrity sha512-RaGClmZjCgDl0O8OlgMnhtUBZgmSWNTv6p5TUXo8E9VudMPL9azAR9UCqF0JQxcDPLbjLgeMZnm53K0rWtRLCQ==
dependencies:
- prop-types "^15.6.2"
+ "@reach/auto-id" "^0.16.0"
react-dom@^17.0.2:
version "17.0.2"