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

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

@@ -0,0 +1,170 @@
+import cl from "clsx";
+import { isWeekend } from "date-fns";
+import React, { useCallback } from "react";
+import { ClassNames, DayPicker, dateMatchModifiers } from "react-day-picker";
+import { Show } from "../../../layout/responsive";
+import { omit } from "../../../util";
+import { useDateLocale } from "../../../util/i18n/i18n.hooks";
+import { getLocaleFromString } from "../../Date.locale";
+import { clampDisplayMonth, isDateOutsideRange } from "../../date-utils";
+import {
+  ConditionalModeProps,
+  DatePickerDefaultProps,
+} from "../DatePicker.types";
+import { DatePickerDayButton } from "./DatePicker.DayButton";
+import { DatePickerMonths } from "./DatePicker.Months";
+import { DatePickerWeekNumber } from "./DatePicker.WeekNumber";
+
+/**
+ * To support backwards compatibility with the old datepicker,
+ * we need to provide a partial implementation of the classnames
+ */
+const LegacyClassNames: Partial<ClassNames> = {
+  root: "rdp",
+  button_next: "button",
+  day: "rdp-cell",
+  day_button: "rdp-day rdp-button",
+  /* We set this directly on DayButton */
+  disabled: "",
+  hidden: "rdp-day_hidden",
+  outside: "rdp-day_outside",
+  selected: "rdp-day_selected",
+  weekday: "rdp-head_cell",
+  weekdays: "rdp-head_row",
+  week: "rdp-row",
+  weeks: "rdp-tbody",
+  month_grid: "rdp-table",
+  week_number: "rdp-weeknumber",
+};
+
+type ReactDayPickerProps = DatePickerDefaultProps &
+  ConditionalModeProps & {
+    /**
+     * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+     * @default false
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Update selected date
+     */
+    handleSelect: (newSelected: any) => void;
+  };
+
+const ReactDayPicker = ({
+  className,
+  dropdownCaption,
+  disabled = [],
+  disableWeekends = false,
+  showWeekNumber = false,
+  selected,
+  fixedWeeks = false,
+  onWeekNumberClick,
+  fromDate,
+  toDate,
+  month,
+  mode: _mode,
+  handleSelect,
+  locale: _locale,
+  ...rest
+}: ReactDayPickerProps) => {
+  const langProviderLocale = useDateLocale();
+  const locale = _locale ? getLocaleFromString(_locale) : langProviderLocale;
+
+  const mode = _mode ?? ("single" as any);
+
+  return (
+    <DayPicker
+      captionLayout={dropdownCaption ? "dropdown" : "label"}
+      hideNavigation
+      locale={locale}
+      mode={mode as any}
+      onSelect={handleSelect}
+      selected={selected}
+      classNames={LegacyClassNames}
+      components={{
+        MonthCaption: () => <></>,
+        DayButton: useCallback(
+          (props) => <DatePickerDayButton {...props} locale={locale} />,
+          [locale],
+        ),
+        Month: useCallback(
+          (props) => (
+            <DatePickerMonths
+              {...props}
+              locale={locale}
+              onWeekNumberClick={
+                mode === "multiple" ? onWeekNumberClick : undefined
+              }
+            />
+          ),
+          [locale, mode, onWeekNumberClick],
+        ),
+        Day: useCallback(
+          (props) => (
+            <td
+              {...omit(props, ["day", "modifiers"])}
+              className="rdp-cell"
+              role={undefined}
+            />
+          ),
+          [],
+        ),
+        WeekNumber: useCallback(
+          (props) => (
+            <DatePickerWeekNumber
+              {...props}
+              showOnDesktop
+              onWeekNumberClick={
+                mode === "multiple" ? onWeekNumberClick : undefined
+              }
+            />
+          ),
+          [mode, onWeekNumberClick],
+        ),
+        /* On smaller screens we hide it to accomedate our custom week-selector */
+        WeekNumberHeader: useCallback(
+          (props) => (
+            <Show above="sm" asChild>
+              <th {...props} />
+            </Show>
+          ),
+          [],
+        ),
+        Weekdays: useCallback(
+          (props) => (
+            <thead {...props} className="rdp-head" aria-hidden>
+              <tr className="rdp-head_row">{props.children}</tr>
+            </thead>
+          ),
+          [],
+        ),
+      }}
+      className={cl("navds-date", className)}
+      disabled={(day) => {
+        return (
+          (disableWeekends && isWeekend(day)) ||
+          dateMatchModifiers(day, disabled) ||
+          isDateOutsideRange({ day, fromDate, toDate })
+        );
+      }}
+      weekStartsOn={1}
+      modifiers={{
+        weekend: (day) => disableWeekends && isWeekend(day),
+      }}
+      modifiersClassNames={{
+        weekend: "rdp-day__weekend",
+      }}
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus={false}
+      showWeekNumber={showWeekNumber}
+      fixedWeeks={fixedWeeks}
+      showOutsideDays
+      startMonth={fromDate}
+      endMonth={toDate}
+      month={clampDisplayMonth({ month, start: fromDate, end: toDate })}
+      {...omit(rest, ["onSelect", "role", "id", "defaultSelected"])}
+    />
+  );
+};
+
+export { ReactDayPicker };

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

