@navikt/ds-react 7.7.0 → 7.8.1

package/src/provider/Provider.tsx

@@ -1,20 +1,49 @@
 import React, { createContext, useContext } from "react";
+import { PartialTranslations, Translations } from "../util/i18n/i18n.types";
+import nb from "../util/i18n/locales/nb";
 
-export interface ProviderContextType {
-  /**
-   * Global root-element to attach portals to (Tooltip)
-   */
+type ProviderContextType = {
   rootElement?: HTMLElement;
-}
+  locale: Translations;
+  translations?: PartialTranslations | PartialTranslations[];
+};
 
-export const ProviderContext = createContext<ProviderContextType | undefined>(
-  undefined,
-);
+export const ProviderContext = createContext<ProviderContextType>({
+  locale: nb,
+});
 
-export interface ProviderProps {
-  children?: React.ReactNode;
+export type ProviderProps = {
+  children: React.ReactNode;
+  /**
+   * Global root-element to attach portals to. Used by Tooltip, Modal (optionally) and ActionMenu.
+   */
   rootElement?: HTMLElement;
-}
+} & (
+  | {
+      /**
+       * Aksel locale
+       * @default nb
+       * @example
+       * ```jsx
+       * import { en } from "@navikt/ds-react/locales";
+       * <Provider locale={en}>
+       *  {app}
+       * </Provider>
+       * ```
+       */
+      locale: Translations;
+      /**
+       * Use this if you need to override some of the default translations.
+       * Can be a single object or an array of objects.
+       * Must be used together with the `locale` prop.
+       */
+      translations?: PartialTranslations | PartialTranslations[];
+    }
+  | {
+      locale?: never;
+      translations?: never;
+    }
+);
 
 export const useProvider = () => useContext(ProviderContext);
 
