@navikt/ds-react 7.12.2 → 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/form/confirmation-panel/ConfirmationPanel.tsx

@@ -57,6 +57,12 @@ export const ConfirmationPanel = forwardRef<
 
   const id = useId();
 
+  const currentRole = hasError
+    ? "danger"
+    : props.checked
+      ? "success"
+      : "warning";
+
   return (
     <div
       className={cl("navds-confirmation-panel", "navds-form-field", className, {
@@ -64,6 +70,7 @@ export const ConfirmationPanel = forwardRef<
         "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
+      data-color-role={currentRole}
     >
       <div className="navds-confirmation-panel__inner">
         {children && (

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/react-css.d.ts

@@ -1,4 +1,5 @@
 import "react";
+import type { GlobalColorRoles } from "@navikt/ds-tokens/types";
 
 declare module "react" {
   interface CSSProperties {
@@ -7,4 +8,7 @@ declare module "react" {
     [key: `--axc-${string}`]: string | number | undefined;
     [key: `--__axc-${string}`]: string | number | undefined;
   }
+  interface HTMLAttributes {
+    "data-color-role"?: GlobalColorRoles;
+  }
 }

package/src/theme/RenameCSS.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from "vitest";
+import { compositeClassFunction } from "./Theme";
+
+const start = "navds-accordion testclass navds-heading endclass";
+const end =
+  "startclass navds-accordion navds-heading endclass navds-accordion__header";
+
+const both = start + " " + end;
+
+describe("RenameCSS", () => {
+  test("String starts with navds", () => {
+    expect(compositeClassFunction(start)).toBe(
+      "aksel-accordion testclass aksel-heading endclass",
+    );
+  });
+
+  test("String ends with navds", () => {
+    expect(compositeClassFunction(end)).toBe(
+      "startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
+    );
+  });
+
+  test("String starts and ends with navds", () => {
+    expect(compositeClassFunction(both)).toBe(
+      "aksel-accordion testclass aksel-heading endclass startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
+    );
+  });
+
+  test("String does not contain navds", () => {
+    expect(compositeClassFunction("startclass endclass")).toBe(
+      "startclass endclass",
+    );
+  });
+
+  test("String is empty", () => {
+    expect(compositeClassFunction("")).toBe("");
+  });
+
+  test("String contains navds as a substring", () => {
+    expect(compositeClassFunction("startclass test-navds-class endclass")).toBe(
+      "startclass test-navds-class endclass",
+    );
+  });
+
+  test("String contains multiple navds occurrences", () => {
+    const input = "navds-button navds-icon navds-label";
+    const expected = "aksel-button aksel-icon aksel-label";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains navds with special characters", () => {
+    const input = "navds-button! navds-icon@ navds-#label navds#-label";
+    const expected = "aksel-button! aksel-icon@ aksel-#label navds#-label";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains mixed navds and non-navds classes", () => {
+    const input = "navds-button custom-class navds-icon";
+    const expected = "aksel-button custom-class aksel-icon";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains only navds", () => {
+    const input = "navds";
+    const expected = "navds";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains navds with numbers", () => {
+    const input = "navds-1 navds-2 navds-3";
+    const expected = "aksel-1 aksel-2 aksel-3";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains different casings", () => {
+    const input = "Navds-button NAVds-icon NAVDS-label navDS-component";
+    const expected = "Navds-button NAVds-icon NAVDS-label navDS-component";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+});

package/src/theme/Theme.tsx

@@ -4,6 +4,41 @@ import { Slot } from "../slot/Slot";
 import { createContext } from "../util/create-context";
 import { AsChildProps } from "../util/types";
 
+/* -------------------------------------------------------------------------- */
+/*                               CSS Trsnalation                              */
+/* -------------------------------------------------------------------------- */
+type RenameCSSContext = {
+  cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
+};
+
+const [RenameCSSProvider, useRenameCSS] = createContext<RenameCSSContext>({
+  hookName: "useRenameCSS",
+  name: "RenameCSS",
+  providerName: "RenameCSSProvider",
+  defaultValue: { cn: cl },
+});
+
+export const compositeClassFunction = (
+  ...inputs: Parameters<typeof cl>
+): string => {
+  const classes = cl(inputs)
+    /* Replaces only if start of string  "navds- navds-"*/
+    .replace(/^navds-/g, "aksel-")
+    /* Replaces all " navds-" hits */
+    .replace(/\snavds-/g, " aksel-");
+
+  return classes.trim();
+};
+
+const RenameCSS = ({ children }: { children: React.ReactNode }) => {
+  /* Replace function with this when implementation is complete and CSS is updated */
+  /* <RenameCSSProvider cn={compositeClassFunction}> */
+  return <RenameCSSProvider cn={cl}>{children}</RenameCSSProvider>;
+};
+
+/* -------------------------------------------------------------------------- */
+/*                               Theme provider                               */
+/* -------------------------------------------------------------------------- */
 type ThemeContext = {
   /**
    * Color theme
@@ -45,16 +80,18 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
 
     return (
       <ThemeProvider theme={theme}>
-        <SlotElement
-          ref={ref}
-          className={cl("navds-theme", className, theme)}
-          data-background={hasBackground}
-        >
-          {children}
-        </SlotElement>
+        <RenameCSS>
+          <SlotElement
+            ref={ref}
+            className={cl("navds-theme", className, theme)}
+            data-background={hasBackground}
+          >
+            {children}
+          </SlotElement>
+        </RenameCSS>
       </ThemeProvider>
     );
   },
 );
 
-export { Theme, useThemeInternal };
+export { Theme, useRenameCSS, useThemeInternal };

package/src/theme/index.ts

@@ -1,2 +1,2 @@
 "use client";
-export { Theme, ThemeProps } from "./Theme";
+export { Theme, type ThemeProps } from "./Theme";

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";