[WNMGDS-2757] Upgrade react-day-picker library

examples/astro/src/pages/react.astro

@@ -6,7 +6,7 @@ import AutocompleteExample from '../components/react/AutocompleteExample';
 import BadgeExample from '../components/react/BadgeExample';
 import ButtonExample from '../components/react/ButtonExample';
 import ChoiceListExample from '../components/react/ChoiceListExample';
-// import SingleInputDateFieldExample from '../components/react/SingleInputDateFieldExample';
+import SingleInputDateFieldExample from '../components/react/SingleInputDateFieldExample';
 import MultiInputDateFieldExample from '../components/react/MultiInputDateFieldExample';
 import DropdownExample from '../components/react/DropdownExample';
 import FilterChipExample from '../components/react/FilterChipExample';
@@ -39,7 +39,7 @@ import { SkipNav, UsaBanner } from '@cmsgov/design-system';
     <BadgeExample client:visible />
     <ButtonExample client:visible />
     <ChoiceListExample client:visible />
-    <!-- <SingleInputDateFieldExample client:visible /> -->
+    <SingleInputDateFieldExample client:visible />
     <MultiInputDateFieldExample client:visible />
     <DropdownExample client:visible />
     <FilterChipExample client:visible />

examples/preact-app/webpack.config.js

@@ -20,6 +20,15 @@ const config = {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist/scripts'),
   },
