@navikt/ds-react 1.3.7 → 1.3.9

package/src/date/DateInput.tsx

@@ -0,0 +1,167 @@
+import { Calender } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
+import { FormFieldProps, useFormField } from "../form/useFormField";
+import { useDateInputContext } from "./hooks";
+
+export interface DateInputProps
+  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>;
+  /**
+   * Defines usage for date or month picker.
+   * @default "datepicker"
+   */
+  variant?: "datepicker" | "monthpicker";
+}
+
+export type DateInputType = React.ForwardRefExoticComponent<
+  DateInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
+  (props, ref) => {
+    const {
+      className,
+      hideLabel = false,
+      label,
+      description,
+      variant = "datepicker",
+      ...rest
+    } = props;
+
+    const isDatepickerVariant = variant === "datepicker";
+
+    const conditionalVariables = {
+      prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
+      iconTitle: {
+        open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
+        close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+      },
+    };
+
+    const { onOpen, ariaId, open } = useDateInputContext();
+
+    const {
+      inputProps,
+      size = "medium",
+      inputDescriptionId,
+      errorId,
+      showErrorMsg,
+      hasError,
+    } = useFormField(props, conditionalVariables.prefix);
+
+    return (
+      <div
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          "navds-date__field",
+          {
+            "navds-text-field--error": hasError,
+            "navds-date__field--error": hasError,
+            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-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}
+          />
+          <Button
+            variant="tertiary"
+            type="button"
+            size="small"
+            onClick={() => onOpen()}
+            className="navds-date__field-button"
+            tabIndex={open ? -1 : 0}
+            disabled={inputProps.disabled}
+            icon={
+              <Calender
+                title={
+                  open
+                    ? conditionalVariables.iconTitle.close
+                    : conditionalVariables.iconTitle.open
+                }
+              />
+            }
+          />
+        </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 const DatePickerInput: DateInputType = forwardRef<
+  HTMLInputElement,
+  DateInputProps
+>((props, ref) => <DateInput {...props} ref={ref} />);
+
+export const MonthPickerInput: DateInputType = forwardRef<
+  HTMLInputElement,
+  DateInputProps
+>((props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />);

package/src/date/datepicker/DatePicker.tsx

@@ -0,0 +1,252 @@
+import cl from "clsx";
+import { isWeekend } from "date-fns";
+import React, { forwardRef, useRef, useState } from "react";
+import {
+  DateRange,
+  DayPicker,
+  DayPickerBase,
+  isMatch,
+  Matcher,
+  SelectMultipleEventHandler,
+  SelectRangeEventHandler,
+  SelectSingleEventHandler,
+} from "react-day-picker";
+import { omit, Popover, useId } from "../..";
+import { DateInputType, DatePickerInput } from "../DateInput";
+import { DateContext } from "../hooks";
+import { getLocaleFromString, labels } from "../utils";
+import { Caption, DropdownCaption } from "./caption";
+import DatePickerStandalone, {
+  DatePickerStandaloneType,
+} from "./DatePickerStandalone";
+import { DayButton } from "./DayButton";
+
+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;
+  /**
+   * Classname for datepicker in popover
+   */
+  className?: string;
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
+  /**
+   * Changes datepicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * The earliest day to start navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latests day to end navigation.
+   */
+  toDate?: Date;
+  /**
+   * Display dropdown for choosing the month and the year.
+   * Needs `fromDate` + `toDate` to work.
+   * @default false
+   */
+  dropdownCaption?: 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 for small screens.
+   * @default false
+   */
+  showWeekNumber?: boolean;
+  /**
+   * 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 `<DatePicker.Input />` is used
+   */
+  onOpenToggle?: () => void;
+}
+
+export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
+
+interface DatePickerComponent
+  extends React.ForwardRefExoticComponent<DatePickerProps> {
+  Standalone: DatePickerStandaloneType;
+  Input: DateInputType;
+}
+
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      children,
+      locale = "nb",
+      dropdownCaption,
+      disabled = [],
+      disableWeekends = false,
+      showWeekNumber = false,
+      selected,
+      id,
+      defaultSelected,
+      className,
+      wrapperClassName,
+      open: _open,
+      onClose,
+      onOpenToggle,
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId(id);
+    const [open, setOpen] = useState(_open ?? false);
+
+    const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+    const [selectedDates, setSelectedDates] = React.useState<
+      Date | Date[] | DateRange | undefined
+    >(defaultSelected);
+
+    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
+      setSelectedDates(selectedDay);
+      selectedDay && (onClose?.() ?? setOpen(false));
+      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));
+      rest?.onSelect &&
+        (rest?.onSelect as (val?: DateRange) => void)(selectedDays);
+    };
+
+    const overrideProps = {
+      onSelect:
+        rest?.mode === "single"
+          ? handleSingleSelect
+          : rest?.mode === "multiple"
+          ? handleMultipleSelect
+          : handleRangeSelect,
+    };
+
+    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"
+              id={ariaId}
+              role="dialog"
+              ref={ref}
+            >
+              <DayPicker
+                locale={getLocaleFromString(locale)}
+                {...overrideProps}
+                selected={selected ?? selectedDates}
+                components={{
+                  Caption: dropdownCaption ? DropdownCaption : Caption,
+                  Day: DayButton,
+                }}
+                className={cl("navds-date", className)}
+                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>
+          )}
+        </div>
+      </DateContext.Provider>
+    );
+  }
+) as DatePickerComponent;
+
+DatePicker.Standalone = DatePickerStandalone;
+DatePicker.Input = DatePickerInput;
+
+export default DatePicker;

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -0,0 +1,120 @@
+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 { omit } from "../..";
+import { getLocaleFromString, labels } from "../utils";
+import { Caption, DropdownCaption } from "./caption";
+import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
+
+interface DatePickerStandaloneDefaultProps
+  extends Omit<
+    DatePickerDefaultProps,
+    "open" | "onClose" | "onOpenToggle" | "wrapperClassName"
+  > {
+  /**
+   * Datepicker 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",
+      dropdownCaption,
+      disabled = [],
+      disableWeekends = false,
+      showWeekNumber = false,
+      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:
+        rest?.mode === "single"
+          ? handleSingleSelect
+          : rest?.mode === "multiple"
+          ? handleMultipleSelect
+          : handleRangeSelect,
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-date__standalone-wrapper", className)}
+      >
+        <DayPicker
+          locale={getLocaleFromString(locale)}
+          {...overrideProps}
+          selected={selected ?? selectedDates}
+          components={{
+            Caption: dropdownCaption ? 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}
+          {...omit(rest, ["onSelect"])}
+        />
+      </div>
+    );
+  }
+);
+
+export default DatePickerStandalone;

package/src/date/datepicker/DayButton.tsx

@@ -0,0 +1,26 @@
+import { format } from "date-fns";
+import React, { useRef } from "react";
+import { Button, DayProps, useDayPicker, useDayRender } from "react-day-picker";
+
+export const DayButton = (props: DayProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
+  const { locale } = useDayPicker();
+  const dateTime = format(props.date, "cccc d", { locale });
+
+  if (dayRender.isHidden) {
+    return <></>;
+  }
+  if (!dayRender.isButton) {
+    return <div {...dayRender.divProps} />;
+  }
+
+  return (
+    <Button
+      name="day"
+      ref={buttonRef}
+      {...dayRender.buttonProps}
+      aria-label={dateTime}
+    />
+  );
+};

package/src/date/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åned" />}
+          className="navds-date__caption-button"
+        />
+        <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>
+    </div>
+  );
+};
+
+export default DatePickerCaption;