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

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -1,136 +0,0 @@
-import cl from "clsx";
-import { isWeekend } from "date-fns";
-import React, { forwardRef } from "react";
-import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { omit } from "../../util";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
-import { DateTranslationContextProvider } from "../context";
-import { getLocaleFromString, getTranslations } from "../utils";
-import Caption from "./parts/Caption";
-import DropdownCaption from "./parts/DropdownCaption";
-import { HeadRow } from "./parts/HeadRow";
-import Row from "./parts/Row";
-import TableHead from "./parts/TableHead";
-import WeekNumber from "./parts/WeekNumber";
-import {
-  DatePickerDefaultProps,
-  MultipleMode,
-  RangeMode,
-  SingleMode,
-} from "./types";
-
-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,
-      dropdownCaption,
-      disabled = [],
-      disableWeekends = false,
-      showWeekNumber = false,
-      selected,
-      defaultSelected,
-      onSelect,
-      fixedWeeks = false,
-      onWeekNumberClick,
-      ...rest
-    },
-    ref,
-  ) => {
-    const translate = useI18n(
-      "DatePicker",
-      translations,
-      getTranslations(locale),
-    );
-    const langProviderLocale = useDateLocale();
-    const [selectedDates, setSelectedDates] = React.useState<
-      Date | Date[] | DateRange | undefined
-    >(defaultSelected);
-
-    const mode = rest.mode ?? ("single" as any);
-
-    /**
-     * @param newSelected Date | Date[] | DateRange | undefined
-     */
-    const handleSelect = (newSelected) => {
-      setSelectedDates(newSelected);
-      onSelect?.(newSelected);
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-date__standalone-wrapper", className)}
-      >
-        <DateTranslationContextProvider translate={translate}>
-          <DayPicker
-            locale={locale ? getLocaleFromString(locale) : langProviderLocale}
-            mode={mode}
-            onSelect={handleSelect}
-            selected={selected ?? selectedDates}
-            components={{
-              Caption: dropdownCaption ? DropdownCaption : Caption,
-              Head: TableHead,
-              HeadRow,
-              WeekNumber,
-              Row,
-            }}
-            className="navds-date"
-            classNames={{ vhidden: "navds-sr-only" }}
-            disabled={(day) => {
-              return (
-                (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
-              );
-            }}
-            weekStartsOn={1}
-            initialFocus={false}
-            modifiers={{
-              weekend: (day) => disableWeekends && isWeekend(day),
-            }}
-            modifiersClassNames={{
-              weekend: "rdp-day__weekend",
-            }}
-            showWeekNumber={showWeekNumber}
-            onWeekNumberClick={
-              mode === "multiple" ? onWeekNumberClick : undefined
-            }
-            fixedWeeks={fixedWeeks}
-            showOutsideDays
-            {...omit(rest, ["children", "id"])}
-          />
-        </DateTranslationContextProvider>
-      </div>
-    );
-  },
-);
-
-export default DatePickerStandalone;

package/src/date/datepicker/datepicker.test.tsx

@@ -1,28 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import React from "react";
-import { describe, test } from "vitest";
-import { useDatepicker } from "../hooks";
-import DatePicker from "./DatePicker";
-
-const App = () => {
-  const { datepickerProps, inputProps } = useDatepicker({
-    fromDate: new Date("Aug 23 2019"),
-    onDateChange: console.info,
-  });
-
-  return (
-    <DatePicker {...datepickerProps}>
-      <DatePicker.Input {...inputProps} label="Velg dato" />
-    </DatePicker>
-  );
-};
-
-describe("Render datepicker", () => {
-  // eslint-disable-next-line @vitest/expect-expect
-  test("Should not crash when e.target is window", async () => {
-    render(<App />);
-
-    await userEvent.click(screen.getByText("Velg dato"));
-  });
-});