@@ -0,0 +1,93 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { DateRange } from "react-day-picker";
+import { useControllableState } from "../../../util/hooks";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+import {
+  DateTranslationContextProvider,
+  getTranslations,
+} from "../../Date.locale";
+import {
+  DatePickerDefaultProps,
+  MultipleMode,
+  RangeMode,
+  SingleMode,
+} from "../DatePicker.types";
+import { ReactDayPicker } from "./DatePicker.RDP";
+
+interface DatePickerStandaloneDefaultProps
+  extends Omit<
+    DatePickerDefaultProps,
+    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
+  > {
+  /**
+   * Datepicker classname
+   */
+  className?: string;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
+   * @default true
+   */
+  fixedWeeks?: boolean;
+}
+
+type StandaloneConditionalModeProps = SingleMode | MultipleMode | RangeMode;
+
+export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
+  StandaloneConditionalModeProps;
+
+export type DatePickerStandaloneType = React.ForwardRefExoticComponent<
+  DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
+  HTMLDivElement,
+  DatePickerStandaloneProps
+>(
+  (
+    {
+      className,
+      locale,
+      translations,
+      selected,
+      defaultSelected,
+      onSelect,
+      mode,
+      ...rest
+    },
+    ref,
+  ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+
+    const [value, setValue] = useControllableState<
+      Date | Date[] | DateRange | undefined
+    >({
+      defaultValue: defaultSelected,
+      value: selected,
+      onChange: (newValue) => onSelect?.(newValue as any),
+    });
+
+    return (
+      <DateTranslationContextProvider translate={translate}>
+        <div
+          ref={ref}
+          className={cl("navds-date__standalone-wrapper", className)}
+        >
+          <ReactDayPicker
+            {...rest}
+            locale={locale}
+            handleSelect={setValue}
+            selected={value as any}
+            mode={mode as any}
+          />
+        </div>
+      </DateTranslationContextProvider>
+    );
+  },
+);
+
+export default DatePickerStandalone;

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

