@navikt/ds-react 7.13.0 → 7.14.0-alpha.1

package/src/date/datepicker/DatePicker.tsx

@@ -1,23 +1,23 @@
 import cl from "clsx";
-import { isWeekend } from "date-fns";
+import { isSameDay } from "date-fns";
 import React, { forwardRef, useState } from "react";
-import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { omit } from "../../util";
-import { useId } from "../../util/hooks";
+import { DateRange } from "react-day-picker";
+import { useControllableState, useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
-import { DateInputContext, DateTranslationContextProvider } from "../context";
-import { DatePickerInput } from "../parts/DateInput";
-import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString, getTranslations } from "../utils";
-import DatePickerStandalone from "./DatePickerStandalone";
-import Caption from "./parts/Caption";
-import DropdownCaption from "./parts/DropdownCaption";
-import { HeadRow } from "./parts/HeadRow";
-import Row from "./parts/Row";
-import TableHead from "./parts/TableHead";
-import WeekNumber from "./parts/WeekNumber";
-import { ConditionalModeProps, DatePickerDefaultProps } from "./types";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { DateDialog } from "../Date.Dialog";
+import { DateInputContextProvider, DatePickerInput } from "../Date.Input";
+import {
+  DateTranslationContextProvider,
+  getTranslations,
+} from "../Date.locale";
+import { isDateRange } from "../Date.typeutils";
+import {
+  ConditionalModeProps,
+  DatePickerDefaultProps,
+} from "./DatePicker.types";
+import { ReactDayPicker } from "./parts/DatePicker.RDP";
+import DatePickerStandalone from "./parts/DatePicker.Standalone";
 
 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
 
@@ -69,20 +69,15 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       children,
       locale,
       translations,
-      dropdownCaption,
-      disabled = [],
-      disableWeekends = false,
-      showWeekNumber = false,
       selected,
       id,
       defaultSelected,
-      className,
       wrapperClassName,
       open: _open,
       onClose,
       onOpenToggle,
       strategy,
-      onWeekNumberClick,
+      mode,
       ...rest
     },
     ref,
@@ -92,104 +87,84 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       translations,
       getTranslations(locale),
     );
-    const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
-    const [open, setOpen] = useState(_open ?? false);
+
+    const [open, setOpen] = useControllableState({
+      defaultValue: false,
+      value: _open,
+    });
 
     /* We use state here to insure that anchor is defined if open is true on initial render */
     const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
     const mergedRef = useMergeRefs(setWrapperRef, ref);
 
-    const [selectedDates, setSelectedDates] = React.useState<
+    const [value, setValue] = useControllableState<
       Date | Date[] | DateRange | undefined
