[Datepicker] Bumped react-day-picker to v9.

.changeset/neat-pumas-3.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+DatePicker: Refactored locally to support `react-day-picker v9`. No external API has been changed.

.changeset/neat-pumas-4.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+MonthPicker: Refactored locally and no longer depends on `react-day-picker v9`. No external API has been changed.

.changeset/neat-pumas-5.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": minor
+---
+
+DatePicker: Updated `date.css` to support `react-day-picker v9`.

.changeset/neat-pumas-sort.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Dependencies: `react-day-picker` bumped to `v9.5.0`.

.changeset/neat-pumas-tros.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Dependencies: `date-fns` bumped to `^4.0.0`.

@navikt/core/css/date.css

@@ -22,30 +22,13 @@
   font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber {
-  font-size: var(--a-font-size-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: var(--a-border-radius-medium);
-  margin: var(--a-spacing-2);
-  color: var(--a-text-subtle);
-}
-
-.navds-date .rdp-weeknumber.rdp-button {
-  width: 2rem;
-  height: 2rem;
-  box-shadow: 0 0 0 1px var(--a-border-default);
+.navds-date__weeknumber-number {
+  font-size: 0.875rem;
   color: var(--a-text-subtle);
-  font-size: var(--a-font-size-small);
 }
 
-.navds-date .rdp-weeknumber.rdp-button:active {
-  background-color: var(--a-surface-action-active);
-  color: var(--a-text-on-action);
-  box-shadow: none;
+.navds-date__weeknumber:active .navds-date__weeknumber-number {
+  color: var(--a-text-on-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -303,6 +286,13 @@
   margin: 0;
 }
 
+span.rdp-weeknumber {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
 .navds-date__modal.navds-date {
   padding: 0;
 }

@navikt/core/react/package.json

@@ -628,8 +628,8 @@
     "@navikt/aksel-icons": "^7.12.2",
     "@navikt/ds-tokens": "^7.12.2",
     "clsx": "^2.1.0",
-    "date-fns": "^3.0.0",
-    "react-day-picker": "8.10.1"
+    "date-fns": "^4.0.0",
+    "react-day-picker": "9.5.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.0",

@navikt/core/react/src/date/parts/DateWrapper.tsx → @navikt/core/react/src/date/Date.Dialog.tsx

@@ -1,13 +1,13 @@
 import cl from "clsx";
 import React, { useRef } from "react";
-import { Button } from "../../button";
-import { Modal } from "../../modal";
-import { useModalContext } from "../../modal/Modal.context";
-import { Popover } from "../../popover";
-import { useMedia } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.hooks";
-import { TFunction } from "../../util/i18n/i18n.types";
-import { getGlobalTranslations } from "../utils";
+import { Button } from "../button";
+import { Modal } from "../modal";
+import { useModalContext } from "../modal/Modal.context";
+import { Popover } from "../popover";
+import { useMedia } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.hooks";
+import { TFunction } from "../util/i18n/i18n.types";
+import { getGlobalTranslations } from "./Date.locale";
 
 const variantToLabel = {
   single: "chooseDate",
@@ -31,7 +31,7 @@ type DateWrapperProps = {
   };
 };
 
-export const DateWrapper = ({
+const DateDialog = ({
   open,
   children,
   onClose,
@@ -66,6 +66,7 @@ export const DateWrapper = ({
       </Popover>
     );
   }
+
   return (
     <Modal
       ref={modalRef}
@@ -80,6 +81,7 @@ export const DateWrapper = ({
         "navds-date": variant === "month",
       })}
       closeOnBackdropClick
+      placement="top"
     >
       <div className="navds-date__modal-body">
         {children}
@@ -95,3 +97,4 @@ export const DateWrapper = ({
     </Modal>
   );
 };
+export { DateDialog };

@navikt/core/react/src/date/parts/DateInput.tsx → @navikt/core/react/src/date/Date.Input.tsx

@@ -1,11 +1,36 @@
 import cl from "clsx";
 import React, { InputHTMLAttributes, forwardRef, useRef } from "react";
 import { CalendarIcon } from "@navikt/aksel-icons";
-import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
-import { FormFieldProps, useFormField } from "../../form/useFormField";
-import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { omit } from "../../util";
-import { useDateInputContext, useDateTranslationContext } from "../context";
+import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../form/useFormField";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
+import { createContext } from "../util/create-context";
+import { useDateTranslationContext } from "./Date.locale";
+
+interface DateInputContextProps {
+  /**
+   * Open state for popover
+   */
+  open: boolean;
+  /**
+   * Callback for onOpen toggle
+   */
+  onOpen: () => void;
+  /**
+   * Aria-connected ID
+   */
+  ariaId?: string;
+  /**
+   * Flag for enabled-check
+   */
+  defined: boolean;
+}
+
+export const [DateInputContextProvider, useDateInputContext] =
+  createContext<DateInputContextProps>({
+    errorMessage: "useDateInputContext must be used with DateInputContext",
+  });
 
 export interface DateInputProps
   extends FormFieldProps,

@navikt/core/react/src/date/utils/locale.ts → @navikt/core/react/src/date/Date.locale.ts

@@ -1,6 +1,8 @@
 import { enGB, nb, nn } from "date-fns/locale";
-import en_translations from "../../util/i18n/locales/en";
-import nn_translations from "../../util/i18n/locales/nn";
+import { createContext } from "../util/create-context";
+import { TFunction } from "../util/i18n/i18n.types";
+import en_translations from "../util/i18n/locales/en";
+import nn_translations from "../util/i18n/locales/nn";
 
 /** @private */
 export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
@@ -45,3 +47,10 @@ export const getGlobalTranslations = (locale: string | undefined) => {
       return undefined;
   }
 };
+
+interface DateTranslationContextProps {
+  translate: TFunction<"DatePicker">;
+}
+
+export const [DateTranslationContextProvider, useDateTranslationContext] =
+  createContext<DateTranslationContextProps>();

@navikt/core/react/src/date/Date.typeutils.ts

@@ -0,0 +1,32 @@
+export type DateRange = {
+  from: Date | undefined;
+  to?: Date | undefined;
+};
+
+export type DateBefore = {
+  before: Date;
+};
+
+export type DateAfter = {
+  after: Date;
+};
+
+export function isDateAfterType(value: unknown): value is DateAfter {
+  return Boolean(value && typeof value === "object" && "after" in value);
+}
+
+export function isDateBeforeType(value: unknown): value is DateBefore {
+  return Boolean(value && typeof value === "object" && "before" in value);
+}
+
+export function isDateRange(value: unknown): value is DateRange {
+  return Boolean(value && typeof value === "object" && "from" in value);
+}
+
+export type Matcher =
+  | ((date: Date) => boolean)
+  | Date
+  | Date[]
+  | DateRange
+  | DateBefore
+  | DateAfter;