@@ -0,0 +1,86 @@
+import cl from "clsx";
+import React, { useMemo } from "react";
+import { CalendarWeek, useDayPicker } from "react-day-picker";
+import { Button } from "../../../button";
+import { Hide, Show } from "../../../layout/responsive";
+import { Detail } from "../../../typography";
+import { useDateTranslationContext } from "../../Date.locale";
+import { MultipleMode } from "../DatePicker.types";
+
+const DatePickerWeekNumber = ({
+  week: { weekNumber, days },
+  onWeekNumberClick,
+  className,
+  style,
+  showOnDesktop,
+}: {
+  week: CalendarWeek;
+  onWeekNumberClick: MultipleMode["onWeekNumberClick"];
+  showOnDesktop: boolean;
+} & React.ThHTMLAttributes<HTMLTableCellElement>) => {
+  const translate = useDateTranslationContext().translate;
+
+  const { getModifiers } = useDayPicker();
+
+  const hideWeek = useMemo(() => {
+    if (
+      days.filter((day) => {
+        const mods = getModifiers(day);
+        return !(mods.hidden || mods.outside || mods.disabled);
+      }).length === 0
+    ) {
+      return true;
+    }
+    return false;
+  }, [days, getModifiers]);
+
+  const DisplayMode = showOnDesktop ? Show : Hide;
+
+  if (!onWeekNumberClick || hideWeek) {
+    return (
+      <DisplayMode above="sm" asChild>
+        <td className="rdp-cell">
+          <Detail
+            as="span"
+            textColor="subtle"
+            className={className}
+            style={style}
+            aria-label={translate("weekNumber", { week: weekNumber })}
+          >
+            {weekNumber}
+          </Detail>
+        </td>
+      </DisplayMode>
+    );
+  }
+
+  return (
+    <DisplayMode above="sm" asChild>
+      <td
+        className={cl("rdp-cell", {
+          "navds-date__week-wrapper": !showOnDesktop,
+        })}
+      >
+        <Button
+          variant="secondary-neutral"
+          size="small"
+          name="week-number"
+          aria-label={translate("selectWeekNumber", { week: weekNumber })}
+          style={style}
+          className={cl("navds-date__weeknumber", "rdp-weeknumber")}
+          onClick={() => {
+            onWeekNumberClick(
+              weekNumber,
+              days.map((day) => day.date),
+            );
+          }}
+          icon={
+            <span className="navds-date__weeknumber-number">{weekNumber}</span>
+          }
+        />
+      </td>
+    </DisplayMode>
+  );
+};
+
+export { DatePickerWeekNumber };

package/src/date/datepicker/parts/{WeekRow.tsx → DatePicker.WeekRow.tsx}

@@ -1,14 +1,19 @@
 import React from "react";
-import { useDayPicker } from "react-day-picker";
+import { CalendarWeek } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
 import { useId } from "../../../util/hooks";
-import { useDateTranslationContext } from "../../context";
-import { getMonthWeeks } from "../../utils/get-month-weeks";
-import WeekNumber from "./WeekNumber";
+import { useDateTranslationContext } from "../../Date.locale";
+import { MultipleMode } from "../DatePicker.types";
+import { DatePickerWeekNumber } from "./DatePicker.WeekNumber";
 
-const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
-  const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
+const DatePickerWeekRow = ({
+  onWeekNumberClick,
+  weeks,
+}: {
+  onWeekNumberClick: MultipleMode["onWeekNumberClick"];
+  weeks?: CalendarWeek[];
+}) => {
   const translate = useDateTranslationContext().translate;
   const labelId = useId();
 
@@ -16,11 +21,6 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
     return null;
   }
 