package/src/date/datepicker/parts/Caption.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
-import { Button } from "../../../button";
-import { Label } from "../../../typography";
-import { useDateTranslationContext } from "../../context";
-import WeekRow from "./WeekRow";
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption
- */
-export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
-  const { goToMonth, nextMonth, previousMonth } = useNavigation();
-  const {
-    formatters: { formatCaption },
-    locale,
-  } = useDayPicker();
-  const translate = useDateTranslationContext().translate;
-
-  return (
-    <>
-      <div className="navds-date__caption">
-        <Button
-          variant="tertiary-neutral"
-          disabled={!previousMonth}
-          onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
-          className="navds-date__caption-button"
-          type="button"
-        />
-        <Label
-          as="span"
-          aria-live="polite"
-          aria-atomic="true"
-          id={id}
-          className="navds-date__caption-label"
-        >
-          {formatCaption(displayMonth, { locale })}
-        </Label>
-        <Button
-          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
-          onClick={() => nextMonth && goToMonth(nextMonth)}
-          disabled={!nextMonth}
-          variant="tertiary-neutral"
-          className="navds-date__caption-button"
-          type="button"
-        />
-      </div>
-      <WeekRow displayMonth={displayMonth} />
-    </>
-  );
-};
-
-export default DatePickerCaption;

package/src/date/datepicker/parts/DayButton.tsx

@@ -1,32 +0,0 @@
-import { format } from "date-fns";
-import React, { useRef } from "react";
-import { Button, DayProps, useDayPicker, useDayRender } from "react-day-picker";
-
-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}
-      role={undefined}
-      aria-label={dateTime}
-      aria-hidden={dayRender.activeModifiers.outside}
-      aria-selected={undefined}
-      aria-pressed={!!dayRender.activeModifiers.selected}
-    />
-  );
-};
-
-export default DayButton;

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

@@ -1,110 +0,0 @@
-import { max, min, setMonth, setYear, startOfMonth } from "date-fns";
-import React from "react";
-import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
-import { Button } from "../../../button";
-import { Select } from "../../../form/select";
-import { useDateTranslationContext } from "../../context";
-import { getMonths, getYears } from "../../utils";
-import WeekRow from "./WeekRow";
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/CaptionDropdowns
- */
-export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
-  const { goToMonth, nextMonth, previousMonth } = useNavigation();
-  const {
-    fromDate,
-    toDate,
-    formatters: { formatYearCaption, formatMonthCaption, formatCaption },
-    locale,
-  } = useDayPicker();
-  const translate = useDateTranslationContext().translate;
-
-  if (!fromDate || !toDate) {
-    console.warn("Using dropdownCaption required fromDate and toDate");
-    return null;
-  }
-
-  const handleYearChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
-    const newMonth = setYear(
-      startOfMonth(displayMonth),
-      Number(e.target.value),
-    );
-    goToMonth(startOfMonth(min([max([newMonth, fromDate]), toDate])));
-  };
-
-  const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
-    goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
-
-  const years = getYears(
-    fromDate,
-    toDate,
-    displayMonth.getFullYear(),
-  ).reverse();
-  const months = getMonths(fromDate, toDate, displayMonth);
-
-  return (
-    <>
-      <div className="navds-date__caption">
-        <span
-          aria-live="polite"
-          aria-atomic="true"
-          id={id}
-          className="navds-sr-only"
-        >
-          {formatCaption(displayMonth, { locale })}
-        </span>
-        <Button
-          variant="tertiary-neutral"
-          disabled={!previousMonth}
-          onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
-          className="navds-date__caption-button"
-          type="button"
-        />
-
-        <div className="navds-date__caption">
-          <Select
-            label={translate("month")}
-            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={translate("year")}
-            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
-          variant="tertiary-neutral"
-          icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
-          onClick={() => nextMonth && goToMonth(nextMonth)}
-          disabled={!nextMonth}
-          className="navds-date__caption-button"
-          type="button"
-        />
-      </div>
-      <WeekRow displayMonth={displayMonth} />
-    </>
-  );
-};
-
-export default DropdownCaption;

package/src/date/datepicker/parts/HeadRow.tsx

