@navikt/ds-react 1.3.7 → 1.3.9

package/src/date/monthpicker/MonthButton.tsx

@@ -0,0 +1,109 @@
+import cl from "clsx";
+import {
+  compareAsc,
+  compareDesc,
+  format,
+  isSameMonth,
+  setYear,
+} from "date-fns";
+import React, { useEffect, useRef } from "react";
+import { useDayPicker } from "react-day-picker";
+import { useSharedMonthContext } from "../hooks";
+import { dateIsInCurrentMonth, isMatch, nextEnabled } from "../utils";
+
+interface MonthType {
+  month: Date;
+  months: Date[];
+  focus: Date | undefined;
+  setFocus: Function;
+  tabRoot?: Date;
+  setTabRoot: Function;
+}
+
+const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {
+  if (fromDate && toDate) {
+    return (
+      compareAsc(month, fromDate) === -1 || compareDesc(month, toDate) === -1
+    );
+  } else if (fromDate) {
+    return compareAsc(month, fromDate) === -1;
+  } else if (toDate) {
+    return compareDesc(month, toDate) === -1;
+  }
+  return false;
+};
+
+export const MonthButton = ({
+  month,
+  months,
+  focus,
+  setFocus,
+  tabRoot,
+  setTabRoot,
+}: MonthType) => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const { hasDropdown, selected, onSelect, year, toYear, disabled } =
+    useSharedMonthContext();
+
+  const { fromDate, toDate, locale } = useDayPicker();
+  const isSelected = selected && isSameMonth(month, selected);
+
+  useEffect(() => {
+    if (focus) {
+      isSameMonth(month, focus) && ref.current && ref.current.focus();
+      setFocus();
+    }
+  }, [focus, month, setFocus]);
+
+  const isDisabled =
+    isMatch(setYear(month, year.getFullYear()), disabled) ||
+    disableMonth(month, fromDate, toDate);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={() => onSelect(isSelected ? undefined : month)}
+      disabled={isDisabled}
+      className={cl("navds-date__month-button", {
+        "rdp-day_today": dateIsInCurrentMonth(month, year),
+        "rdp-day_selected": isSelected,
+        "rdp-day_disabled": isDisabled,
+      })}
+      tabIndex={
+        tabRoot && isSameMonth(month, setYear(tabRoot, year.getFullYear()))
+          ? 0
+          : -1
+      }
+      onKeyDown={(e) => {
+        const next = nextEnabled(
+          months,
+          e.key,
+          disabled,
+          month,
+          toYear,
+          year,
+          hasDropdown,
+          fromDate,
+          toDate
+        );
+        setFocus(next);
+        setTabRoot(next);
+      }}
+      onFocus={() => {
+        setTabRoot(focus);
+      }}
+    >
+      <span aria-hidden="true">
+        {format(new Date(month), "LLL", { locale })
+          .replace(".", "")
+          .substring(0, 3)}
+      </span>
+      <span className="navds-sr-only">
+        {format(new Date(month), "LLLL", { locale })}
+      </span>
+    </button>
+  );
+};
+
+export default MonthButton;

package/src/date/monthpicker/MonthCaption.tsx

@@ -0,0 +1,94 @@
+import { Left, Right } from "@navikt/ds-icons";
+import { isSameYear, setYear, startOfMonth, startOfYear } from "date-fns";
+import React from "react";
+import { useDayPicker } from "react-day-picker";
+import { Button, Select } from "../..";
+import { useSharedMonthContext } from "../hooks";
+import { hasNextYear, labelNextYear, labelPrevYear } from "../utils";
+
+export const MonthCaption = () => {
+  const {
+    fromDate,
+    toDate,
+    formatters: { formatYearCaption },
+    locale,
+  } = useDayPicker();
+
+  const { hasDropdown, year, toYear } = useSharedMonthContext();
+
+  const years: Date[] = [];
+
+  if (hasDropdown && fromDate && toDate) {
+    const fromYear = fromDate.getFullYear();
+    const toYear = toDate.getFullYear();
+    for (let year = fromYear; year <= toYear; year++) {
+      years.push(setYear(startOfYear(new Date()), year));
+    }
+  }
+
+  const handleYearChange = (e) =>
+    toYear(setYear(startOfMonth(new Date()), Number(e.target.value)));
+
+  const handleButtonClick = (val: number) => {
+    let newMonth: Date;
+    if (hasDropdown && hasNextYear(year, years, val)) {
+      newMonth = setYear(new Date(), year.getFullYear() + val);
+      toYear(newMonth);
+    } else if (!hasDropdown) {
+      const newYear = Number(year.getFullYear() + val);
+      newMonth = setYear(year, newYear);
+      toYear(newMonth);
+    }
+  };
+
+  const hasFollowingYear = (value: number) => {
+    return years.some((y) =>
+      isSameYear(y, setYear(year, Number(year.getFullYear() + value)))
+    );
+  };
+
+  return (
+    <div className="navds-date__caption">
+      <Button
+        className="navds-date__caption-button"
+        disabled={!hasDropdown ? false : !hasFollowingYear(-1)}
+        onClick={() => handleButtonClick(-1)}
+        aria-label={labelPrevYear(locale?.code)}
+        icon={<Left aria-hidden />}
+        variant="tertiary"
+        type="button"
+      />
+
+      {hasDropdown ? (
+        <Select
+          label="velg år"
+          hideLabel
+          value={year?.getFullYear()}
+          onChange={handleYearChange}
+          className="navds-date__caption__year"
+        >
+          {years.map((year) => (
+            <option key={year.getFullYear()} value={year.getFullYear()}>
+              {formatYearCaption(year, { locale })}
+            </option>
+          ))}
+        </Select>
+      ) : (
+        <span className="navds-date__year-label" aria-live="polite">
+          {year.getFullYear()}
+        </span>
+      )}
+      <Button
+        className="navds-date__caption-button"
+        disabled={!hasDropdown ? false : !hasFollowingYear(1)}
+        onClick={() => handleButtonClick(1)}
+        aria-label={labelNextYear(locale?.code)}
+        icon={<Right aria-hidden />}
+        variant="tertiary"
+        type="button"
+      />
+    </div>
+  );
+};
+
+export default MonthCaption;

