@navikt/ds-react 1.3.7 → 1.3.9

package/src/date/datepicker/caption/DropdownCaption.tsx

@@ -0,0 +1,98 @@
+import { Left, Right } from "@navikt/ds-icons";
+import { setMonth, setYear, startOfMonth } from "date-fns";
+import React from "react";
+import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
+import { Button, Select } from "../../..";
+import { getMonths, getYears } from "../../utils/get-dates";
+import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
+
+export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
+  const { goToMonth, nextMonth, previousMonth } = useNavigation();
+  const {
+    fromDate,
+    toDate,
+    formatters: { formatYearCaption, formatMonthCaption, formatCaption },
+    labels: { labelPrevious, labelNext },
+    locale,
+  } = useDayPicker();
+
+  if (!fromDate || !toDate) {
+    console.warn("Using dropdownCaption required fromDate and toDate");
+    return null;
+  }
+
+  const handleYearChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
+    goToMonth(setYear(startOfMonth(displayMonth), Number(e.target.value)));
+
+  const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
+    goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
+
+  const years = getYears(fromDate, toDate);
+  const months = getMonths(fromDate, toDate, displayMonth);
+
+  const previousLabel = labelPrevious(previousMonth, { locale });
+  const nextLabel = labelNext(nextMonth, { locale });
+  const yearDropdownLabel = labelYearDropdown(locale);
+  const MonthDropdownLabel = labelMonthDropdown(locale);
+
+  return (
+    <div className="navds-date__caption-dropdown">
+      <span
+        aria-live="polite"
+        aria-atomic="true"
+        id={id}
+        className="navds-sr-only"
+      >
+        {formatCaption(displayMonth, { locale })}
+      </span>
+      <Button
+        aria-label={previousLabel}
+        variant="tertiary"
+        disabled={!previousMonth}
+        onClick={() => previousMonth && goToMonth(previousMonth)}
+        icon={<Left title="velg forrige måned" />}
+        className="navds-date__caption-button"
+      />
+
+      <div className="navds-date__caption__month-wrapper">
+        <Select
+          label={MonthDropdownLabel}
+          hideLabel
+          className="navds-date__caption__month"
+          value={displayMonth.getMonth()}
+          onChange={handleMonthChange}
+        >
+          {months.map((m) => (
+            <option key={m.getMonth()} value={m.getMonth()}>
+              {formatMonthCaption(m, { locale })}
+            </option>
+          ))}
+        </Select>
+        <Select
+          label={yearDropdownLabel}
+          hideLabel
+          value={displayMonth.getFullYear()}
+          onChange={handleYearChange}
+          className="navds-date__caption__year"
+        >
+          {years.map((year) => (
+            <option key={year.getFullYear()} value={year.getFullYear()}>
+              {formatYearCaption(year, { locale })}
+            </option>
+          ))}
+        </Select>
+      </div>
+
+      <Button
+        aria-label={nextLabel}
+        icon={<Right title="velg neste måned" />}
+        onClick={() => nextMonth && goToMonth(nextMonth)}
+        disabled={!nextMonth}
+        variant="tertiary"
+        className="navds-date__caption-button"
+      />
+    </div>
+  );
+};
+
+export default DropdownCaption;

package/src/date/datepicker/caption/index.ts

@@ -0,0 +1,2 @@
+export { default as Caption } from "./Caption";
+export { default as DropdownCaption } from "./DropdownCaption";

package/src/date/datepicker/datepicker.stories.tsx

