@navikt/ds-react 8.0.0 → 8.0.1

package/src/typography/ErrorMessage.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -52,22 +52,20 @@ export const ErrorMessage: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-error-message",
-          "navds-label",
+        className={cl(
+          "aksel-error-message",
+          "aksel-label",
           className,
           typoClassNames({
             spacing,
           }),
           {
-            "navds-label--small": size === "small",
-            "navds-error-message--show-icon": showIcon,
+            "aksel-label--small": size === "small",
+            "aksel-error-message--show-icon": showIcon,
           },
         )}
       >

package/src/typography/Heading.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -61,17 +61,16 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-heading",
-            `navds-heading--${size}`,
+            "aksel-heading",
+            `aksel-heading--${size}`,
             typoClassNames({
               spacing,
               align,

package/src/typography/Ingress.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface IngressProps
@@ -32,14 +32,12 @@ export interface IngressProps
  */
 export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
   forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(className, "navds-ingress", {
-          "navds-typo--spacing": !!spacing,
+        className={cl(className, "aksel-ingress", {
+          "aksel-typo--spacing": !!spacing,
         })}
       />
     );

package/src/typography/Label.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -55,22 +55,20 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-label",
+            "aksel-label",
             typoClassNames({
               spacing,
               visuallyHidden,
               textColor,
             }),
             {
-              "navds-label--small": size === "small",
+              "aksel-label--small": size === "small",
             },
           )}
         />

package/src/typography/util.ts

@@ -1,15 +1,14 @@
-import cl from "clsx";
+import { cl } from "../util/className";
 import { TypoProps } from "./types";
 
 export const typoClassNames = (props: TypoProps & { uppercase?: boolean }) => {
-  /* Renaming to aksel-* prefix is done in components themselves */
   return cl({
-    "navds-typo--spacing": props.spacing,
-    "navds-typo--truncate": props.truncate,
-    "navds-typo--semibold": props.weight === "semibold",
-    [`navds-typo--align-${props.align}`]: props.align,
-    [`navds-typo--color-${props.textColor}`]: props.textColor,
-    "navds-typo--visually-hidden": props.visuallyHidden,
-    "navds-typo--uppercase": props.uppercase,
+    "aksel-typo--spacing": props.spacing,
+    "aksel-typo--truncate": props.truncate,
+    "aksel-typo--semibold": props.weight === "semibold",
+    [`aksel-typo--align-${props.align}`]: props.align,
+    [`aksel-typo--color-${props.textColor}`]: props.textColor,
+    "aksel-typo--visually-hidden": props.visuallyHidden,
+    "aksel-typo--uppercase": props.uppercase,
   });
 };

package/src/util/className.ts

@@ -0,0 +1,58 @@
+/** biome-ignore-all lint/suspicious/noAssignInExpressions: Because why not? */
+type ClassValue =
+  | ClassArray
+  | ClassDictionary
+  | string
+  | number
+  | bigint
+  | null
+  | boolean
+  | undefined;
+type ClassDictionary = Record<string, any>;
+type ClassArray = ClassValue[];
+
+function toVal(mix: Exclude<ClassValue, null | undefined | false>) {
+  let result = "";
+
+  if (typeof mix === "string" || typeof mix === "number") {
+    result += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      for (let i = 0; i < mix.length; i++) {
+        if (mix[i]) {
+          const parsedValue = toVal(mix[i]);
+          if (parsedValue) {
+            result && (result += " ");
+            result += parsedValue;
+          }
+        }
+      }
+    } else {
+      for (const key in mix) {
+        if (mix[key]) {
+          result && (result += " ");
+          result += key;
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+export function cl(...inputs: ClassValue[]) {
+  let parsedValue = "";
+  let currentValue: ClassValue;
+  let result = "";
+
+  for (let i = 0; i < inputs.length; i++) {
+    if ((currentValue = inputs[i])) {
+      if ((parsedValue = toVal(currentValue))) {
+        result && (result += " ");
+        result += parsedValue;
+      }
+    }
+  }
+
+  return result;
+}

package/src/util/hooks/useMergeRefs.ts

@@ -2,13 +2,15 @@
 import React from "react";
 import { useRefWithInit } from "./useRefWithInit";
 
+type RefCallback<T> = (instance: T | null) => void;
+
 type Empty = null | undefined;
 type InputRef<I> = React.Ref<I> | Empty;
-type Result<I> = React.RefCallback<I> | null;
+type Result<I> = RefCallback<I> | null;
 type Cleanup = () => void;
 
 type ForkRef<I> = {
-  callback: React.RefCallback<I> | null;
+  callback: RefCallback<I> | null;
   cleanup: Cleanup | null;
   refs: InputRef<I>[];
 };
@@ -96,7 +98,7 @@ function update<I>(forkRef: ForkRef<I>, refs: InputRef<I>[]) {
     return;
   }
 
-  forkRef.callback = (instance: I) => {
+  forkRef.callback = (instance) => {
     if (forkRef.cleanup) {
       forkRef.cleanup();
       forkRef.cleanup = null;

package/src/util/link-anchor/LinkAnchor.tsx

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../className";
 import { composeEventHandlers } from "../composeEventHandlers";
 import { createStrictContext } from "../create-strict-context";
 import { useMergeRefs } from "../hooks/useMergeRefs";
@@ -38,7 +38,6 @@ const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
     }: LinkAnchorOverlayProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const anchorRef = useRef<HTMLAnchorElement>(null);
 
     const Component = asChild ? Slot : "div";
@@ -48,7 +47,7 @@ const LinkAnchorOverlay = forwardRef<HTMLDivElement, LinkAnchorOverlayProps>(
         <Component
           ref={forwardedRef}
           {...restProps}
-          className={cn("navds-link-anchor__overlay", className)}
+          className={cl("aksel-link-anchor__overlay", className)}
           onClick={composeEventHandlers(onClick, (e) => {
             if (
               e.target === anchorRef.current ||
@@ -110,8 +109,6 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
     { children, asChild, className, ...restProps }: LinkAnchorProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const context = useLinkAnchorContext(false);
     const mergedRefs = useMergeRefs(forwardedRef, context?.anchorRef);
 
@@ -121,7 +118,7 @@ const LinkAnchor = forwardRef<HTMLAnchorElement, LinkAnchorProps>(
       <Component
         ref={mergedRefs}
         {...restProps}
-        className={cn("navds-link-anchor", className)}
+        className={cl("aksel-link-anchor", className)}
       >
         {children}
       </Component>
@@ -134,13 +131,11 @@ type LinkAnchorArrowProps = Omit<SVGProps<SVGSVGElement>, "ref">;
 
 const LinkAnchorArrow = forwardRef<SVGSVGElement, LinkAnchorArrowProps>(
   ({ className, ...restProps }: LinkAnchorArrowProps, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <ArrowRightIcon
         ref={forwardedRef}
         aria-hidden
-        className={cn("navds-link-anchor__arrow", className)}
+        className={cl("aksel-link-anchor__arrow", className)}
         {...restProps}
       />
     );

package/src/theme/RenameCSS.test.ts

@@ -1,80 +0,0 @@
-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);
-  });
-});