@navikt/ds-react 7.6.0 → 7.8.0

package/src/layout/box/Box.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
@@ -18,6 +19,7 @@ import {
   SpaceDelimitedAttribute,
   SurfaceColorToken,
 } from "../utilities/types";
+import BoxNew from "./Box.darkside";
 
 export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
@@ -55,6 +57,11 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 
+interface BoxComponentType
+  extends OverridableComponent<BoxProps, HTMLDivElement> {
+  New: typeof BoxNew;
+}
+
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
  *
@@ -82,69 +89,91 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
  *  </Box>
  * </VStack>
  */
-export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
-  (
-    {
-      children,
-      className,
-      as: Component = "div",
-      background,
-      borderColor,
-      borderWidth,
-      borderRadius,
-      shadow,
-      style: _style,
-      asChild,
-      ...rest
-    },
-    ref,
-  ) => {
-    const style: React.CSSProperties = {
-      ..._style,
-      "--__ac-box-background": background
-        ? `var(--a-${background})`
-        : undefined,
-      "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined,
-      "--__ac-box-border-color": borderColor
-        ? `var(--a-${borderColor})`
-        : undefined,
-      "--__ac-box-border-width": borderWidth
-        ? borderWidth
-            .split(" ")
-            .map((x) => `${x}px`)
-            .join(" ")
-        : undefined,
-      ...getResponsiveProps(
-        "box",
-        "border-radius",
-        "border-radius",
+export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        background,
+        borderColor,
+        borderWidth,
         borderRadius,
-        false,
-        ["0"],
-      ),
-    };
+        shadow,
+        style: _style,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+
+      if (
+        process.env.NODE_ENV !== "production" &&
+        themeContext &&
+        (background || borderColor || shadow)
+      ) {
+        console.warn(
+          `<Box /> with properties 'background', 'borderColor' or 'shadow' cannot be used with AkselTheme (darkmode-support). To continue using these properties, migrate to '<Box.New>'`,
+        );
+      }
+
+      const prefix = themeContext ? "ax" : "a";
+
+      const style: React.CSSProperties = {
+        ..._style,
+        [`--__${prefix}c-box-background`]: background
+          ? `var(--a-${background})`
+          : undefined,
+        [`--__${prefix}c-box-shadow`]: shadow
+          ? `var(--a-shadow-${shadow})`
+          : undefined,
+        [`--__${prefix}c-box-border-color`]: borderColor
+          ? `var(--a-${borderColor})`
+          : undefined,
+        [`--__${prefix}c-box-border-width`]: borderWidth
+          ? borderWidth
+              .split(" ")
+              .map((x) => `${x}px`)
+              .join(" ")
+          : undefined,
+        ...getResponsiveProps(
+          prefix,
+          "box",
+          "border-radius",
+          "border-radius",
+          borderRadius,
+          false,
+          ["0"],
+        ),
+      };
+
+      const Comp = asChild ? Slot : Component;
+
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            style={style}
+            className={cl("navds-box", className, {
+              "navds-box-bg": background,
+              "navds-box-border-color": borderColor,
+              "navds-box-border-width": borderWidth,
+              "navds-box-border-radius": borderRadius,
+              "navds-box-shadow": shadow,
+            })}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );
 
-    const Comp = asChild ? Slot : Component;
+export const Box = BoxComponent as BoxComponentType;
 
-    return (
-      <BasePrimitive {...rest}>
-        <Comp
-          {...omit(rest, PRIMITIVE_PROPS)}
-          ref={ref}
-          style={style}
-          className={cl("navds-box", className, {
-            "navds-box-bg": background,
-            "navds-box-border-color": borderColor,
-            "navds-box-border-width": borderWidth,
-            "navds-box-border-radius": borderRadius,
-            "navds-box-shadow": shadow,
-          })}
-        >
-          {children}
-        </Comp>
-      </BasePrimitive>
-    );
-  },
-);
+Box.New = BoxNew;
 
 export default Box;

package/src/layout/box/index.ts

@@ -1,2 +1,5 @@
 "use client";
 export { default as Box, type BoxProps } from "./Box";
+
+/* TODO: Uncomment this when ready to expose darkmode-support. Remember to update top-level `index.ts` at the same time. */
+/* export { default as BoxNew, type BoxNewProps } from "./Box.darkside"; */