@@ -0,0 +1,235 @@
+import { isSaturday } from "date-fns";
+import React, { useId, useState } from "react";
+import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
+import { Button } from "../..";
+import DatePicker from "./DatePicker";
+
+const disabledDays = [
+  new Date("Oct 10 2022"),
+  { from: new Date("Aug 31 2022"), to: new Date("Sep 8 2022") },
+];
+
+export default {
+  title: "ds-react/Datepicker",
+  component: DatePicker,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    locale: {
+      control: {
+        type: "radio",
+        options: ["nb", "nn", "en"],
+      },
+    },
+    mode: {
+      defaultValue: "single",
+      control: {
+        type: "radio",
+        options: ["single", "multiple", "range"],
+      },
+    },
+  },
+};
+
+export const Default = (props) => {
+  const [open, setOpen] = useState(false);
+
+  const rangeCtx = UNSAFE_useRangeDatepicker({
+    fromDate: new Date("Aug 23 2020"),
+    toDate: new Date("Aug 23 2023"),
+  });
+
+  const singleCtx = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2020"),
+    toDate: new Date("Aug 23 2023"),
+  });
+
+  const newProps = {
+    ...(!props.inputfield || props.mode === "multiple"
+      ? {
+          open,
+          onClose: () => setOpen(false),
+          fromDate: new Date("Aug 23 2020"),
+          toDate: new Date("Aug 23 2023"),
+        }
+      : {}),
+  };
+
+  const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
+
+  return (
+    <div>
+      <Comp
+        locale={props?.locale}
+        dropdownCaption={props?.dropdownCaption}
+        disableWeekends={props?.disableWeekends}
+        showWeekNumber={props.showWeekNumber}
+        mode={props.mode}
+        {...(props.mode === "single"
+          ? singleCtx.datepickerProps
+          : props.mode === "range"
+          ? rangeCtx.datepickerProps
+          : {})}
+        {...newProps}
+      >
+        {!props.standalone && (
+          <>
+            {props.inputfield && props.mode !== "multiple" ? (
+              <>
+                {props.mode === "range" ? (
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <DatePicker.Input
+                      label="Fra"
+                      size={props?.size}
+                      {...rangeCtx.fromInputProps}
+                    />
+                    <DatePicker.Input
+                      label="Til"
+                      size={props?.size}
+                      {...rangeCtx.toInputProps}
+                    />
+                  </div>
+                ) : (
+                  <>
+                    <DatePicker.Input
+                      label="Velg dato"
+                      size={props?.size}
+                      {...singleCtx.inputProps}
+                    />
+                  </>
+                )}
+              </>
+            ) : (
+              <Button onClick={() => setOpen((x) => !x)}>
+                Åpne datovelger
+              </Button>
+            )}
+          </>
+        )}
+      </Comp>
+    </div>
+  );
+};
+
+Default.args = {
+  dropdownCaption: false,
+  disableWeekends: false,
+  showWeekNumber: false,
+  inputfield: true,
+  standalone: false,
+  openOnFocus: true,
+};
+
+export const DropdownCaption = () => (
+  <DatePicker.Standalone
+    dropdownCaption
+    fromDate={new Date("Aug 23 2018")}
+    toDate={new Date("Aug 23 2022")}
+  />
+);
+
+export const DisabledDays = () => (
+  <DatePicker.Standalone disabled={disabledDays} disableWeekends />
+);
+
+export const ShowWeekNumber = () => <DatePicker.Standalone showWeekNumber />;
+
+export const UseDatepicker = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    locale: "en",
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseRangedDatepicker = () => {
+  const { datepickerProps, fromInputProps, toInputProps } =
+    UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+    });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const NB = () => <DatePicker.Standalone locale="nb" />;
+export const NN = () => <DatePicker.Standalone locale="nn" />;
+export const EN = () => <DatePicker.Standalone locale="en" />;
+
+export const Standalone = () => <DatePicker.Standalone />;
+
+export const StandaloneRange = () => <DatePicker.Standalone mode="range" />;
+export const StandaloneMultiple = () => (
+  <DatePicker.Standalone mode="multiple" />
+);
+
+export const UserControlled = () => {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+
+  return (
+    <div>
+      <DatePicker
+        mode="multiple"
+        open={open}
+        onClose={() => setOpen(false)}
+        id={id}
+      >
+        <Button aria-controls={id} onClick={() => setOpen((x) => !x)}>
+          Legg til dager
+        </Button>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const Validering = () => {
+  const { datepickerProps, selectedDay, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input
+          error={
+            selectedDay && isSaturday(selectedDay)
+              ? "NAV-kontoret er ikke åpent på lørdager. Velg en annen dag."
+              : undefined
+          }
+          {...inputProps}
+          label="Velg dato"
+        />
+      </DatePicker>
+    </div>
+  );
+};
+
+export const DisabledInput = () => {
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker>
+        <DatePicker.Input disabled label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};

package/src/date/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export { useMonthPicker as UNSAFE_useMonthPicker } from "./useMonthPicker";
+export { useDateInputContext, DateContext } from "./useDateInputContext";
+export {
+  useSharedMonthContext,
+  SharedMonthProvider,
+} from "./useSharedMonthContext";

package/src/date/hooks/useDateInputContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+
+interface DateContextContextProps {
+  /**
+   * Open state for popover
+   */
+  open: boolean;
+  /**
+   * Callback for opOpen toggle
+   */
+  onOpen: () => void;
+  /**
+   * Aria-connected ID
+   */
+  ariaId?: string;
+}
+
+export const DateContext = createContext<DateContextContextProps>({
+  open: false,
+  onOpen: () => null,
+  ariaId: undefined,
+});
+
+export const useDateInputContext = () => {
+  const context = useContext(DateContext);
+
+  if (!context) {
+    console.warn("useDateInputContext must be used with DateContext");
+  }
+
+  return context;
+};

package/src/date/hooks/useDatepicker.tsx

@@ -0,0 +1,225 @@
+import { differenceInCalendarDays, isWeekend } from "date-fns";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DayClickEventHandler, isMatch } from "react-day-picker";
+import { DateInputProps } from "../DateInput";
+import { DatePickerProps } from "../datepicker/DatePicker";
+import {
+  formatDateForInput,
+  getLocaleFromString,
+  isValidDate,
+  parseDate,
+} from "../utils";
+
+export interface UseDatepickerOptions
+  extends Pick<
+    DatePickerProps,
+    | "locale"
+    | "fromDate"
+    | "toDate"
+    | "today"
+    | "toDate"
+    | "fromDate"
+    | "toDate"
+    | "disabled"
+    | "disableWeekends"
+  > {
+  /**
+   * The initially selected Date
+   */
+  defaultSelected?: Date;
+  /**
+   * Make selection of Date required
+   */
+  required?: boolean;
+}
+
+interface UseDatepickerValue {
+  /**
+   * Use: <DatePicker {...datepickerProps}/>
+   */
+  datepickerProps: DatePickerProps;
+  /**
+   * Use: <DatePicker.Input {...inputProps}/>
+   */
+  inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value">;
+  /**
+   * Resets all states (callback)
+   */
+  reset: () => void;
+  /**
+   * Currently selected date
+   * Up to user to validate date
+   */
+  selectedDay?: Date;
+  /**
+   * Manually override currently selected day
+   */
+  setSelected: (date?: Date) => void;
+}
+
+export const useDatepicker = (
+  opt: UseDatepickerOptions = {}
+): UseDatepickerValue => {
+  const {
+    locale: _locale = "nb",
+    required,
+    defaultSelected,
+    today = new Date(),
+    fromDate,
+    toDate,
+    disabled,
+    disableWeekends,
+  } = opt;
+
+  const locale = getLocaleFromString(_locale);
+
+  const inputRef = useRef<HTMLDivElement>(null);
+  const daypickerRef = useRef<HTMLDivElement>(null);
+
+  // Initialize states
+  const [month, setMonth] = useState(defaultSelected ?? today);
+  const [selectedDay, setSelectedDay] = useState(defaultSelected);
+  const [open, setOpen] = useState(false);
+
+  const defaultInputValue = defaultSelected
+    ? formatDateForInput(defaultSelected, locale, "date")
+    : "";
+  const [inputValue, setInputValue] = useState(defaultInputValue);
+
+  const handleFocusIn = useCallback(
+    (e) => {
+      ![
+        daypickerRef.current,
+        inputRef.current,
+        inputRef.current?.nextSibling,
+      ].some((element) => element?.contains(e.target)) &&
+        open &&
+        setOpen(false);
+    },
+    [open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("click", handleFocusIn);
+    return () => {
+      window?.removeEventListener?.("focusin", handleFocusIn);
+      window?.removeEventListener?.("click", handleFocusIn);
+    };
+  }, [handleFocusIn]);
+
+  const reset = () => {
+    setSelectedDay(defaultSelected);
+    setMonth(defaultSelected ?? today);
+    setInputValue(defaultInputValue ?? "");
+  };
+
+  const setSelected = (date: Date | undefined) => {
+    setSelectedDay(date);
+    setMonth(date ?? today);
+    setInputValue(date ? formatDateForInput(date, locale, "date") : "");
+  };
+
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    !open && setOpen(true);
+    if (!e.target.value) {
+      reset();
+      return;
+    }
+    let day = parseDate(e.target.value, today, locale, "date");
+    if (isValidDate(day)) {
+      setMonth(day);
+      setInputValue(formatDateForInput(day, locale, "date"));
+    }
+  };
+
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    let day = parseDate(e.target.value, today, locale, "date");
+    isValidDate(day) && setInputValue(formatDateForInput(day, locale, "date"));
+  };
+
+  /* Only allow de-selecting if not required */
+  const handleDayClick: DayClickEventHandler = (day, { selected }) => {
+    if (day && !selected) {
+      setOpen(false);
+      inputRef.current && inputRef.current.focus();
+    }
+
+    if (!required && selected) {
+      setSelectedDay(undefined);
+      setInputValue("");
+      return;
+    }
+    setSelectedDay(day);
+    setMonth(day);
+    setInputValue(day ? formatDateForInput(day, locale, "date") : "");
+  };
+
+  // When changing the input field, save its value in state and check if the
+  // string is a valid date. If it is a valid day, set it as selected and update
+  // the calendar’s month.
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInputValue(e.target.value);
+    const day = parseDate(e.target.value, today, locale, "date");
+
+    if (
+      !isValidDate(day) ||
+      (disabled &&
+        ((disableWeekends && isWeekend(day)) || isMatch(day, disabled)))
+    ) {
+      setSelectedDay(undefined);
+      return;
+    }
+
+    const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
+    const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
+    if (isBefore || isAfter) {
+      setSelectedDay(undefined);
+      return;
+    }
+    setSelectedDay(day);
+    setMonth(day);
+  };
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    inputRef.current && inputRef.current.focus();
+  }, []);
+
+  const escape = useCallback(
+    (e) => open && e.key === "Escape" && handleClose(),
+    [handleClose, open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", escape, false);
+
+    return () => {
+      window.removeEventListener("keydown", escape, false);
+    };
+  }, [escape]);
+
+  const datepickerProps = {
+    month,
+    onMonthChange: (month) => setMonth(month),
+    onDayClick: handleDayClick,
+    selected: selectedDay,
+    locale: _locale,
+    fromDate,
+    toDate,
+    today,
+    open,
+    onOpenToggle: () => setOpen((x) => !x),
+    ref: daypickerRef,
+  };
+
+  const inputProps = {
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    value: inputValue,
+    ref: inputRef,
+  };
+
+  return { datepickerProps, inputProps, reset, selectedDay, setSelected };
+};