Better support for React 19 (#3268)

* Date/MonthPicker: Upgrade react-day-picker to fix issue with Nextjs 15 * Slot: Use ref from props to avoid warning in React 19
navikt · Oct 24, 2024 · fdc3244 · fdc3244
1 parent 59dc3e9
commit fdc3244
Show file tree

Hide file tree

Showing 11 changed files with 1,358 additions and 782 deletions.
diff --git a/.changeset/brave-tomatoes-hunt.md b/.changeset/brave-tomatoes-hunt.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19
diff --git a/.changeset/red-months-cough.md b/.changeset/red-months-cough.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Avoid warning about element.ref in React 19
diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
@@ -608,7 +608,7 @@
     "@navikt/ds-tokens": "^7.3.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
-    "react-day-picker": "8.10.0"
+    "react-day-picker": "8.10.1"
   },
   "devDependencies": {
     "@testing-library/dom": "9.3.4",

diff --git a/@navikt/core/react/src/slot/Slot.tsx b/@navikt/core/react/src/slot/Slot.tsx
@@ -10,11 +10,16 @@ const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props;
 
   if (React.isValidElement(children)) {
+    const childRef = Object.prototype.propertyIsEnumerable.call(
+      children.props,
+      "ref",
+    )
+      ? children.props.ref // React 19 (children.ref still works, but gives a warning)
+      : (children as any).ref; // React <19
+
     return React.cloneElement<any>(children, {
       ...mergeProps(slotProps, children.props),
-      ref: forwardedRef
-        ? mergeRefs([forwardedRef, (children as any).ref])
-        : (children as any).ref,
+      ref: forwardedRef ? mergeRefs([forwardedRef, childRef]) : childRef,
     });
   }
 

diff --git a/examples/next-appdir/package.json b/examples/next-appdir/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "rimraf .next && yarn && next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -12,15 +12,16 @@
     "@navikt/aksel-icons": "file:./../../@navikt/aksel-icons",
     "@navikt/ds-css": "file:./../../@navikt/core/css",
     "@navikt/ds-react": "file:./../../@navikt/core/react",
-    "@next/bundle-analyzer": "^14.1.0",
-    "next": "14.2.12",
+    "@next/bundle-analyzer": "^15.0.0",
+    "next": "15.0.0",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "rimraf": "^6.0.1",
     "typescript": "5.5.4"
   }
 }
diff --git a/examples/next-appdir/src/app/client.tsx b/examples/next-appdir/src/app/client.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { ExpansionCard } from "@navikt/ds-react";
+import { Box } from "@navikt/ds-react/Box";
+import { DatePicker, useDatepicker } from "@navikt/ds-react/DatePicker";
 import { omit, useClientLayoutEffect } from "@navikt/ds-react/Utils";
 
 export const ClientComponent = () => {
@@ -21,3 +23,19 @@ export const ClientComponent = () => {
     </div>
   );
 };
+
+export const MyDatePicker = () => {
+  const { datepickerProps, inputProps, selectedDay } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onDateChange: console.info,
+  });
+
+  return (
+    <div>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+      <Box paddingBlock="4 0">{selectedDay?.toLocaleDateString()}</Box>
+    </div>
+  );
+};
diff --git a/examples/next-appdir/src/app/page.module.css b/examples/next-appdir/src/app/page.module.css
@@ -83,30 +83,6 @@
   padding: 4rem 0;
 }
 
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: "";
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
 .logo {
   position: relative;
 }

diff --git a/examples/next-appdir/src/app/page.tsx b/examples/next-appdir/src/app/page.tsx
@@ -13,7 +13,7 @@ import {
 import { Select } from "@navikt/ds-react/Select";
 import { Tooltip } from "@navikt/ds-react/Tooltip";
 import { omit } from "@navikt/ds-react/Utils";
-import { ClientComponent } from "./client";
+import { ClientComponent, MyDatePicker } from "./client";
 import styles from "./page.module.css";
 
 export default function Home() {
@@ -116,6 +116,9 @@ export default function Home() {
         <Checkbox value="Midterst">Midterst</Checkbox>
         <Checkbox value="Fremst">Fremst</Checkbox>
       </CheckboxGroup>
+
+      <MyDatePicker />
+
       <div className={styles.center}>
         <Image
           className={styles.logo}

diff --git a/examples/next-appdir/tsconfig.json b/examples/next-appdir/tsconfig.json
@@ -19,7 +19,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]