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

package/src/date/monthpicker/{types.ts → MonthPicker.types.ts}

@@ -1,5 +1,5 @@
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
-import { Matcher } from "../utils";
+import { Matcher } from "../Date.typeutils";
 
 export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

package/src/date/{utils/navigation.ts → monthpicker/MonthPicker.util.ts}

@@ -1,5 +1,6 @@
 import { setYear } from "date-fns";
-import { Matcher, isMatch } from "./is-match";
+import { Matcher } from "../Date.typeutils";
+import { isMatch } from "../date-utils";
 
 export const nextEnabled = (
   months: Date[],

package/src/date/{hooks → monthpicker/hooks}/useMonthPicker.tsx

@@ -1,14 +1,10 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { useDateLocale } from "../../util/i18n/i18n.hooks";
-import { MonthPickerProps } from "../monthpicker/types";
-import { DateInputProps } from "../parts/DateInput";
-import {
-  formatDateForInput,
-  getLocaleFromString,
-  isMatch,
-  isValidDate,
-  parseDate,
-} from "../utils";
+import { dateMatchModifiers } from "react-day-picker";
+import { useDateLocale } from "../../../util/i18n/i18n.hooks";
+import { DateInputProps } from "../../Date.Input";
+import { getLocaleFromString } from "../../Date.locale";
+import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
+import { MonthPickerProps } from "../MonthPicker.types";
 
 export interface UseMonthPickerOptions
   extends Pick<
@@ -267,11 +263,14 @@ export const useMonthpicker = (
     const isBefore = getIsBefore({ fromDate, date: month });
     const isAfter = getIsAfter({ toDate, date: month });
 
-    if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
+    if (
+      !isValidDate(month) ||
+      (disabled && dateMatchModifiers(month, disabled))
+    ) {
       updateMonth(undefined);
       updateValidation({
         isInvalid: isValidDate(month),
-        isDisabled: disabled && isMatch(month, disabled),
+        isDisabled: disabled && dateMatchModifiers(month, disabled),
         isValidMonth: false,
         isEmpty: !e.target.value,
         isBefore: isBefore ?? false,
@@ -283,7 +282,9 @@ export const useMonthpicker = (
     if (
       isAfter ||
       isBefore ||
-      (fromDate && toDate && !isMatch(month, [{ from: fromDate, to: toDate }]))
+      (fromDate &&
+        toDate &&
+        !dateMatchModifiers(month, [{ from: fromDate, to: toDate }]))
     ) {
       updateMonth(undefined);
       updateValidation({

package/src/date/monthpicker/index.ts

@@ -1,9 +1,9 @@
 "use client";
-export { useMonthpicker, type MonthValidationT } from "../hooks";
+export { useMonthpicker, type MonthValidationT } from "./hooks/useMonthPicker";
 export { default as MonthPicker } from "./MonthPicker";
-export { type MonthPickerProps } from "./types";
+export { type MonthPickerProps } from "./MonthPicker.types";
 export {
   MonthPickerStandalone,
   type MonthPickerStandaloneProps,
-} from "./MonthPickerStandalone";
-export { MonthPickerInput } from "../parts/DateInput";
+} from "./parts/MonthPicker.Standalone";
+export { MonthPickerInput } from "../Date.Input";

package/src/date/monthpicker/{MonthButton.tsx → parts/MonthPicker.Button.tsx}

@@ -7,9 +7,9 @@ import {
   setYear,
 } from "date-fns";
 import React, { useEffect, useRef } from "react";
-import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../context";
-import { dateIsInCurrentMonth, isMatch, nextEnabled } from "../utils";
+import { dateIsInCurrentMonth, isMatch } from "../../date-utils";
+import { useMonthPickerContext } from "../MonthPicker.context";
+import { nextEnabled } from "../MonthPicker.util";
 
 interface MonthType {
   month: Date;
@@ -47,10 +47,18 @@ export const MonthButton = ({
   setTabRoot,
 }: MonthType) => {
   const ref = useRef<HTMLButtonElement>(null);
-  const { hasDropdown, selected, onSelect, year, toYear, disabled } =
-    useSharedMonthContext();
 
-  const { fromDate, toDate, locale } = useDayPicker();
+  const {
+    fromDate,
+    toDate,
+    locale,
+    selected,
+    disabled,
+    year,
+    onYearChange,
+    onMonthSelect,
+    caption,
+  } = useMonthPickerContext();
   const isSelected = selected && isSameMonth(month, selected);
 
   useEffect(() => {
@@ -64,15 +72,18 @@ export const MonthButton = ({
     isMatch(setYear(month, year.getFullYear()), disabled) ||
     disableMonth(month, fromDate, toDate);
 
+  const isThisMonth = dateIsInCurrentMonth(month, year);
+
   return (
     <button
       ref={ref}
       type="button"
-      onClick={() => onSelect(isSelected ? undefined : month)}
+      onClick={() => onMonthSelect?.(isSelected ? undefined : month)}
       disabled={isDisabled}
       aria-pressed={!!isSelected}
+      data-current-month={isThisMonth}
       className={cl("navds-date__month-button", {
-        "rdp-day_today": dateIsInCurrentMonth(month, year),
+        "rdp-day_today": isThisMonth,
         "rdp-day_selected": isSelected,
         "rdp-day_disabled": isDisabled,
       })}
@@ -87,9 +98,9 @@ export const MonthButton = ({
           e.key,
           disabled,
           month,
-          toYear,
+          onYearChange,
           year,
-          hasDropdown,
+          caption === "dropdown",
           fromDate,
           toDate,
         );

package/src/date/monthpicker/{MonthCaption.tsx → parts/MonthPicker.Caption.tsx}

@@ -1,4 +1,5 @@
 import {
+  format,
   isAfter,
   isBefore,
   setYear,
@@ -6,25 +7,21 @@ import {
   startOfYear,
 } from "date-fns";
 import React from "react";
-import { useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
-import { Button } from "../../button";
-import { Select } from "../../form/select";
-import { useDateTranslationContext, useSharedMonthContext } from "../context";
+import { Button } from "../../../button";
+import { Select } from "../../../form/select";
+import { useDateTranslationContext } from "../../Date.locale";
+import { useMonthPickerContext } from "../MonthPicker.context";
+
+const MonthPickerCaption = () => {
+  const { fromDate, toDate, locale, year, onYearChange, caption } =
+    useMonthPickerContext();
 
-export const MonthCaption = () => {
-  const {
-    fromDate,
-    toDate,
-    formatters: { formatYearCaption },
-    locale,
-  } = useDayPicker();
-  const { hasDropdown, year, toYear } = useSharedMonthContext();
   const translate = useDateTranslationContext().translate;
 
   const years: Date[] = [];
 
-  if (hasDropdown && fromDate && toDate) {
+  if (caption === "dropdown" && fromDate && toDate) {
     const fromYear = fromDate.getFullYear();
     const toDateYear = toDate.getFullYear();
     for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
@@ -37,12 +34,14 @@ export const MonthCaption = () => {
     years.sort((a, b) => b.getFullYear() - a.getFullYear());
   }
 
-  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) =>
-    toYear(setYear(startOfMonth(new Date()), Number(event.target.value)));
+  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onYearChange(setYear(startOfMonth(new Date()), Number(event.target.value)));
+  };
 
   const handleButtonClick = (val: number) => {
     const newYear = Number(year.getFullYear() + val);
-    toYear(setYear(year, newYear));
+
+    onYearChange(setYear(year, newYear));
   };
 
   const disablePreviousYear = () => {
@@ -64,11 +63,11 @@ export const MonthCaption = () => {
         disabled={disablePreviousYear()}
         onClick={() => handleButtonClick(-1)}
         icon={<ArrowLeftIcon title={translate("goToPreviousYear")} />}
-        variant="tertiary"
+        variant="tertiary-neutral"
         type="button"
       />
 
-      {hasDropdown ? (
+      {caption === "dropdown" ? (
         <Select
           label={translate("year")}
           hideLabel
@@ -78,7 +77,7 @@ export const MonthCaption = () => {
         >
           {years.map((yearOpt) => (
             <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
-              {formatYearCaption(yearOpt, { locale })}
+              {format(yearOpt, "yyyy", { locale })}
             </option>
           ))}
         </Select>
@@ -92,11 +91,11 @@ export const MonthCaption = () => {
         disabled={disableNextYear()}
         onClick={() => handleButtonClick(1)}
         icon={<ArrowRightIcon title={translate("goToNextYear")} />}
-        variant="tertiary"
+        variant="tertiary-neutral"
         type="button"
       />
     </div>
   );
 };
 
-export default MonthCaption;
+export { MonthPickerCaption };

package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx

@@ -0,0 +1,86 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { useDateLocale, useI18n } from "../../../util/i18n/i18n.hooks";
+import {
+  DateTranslationContextProvider,
+  getLocaleFromString,
+  getTranslations,
+} from "../../Date.locale";
+import { MonthPickerProvider } from "../MonthPicker.context";
+import { MonthPickerProps } from "../MonthPicker.types";
+import { MonthPickerCaption } from "./MonthPicker.Caption";
+import { MonthPickerTable } from "./MonthPicker.Table";
+
+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();
+
+    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}>
+          <MonthPickerProvider
+            dropdownCaption={dropdownCaption}
+            defaultSelected={defaultSelected}
+            selected={selected}
+            disabled={disabled}
+            fromDate={fromDate}
+            toDate={toDate}
+            year={year}
+            onYearChange={onYearChange}
+            onMonthSelect={onMonthSelect}
+            locale={locale ? getLocaleFromString(locale) : langProviderLocale}
+          >
+            <div className="navds-date rdp-month">
+              <MonthPickerCaption />
+              <MonthPickerTable />
+            </div>
+          </MonthPickerProvider>
+        </DateTranslationContextProvider>
+      </div>
+    );
+  },
+);

package/src/date/monthpicker/{MonthSelector.tsx → parts/MonthPicker.Table.tsx}

@@ -1,9 +1,9 @@
 import { isSameMonth, setMonth, setYear, startOfMonth } from "date-fns";
 import React, { useState } from "react";
-import { BodyShort } from "../../typography";
-import { useSharedMonthContext } from "../context";
-import { isMatch } from "../utils";
-import MonthButton from "./MonthButton";
+import { BodyShort } from "../../../typography";
+import { isMatch } from "../../date-utils";
+import { useMonthPickerContext } from "../MonthPicker.context";
+import MonthButton from "./MonthPicker.Button";
 
 const getAllMonths = () => {
   const months: Date[] = [];
@@ -14,10 +14,10 @@ const getAllMonths = () => {
   return months;
 };
 
-export const MonthSelector = () => {
+const MonthPickerTable = () => {
   const [focus, setFocus] = useState<Date>();
 
-  const { selected, year, disabled } = useSharedMonthContext();
+  const { selected, year, disabled } = useMonthPickerContext();
 
   const months: Date[] = getAllMonths();
 
@@ -82,4 +82,4 @@ export const MonthSelector = () => {
   );
 };
 
-export default MonthSelector;
+export { MonthPickerTable };

package/src/modal/Modal.tsx

@@ -1,8 +1,8 @@
 import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
-import React, { forwardRef, useContext, useEffect, useRef } from "react";
+import React, { forwardRef, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { DateInputContext } from "../date/context";
+import { useDateInputContext } from "../date/Date.Input";
 import { useProvider } from "../provider/Provider";
 import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
@@ -106,7 +106,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const rootElement = useProvider()?.rootElement;
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
-    const dateContext = useContext(DateInputContext);
+    const dateContext = useDateInputContext(false);
     const isNested = useModalContext(false) !== undefined;
     if (isNested && !dateContext) {
       console.error("Modals should not be nested");

package/src/popover/Popover.tsx

@@ -7,8 +7,8 @@ import {
   useFloating,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
-import { DateInputContext } from "../date/context";
+import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import { useDateInputContext } from "../date/Date.Input";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
 import { useThemeInternal } from "../theme/Theme";
@@ -121,9 +121,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useModalContext(false) !== undefined;
-    const isInDatepicker = useContext(DateInputContext) !== null;
+    const datepickerContext = useDateInputContext(false);
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
-    const chosenFlip = isInDatepicker ? false : _flip;
+    const chosenFlip = datepickerContext ? false : _flip;
 
     const themeContext = useThemeInternal(false);
 

package/src/tooltip/Tooltip.tsx

@@ -16,7 +16,6 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { Slot } from "../slot/Slot";
-import { useThemeInternal } from "../theme/Theme";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -124,9 +123,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal(false);
-    const showArrow = _arrow && !themeContext;
-
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -153,7 +149,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       open: _open,
       onOpenChange: (newState) => _setOpen(newState),
       middleware: [
-        offset(_offset ?? (themeContext ? 8 : _arrow ? 16 : 4)),
+        offset(_offset ?? (_arrow ? 8 : 4)),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -244,7 +240,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ))}
                 </span>
               )}
-              {showArrow && (
+              {_arrow && (
                 <div
                   ref={(node) => {
                     arrowRef.current = node;

package/src/date/context/index.ts

@@ -1,9 +0,0 @@
-export { useDateInputContext, DateInputContext } from "./useDateInputContext";
-export {
-  useSharedMonthContext,
-  SharedMonthProvider,
-} from "./useSharedMonthContext";
-export {
-  useDateTranslationContext,
-  DateTranslationContextProvider,
-} from "./useDateTranslationContext";

package/src/date/context/useDateInputContext.tsx

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

package/src/date/context/useDateTranslationContext.ts

@@ -1,9 +0,0 @@
-import { createContext } from "../../util/create-context";
-import { TFunction } from "../../util/i18n/i18n.types";
-
-interface DateTranslationContextProps {
-  translate: TFunction<"DatePicker">;
-}
-
-export const [DateTranslationContextProvider, useDateTranslationContext] =
-  createContext<DateTranslationContextProps>();

package/src/date/context/useSharedMonthContext.tsx

@@ -1,68 +0,0 @@
-import { setYear, startOfMonth } from "date-fns";
-import React, { createContext, useContext, useState } from "react";
-import { useDayPicker } from "react-day-picker";
-import { Matcher, getInitialYear } from "../utils";
-
-export type SharedMonthContextType = {
-  hasDropdown: boolean;
-  year: Date;
-  toYear: (date: Date) => void;
-  disabled: Matcher[];
-  selected?: Date;
-  onSelect: (v?: Date) => void;
-};
-
-export const SharedMonthContext = createContext<SharedMonthContextType>({
-  hasDropdown: false,
-  year: new Date(),
-  toYear: () => null,
-  disabled: [],
-  onSelect: () => null,
-});
-
-export const useSharedMonthContext = () => useContext(SharedMonthContext);
-
-export const SharedMonthProvider = ({
-  children,
-  dropdownCaption,
-  disabled,
-  selected,
-  onSelect,
-  year: _year,
-  onYearChange,
-}) => {
-  const context = useDayPicker();
-
-  const [year, toYear] = useState<Date>(getInitialYear(context));
-
-  const hasDropdown = !!(dropdownCaption && context.fromDate && context.toDate);
-
-  if (
-    context.fromDate &&
-    context.toDate &&
-    context?.fromDate >= context?.toDate
-  ) {
-    console.warn("fromDate needs to be before toDate - MonthPicker");
-  }
-
-  return (
-    <SharedMonthContext.Provider
-      value={{
-        year: _year ?? year,
-        toYear: (y) => {
-          toYear(y);
-          onYearChange?.(y);
-        },
-        hasDropdown,
-        disabled,
-        selected,
-        onSelect: (v?: Date) =>
-          v
-            ? onSelect(setYear(startOfMonth(v), (_year ?? year).getFullYear()))
-            : onSelect(undefined),
-      }}
-    >
-      {children}
-    </SharedMonthContext.Provider>
-  );
-};