@navikt/ds-react 1.2.2 → 1.3.0-alpha.0

package/src/datepicker/DatePicker.tsx

@@ -0,0 +1,281 @@
+import { FloatingPortal } from "@floating-ui/react-dom-interactions";
+import cl from "clsx";
+import { isWeekend } from "date-fns";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import {
+  DateRange,
+  DayPicker,
+  DayPickerBase,
+  isMatch,
+  Matcher,
+  SelectMultipleEventHandler,
+  SelectRangeEventHandler,
+  SelectSingleEventHandler,
+} from "react-day-picker";
+import { Popover, useId } from "..";
+import { omit } from "../util";
+import { Caption, DropdownCaption } from "./caption";
+import DatePickerInput, { DatePickerInputType } from "./DatePickerInput";
+import DatePickerStandalone, {
+  DatePickerStandaloneType,
+} from "./DatePickerStandalone";
+import { getLocaleFromString, labels } from "./utils";
+
+export type ConditionalModeProps =
+  | {
+      mode?: "single";
+      onSelect?: (val?: Date) => void;
+      selected?: Date;
+      defaultSelected?: Date;
+    }
+  | {
+      mode?: "multiple";
+      onSelect?: (val?: Date[]) => void;
+      selected?: Date[];
+      defaultSelected?: Date[];
+      min?: number;
+      max?: number;
+    }
+  | {
+      mode?: "range";
+      onSelect?: (val?: DateRange) => void;
+      selected?: DateRange;
+      defaultSelected?: DateRange;
+      min?: number;
+      max?: number;
+    };
+
+//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
+export interface DatePickerDefaultProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
+    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
+  /**
+   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle,
+   * or make your own with the open/onClose props
+   */
+  children?: React.ReactNode;
+  /**
+   * Changes datepicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * The earliest Date available for the user to pick from
+   */
+  fromDate?: Date;
+  /**
+   * The latest Date available for the user to pick from
+   */
+  toDate?: Date;
+  /**
+   * Adds a `Select` for picking Year and Month
+   * Needs `fromDate` + `toDate` to be set!
+   * @default false
+   */
+  yearSelector?: boolean;
+  /**
+   * Apply the disabled modifier to the matching days.
+   * {@link https://react-day-picker.js.org/api/types/Matcher | Matcher type-definition}
+   */
+  disabled?: Matcher[];
+  /**
+   * Disable saturday and sunday.
+   * @default false
+   */
+  disableWeekends?: boolean;
+  /**
+   * Shows week numbers in left-column
+   * Use with caution, takes up valuable screenspace in small screens!
+   * @default false
+   */
+  showWeekNumber?: boolean;
+  /**
+   * Open state for user-controlled state
+   * @remark Controlled by component by default
+   */
+  open?: boolean;
+  /**
+   * onClose callback for user-controlled state
+   */
+  onClose?: () => void;
+  /**
+   * onOpenToggle callback for user-controlled-state
+   * @remark only called if `<DatePicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+  /**
+   * Classnames for adding classes
+   */
+  classNames?: {
+    /**
+     * Children wrapper
+     */
+    wrapper?: string;
+    /**
+     * DatePicker-wrapper
+     */
+    datepicker?: string;
+  };
+}
+
+export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
+
+interface DatePickerComponent
+  extends React.ForwardRefExoticComponent<DatePickerProps> {
+  Input: DatePickerInputType;
+  Standalone: DatePickerStandaloneType;
+}
+
+interface DatePickerContextProps {
+  open: boolean;
+  onOpen: () => void;
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null> | null;
+  ariaId?: string;
+}
+
+export const DatePickerContext = createContext<DatePickerContextProps>({
+  open: false,
+  onOpen: () => null,
+  buttonRef: null,
+  ariaId: undefined,
+});
+
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      children,
+      locale = "nb",
+      yearSelector,
+      disabled = [],
+      disableWeekends = false,
+      showWeekNumber = false,
+      mode = "single",
+      selected,
+      id,
+      defaultSelected,
+      classNames,
+      open: _open,
+      onClose,
+      onOpenToggle,
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId(id);
+    const [open, setOpen] = useState(_open ?? false);
+
+    const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    const [selectedDates, setSelectedDates] = React.useState<
+      Date | Date[] | DateRange | undefined
+    >(defaultSelected);
+
+    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
+      setSelectedDates(selectedDay);
+      selectedDay && (onClose?.() ?? setOpen(false));
+      selectedDay && buttonRef && buttonRef?.current?.focus();
+      rest?.onSelect && (rest?.onSelect as (val?: Date) => void)(selectedDay);
+    };
+
+    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
+      setSelectedDates(selectedDays);
+      rest?.onSelect &&
+        (rest?.onSelect as (val?: Date[]) => void)(selectedDays);
+    };
+
+    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
+      setSelectedDates(selectedDays);
+      selectedDays?.from && selectedDays?.to && (onClose?.() ?? setOpen(false));
+      selectedDays?.from &&
+        selectedDays?.to &&
+        buttonRef &&
+        buttonRef?.current?.focus();
+      rest?.onSelect &&
+        (rest?.onSelect as (val?: DateRange) => void)(selectedDays);
+    };
+
+    const overrideProps = {
+      onSelect:
+        mode === "single"
+          ? handleSingleSelect
+          : mode === "multiple"
+          ? handleMultipleSelect
+          : handleRangeSelect,
+    };
+
+    return (
+      <DatePickerContext.Provider
+        value={{
+          open: _open ?? open,
+          onOpen: () => {
+            setOpen((x) => !x);
+            onOpenToggle?.();
+          },
+          buttonRef,
+          ariaId,
+        }}
+      >
+        <div
+          ref={wrapperRef}
+          className={cl("navds-date__wrapper", classNames?.wrapper)}
+        >
+          {children}
+          <FloatingPortal>
+            {(_open ?? open) && (
+              <Popover
+                arrow={false}
+                anchorEl={wrapperRef.current}
+                open={_open ?? open}
+                onClose={() => onClose?.() ?? setOpen(false)}
+                placement="bottom-start"
+                id={ariaId}
+                aria-roledescription={
+                  locale === "en" ? "datepicker" : "datovelger"
+                }
+                role="dialog"
+                ref={ref}
+              >
+                <DayPicker
+                  locale={getLocaleFromString(locale)}
+                  mode={mode}
+                  {...overrideProps}
+                  selected={selected ?? selectedDates}
+                  components={{
+                    Caption: yearSelector ? DropdownCaption : Caption,
+                  }}
+                  className={cl("navds-date", classNames?.datepicker)}
+                  classNames={{
+                    vhidden: "navds-sr-only",
+                  }}
+                  disabled={(day) => {
+                    return (
+                      (disableWeekends && isWeekend(day)) ||
+                      isMatch(day, disabled)
+                    );
+                  }}
+                  weekStartsOn={1}
+                  initialFocus={false}
+                  labels={labels as any}
+                  modifiers={{
+                    weekend: (day) => disableWeekends && isWeekend(day),
+                  }}
+                  modifiersClassNames={{
+                    weekend: "rdp-day__weekend",
+                  }}
+                  showWeekNumber={showWeekNumber}
+                  {...omit(rest, ["onSelect"])}
+                />
+              </Popover>
+            )}
+          </FloatingPortal>
+        </div>
+      </DatePickerContext.Provider>
+    );
+  }
+) as DatePickerComponent;
+
+DatePicker.Input = DatePickerInput;
+DatePicker.Standalone = DatePickerStandalone;
+
+export default DatePicker;