-    >(defaultSelected);
-
-    const mode = rest.mode ?? ("single" as any);
+    >({
+      defaultValue: defaultSelected,
+      value: selected,
+      onChange: (newValue) => {
+        let closeDialog = false;
+        if (mode === "single" && newValue) {
+          closeDialog = true;
+        } else if (isDateRange(newValue) && newValue.from && newValue.to) {
+          closeDialog = true;
 
-    /**
-     * @param newSelected Date | Date[] | DateRange | undefined
-     */
-    const handleSelect = (newSelected) => {
-      setSelectedDates(newSelected);
+          if (isSameDay(newValue.from, newValue.to)) {
+            closeDialog = false;
+          }
+        }
 
-      if (rest.mode === "single") {
-        newSelected && (onClose?.() ?? setOpen(false));
-      } else if (rest.mode === "range") {
-        newSelected?.from && newSelected?.to && (onClose?.() ?? setOpen(false));
-      }
-      rest?.onSelect?.(newSelected);
-    };
+        if (closeDialog) {
+          onClose?.();
+          setOpen(false);
+        }
 
-    const DatePickerComponent = (
-      <DayPicker
-        locale={locale ? getLocaleFromString(locale) : langProviderLocale}
-        mode={mode}
-        onSelect={handleSelect}
-        selected={selected ?? selectedDates}
-        components={{
-          Caption: dropdownCaption ? DropdownCaption : Caption,
-          Head: TableHead,
-          HeadRow,
-          WeekNumber,
-          Row,
-        }}
-        className={cl("navds-date", className)}
-        classNames={{
-          vhidden: "navds-sr-only",
-        }}
-        disabled={(day) => {
-          return (disableWeekends && isWeekend(day)) || isMatch(day, disabled);
-        }}
-        weekStartsOn={1}
-        initialFocus={false}
-        modifiers={{
-          weekend: (day) => disableWeekends && isWeekend(day),
-        }}
-        modifiersClassNames={{
-          weekend: "rdp-day__weekend",
-        }}
-        showWeekNumber={showWeekNumber}
-        onWeekNumberClick={mode === "multiple" ? onWeekNumberClick : undefined}
-        fixedWeeks
-        showOutsideDays
-        {...omit(rest, ["onSelect"])}
-      />
-    );
+        rest?.onSelect?.(newValue as any);
+      },
+    });
 
     return (
       <DateTranslationContextProvider translate={translate}>
-        <DateInputContext.Provider
-          value={{
-            open: _open ?? open,
-            onOpen: () => {
-              setOpen((x) => !x);
-              onOpenToggle?.();
-            },
-            ariaId,
-            defined: true,
+        <DateInputContextProvider
+          open={open}
+          onOpen={() => {
+            setOpen((x) => !x);
+            onOpenToggle?.();
           }}
+          ariaId={ariaId}
+          defined={true}
         >
           <div
             ref={mergedRef}
             className={cl("navds-date__wrapper", wrapperClassName)}
           >
             {children}
-            <DateWrapper
-              open={_open ?? open}
+            <DateDialog
+              open={open}
               anchor={wrapperRef}
-              onClose={() => onClose?.() ?? setOpen(false)}
+              onClose={() => {
+                onClose?.();
+                open && setOpen(false);
+              }}
               locale={locale}
               translate={translate}
-              variant={mode}
+              variant={mode ?? "single"}
               popoverProps={{
                 id: ariaId,
                 strategy,
               }}
             >
-              {DatePickerComponent}
-            </DateWrapper>
+              <ReactDayPicker
+                {...rest}
+                locale={locale}
+                handleSelect={setValue}
+                selected={value as any}
+                mode={mode as any}
+              />
+            </DateDialog>
           </div>
-        </DateInputContext.Provider>
+        </DateInputContextProvider>
       </DateTranslationContextProvider>
     );
   },

package/src/date/datepicker/{types.ts → DatePicker.types.ts}

@@ -1,5 +1,6 @@
-import { DateRange, DayPickerBase, Matcher } from "react-day-picker";
+import { CalendarWeek, Matcher, PropsBase } from "react-day-picker";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
+import { DateRange } from "../Date.typeutils";
 
 export type SingleMode = {
   mode?: "single";
@@ -18,8 +19,10 @@ export type MultipleMode = {
   max?: number;
   /**
    * Allows selecting a week at a time. Only used with `mode` is set to "multiple".
+   * @param week Current week number
+   * @param days Dates in the week
    */
-  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
+  onWeekNumberClick?: (week: CalendarWeek["weekNumber"], days: Date[]) => void;
 };
 
 export type RangeMode = {
@@ -34,10 +37,13 @@ export type RangeMode = {
 
 export type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
 
-//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
+// https://daypicker.dev/api/interfaces/PropsBase
 export interface DatePickerDefaultProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
-    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
+    Pick<
+      PropsBase,
+      "month" | "onMonthChange" | "today" | "onDayClick" | "defaultMonth"
+    > {
   /**
    * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
    */

package/src/date/{hooks → datepicker/hooks}/useDatepicker.tsx

@@ -1,15 +1,11 @@
 import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
-import { DayClickEventHandler, isMatch } from "react-day-picker";
-import { useDateLocale } from "../../util/i18n/i18n.hooks";
-import { DatePickerProps } from "../datepicker/DatePicker";
-import { DateInputProps } from "../parts/DateInput";
-import {
-  formatDateForInput,
-  getLocaleFromString,
-  isValidDate,
-  parseDate,
-} from "../utils";
+import { DayEventHandler, dateMatchModifiers } from "react-day-picker";
+import { useDateLocale } from "../../../util/i18n/i18n.hooks";
+import { DateInputProps } from "../../Date.Input";
+import { getLocaleFromString } from "../../Date.locale";
+import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
+import { DatePickerProps } from "../DatePicker";
 
 export interface UseDatepickerOptions
   extends Pick<
@@ -230,7 +226,10 @@ export const useDatepicker = (
   };
 
   /* Only allow de-selecting if not required */
-  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
+  const handleDayClick: DayEventHandler<React.MouseEvent> = (
+    day,
+    { selected },
+  ) => {
     if (selected && required) {
       return;
     }
@@ -274,13 +273,13 @@ export const useDatepicker = (
     if (
       !isValidDate(day) ||
       (disableWeekends && isWeekend(day)) ||
-      (disabled && isMatch(day, disabled))
+      (disabled && dateMatchModifiers(day, disabled))
     ) {
       updateDate(undefined);
       updateValidation({
         isInvalid: !isValidDate(day),
         isWeekend: disableWeekends && isWeekend(day),
-        isDisabled: disabled && isMatch(day, disabled),
+        isDisabled: disabled && dateMatchModifiers(day, disabled),
         isValidDate: false,
         isEmpty: !e.target.value,
         isBefore: isBefore ?? false,

package/src/date/{hooks → datepicker/hooks}/useRangeDatepicker.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { DatePicker } from "../datepicker";
+import { DatePicker } from "../DatePicker";
 import { useRangeDatepicker } from "./useRangeDatepicker";
 
 const RangeDemo = () => {

package/src/date/{hooks → datepicker/hooks}/useRangeDatepicker.tsx

@@ -1,19 +1,17 @@
 import {
   isBefore as checkIsBefore,
   differenceInCalendarDays,
+  isSameDay,
   isWeekend,
 } from "date-fns";
 import React, { useState } from "react";
-import { DateRange, isMatch } from "react-day-picker";
-import { useDateLocale } from "../../util/i18n/i18n.hooks";
-import { DatePickerProps } from "../datepicker/DatePicker";
-import { DateInputProps } from "../parts/DateInput";
-import {
-  formatDateForInput,
-  getLocaleFromString,
-  isValidDate,
-  parseDate,
-} from "../utils";
+import { dateMatchModifiers } from "react-day-picker";
+import { useDateLocale } from "../../../util/i18n/i18n.hooks";
+import { DateInputProps } from "../../Date.Input";
+import { getLocaleFromString } from "../../Date.locale";
+import { DateRange } from "../../Date.typeutils";
+import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
+import { DatePickerProps } from "../DatePicker";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
 
 export type RangeValidationT = {
@@ -128,13 +126,13 @@ const fromValidation = (day: Date, opt?: UseRangeDatepickerOptions) => {
   if (
     isValidDate(day) &&
     !(opt?.disableWeekends && isWeekend(day)) &&
-    !(opt?.disabled && isMatch(day, opt.disabled))
+    !(opt?.disabled && dateMatchModifiers(day, opt.disabled))
   ) {
     return {
       isValidDate: false,
       isInvalid: !isValidDate(day),
       isWeekend: opt?.disableWeekends && isWeekend(day),
-      isDisabled: opt?.disabled && isMatch(day, opt.disabled),
+      isDisabled: opt?.disabled && dateMatchModifiers(day, opt.disabled),
       isBefore,
       isAfter,
     };
@@ -164,13 +162,13 @@ const toValidation = (
   if (
     isValidDate(day) &&
     !(opt?.disableWeekends && isWeekend(day)) &&
-    !(opt?.disabled && isMatch(day, opt.disabled))
+    !(opt?.disabled && dateMatchModifiers(day, opt.disabled))
   ) {
     return {
       isValidDate: false,
       isInvalid: !isValidDate(day),
       isWeekend: opt?.disableWeekends && isWeekend(day),
-      isDisabled: opt?.disabled && isMatch(day, opt.disabled),
+      isDisabled: opt?.disabled && dateMatchModifiers(day, opt.disabled),
       isBefore,
       isAfter,
       isBeforeFrom,
@@ -369,14 +367,16 @@ export const useRangeDatepicker = (
     return (
       isValidDate(day) &&
       !(disableWeekends && isWeekend(day)) &&
-      !(disabled && isMatch(day, disabled))
+      !(disabled && dateMatchModifiers(day, disabled))
     );
   };
 
   const handleSelect = (range) => {
     if (range?.from && range?.to) {
-      setOpen(false);
-      anchorRef?.focus();
+      if (!isSameDay(range.from, range.to)) {
+        setOpen(false);
+        anchorRef?.focus();
+      }
     }
     const prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
@@ -415,7 +415,7 @@ export const useRangeDatepicker = (
           isValidDate: false,
           isInvalid: !isValidDate(day),
           isWeekend: disableWeekends && isWeekend(day),
-          isDisabled: disabled && isMatch(day, disabled),
+          isDisabled: disabled && dateMatchModifiers(day, disabled),
           isBefore,
           isAfter,
         },
@@ -481,7 +481,7 @@ export const useRangeDatepicker = (
         isValidDate: false,
         isInvalid: !isValidDate(day),
         isWeekend: disableWeekends && isWeekend(day),
-        isDisabled: disabled && isMatch(day, disabled),
+        isDisabled: disabled && dateMatchModifiers(day, disabled),
         isBefore,
         isAfter,
       });

package/src/date/datepicker/index.ts

@@ -1,13 +1,12 @@
 "use client";
 export { default as DatePicker, type DatePickerProps } from "./DatePicker";
+export { useDatepicker, type DateValidationT } from "./hooks/useDatepicker";
 export {
-  useDatepicker,
   useRangeDatepicker,
-  type DateValidationT,
   type RangeValidationT,
-} from "../hooks";
+} from "./hooks/useRangeDatepicker";
 export {
   DatePickerStandalone,
   type DatePickerStandaloneProps,
-} from "./DatePickerStandalone";
-export { DatePickerInput, type DateInputProps } from "../parts/DateInput";
+} from "./parts/DatePicker.Standalone";
+export { DatePickerInput, type DateInputProps } from "../Date.Input";

package/src/date/datepicker/parts/DatePicker.DayButton.tsx

@@ -0,0 +1,56 @@
+import cl from "clsx";
+import { Locale, format } from "date-fns";
+import React, { useEffect, useRef } from "react";
+import { CalendarDay, Modifiers } from "react-day-picker";
+
+const DatePickerDayButton = ({
+  day,
+  modifiers,
+  locale,
+  children,
+  ...rest
+}: {
+  day: CalendarDay;
+  modifiers: Modifiers;
+  locale: Locale;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+
+  if (modifiers.hidden) {
+    return <></>;
+  }
+
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      aria-hidden={day.outside}
+      aria-pressed={!!modifiers.selected}
+      aria-label={format(day.date, "cccc d", {
+        locale,
+      })}
+      data-pressed={modifiers.selected}
+      data-today={modifiers.today || undefined}
+      className={cl(rest.className, {
+        "rdp-day_disabled": modifiers.disabled,
+        "rdp-day_selected": modifiers.selected,
+        "rdp-day_range_start": modifiers.range_start,
+        "rdp-day_range_middle": modifiers.range_middle,
+        "rdp-day_range_end": modifiers.range_end,
+        "rdp-day_today": modifiers.today,
+        "rdp-day_outside": modifiers.outside,
+        "rdp-day__weekend": modifiers.weekend,
+      })}
+    >
+      {children}
+    </button>
+  );
+};
+
+export { DatePickerDayButton };

package/src/date/datepicker/parts/DatePicker.Months.tsx

@@ -0,0 +1,149 @@
+import {
+  Locale,
+  format,
+  getMonth,
+  getYear,
+  setMonth,
+  setYear,
+  startOfMonth,
+} from "date-fns";
+import React, { ChangeEvent, useCallback } from "react";
+import { CalendarMonth, useDayPicker } from "react-day-picker";
+import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { Select } from "../../../form/select";
+import { BodyShort } from "../../../typography";
+import { omit } from "../../../util";
+import { useDateTranslationContext } from "../../Date.locale";
+import {
+  calendarRange,
+  getMonthOptions,
+  getYearOptions,
+} from "../../date-utils";
+import { MultipleMode } from "../DatePicker.types";
+import { DatePickerWeekRow } from "./DatePicker.WeekRow";
+
+const DatePickerMonths = ({
+  children,
+  calendarMonth,
+  locale,
+  onWeekNumberClick,
+  ...rest
+}: {
+  calendarMonth: CalendarMonth;
+  displayIndex: number;
+  locale: Locale;
+  onWeekNumberClick: MultipleMode["onWeekNumberClick"];
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  const { dayPickerProps, goToMonth, previousMonth, nextMonth } =
+    useDayPicker();
+
+  const { captionLayout } = dayPickerProps;
+
+  const translate = useDateTranslationContext().translate;
+
+  const handleMonthChange = useCallback(
+    (date: Date, e: ChangeEvent<HTMLSelectElement>) => {
+      const selectedMonth = Number(e.target.value);
+      const newMonth = setMonth(startOfMonth(date), selectedMonth);
+      goToMonth(newMonth);
+    },
+    [goToMonth],
+  );
+
+  const handleYearChange = useCallback(
+    (date: Date, e: ChangeEvent<HTMLSelectElement>) => {
+      const selectedYear = Number(e.target.value);
+      const newMonth = setYear(startOfMonth(date), selectedYear);
+      goToMonth(newMonth);
+    },
+    [goToMonth],
+  );
+
+  const [navStart, navEnd] = calendarRange({
+    captionLayout: captionLayout === "dropdown" ? "dropdown" : "label",
+    startMonth: dayPickerProps.startMonth,
+    endMonth: dayPickerProps.endMonth,
+    today: dayPickerProps.today,
+  });
+
+  const months = getMonthOptions(calendarMonth.date, navStart, navEnd, locale);
+  const dropdownYears = getYearOptions(navStart, navEnd, locale);
+
+  return (
+    <div {...omit(rest, ["displayIndex"])}>
+      <div className="navds-date__caption">
+        {captionLayout?.startsWith("dropdown") && (
+          <span aria-live="polite" aria-atomic="true" className="navds-sr-only">
+            {format(calendarMonth.date, "LLLL y", { locale })}
+          </span>
+        )}
+        <Button
+          variant="tertiary-neutral"
+          disabled={!previousMonth}
+          onClick={() => previousMonth && goToMonth(previousMonth)}
+          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
+          className="navds-date__caption-button"
+          type="button"
+        />
+        {captionLayout?.startsWith("dropdown") ? (
+          <div className="navds-date__caption">
+            <Select
+              label={translate("month")}
+              hideLabel
+              className="navds-date__caption__month"
+              onChange={(event) => handleMonthChange(calendarMonth.date, event)}
+              value={getMonth(calendarMonth.date)}
+            >
+              {months?.map(({ value, label, disabled }) => (
+                <option key={value} value={value} disabled={disabled}>
+                  {label}
+                </option>
+              ))}
+            </Select>
+
+            <Select
+              label={translate("year")}
+              hideLabel
+              className="navds-date__caption__year"
+              onChange={(event) => handleYearChange(calendarMonth.date, event)}
+              value={getYear(calendarMonth.date)}
+            >
+              {dropdownYears?.map(({ value, label, disabled }) => (
+                <option key={value} value={value} disabled={disabled}>
+                  {label}
+                </option>
+              ))}
+            </Select>
+          </div>
+        ) : (
+          <BodyShort
+            weight="semibold"
+            as="span"
+            aria-live="polite"
+            role="status"
+            className="navds-date__caption-label"
+          >
+            {format(calendarMonth.date, "LLLL y", { locale })}
+          </BodyShort>
+        )}
+
+        <Button
+          variant="tertiary-neutral"
+          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
+          onClick={() => nextMonth && goToMonth(nextMonth)}
+          disabled={!nextMonth}
+          className="navds-date__caption-button"
+          type="button"
+        />
+      </div>
+      <DatePickerWeekRow
+        weeks={calendarMonth.weeks}
+        onWeekNumberClick={onWeekNumberClick}
+      />
+      {children}
+    </div>
+  );
+};
+
+export { DatePickerMonths };