@@ -1,56 +0,0 @@
-import { Locale, addDays, startOfWeek } from "date-fns";
-import React from "react";
-import { useDayPicker } from "react-day-picker";
-import { Hide } from "../../../layout/responsive";
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/HeadRow
- */
-export function HeadRow(): JSX.Element {
-  const {
-    classNames,
-    styles,
-    showWeekNumber,
-    locale,
-    formatters: { formatWeekdayName },
-    labels: { labelWeekday },
-  } = useDayPicker();
-
-  const weekdays = getWeekdays(locale);
-
-  return (
-    <tr style={styles.head_row} className={classNames.head_row}>
-      {showWeekNumber && (
-        <Hide below="sm" asChild>
-          <td style={styles.head_cell} className={classNames.head_cell}></td>
-        </Hide>
-      )}
-      {weekdays.map((weekday, i) => (
-        <th
-          key={i}
-          scope="col"
-          className={classNames.head_cell}
-          style={styles.head_cell}
-          aria-label={labelWeekday(weekday, { locale })}
-        >
-          {formatWeekdayName(weekday, { locale })}
-        </th>
-      ))}
-    </tr>
-  );
-}
-
-/**
- * Generate a series of 7 days, starting from the week, to use for formatting
- * the weekday names (Monday, Tuesday, etc.).
- */
-export function getWeekdays(locale?: Locale): Date[] {
-  const start = startOfWeek(new Date(), { locale, weekStartsOn: 1 });
-
-  const days: Date[] = [];
-  for (let i = 0; i < 7; i++) {
-    const day = addDays(start, i);
-    days.push(day);
-  }
-  return days;
-}

package/src/date/datepicker/parts/Row.tsx

@@ -1,48 +0,0 @@
-import { getUnixTime } from "date-fns";
-import React from "react";
-import { useDayPicker } from "react-day-picker";
-import { Hide } from "../../../layout/responsive";
-import DayButton from "./DayButton";
-import WeekNumber from "./WeekNumber";
-
-/**
- * The props for the {@link Row} component.
- */
-export interface RowProps {
-  /** The month where the row is displayed. */
-  displayMonth: Date;
-  /** The number of the week to render. */
-  weekNumber: number;
-  /** The days contained in the week. */
-  dates: Date[];
-}
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/Row
- */
-function Row(props: RowProps): JSX.Element {
-  const { styles, classNames, showWeekNumber } = useDayPicker();
-
-  return (
-    <tr className={classNames.row} style={styles.row}>
-      {showWeekNumber && (
-        <Hide below="sm" asChild>
-          <td className={classNames.cell} style={styles.cell}>
-            <WeekNumber number={props.weekNumber} dates={props.dates} />
-          </td>
-        </Hide>
-      )}
-      {props.dates.map((date) => (
-        <td
-          className={classNames.cell}
-          style={styles.cell}
-          key={getUnixTime(date)}
-        >
-          <DayButton displayMonth={props.displayMonth} date={date} />
-        </td>
-      ))}
-    </tr>
-  );
-}
-
-export default Row;

package/src/date/datepicker/parts/TableHead.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { HeadRow, useDayPicker } from "react-day-picker";
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/Head
- */
-function TableHead(): JSX.Element {
-  const { classNames, styles, components } = useDayPicker();
-  const HeadRowComponent = components?.HeadRow ?? HeadRow;
-  return (
-    <thead style={styles.head} className={classNames.head} aria-hidden>
-      <HeadRowComponent />
-    </thead>
-  );
-}
-
-export default TableHead;

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