+  resolve: {
+    alias: {
+      // These aliases are necessary because we use React-based libraries in some of the
+      // design-system components
+      react: 'preact/compat',
+      'react-dom': 'preact/compat',
+      'react/jsx-runtime': 'preact/jsx-runtime',
+    },
+  },
   module: {
     rules: [
       {

packages/design-system/package.json

@@ -60,14 +60,14 @@
     "@types/react-transition-group": "^4.4.5",
     "case-it": "^1.0.1",
     "classnames": "^2.2.5",
-    "date-fns": "^2.28.0",
+    "date-fns": "^3.0.6",
     "ev-emitter": "^1.1.1",
     "focus-trap-react": "^10.0.0",
     "lodash": "^4.17.21",
     "preactement": "1.8.5",
     "prop-types": "^15.8.1",
     "react-aria": "^3.27.0",
-    "react-day-picker": "8.0.5",
+    "react-day-picker": "8.10.1",
     "react-stately": "^3.25.0",
     "react-transition-group": "^4.4.5"
   },

packages/design-system/src/components/DateField/CustomDayPicker.tsx

@@ -1,5 +1,5 @@
 import CustomDayPickerCaption from './CustomDayPickerCaption';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import { DayPicker, DayPickerSingleProps } from 'react-day-picker';
 import { ArrowsStackedIcon } from '../Icons';
 import { t } from '../i18n';

packages/design-system/src/components/DateField/SingleInputDateField.tsx

@@ -4,7 +4,7 @@ import CustomDayPicker from './CustomDayPicker';
 import classNames from 'classnames';
 import cleanFieldProps from '../utilities/cleanFieldProps';
 import describeField from '../utilities/describeField';
-import isMatch from 'date-fns/isMatch';
+import { isMatch } from 'date-fns';
 import mergeIds from '../utilities/mergeIds';
 import useLabelMask from '../TextField/useLabelMask';
 import useClickOutsideHandler from '../utilities/useClickOutsideHandler';

packages/design-system/src/styles/components/_SingleInputDateField.scss

@@ -67,12 +67,7 @@
   border: 2px solid transparent;
 }
 
-.rdp-button[aria-disabled='true'] {
-  opacity: 0.25;
-  pointer-events: none;
-}
-
-.rdp-button:not([aria-disabled='true']) {
+.rdp-button:not(:disabled) {
   cursor: pointer;
 }
 
@@ -83,7 +78,7 @@
   color: inherit;
 }
 
-.rdp-button:hover:not([aria-disabled='true']) {
+.rdp-button:hover:not(:disabled) {
   background-color: var(--rdp-background-color);
 }
 
@@ -207,13 +202,13 @@
   z-index: 2;
 }
 
-.rdp-dropdown[disabled] {
+.rdp-dropdown:disabled {
   color: unset;
   opacity: unset;
 }
 
-.rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
-.rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+.rdp-dropdown:focus:not(:disabled) + .rdp-caption_label,
+.rdp-dropdown:active:not(:disabled) + .rdp-caption_label {
   background-color: var(--rdp-background-color);
   border: var(--rdp-outline);
   border-radius: 6px;
@@ -282,18 +277,37 @@
   font-weight: bold;
 }
 
-.rdp-day_selected:not([aria-disabled='true']),
-.rdp-day_selected:focus:not([aria-disabled='true']),
-.rdp-day_selected:active:not([aria-disabled='true']),
-.rdp-day_selected:hover:not([aria-disabled='true']) {
+.rdp-day_selected:not(:disabled),
+.rdp-day_selected:focus:not(:disabled),
+.rdp-day_selected:active:not(:disabled),
+.rdp-day_selected:hover:not(:disabled) {
   background-color: var(--rdp-accent-color);
   color: white;
 }
 
-.rdp-day_selected:focus:not([aria-disabled='true']) {
+.rdp-day_selected:focus:not(:disabled) {
   border: var(--rdp-outline-selected);
 }
 
+.rdp-day_disabled {
+  overflow: visible;
+  color: var(--color-muted);
+
+  &::after {
+    background: var(--color-muted);
+    content: '';
+    display: block;
+    position: absolute;
+    width: calc(100% + 4px);
+    height: 2px;
+
+    @media (forced-colors: active) {
+      background-color: GrayText;
+      cursor: not-allowed;
+    }
+  }
+}
+
 .rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
@@ -358,24 +372,24 @@
 }
 
 .rdp-button:active,
-.rdp-button:active:hover:not([aria-disabled='true']),
-.rdp-day_selected:active:not([aria-disabled='true']),
-.rdp-day_selected:active:hover:not([aria-disabled='true']) {
+.rdp-button:active:hover:not(:disabled),
+.rdp-day_selected:active:not(:disabled),
+.rdp-day_selected:active:hover:not(:disabled) {
   background-color: var(--rdp-active-color);
   color: white;
 }
 
 @media (forced-colors: active) {
-  .rdp-button[aria-disabled='true'] {
+  .rdp-button:disabled {
     border-color: GrayText;
     color: GrayText;
     opacity: 1;
   }
 
-  .rdp-day_selected:not([aria-disabled='true']),
-  .rdp-day_selected:focus:not([aria-disabled='true']),
-  .rdp-day_selected:active:not([aria-disabled='true']),
-  .rdp-day_selected:hover:not([aria-disabled='true']) {
+  .rdp-day_selected:not(:disabled),
+  .rdp-day_selected:focus:not(:disabled),
+  .rdp-day_selected:active:not(:disabled),
+  .rdp-day_selected:hover:not(:disabled) {
     background-color: Highlight;
     border-color: Highlight;
     color: Field;
@@ -391,8 +405,8 @@
   padding: 0 $spacer-1;
 }
 
-.rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
-.rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+.rdp-dropdown:focus:not(:disabled) + .rdp-caption_label,
+.rdp-dropdown:active:not(:disabled) + .rdp-caption_label {
   @include mixins.focus-styles;
 
   background-color: initial;
@@ -436,25 +450,8 @@
   }
 
   &:disabled {
-    color: var(--pagination-link__color--disabled);
     pointer-events: none;
-
-    @media (forced-colors: active) {
-      border: 0;
-      color: GrayText;
-      cursor: not-allowed;
-
-      .ds-c-icon {
-        color: GrayText;
-        fill: GrayText;
-
-        path {
-          color: GrayText;
-          fill: GrayText;
-          stroke: GrayText;
-        }
-      }
-    }
+    visibility: hidden;
   }
 }
 

packages/docs/src/components/content/PublishDate.tsx

@@ -1,4 +1,4 @@
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 
 export interface PublishDateProps {
   date: string;

yarn.lock

@@ -4992,22 +4992,6 @@
     "@prefresh/utils" "^1.2.0"
     "@rollup/pluginutils" "^4.2.1"
 
-"@reach/[email protected]":
-  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/[email protected]":
-  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"
-
 "@react-aria/breadcrumbs@^3.5.4":
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.4.tgz#fbd4e213adf84bde39e126ea62c389de9dc00e20"
@@ -11458,13 +11442,18 @@ dataloader@^1.4.0:
   resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-1.4.0.tgz#bca11d867f5d3f1b9ed9f737bd15970c65dff5c8"
   integrity sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==
 
-date-fns@^2.25.0, date-fns@^2.28.0:
+date-fns@^2.25.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^3.0.6:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.3.1.tgz#7581daca0892d139736697717a168afbb908cfed"
+  integrity sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -21975,12 +21964,10 @@ react-colorful@^5.1.2:
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
-[email protected]:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.0.5.tgz#079f21ebdc353b66a97ef4258062f27c10b55145"
-  integrity sha512-qw5t2zJB1ob7p0yhbuVY0kzu08qePrpYW1kldrhTJ0nHN/z5Jb90MeCAi2889z8h2NJ/Flh5gLR9XcJIsr4ijQ==
-  dependencies:
-    "@reach/auto-id" "0.16.0"
+[email protected]:
+  version "8.10.1"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80"
+  integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
 
 react-dev-utils@^12.0.1:
   version "12.0.1"
@@ -24855,11 +24842,6 @@ tiny-invariant@^1.3.1:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
-tiny-warning@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"