From d7d27d88778d50c761a2e362327aa26c06976b1c Mon Sep 17 00:00:00 2001 From: Josh Calder Date: Tue, 3 May 2022 12:33:35 +1000 Subject: [PATCH] Update react-day-picker to v8 (#7497) --- .changeset/old-turkeys-smash.md | 5 + design-system/packages/fields/package.json | 2 +- .../fields/src/DatePicker/Calendar.tsx | 127 +++++++++--------- .../packages/fields/src/DatePicker/index.tsx | 2 +- yarn.lock | 26 +++- 5 files changed, 90 insertions(+), 72 deletions(-) create mode 100644 .changeset/old-turkeys-smash.md 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 0d9bbb976ca..f4df6c1c7f7 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" @@ -11014,12 +11030,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"