-  const weeks = getMonthWeeks(displayMonth, {
-    useFixedWeeks: Boolean(fixedWeeks),
-    locale,
-  });
-
   return (
     <Show below="sm" asChild>
       <table className="rdp-table" role="grid">
@@ -32,19 +32,18 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
               className="rdp-cell navds-date__week-cell"
             >
               <span className="navds-date__week-wrapper" id={labelId}>
-                {`${translate("week")}:`}
+                {translate("week")}
               </span>
             </Detail>
 
-            {weeks.map((week) => (
-              <td
+            {weeks?.map((week) => (
+              <DatePickerWeekNumber
                 key={week.weekNumber}
-                className="rdp-cell navds-date__week-cell"
-              >
-                <span className="navds-date__week-wrapper">
-                  <WeekNumber number={week.weekNumber} dates={week.dates} />
-                </span>
-              </td>
+                week={week}
+                onWeekNumberClick={onWeekNumberClick}
+                showOnDesktop={false}
+                className="navds-date__week-wrapper"
+              />
             ))}
           </tr>
         </tbody>
@@ -53,4 +52,4 @@ const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
   );
 };
 
-export default WeekRow;
+export { DatePickerWeekRow };

package/src/date/monthpicker/MonthPicker.context.tsx

@@ -0,0 +1,103 @@
+import { Locale, isSameYear } from "date-fns";
+import React from "react";
+import { createContext } from "../../util/create-context";
+import { useControllableState } from "../../util/hooks";
+import { clampDisplayYear } from "../date-utils";
+import { MonthPickerProps } from "./MonthPicker.types";
+
+type MonthPickerProviderProps = Pick<
+  MonthPickerProps,
+  | "dropdownCaption"
+  | "disabled"
+  | "selected"
+  | "defaultSelected"
+  | "onMonthSelect"
+  | "year"
+  | "onYearChange"
+  | "fromDate"
+  | "toDate"
+> & {
+  children: React.ReactNode;
+  locale: Locale;
+};
+
+type MonthPickerContextProps = {
+  caption: "label" | "dropdown";
+  year: Date;
+  onYearChange: (year: Date) => void;
+  selected: MonthPickerProps["selected"];
+  onMonthSelect: MonthPickerProps["onMonthSelect"];
+  disabled: NonNullable<MonthPickerProps["disabled"]>;
+  locale: Locale;
+  fromDate?: MonthPickerProps["fromDate"];
+  toDate?: MonthPickerProps["toDate"];
+};
+
+const [MonthPickerContextProvider, useMonthPickerContext] =
+  createContext<MonthPickerContextProps>({
+    name: "MonthPickerContext",
+    errorMessage:
+      "useMonthPickerContext must be used within an MonthPickerContextProvider",
+  });
+
+const MonthPickerProvider = ({
+  children,
+  disabled = [],
+  year,
+  onYearChange,
+  fromDate,
+  toDate,
+  selected,
+  defaultSelected,
+  onMonthSelect,
+  dropdownCaption,
+  locale,
+}: MonthPickerProviderProps) => {
+  /**
+   * Controlls current displayed year in MonthPicker
+   */
+  const [displayYear, setDisplayYear] = useControllableState({
+    defaultValue:
+      clampDisplayYear({
+        month: year ?? selected ?? defaultSelected,
+        start: fromDate,
+        end: toDate,
+      }) ?? new Date(),
+    value: year,
+    onChange: onYearChange,
+  });
+
+  /**
+   * Allows both controlled and uncontrolled use of MonthPicker
+   */
+  const [month, setMonth] = useControllableState({
+    defaultValue: defaultSelected,
+    value: selected,
+    onChange: onMonthSelect,
+  });
+
+  const handleDisplayYearUpdate = (newYear: Date) => {
+    if (isSameYear(newYear, displayYear)) {
+      return;
+    }
+    setDisplayYear(newYear);
+  };
+
+  return (
+    <MonthPickerContextProvider
+      caption={dropdownCaption && fromDate && toDate ? "dropdown" : "label"}
+      disabled={disabled}
+      selected={month}
+      onMonthSelect={setMonth}
+      year={displayYear}
+      onYearChange={handleDisplayYearUpdate}
+      locale={locale}
+      fromDate={fromDate}
+      toDate={toDate}
+    >
+      {children}
+    </MonthPickerContextProvider>
+  );
+};
+
+export { MonthPickerProvider, useMonthPickerContext };

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,21 +1,20 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { DayPickerProvider } from "react-day-picker";
-import { useId } from "../../util/hooks";
+import { useControllableState, useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
+import { DateDialog } from "../Date.Dialog";
+import { DateInputContextProvider, MonthPickerInput } from "../Date.Input";
 import {
-  DateInputContext,
   DateTranslationContextProvider,
-  SharedMonthProvider,
-} from "../context";
-import { MonthPickerInput } from "../parts/DateInput";
-import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString, getTranslations } from "../utils";
-import MonthCaption from "./MonthCaption";
-import MonthPickerStandalone from "./MonthPickerStandalone";
-import MonthSelector from "./MonthSelector";
-import { MonthPickerProps } from "./types";
+  getLocaleFromString,
+  getTranslations,
+} from "../Date.locale";
+import { MonthPickerProvider } from "./MonthPicker.context";
+import { MonthPickerProps } from "./MonthPicker.types";
+import { MonthPickerCaption } from "./parts/MonthPicker.Caption";
+import { MonthPickerStandalone } from "./parts/MonthPicker.Standalone";
+import { MonthPickerTable } from "./parts/MonthPicker.Table";
 
 interface MonthPickerComponent
   extends React.ForwardRefExoticComponent<MonthPickerProps> {
@@ -91,20 +90,26 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
-    const [open, setOpen] = useState(_open ?? false);
+
+    const [open, setOpen] = useControllableState({
+      defaultValue: false,
+      value: _open,
+      onChange: () => {
+        onOpenToggle?.();
+      },
+    });
 
     /* 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 [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
-      defaultSelected,
-    );
-
     const handleSelect = (month?: Date) => {
-      !onMonthSelect && setSelectedMonth(month);
       onMonthSelect?.(month);
-      month && (onClose?.() ?? setOpen(false));
+
+      if (month) {
+        onClose?.();
+        setOpen(false);
+      }
     };
 
     if (dropdownCaption && (!fromDate || !toDate)) {
@@ -114,62 +119,52 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
 
     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)}
+          ariaId={ariaId}
+          defined={true}
         >
-          <div
-            ref={mergedRef}
-            className={cl("navds-date__wrapper", wrapperClassName)}
+          <MonthPickerProvider
+            dropdownCaption={dropdownCaption}
+            defaultSelected={defaultSelected}
+            selected={selected}
+            disabled={disabled}
+            fromDate={fromDate}
+            toDate={toDate}
+            year={year}
+            onYearChange={onYearChange}
+            onMonthSelect={handleSelect}
+            locale={locale ? getLocaleFromString(locale) : langProviderLocale}
           >
-            {children}
-            <DateWrapper
-              open={_open ?? open}
-              anchor={wrapperRef}
-              onClose={() => onClose?.() ?? setOpen(false)}
-              locale={locale}
-              translate={translate}
-              variant="month"
-              popoverProps={{
-                id: ariaId,
-                strategy,
-              }}
+            <div
+              ref={mergedRef}
+              className={cl("navds-date__wrapper", wrapperClassName)}
             >
-              <DayPickerProvider
-                initialProps={{
-                  locale: locale
-                    ? getLocaleFromString(locale)
-                    : langProviderLocale,
-                  selected: selected ?? selectedMonth,
-                  toDate,
-                  fromDate,
-                  month: selected ?? selectedMonth,
+              {children}
+              <DateDialog
+                open={open}
+                anchor={wrapperRef}
+                onClose={() => {
+                  onClose?.();
+                  open && setOpen(false);
+                }}
+                locale={locale}
+                translate={translate}
+                variant="month"
+                popoverProps={{
+                  id: ariaId,
+                  strategy,
                 }}
               >
                 <div className={cl("rdp-month", className)}>
-                  <SharedMonthProvider
-                    dropdownCaption={dropdownCaption}
-                    disabled={disabled}
-                    selected={selected ?? selectedMonth}
-                    onSelect={handleSelect}
-                    year={year}
-                    onYearChange={onYearChange}
-                  >
-                    <MonthCaption />
-                    <MonthSelector />
-                  </SharedMonthProvider>
+                  <MonthPickerCaption />
+                  <MonthPickerTable />
                 </div>
-              </DayPickerProvider>
-            </DateWrapper>
-          </div>
-        </DateInputContext.Provider>
+              </DateDialog>
+            </div>
+          </MonthPickerProvider>
+        </DateInputContextProvider>
       </DateTranslationContextProvider>
     );
   },