package/src/datepicker/DatePickerInput.tsx

@@ -0,0 +1,131 @@
+import { Calender } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef, InputHTMLAttributes, useContext } from "react";
+import { Button } from "../button";
+import { FormFieldProps, useFormField } from "../form/useFormField";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
+import { DatePickerContext } from "./DatePicker";
+
+export interface DatePickerInputProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Input label
+   */
+  label: React.ReactNode;
+  /**
+   * Shows label and description for screenreaders-only
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * Changes padding and font-sizes
+   * @default medium
+   */
+  size?: "medium" | "small";
+  /**
+   * @private
+   */
+  wrapperRef?: React.RefObject<HTMLDivElement>;
+}
+
+export type DatePickerInputType = React.ForwardRefExoticComponent<
+  DatePickerInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+export const DatePickerInput: DatePickerInputType = forwardRef<
+  HTMLInputElement,
+  DatePickerInputProps
+>((props, ref) => {
+  const { onOpen, buttonRef, ariaId, open } = useContext(DatePickerContext);
+
+  const {
+    inputProps,
+    size = "medium",
+    inputDescriptionId,
+    errorId,
+    showErrorMsg,
+    hasError,
+  } = useFormField(props, "datepicker-input");
+
+  const { className, hideLabel = false, label, description, ...rest } = props;
+
+  return (
+    <div
+      className={cl(
+        className,
+        "navds-form-field",
+        `navds-form-field--${size}`,
+        "navds-date__field",
+        {
+          "navds-date__field--error": hasError,
+          "navds-date__field--disabled": !!inputProps.disabled,
+        }
+      )}
+      ref={props?.wrapperRef}
+    >
+      <Label
+        htmlFor={inputProps.id}
+        size={size}
+        className={cl("navds-form-field__label", {
+          "navds-sr-only": hideLabel,
+        })}
+      >
+        {label}
+      </Label>
+      {!!description && (
+        <BodyShort
+          as="div"
+          className={cl("navds-form-field__description", {
+            "navds-sr-only": hideLabel,
+          })}
+          id={inputDescriptionId}
+          size={size}
+        >
+          {description}
+        </BodyShort>
+      )}
+      <div className="navds-date__field-wrapper">
+        <input
+          ref={ref}
+          {...omit(rest, ["error", "errorId", "size", "wrapperRef"])}
+          {...inputProps}
+          autoComplete="off"
+          aria-controls={ariaId}
+          className={cl(
+            className,
+            "navds-date__field-input",
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size}`
+          )}
+          size={14}
+          aria-haspopup="grid"
+        />
+        <Button
+          ref={buttonRef}
+          variant="tertiary"
+          type="button"
+          size="small"
+          onClick={() => onOpen()}
+          className="navds-date__field-button"
+          icon={
+            <Calender title={open ? "Lukk datovelger" : "Åpne datovelger"} />
+          }
+          aria-haspopup="grid"
+        />
+      </div>
+      <div
+        className="navds-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
+
+export default DatePickerInput;

package/src/datepicker/DatePickerStandalone.tsx

@@ -0,0 +1,121 @@
+import cl from "clsx";
+import { isWeekend } from "date-fns";
+import React, { forwardRef } from "react";
+import {
+  DateRange,
+  DayPicker,
+  isMatch,
+  SelectMultipleEventHandler,
+  SelectRangeEventHandler,
+  SelectSingleEventHandler,
+} from "react-day-picker";
+import { Caption, DropdownCaption } from "./caption";
+import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
+import { getLocaleFromString, labels } from "./utils";
+
+interface DatePickerStandaloneDefaultProps
+  extends Omit<
+    DatePickerDefaultProps,
+    "focusOnOpen" | "open" | "onClose" | "classNames" | "onOpenToggle"
+  > {
+  /**
+   * Wrapper className
+   */
+  className?: string;
+}
+
+export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
+  ConditionalModeProps;
+
+export type DatePickerStandaloneType = React.ForwardRefExoticComponent<
+  DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
+  HTMLDivElement,
+  DatePickerStandaloneProps
+>(
+  (
+    {
+      children,
+      className,
+      locale = "nb",
+      yearSelector,
+      disabled = [],
+      disableWeekends = false,
+      showWeekNumber = false,
+      mode = "single",
+      selected,
+      id,
+      defaultSelected,
+      onSelect,
+      ...rest
+    },
+    ref
+  ) => {
+    const [selectedDates, setSelectedDates] = React.useState<
+      Date | Date[] | DateRange | undefined
+    >(defaultSelected);
+
+    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
+      setSelectedDates(selectedDay);
+      onSelect && (onSelect as (val?: Date) => void)(selectedDay);
+    };
+
+    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
+      setSelectedDates(selectedDays);
+      onSelect && (onSelect as (val?: Date[]) => void)(selectedDays);
+    };
+
+    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
+      setSelectedDates(selectedDays);
+      onSelect && (onSelect as (val?: DateRange) => void)(selectedDays);
+    };
+
+    const overrideProps = {
+      onSelect:
+        mode === "single"
+          ? handleSingleSelect
+          : mode === "multiple"
+          ? handleMultipleSelect
+          : handleRangeSelect,
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-date__standalone-wrapper", className)}
+      >
+        <DayPicker
+          locale={getLocaleFromString(locale)}
+          mode={mode}
+          {...overrideProps}
+          selected={selected ?? selectedDates}
+          components={{
+            Caption: yearSelector ? DropdownCaption : Caption,
+          }}
+          className="navds-date"
+          classNames={{ vhidden: "navds-sr-only" }}
+          disabled={(day) => {
+            return (
+              (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
+            );
+          }}
+          weekStartsOn={1}
+          initialFocus={false}
+          labels={labels as any}
+          modifiers={{
+            weekend: (day) => disableWeekends && isWeekend(day),
+          }}
+          modifiersClassNames={{
+            weekend: "rdp-day__weekend",
+          }}
+          showWeekNumber={showWeekNumber}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
+
+export default DatePickerStandalone;

package/src/datepicker/caption/Caption.tsx

@@ -0,0 +1,51 @@
+import { Left, Right } from "@navikt/ds-icons";
+import React from "react";
+import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
+import { Button, Label } from "../..";
+
+export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
+  const { goToMonth, nextMonth, previousMonth } = useNavigation();
+  const {
+    labels: { labelPrevious, labelNext },
+    formatters: { formatCaption },
+    locale,
+  } = useDayPicker();
+
+  const previousLabel = labelPrevious(previousMonth, { locale });
+  const nextLabel = labelNext(nextMonth, { locale });
+
+  return (
+    <div className="navds-date__caption">
+      <Label
+        as="span"
+        aria-live="polite"
+        aria-atomic="true"
+        id={id}
+        className="navds-date__caption-label"
+      >
+        {formatCaption(displayMonth, { locale })}
+      </Label>
+
+      <div className="navds-date__caption__month-wrapper">
+        <Button
+          aria-label={previousLabel}
+          variant="tertiary"
+          disabled={!previousMonth}
+          onClick={() => previousMonth && goToMonth(previousMonth)}
+          icon={<Left title="velg forrige månede" />}
+          className="navds-date__caption-button"
+        />
+        <Button
+          aria-label={nextLabel}
+          icon={<Right title="velg neste månede" />}
+          onClick={() => nextMonth && goToMonth(nextMonth)}
+          disabled={!nextMonth}
+          variant="tertiary"
+          className="navds-date__caption-button"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DatePickerCaption;

package/src/datepicker/caption/DropdownCaption.tsx

@@ -0,0 +1,94 @@
+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) return <></>;
+
+  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ånede" />}
+        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}
+        >
+          {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ånede" />}
+        onClick={() => nextMonth && goToMonth(nextMonth)}
+        disabled={!nextMonth}
+        variant={"tertiary"}
+        className="navds-date__caption-button"
+      />
+    </div>
+  );
+};
+
+export default DropdownCaption;

package/src/datepicker/caption/index.ts

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