@navikt/ds-react 5.5.0 → 5.6.0

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

@@ -1,108 +0,0 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
-import setMonth from "date-fns/setMonth";
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
-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";
-import { max, min } from "date-fns";
-
-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) => {
-    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());
-  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={<ArrowLeftIcon title="velg forrige måned" />}
-        className="navds-date__caption-button"
-        type="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={<ArrowRightIcon title="velg neste måned" />}
-        onClick={() => nextMonth && goToMonth(nextMonth)}
-        disabled={!nextMonth}
-        variant="tertiary"
-        className="navds-date__caption-button"
-        type="button"
-      />
-    </div>
-  );
-};
-
-export default DropdownCaption;

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

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