package/src/date/monthpicker/MonthPicker.tsx

@@ -0,0 +1,204 @@
+import cl from "clsx";
+import React, { forwardRef, useRef, useState } from "react";
+import { RootProvider } from "react-day-picker";
+import { Popover, useId } from "../..";
+import { DateInputType, MonthPickerInput } from "../DateInput";
+import { DateContext, SharedMonthProvider } from "../hooks";
+import { getLocaleFromString, Matcher } from "../utils";
+import MonthCaption from "./MonthCaption";
+import MonthPickerStandalone, {
+  MonthPickerStandaloneType,
+} from "./MonthPickerStandalone";
+import MonthSelector from "./MonthSelector";
+
+export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Element monthpicker anchors to. Use <MonthPicker.Input /> for built-in toggle,
+   * or make your own with the open/onClose props
+   */
+  children?: React.ReactNode;
+  /**
+   * Classname for datepicker in popover
+   */
+  className?: string;
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
+  /**
+   * The earliest month to start navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latest day to end  navigation.
+   */
+  toDate?: Date;
+  /**
+   * Changes monthpicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * Display dropdown for choosing year.
+   * Needs `fromDate` + `toDate` to work.
+   * @default false
+   */
+  dropdownCaption?: boolean;
+  /**
+   * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type.
+   * {@link https://react-day-picker.js.org/api/types/Matcher | Matcher type-definition}
+   */
+  disabled?: Matcher[];
+  /**
+   * Controlled selected-month
+   */
+  selected?: Date;
+  /**
+   * Default selected month.
+   */
+  defaultSelected?: Date;
+  /**
+   * Open state for user-controlled state
+   * Component controlled by default
+   */
+  open?: boolean;
+  /**
+   * onClose callback for user-controlled state
+   */
+  onClose?: () => void;
+  /**
+   * onOpenToggle callback for user-controlled-state
+   * only called if `<MonthPicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+  /**
+   * Callback for user-controlled state
+   */
+  onMonthSelect?: Function;
+  /**
+   * Used to set visible year programmatically
+   * Component controlled by default
+   */
+  year?: Date;
+  /**
+   * Event fired when the user navigates between years.
+   */
+  onYearChange?: (y?: Date) => void;
+}
+
+interface MonthPickerComponent
+  extends React.ForwardRefExoticComponent<MonthPickerProps> {
+  /**
+   * Variant without popover
+   */
+  Standalone: MonthPickerStandaloneType;
+  /**
+   * Built-in Inputfield
+   */
+  Input: DateInputType;
+}
+
+export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
+  (
+    {
+      children,
+      dropdownCaption = false,
+      fromDate,
+      toDate,
+      disabled = [],
+      selected,
+      open: _open,
+      id,
+      onClose,
+      onOpenToggle,
+      locale = "nb",
+      onMonthSelect,
+      className,
+      wrapperClassName,
+      defaultSelected,
+      year,
+      onYearChange,
+    },
+    ref
+  ) => {
+    const ariaId = useId(id);
+    const [open, setOpen] = useState(_open ?? false);
+
+    const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
+      defaultSelected
+    );
+
+    const handleSelect = (month?: Date) => {
+      setSelectedMonth(month);
+      onMonthSelect?.(month);
+      month && (onClose?.() ?? setOpen(false));
+    };
+
+    if (dropdownCaption && (!fromDate || !toDate)) {
+      console.warn("Using dropdownCaption required fromDate and toDate");
+      return null;
+    }
+
+    return (
+      <DateContext.Provider
+        value={{
+          open: _open ?? open,
+          onOpen: () => {
+            setOpen((x) => !x);
+            onOpenToggle?.();
+          },
+          ariaId,
+        }}
+      >
+        <div
+          ref={wrapperRef}
+          className={cl("navds-date__wrapper", wrapperClassName)}
+        >
+          {children}
+          {(_open ?? open) && (
+            <Popover
+              arrow={false}
+              anchorEl={wrapperRef.current}
+              open={_open ?? open}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              placement="bottom-start"
+              role="dialog"
+              ref={ref}
+              id={ariaId}
+              className="navds-date"
+            >
+              <RootProvider
+                locale={getLocaleFromString(locale)}
+                selected={selected}
+                toDate={toDate}
+                fromDate={fromDate}
+                month={selected ?? selectedMonth}
+              >
+                <div className={cl("rdp-month", className)}>
+                  <SharedMonthProvider
+                    dropdownCaption={dropdownCaption}
+                    disabled={disabled}
+                    selected={selected ?? selectedMonth}
+                    onSelect={handleSelect}
+                    year={year}
+                    onYearChange={onYearChange}
+                  >
+                    <MonthCaption />
+                    <MonthSelector />
+                  </SharedMonthProvider>
+                </div>
+              </RootProvider>
+            </Popover>
+          )}
+        </div>
+      </DateContext.Provider>
+    );
+  }
+) as MonthPickerComponent;
+
+MonthPicker.Standalone = MonthPickerStandalone;
+MonthPicker.Input = MonthPickerInput;
+
+export default MonthPicker;

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -0,0 +1,87 @@
+import cl from "clsx";
+import React, { forwardRef, useState } from "react";
+import { RootProvider } from "react-day-picker";
+import { SharedMonthProvider } from "../hooks";
+import { getLocaleFromString } from "../utils";
+import MonthCaption from "./MonthCaption";
+import { MonthPickerProps } from "./MonthPicker";
+import MonthSelector from "./MonthSelector";
+
+export interface MonthPickerStandaloneProps
+  extends Omit<
+    MonthPickerProps,
+    "open" | "onClose" | "onOpenToggle" | "wrapperClassName"
+  > {
+  /**
+   * Monthpicker classname
+   */
+  className?: string;
+}
+
+export type MonthPickerStandaloneType = React.ForwardRefExoticComponent<
+  MonthPickerStandaloneProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export const MonthPickerStandalone = forwardRef<
+  HTMLDivElement,
+  MonthPickerStandaloneProps
+>(
+  (
+    {
+      dropdownCaption = false,
+      fromDate,
+      toDate,
+      disabled = [],
+      selected,
+      className,
+      locale = "nb",
+      onMonthSelect,
+      defaultSelected,
+      year,
+      onYearChange,
+    },
+    ref
+  ) => {
+    const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
+      defaultSelected
+    );
+
+    const handleSelect = (month?: Date) => {
+      setSelectedMonth(month);
+      onMonthSelect?.(month);
+    };
+
+    if (dropdownCaption && (!fromDate || !toDate)) {
+      console.warn("Using dropdownCaption required fromDate and toDate");
+      return null;
+    }
+
+    return (
+      <div ref={ref} className={cl("navds-date__wrapper", className)}>
+        <RootProvider
+          locale={getLocaleFromString(locale)}
+          selected={selected ?? selectedMonth}
+          toDate={toDate}
+          fromDate={fromDate}
+          month={selected ?? selectedMonth}
+        >
+          <div className="navds-date rdp-month">
+            <SharedMonthProvider
+              dropdownCaption={dropdownCaption}
+              disabled={disabled}
+              selected={selected ?? selectedMonth}
+              onSelect={handleSelect}
+              year={year}
+              onYearChange={onYearChange}
+            >
+              <MonthCaption />
+              <MonthSelector />
+            </SharedMonthProvider>
+          </div>
+        </RootProvider>
+      </div>
+    );
+  }
+);
+
+export default MonthPickerStandalone;