@@ -31,9 +60,23 @@ export const useProvider = () => useContext(ProviderContext);
  * </Provider>
  * ```
  */
-export const Provider = ({ children, ...rest }: ProviderProps) => {
+export const Provider = ({
+  children,
+  rootElement,
+  locale,
+  translations,
+}: ProviderProps) => {
+  const parentContext = useProvider();
   return (
-    <ProviderContext.Provider value={rest}>{children}</ProviderContext.Provider>
+    <ProviderContext.Provider
+      value={{
+        rootElement: rootElement || parentContext.rootElement,
+        locale: locale || parentContext.locale || nb,
+        translations: translations || parentContext.translations,
+      }}
+    >
+      {children}
+    </ProviderContext.Provider>
   );
 };
 

package/src/table/ExpandableRow.tsx

@@ -78,6 +78,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       onChange: onOpenChange,
     });
     const translate = useI18n("global");
+
     const id = useId();
 
     const expansionHandler = (event: React.MouseEvent<HTMLElement>) => {
@@ -110,7 +111,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
             className={cl("navds-table__toggle-expand-cell", {
               "navds-table__toggle-expand-cell--open": _open,
             })}
-            onClick={expansionHandler}
+            onClick={!expansionDisabled ? expansionHandler : () => null}
           >
             {!expansionDisabled && (
               <button
@@ -129,13 +130,19 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           </DataCell>
           {togglePlacement === "left" && children}
         </Row>
-        <tr className="navds-table__expanded-row" aria-hidden={!_open} id={id}>
+        <tr
+          data-state={_open ? "open" : "closed"}
+          className="navds-table__expanded-row"
+          aria-hidden={!_open}
+          id={id}
+        >
           <td colSpan={colSpan} className="navds-table__expanded-row-cell">
             <AnimateHeight
               className="navds-table__expanded-row-collapse"
               innerClassName="navds-table__expanded-row-content"
               height={_open ? "auto" : 0}
-              duration={250}
+              duration={150}
+              easing="cubic-bezier(0.39,0.57,0.56,1)"
             >
               {content}
             </AnimateHeight>

package/src/tag/Tag.tsx

@@ -31,7 +31,13 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     | "alt2-moderate"
     | "alt3"
     | "alt3-filled"
-    | "alt3-moderate";
+    | "alt3-moderate"
+    | "meta-purple"
+    | "meta-purple-filled"
+    | "meta-purple-moderate"
+    | "meta-lime"
+    | "meta-lime-filled"
+    | "meta-lime-moderate";
   /**
    * @default "medium"
    */
@@ -54,23 +60,31 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
-    <BodyShort
-      {...rest}
-      ref={ref}
-      as="span"
-      size={size === "medium" ? "medium" : "small"}
-      className={cl(
-        "navds-tag",
-        className,
-        `navds-tag--${variant}`,
-        `navds-tag--${size}`,
-      )}
-    >
-      {icon && <span className="navds-tag__icon--left">{icon}</span>}
-      {children}
-    </BodyShort>
-  ),
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => {
+    const filledVariant = variant?.endsWith("-filled") && "strong";
+    const moderateVariant = variant?.endsWith("-moderate") && "moderate";
+    const color = variant?.replace("-filled", "").replace("-moderate", "");
+
+    return (
+      <BodyShort
+        {...rest}
+        ref={ref}
+        as="span"
+        size={size === "medium" ? "medium" : "small"}
+        className={cl(
+          "navds-tag",
+          className,
+          `navds-tag--${variant}`,
+          `navds-tag--${size}`,
+          `navds-tag--${filledVariant || moderateVariant || "outline"}`,
+          `navds-tag--${color}`,
+        )}
+      >
+        {icon && <span className="navds-tag__icon--left">{icon}</span>}
+        {children}
+      </BodyShort>
+    );
+  },
 );
 
 export default Tag;

package/src/timeline/Pin.tsx

@@ -15,6 +15,7 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -47,6 +48,9 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const showArrow = !themeContext;
+
     const {
       context,
       placement,
@@ -59,7 +63,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(16),
+        offset(showArrow ? 16 : 8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -135,15 +139,17 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
               style={floatingStyles}
             >
               {children}
-              <div
-                ref={arrowRef}
-                style={{
-                  ...(arrowX != null ? { left: arrowX } : {}),
-                  ...(arrowY != null ? { top: arrowY } : {}),
-                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                }}
-                className="navds-timeline__popover-arrow"
-              />
+              {showArrow && (
+                <div
+                  ref={arrowRef}
+                  style={{
+                    ...(arrowX != null ? { left: arrowX } : {}),
+                    ...(arrowY != null ? { top: arrowY } : {}),
+                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                  }}
+                  className="navds-timeline__popover-arrow"
+                />
+              )}
             </div>
           </FloatingFocusManager>
         )}

package/src/timeline/Timeline.tsx

@@ -39,6 +39,7 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Templates for label texts. The templates are passed to the date-fns `format` function.
    * Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.
+   * @deprecated Use `<Provider />`-component
    */
   axisLabelTemplates?: AxisLabelTemplates;
 }

package/src/timeline/hooks/useTimelineRows.ts

@@ -134,17 +134,33 @@ export const useTimelineRows = (
     [rows, startDate, endDate, direction],
   );
 
-const earliestDate = (earliest: Date, period: Period) =>
-  period.start < earliest ? period.start : earliest;
+export const useEarliestDate = ({
+  startDate,
+  rows,
+}: {
+  startDate?: Date;
+  rows: Pick<Period, "start">[][];
+}) =>
+  useMemo(() => {
+    if (startDate) {
+      return startDate;
+    }
 
-const earliestFomDate = (rader: Period[][]) =>
-  rader.flat().reduce(earliestDate, new Date());
+    const startDates = rows
+      .flat()
+      .filter((period) => period.start)
+      .map((period) => period.start);
 
-export const useEarliestDate = ({ startDate, rows }: any) =>
-  useMemo(
-    () => (startDate ? startDate : earliestFomDate(rows)),
-    [startDate, rows],
-  );
+    if (startDates.length === 0) {
+      return new Date();
+    }
+
+    const earliestDate = startDates.reduce((earliest, current) =>
+      current < earliest ? current : earliest,
+    );
+
+    return earliestDate;
+  }, [startDate, rows]);
 
 const latestDate = (latest: Date, period: Period) =>
   period.end > latest ? period.end : latest;

package/src/timeline/period/ClickablePeriod.tsx

@@ -15,6 +15,7 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, { useRef, useState } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -55,6 +56,9 @@ const ClickablePeriod = React.memo(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const showArrow = !themeContext;
+
     const {
       context,
       placement,
@@ -67,7 +71,7 @@ const ClickablePeriod = React.memo(
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(16),
+        offset(showArrow ? 16 : 8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -164,15 +168,17 @@ const ClickablePeriod = React.memo(
               style={floatingStyles}
             >
               {children}
-              <div
-                ref={arrowRef}
-                style={{
-                  ...(arrowX != null ? { left: arrowX } : {}),
-                  ...(arrowY != null ? { top: arrowY } : {}),
-                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                }}
-                className="navds-timeline__popover-arrow"
-              />
+              {showArrow && (
+                <div
+                  ref={arrowRef}
+                  style={{
+                    ...(arrowX != null ? { left: arrowX } : {}),
+                    ...(arrowY != null ? { top: arrowY } : {}),
+                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                  }}
+                  className="navds-timeline__popover-arrow"
+                />
+              )}
             </div>
           </FloatingFocusManager>
         )}

package/src/timeline/tests/useTimelineRows.test.ts

@@ -0,0 +1,131 @@
+import { renderHook } from "@testing-library/react";
+import { addDays, isSameDay } from "date-fns";
+import { describe, expect, test } from "vitest";
+import {
+  useEarliestDate,
+  useLatestDate,
+  useTimelineRows,
+} from "../hooks/useTimelineRows";
+
+describe("useEarliestDate", () => {
+  test("returns the provided startDate if it exists", () => {
+    const startDate = new Date(2023, 0, 1);
+    const { result } = renderHook(() =>
+      useEarliestDate({ startDate, rows: [] }),
+    );
+    expect(result.current).toEqual(startDate);
+  });
+
+  test("returns the earliest date from the rows if startDate is not provided", () => {
+    const rows = [
+      [{ start: new Date(2023, 0, 1) }],
+      [{ start: new Date(2022, 0, 1) }],
+    ];
+
+    const { result } = renderHook(() => useEarliestDate({ rows }));
+    expect(result.current).toEqual(new Date(2022, 0, 1));
+  });
+
+  test("returns the earliest date from the rows if startDate is not provided and date is later than todays date", () => {
+    const earliestDate = addDays(new Date(), 400);
+    const rows = [
+      [{ start: earliestDate }],
+      [{ start: addDays(earliestDate, 40) }],
+    ];
+
+    const { result } = renderHook(() => useEarliestDate({ rows }));
+    expect(result.current).toEqual(earliestDate);
+  });
+
+  test("returns the current date if no startDate and rows are empty", () => {
+    const { result } = renderHook(() => useEarliestDate({ rows: [] }));
+    expect(isSameDay(result.current, new Date())).toBeTruthy();
+  });
+});
+
+describe("useLatestDate", () => {
+  test("returns the provided endDate if it exists", () => {
+    const endDate = new Date(2023, 0, 1);
+    const { result } = renderHook(() => useLatestDate({ endDate, rows: [] }));
+    expect(result.current).toEqual(endDate);
+  });
+
+  test("returns the latest date from the rows plus one day if endDate is not provided", () => {
+    const rows = [
+      [{ start: new Date(2023, 0, 1), end: new Date(2023, 0, 10) }],
+      [{ start: new Date(2022, 0, 1), end: new Date(2022, 0, 5) }],
+    ];
+    const { result } = renderHook(() => useLatestDate({ rows }));
+    expect(result.current).toEqual(addDays(new Date(2023, 0, 10), 1));
+  });
+
+  test("returns the current date plus one day if no endDate and rows are empty", () => {
+    const { result } = renderHook(() => useLatestDate({ rows: [] }));
+    expect(result.current).toEqual(addDays(new Date(0), 1));
+  });
+});
+
+describe("useTimelineRows", () => {
+  const rows = [
+    {
+      label: "Row 1",
+      periods: [
+        {
+          start: new Date(2023, 0, 1),
+          end: new Date(2023, 0, 10),
+          status: "active",
+        },
+        {
+          start: new Date(2023, 0, 15),
+          end: new Date(2023, 0, 20),
+          status: "inactive",
+        },
+      ],
+    },
+    {
+      label: "Row 2",
+      periods: [
+        {
+          start: new Date(2022, 0, 1),
+          end: new Date(2022, 0, 5),
+          status: "active",
+        },
+      ],
+    },
+  ];
+
+  test("returns the correct timeline rows", () => {
+    const startDate = new Date(2022, 0, 1);
+    const endDate = new Date(2023, 0, 31);
+    const direction = "left";
+    const { result } = renderHook(() =>
+      useTimelineRows(rows, startDate, endDate, direction),
+    );
+
+    expect(result.current).toHaveLength(2);
+    expect(result.current[0].periods).toHaveLength(2);
+    expect(result.current[1].periods).toHaveLength(1);
+  });
+
+  test("handles empty rows", () => {
+    const startDate = new Date(2022, 0, 1);
+    const endDate = new Date(2023, 0, 31);
+    const direction = "left";
+    const { result } = renderHook(() =>
+      useTimelineRows([], startDate, endDate, direction),
+    );
+
+    expect(result.current).toHaveLength(0);
+  });
+
+  test("handles different directions", () => {
+    const startDate = new Date(2022, 0, 1);
+    const endDate = new Date(2023, 0, 31);
+    const direction = "right";
+    const { result } = renderHook(() =>
+      useTimelineRows(rows, startDate, endDate, direction),
+    );
+
+    expect(result.current[0].periods[0].start).toEqual(new Date(2023, 0, 15));
+  });
+});

package/src/tooltip/Tooltip.tsx

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

package/src/util/i18n/i18n.context.test.tsx

@@ -1,8 +1,10 @@
 import { renderHook } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import UNSAFE_AkselLanguageProvider from "../../provider/i18n/LanguageProvider";
+import { Provider } from "../../provider";
 import { useI18n } from "./i18n.context";
+import en from "./locales/en";
+import nb from "./locales/nb";
 
 describe("useI18n", () => {
   test("should throw error if key is not found", () => {
@@ -12,13 +14,32 @@ describe("useI18n", () => {
     expect(() => translate("item.nonexistentKey")).toThrowError();
   });
 
-  test("should return the translated text from I18nContext", () => {
+  test("should return the default NB translation when Provider is not used", () => {
+    const { result } = renderHook(() => useI18n("FileUpload"));
+    const translate = result.current;
+    expect(translate("item.uploading")).toBe(nb.FileUpload.item.uploading);
+  });
+
+  test("should return the default translation when key is not in context object", () => {
+    const i18n = { FileUpload: { item: { downloading: "Test translation" } } };
+    const { result } = renderHook(() => useI18n("FileUpload"), {
+      wrapper: ({ children }) => (
+        <Provider locale={en} translations={i18n}>
+          {children}
+        </Provider>
+      ),
+    });
+    const translate = result.current;
+    expect(translate("item.uploading")).toBe(en.FileUpload.item.uploading);
+  });
+
+  test("should return the translated text from the context object", () => {
     const i18n = { FileUpload: { item: { uploading: "Test translation" } } };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <UNSAFE_AkselLanguageProvider translations={i18n}>
+        <Provider locale={en} translations={i18n}>
           {children}
-        </UNSAFE_AkselLanguageProvider>
+        </Provider>
       ),
     });
     const translate = result.current;
@@ -32,9 +53,9 @@ describe("useI18n", () => {
     const i18n2 = { FileUpload: { item: { uploading: "Wrong translation" } } };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <UNSAFE_AkselLanguageProvider translations={[i18n1, i18n2]}>
+        <Provider locale={en} translations={[i18n1, i18n2]}>
           {children}
-        </UNSAFE_AkselLanguageProvider>
+        </Provider>
       ),
     });
     const translate = result.current;
@@ -48,9 +69,9 @@ describe("useI18n", () => {
     };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <UNSAFE_AkselLanguageProvider translations={[i18n1, i18n2]}>
+        <Provider locale={en} translations={[i18n1, i18n2]}>
           {children}
-        </UNSAFE_AkselLanguageProvider>
+        </Provider>
       ),
     });
     const translate = result.current;

package/src/util/i18n/i18n.context.ts

@@ -1,6 +1,5 @@
 import { Locale } from "date-fns";
-import { useContext } from "react";
-import { LanguageProviderContext } from "../../provider/i18n/LanguageProvider";
+import { useProvider } from "../../provider/Provider";
 import { get } from "./get";
 import {
   Component,
@@ -28,15 +27,16 @@ export type TFunction<T extends Component> = (
 
 export function useI18n<T extends Component>(
   componentName: T,
-  ...local: (ComponentTranslation<T> | undefined)[]
+  ...localTranslations: (ComponentTranslation<T> | undefined)[]
 ) {
-  const languageProviderContext = useContext(LanguageProviderContext);
-  const i18n = languageProviderContext.translations;
+  const context = useProvider();
+  const contextTranslations = context.translations || [];
   const i18nObjects: (PartialTranslations | undefined)[] = [
-    ...local,
-    ...(Array.isArray(i18n)
-      ? i18n.map((t) => t[componentName])
-      : [i18n[componentName]]),
+    ...localTranslations,
+    ...(Array.isArray(contextTranslations)
+      ? contextTranslations.map((t) => t[componentName])
+      : [contextTranslations[componentName]]),
+    context.locale[componentName],
   ];
 
   /**
@@ -67,11 +67,12 @@ export function useI18n<T extends Component>(
 }
 
 export function useDateLocale() {
-  const languageProviderContext = useContext(LanguageProviderContext);
-  const i18n = languageProviderContext.translations;
-  const i18nObjects = Array.isArray(i18n)
-    ? i18n.map((t) => t.global)
-    : [i18n.global];
+  const context = useProvider();
+  const contextTranslations = context.translations || [];
+  const i18nObjects = Array.isArray(contextTranslations)
+    ? contextTranslations.map((t) => t.global)
+    : [contextTranslations.global];
+  i18nObjects.push(context.locale.global);
 
   for (const obj of i18nObjects) {
     if (obj?.dateLocale) {