@@ -1,75 +0,0 @@
-/* https://github.com/gpbl/react-day-picker/blob/7f78cd5/src/components/WeekNumber/WeekNumber.tsx#L21 */
-import React from "react";
-import { Button as RDPButton, useDayPicker } from "react-day-picker";
-import { Button } from "../../../button";
-import { useThemeInternal } from "../../../theme/Theme";
-import { Detail } from "../../../typography";
-import { useDateTranslationContext } from "../../context";
-
-export interface WeekNumberProps {
-  /** The number of the week. */
-  number: number;
-  /** The dates in the week. */
-  dates: Date[];
-}
-
-/**
- * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
- */
-function WeekNumber({
-  number: weekNumber,
-  dates,
-}: WeekNumberProps): JSX.Element {
-  const { onWeekNumberClick, styles, classNames } = useDayPicker();
-  const themeContext = useThemeInternal(false);
-  const translate = useDateTranslationContext().translate;
-
-  if (!onWeekNumberClick) {
-    return (
-      <Detail
-        as="span"
-        textColor="subtle"
-        className={classNames.weeknumber}
-        style={styles.weeknumber}
-        aria-label={translate("weekNumber", { week: weekNumber })}
-      >
-        {weekNumber}
-      </Detail>
-    );
-  }
-
-  if (themeContext) {
-    return (
-      <Button
-        variant="secondary-neutral"
-        size="small"
-        name="week-number"
-        aria-label={translate("selectWeekNumber", { week: weekNumber })}
-        style={styles.weeknumber}
-        className="navds-date__weeknumber"
-        onClick={(event) => {
-          onWeekNumberClick(weekNumber, dates, event);
-        }}
-        icon={
-          <span className="navds-date__weeknumber-number">{weekNumber}</span>
-        }
-      />
-    );
-  }
-
-  return (
-    <RDPButton
-      name="week-number"
-      aria-label={translate("selectWeekNumber", { week: weekNumber })}
-      style={styles.weeknumber}
-      className={classNames.weeknumber}
-      onClick={(event) => {
-        onWeekNumberClick(weekNumber, dates, event);
-      }}
-    >
-      {weekNumber}
-    </RDPButton>
-  );
-}
-
-export default WeekNumber;

package/src/date/hooks/index.ts

@@ -1,6 +0,0 @@
-export { useDatepicker } from "./useDatepicker";
-export type { DateValidationT } from "./useDatepicker";
-export { useRangeDatepicker } from "./useRangeDatepicker";
-export type { RangeValidationT } from "./useRangeDatepicker";
-export { useMonthpicker } from "./useMonthPicker";
-export type { MonthValidationT } from "./useMonthPicker";

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,102 +0,0 @@
-import cl from "clsx";
-import React, { forwardRef, useState } from "react";
-import { DayPickerProvider } from "react-day-picker";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
-import {
-  DateTranslationContextProvider,
-  SharedMonthProvider,
-} from "../context";
-import { getLocaleFromString, getTranslations } from "../utils";
-import MonthCaption from "./MonthCaption";
-import MonthSelector from "./MonthSelector";
-import { MonthPickerProps } from "./types";
-
-export interface MonthPickerStandaloneProps
-  extends Omit<
-    MonthPickerProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
-  > {
-  /**
-   * 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,
-      translations,
-      onMonthSelect,
-      defaultSelected,
-      year,
-      onYearChange,
-    },
-    ref,
-  ) => {
-    const translate = useI18n(
-      "DatePicker",
-      translations,
-      getTranslations(locale),
-    );
-    const langProviderLocale = useDateLocale();
-    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)}>
-        <DateTranslationContextProvider translate={translate}>
-          <DayPickerProvider
-            initialProps={{
-              locale: locale ? getLocaleFromString(locale) : langProviderLocale,
-              selected: selected ?? selectedMonth,
-              toDate,
-              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>
-          </DayPickerProvider>
-        </DateTranslationContextProvider>
-      </div>
-    );
-  },
-);
-
-export default MonthPickerStandalone;

package/src/date/utils/__tests__/check-dates.test.ts

@@ -1,22 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { dateIsInCurrentMonth } from "..";
-
-const selectedDate = new Date("Feb 1 1994");
-
-describe("Returns if date is in current month", () => {
-  test("Date should be within current month (true)", () => {
-    expect(dateIsInCurrentMonth(new Date(), new Date())).toBeTruthy();
-  });
-
-  test("Date should not be within current month (false)", () => {
-    expect(
-      dateIsInCurrentMonth(new Date("Sep 2 2021"), selectedDate),
-    ).toBeFalsy();
-    expect(
-      dateIsInCurrentMonth(new Date("Sep 1 2021"), selectedDate),
-    ).toBeFalsy();
-    expect(
-      dateIsInCurrentMonth(new Date("Sep 30 2021"), selectedDate),
-    ).toBeFalsy();
-  });
-});