package/src/date/monthpicker/MonthSelector.tsx

@@ -0,0 +1,85 @@
+import { isSameMonth, setMonth, setYear, startOfMonth } from "date-fns";
+import React, { useState } from "react";
+import { BodyShort } from "../..";
+import { useSharedMonthContext } from "../hooks";
+import { isMatch } from "../utils";
+import MonthButton from "./MonthButton";
+
+const getAllMonths = () => {
+  const months: Date[] = [];
+  const date = startOfMonth(new Date());
+  for (let month = 0; month <= 11; month++) {
+    months.push(setMonth(date, month));
+  }
+  return months;
+};
+
+export const MonthSelector = () => {
+  const [focus, setFocus] = useState<Date>();
+
+  const { selected, year, disabled } = useSharedMonthContext();
+
+  const months: Date[] = getAllMonths();
+
+  const hasSelected =
+    selected &&
+    months.some((m) => isSameMonth(setYear(m, year.getFullYear()), selected));
+
+  const getRootFallback = () => {
+    const today = startOfMonth(new Date());
+    if (
+      year?.getFullYear() === today.getFullYear() &&
+      !isMatch(today, disabled)
+    ) {
+      return today;
+    }
+
+    for (let i = 0; i < months.length; i++) {
+      const m = months[i];
+      if (!isMatch(setYear(m, year.getFullYear()), disabled)) {
+        return setYear(m, year.getFullYear());
+      }
+    }
+  };
+
+  const [tabRoot, setTabRoot] = useState(
+    hasSelected ? selected : getRootFallback()
+  );
+
+  if (tabRoot?.getFullYear() !== year.getFullYear()) {
+    setTabRoot(hasSelected ? selected : getRootFallback());
+  }
+
+  const tableMonths = [
+    months.slice(0, 4),
+    months.slice(4, 8),
+    months.slice(8, 12),
+  ];
+
+  return (
+    <BodyShort as="table" className="rdp-table">
+      <tbody className="rdp-tbody">
+        {tableMonths.map((x, y) => (
+          <tr className="rdp-row" key={y}>
+            {x.map((month: Date, y) => {
+              return (
+                <td key={month.toDateString()} className="rdp-cell">
+                  <MonthButton
+                    month={setYear(month, year.getFullYear())}
+                    months={months}
+                    focus={focus}
+                    setFocus={setFocus}
+                    tabRoot={tabRoot}
+                    setTabRoot={setTabRoot}
+                  />
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </BodyShort>
+  );
+};
+
+export default MonthSelector;

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -0,0 +1,128 @@
+import React, { useId, useState } from "react";
+import { Button } from "../..";
+import { UNSAFE_useMonthPicker } from "../hooks";
+import MonthPicker from "./MonthPicker";
+
+export default {
+  title: "ds-react/Monthpicker",
+  component: MonthPicker,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    locale: {
+      control: {
+        type: "radio",
+        options: ["nb", "nn", "en"],
+      },
+    },
+  },
+};
+
+export const Default = () => {
+  const { inputProps, monthpickerProps } = UNSAFE_useMonthPicker({
+    disabled: [new Date("Apr 1 2022")],
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps}>
+        <MonthPicker.Input
+          label="Velg måned"
+          variant="monthpicker"
+          {...inputProps}
+        />
+      </MonthPicker>
+    </div>
+  );
+};
+
+export const dropdownCaption = () => {
+  return (
+    <MonthPicker.Standalone
+      dropdownCaption
+      fromDate={new Date("Jan 1 2019")}
+      toDate={new Date("Sep 27 2032")}
+    />
+  );
+};
+
+export const NB = () => <MonthPicker.Standalone locale="nb" />;
+export const NN = () => <MonthPicker.Standalone locale="nn" />;
+export const EN = () => <MonthPicker.Standalone locale="en" />;
+
+export const DisabledMonths = (props) => {
+  return (
+    <MonthPicker.Standalone
+      disabled={[
+        { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
+        { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
+        new Date("Sep 5 2022"),
+        new Date("Jan 5 2023"),
+      ]}
+    />
+  );
+};
+
+export const Standalone = () => {
+  return <MonthPicker.Standalone />;
+};
+
+export const UseMonthPicker = () => {
+  const { inputProps, monthpickerProps } = UNSAFE_useMonthPicker({
+    locale: "nb",
+    defaultSelected: new Date(),
+    disabled: [new Date("Apr 1 2022")],
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps}>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </MonthPicker>
+    </div>
+  );
+};
+
+export const Required = () => {
+  const { inputProps, monthpickerProps } = UNSAFE_useMonthPicker({
+    locale: "nb",
+    defaultSelected: new Date(),
+    disabled: [new Date("Apr 1 2022")],
+    required: true,
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps}>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </MonthPicker>
+    </div>
+  );
+};
+
+export const UserControlled = () => {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+
+  return (
+    <div>
+      <MonthPicker open={open} onClose={() => setOpen(false)} id={id}>
+        <Button aria-controls={id} onClick={() => setOpen((x) => !x)}>
+          Velg måned
+        </Button>
+      </MonthPicker>
+    </div>
+  );
+};