package/src/layout/grid/HGrid.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { OverridableComponent, omit } from "../../util";
 import BasePrimitive, {
@@ -77,11 +78,14 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+      const prefix = themeContext ? "ax" : "a";
+
       const styles: React.CSSProperties = {
         ...style,
-        "--__ac-hgrid-align": align,
-        ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
-        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+        [`--__${prefix}c-hgrid-align`]: align,
+        ...getResponsiveProps(prefix, `hgrid`, "gap", "spacing", gap),
+        ...getResponsiveValue(prefix, `hgrid`, "columns", formatGrid(columns)),
       };
 
       const Comp = asChild ? Slot : Component;

package/src/layout/page/Page.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { OverridableComponent } from "../../util";
 import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
@@ -14,6 +15,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    * Background color.
    * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
    * @default "bg-default"
+   * @deprecated 'background'-prop will be removed in future major-versions. Use `<Box asChild background="...">` wrapped around `<Page>`.
    */
   background?: BackgroundColorToken;
   /**
@@ -52,6 +54,14 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+
+      if (process.env.NODE_ENV !== "production" && themeContext && background) {
+        console.warn(
+          `Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``,
+        );
+      }
+
       const style: React.CSSProperties = {
         ..._style,
         "--__ac-page-background": `var(--a-${background})`,

package/src/layout/stack/Stack.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
@@ -83,12 +84,15 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+      const prefix = themeContext ? "ax" : "a";
+
       const style: React.CSSProperties = {
         ..._style,
-        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
-        ...getResponsiveValue(`stack`, "direction", direction),
-        ...getResponsiveValue(`stack`, "align", align),
-        ...getResponsiveValue(`stack`, "justify", justify),
+        ...getResponsiveProps(prefix, `stack`, "gap", "spacing", gap),
+        ...getResponsiveValue(prefix, `stack`, "direction", direction),
+        ...getResponsiveValue(prefix, `stack`, "align", align),
+        ...getResponsiveValue(prefix, `stack`, "justify", justify),
       };
 
       const Comp = asChild ? Slot : Component;

package/src/layout/utilities/css.ts

@@ -1,6 +1,7 @@
 import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
+  prefix: string,
   componentName: string,
   componentProp: string,
   responsiveProp?: ResponsiveProp<T>,
@@ -11,13 +12,13 @@ export function getResponsiveValue<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+      [`--__${prefix}c-${componentName}-${componentProp}-xs`]: responsiveProp,
     };
   }
 
   return Object.fromEntries(
     Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`,
       responsiveValue,
     ]),
   );
@@ -37,6 +38,7 @@ const translateTokenStringToCSS = (
   tokenSubgroup: string,
   tokenExceptions: string[],
   invert: boolean,
+  prefix: string,
 ) => {
   return tokenString
     .split(" ")
@@ -54,7 +56,7 @@ const translateTokenStringToCSS = (
         return "auto";
       }
 
-      let output = `var(--a-${tokenSubgroup}-${x})`;
+      let output = `var(--${prefix}-${tokenSubgroup}-${x})`;
       if (tokenExceptions.includes(x)) {
         output = translateExceptionToCSS(x);
       }
@@ -70,6 +72,7 @@ const translateTokenStringToCSS = (
 };
 
 export function getResponsiveProps<T extends string>(
+  prefix: string,
   componentName: string,
   componentProp: string,
   tokenSubgroup: string,
@@ -83,27 +86,30 @@ export function getResponsiveProps<T extends string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]:
+      [`--__${prefix}c-${componentName}-${componentProp}-xs`]:
         translateTokenStringToCSS(
           componentProp,
           responsiveProp,
           tokenSubgroup,
           tokenExceptions,
           invert,
+          prefix,
         ),
     };
   }
 
   const styleProps = {};
   Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
-    styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
-      translateTokenStringToCSS(
-        componentProp,
-        aliasOrScale,
-        tokenSubgroup,
-        tokenExceptions,
-        invert,
-      );
+    styleProps[
+      `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`
+    ] = translateTokenStringToCSS(
+      componentProp,
+      aliasOrScale,
+      tokenSubgroup,
+      tokenExceptions,
+      invert,
+      prefix,
+    );
   });
   return styleProps;
 }

package/src/layout/utilities/types.ts

@@ -1,3 +1,9 @@
+/* Darkside tokens */
+import { semanticTokenConfig } from "@navikt/ds-tokens/darkside/tokens/semantic";
+import { SemanticTokensForAllRolesConfigT } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
+import { shadowTokenConfig } from "@navikt/ds-tokens/darkside/tokens/shadow";
+
+/* Old */
 import borderRadii from "@navikt/ds-tokens/src/border.json";
 import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
@@ -27,3 +33,21 @@ type FixedResponsiveT<T> = {
 };
 
 export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+
+/**
+ * Darkside tokens
+ */
+export type SemanticShadowTokens = keyof ReturnType<
+  typeof shadowTokenConfig
+>["shadow"];
+
+export type SemanticStaticBgDarkside = keyof ReturnType<
+  typeof semanticTokenConfig
+>["bg"];
+
+export type SemanticRoleBgDarkside =
+  keyof SemanticTokensForAllRolesConfigT<"color">["bg"];
+
+export type SemanticStaticBorderDarkside = keyof ReturnType<
+  typeof semanticTokenConfig
+>["border"];

package/src/modal/Modal.tsx

@@ -2,7 +2,7 @@ import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
 import React, { forwardRef, useContext, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { DateContext } from "../date/context";
+import { DateInputContext } from "../date/context";
 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(DateContext);
+    const dateContext = useContext(DateInputContext);
     const isNested = useModalContext(false) !== undefined;
     if (isNested && !dateContext) {
       console.error("Modals should not be nested");

package/src/modal/ModalHeader.tsx

@@ -17,7 +17,7 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
     const context = useModalContext();
-    const translate = useI18n("Modal");
+    const translate = useI18n("global");
 
     return (
       <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>

package/src/popover/Popover.tsx

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

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