@navikt/ds-react 8.0.0 → 8.1.0

package/src/layout/stack/Stack.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
-import { omit } from "../../util";
-import { OverridableComponent } from "../../util/types";
+import { type OverridableComponent } from "../../utils-external";
+import { omit } from "../../utils-external";
+import { Slot } from "../../utils/components/slot/Slot";
+import { cl } from "../../utils/helpers";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
   PrimitiveProps,
@@ -83,8 +83,6 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       const style: React.CSSProperties = {
         ..._style,
         ...getResponsiveProps(`stack`, "gap", "space", gap),
@@ -101,14 +99,14 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cn("navds-stack", className, {
-              "navds-vstack": direction === "column",
-              "navds-hstack": direction === "row",
-              "navds-stack-gap": gap,
-              "navds-stack-align": align,
-              "navds-stack-justify": justify,
-              "navds-stack-direction": direction,
-              "navds-stack-wrap": wrap,
+            className={cl("aksel-stack", className, {
+              "aksel-vstack": direction === "column",
+              "aksel-hstack": direction === "row",
+              "aksel-stack-gap": gap,
+              "aksel-stack-align": align,
+              "aksel-stack-justify": justify,
+              "aksel-stack-direction": direction,
+              "aksel-stack-wrap": wrap,
             })}
           >
             {children}

package/src/layout/stack/VStack.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/types";
+import { type OverridableComponent } from "../../utils-external";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";
 

package/src/link/Link.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -72,16 +72,14 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           data-color={color ?? variantToColor(variant)}
           {...rest}
           ref={ref}
-          className={cn("navds-link", className, {
-            "navds-link--remove-underline": !underline,
-            "navds-link--inline-text": inlineText,
+          className={cl("aksel-link", className, {
+            "aksel-link--remove-underline": !underline,
+            "aksel-link--inline-text": inlineText,
           })}
         />
       );

package/src/link-card/LinkCard.tsx

@@ -1,14 +1,13 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
 import { BodyLong, Heading } from "../typography";
-import { createStrictContext } from "../util/create-strict-context";
 import {
   LinkAnchor,
   LinkAnchorArrow,
   LinkAnchorOverlay,
   LinkAnchorProps,
-} from "../util/link-anchor";
+} from "../utils/components/link-anchor";
+import { cl, createStrictContext } from "../utils/helpers";
 
 /* ------------------------------ LinkCard Root ----------------------------- */
 interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
@@ -112,8 +111,6 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
     }: LinkCardProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <LinkCardContextProvider size={size}>
         <LinkAnchorOverlay asChild>
@@ -122,10 +119,10 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
             size={size}
             ref={forwardedRef}
             data-color="neutral"
-            className={cn(
-              "navds-link-card",
+            className={cl(
+              "aksel-link-card",
               className,
-              `navds-link-card--${size}`,
+              `aksel-link-card--${size}`,
             )}
             data-align-arrow={arrowPosition}
             {...restProps}
@@ -134,7 +131,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
             {arrow && (
               <LinkAnchorArrow
                 fontSize={size === "medium" ? "1.75rem" : "1.5rem"}
-                className={cn("navds-link-card__arrow")}
+                className="aksel-link-card__arrow"
               />
             )}
           </BodyLong>
@@ -163,8 +160,6 @@ export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
     { children, as = "span", className, ...restProps }: LinkCardTitleProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const context = useLinkCardContext();
 
     return (
@@ -172,7 +167,7 @@ export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
         ref={forwardedRef}
         as={as}
         size={context.size === "medium" ? "small" : "xsmall"}
-        className={cn("navds-link-card__title", className)}
+        className={cl("aksel-link-card__title", className)}
         {...restProps}
       >
         {children}
@@ -205,12 +200,10 @@ export const LinkCardDescription = forwardRef<
     { children, className, ...restProps }: LinkCardDescriptionProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={forwardedRef}
-        className={cn("navds-link-card__description", className)}
+        className={cl("aksel-link-card__description", className)}
         {...restProps}
       >
         {children}
@@ -232,12 +225,10 @@ export const LinkCardFooter = forwardRef<HTMLDivElement, LinkCardFooterProps>(
     { children, className, ...restProps }: LinkCardFooterProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={forwardedRef}
-        className={cn("navds-link-card__footer", className)}
+        className={cl("aksel-link-card__footer", className)}
         {...restProps}
       >
         {children}
@@ -256,13 +247,11 @@ interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const LinkCardIcon = forwardRef<HTMLDivElement, LinkCardIconProps>(
   ({ children, className, ...restProps }: LinkCardIconProps, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={forwardedRef}
         aria-hidden
-        className={cn("navds-link-card__icon", className)}
+        className={cl("aksel-link-card__icon", className)}
         {...restProps}
       >
         {children}
@@ -297,12 +286,10 @@ export const LinkCardImage = forwardRef<HTMLDivElement, LinkCardImageProps>(
     }: LinkCardImageProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={forwardedRef}
-        className={cn("navds-link-card__image-container", className)}
+        className={cl("aksel-link-card__image-container", className)}
         style={{
           ...style,
           aspectRatio,

package/src/link-panel/LinkPanel.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { Panel } from "../panel";
-import { useRenameCSS } from "../theme/Theme";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionProps,
@@ -51,21 +51,16 @@ export const LinkPanelComponent: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(
   ({ children, as = "a", border = true, className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Panel
         {...rest}
         as={as}
         border={border}
         ref={ref}
-        className={cn("navds-link-panel", className)}
+        className={cl("aksel-link-panel", className)}
       >
-        <div className={cn("navds-link-panel__content")}>{children}</div>
-        <ChevronRightIcon
-          className={cn("navds-link-panel__chevron")}
-          aria-hidden
-        />
+        <div className="aksel-link-panel__content">{children}</div>
+        <ChevronRightIcon className="aksel-link-panel__chevron" aria-hidden />
       </Panel>
     );
   },

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../utils/helpers";
 
 export interface LinkPanelDescriptionProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,14 +11,12 @@ export const LinkPanelDescription = forwardRef<
   HTMLDivElement,
   LinkPanelDescriptionProps
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyLong
       {...rest}
       as="div"
       ref={ref}
-      className={cn("navds-link-panel__description", className)}
+      className={cl("aksel-link-panel__description", className)}
     />
   );
 });

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface LinkPanelTitleProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,16 +11,14 @@ export const LinkPanelTitle: OverridableComponent<
   LinkPanelTitleProps,
   HTMLDivElement
 > = forwardRef(({ className, as: Component = "div", ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Component
       {...rest}
       ref={ref}
-      className={cn(
-        "navds-link-panel__title",
-        "navds-heading",
-        "navds-heading--medium",
+      className={cl(
+        "aksel-link-panel__title",
+        "aksel-heading",
+        "aksel-heading--medium",
         className,
       )}
     />

package/src/list/List.Item.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../utils/helpers";
 import { ListContext } from "./List.context";
 import type { ListItemProps } from "./List.types";
 
@@ -10,7 +10,6 @@ import type { ListItemProps } from "./List.types";
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, size } = useContext(ListContext);
-    const { cn } = useRenameCSS();
 
     if (listType === "ol" && icon) {
       console.warn(
@@ -19,12 +18,12 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     return (
-      <li {...rest} ref={ref} className={cn("navds-list__item", className)}>
+      <li {...rest} ref={ref} className={cl("aksel-list__item", className)}>
         {listType === "ul" && (
           <div
-            className={cn("navds-list__item-marker", {
-              "navds-list__item-marker--icon": icon,
-              "navds-list__item-marker--bullet": !icon,
+            className={cl("aksel-list__item-marker", {
+              "aksel-list__item-marker--icon": icon,
+              "aksel-list__item-marker--bullet": !icon,
             })}
           >
             {icon ? (

package/src/list/List.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../utils/helpers";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -46,8 +46,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
   ) => {
     const { size: contextSize } = useContext(ListContext);
 
-    const { cn } = useRenameCSS();
-
     const listSize = size ?? contextSize;
 
     return (
@@ -62,7 +60,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
           {...rest}
           size={listSize}
           ref={ref}
-          className={cn("navds-list", `navds-list--${listSize}`, className)}
+          className={cl("aksel-list", `aksel-list--${listSize}`, className)}
         >
           <ListTag
             role="list"

package/src/loader/Loader.tsx

@@ -1,9 +1,8 @@
 import React, { SVGProps, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
-import { omit } from "../util";
-import { useId } from "../util/hooks";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { omit, useId } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
@@ -73,7 +72,6 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const internalId = useId();
     const translate = useI18n("Loader");
 
@@ -81,13 +79,13 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
       <svg
         aria-labelledby={id ?? `loader-${internalId}`}
         ref={ref}
-        className={cn(
-          "navds-loader",
+        className={cl(
+          "aksel-loader",
           className,
-          `navds-loader--${size}`,
-          `navds-loader--${variant}`,
+          `aksel-loader--${size}`,
+          `aksel-loader--${variant}`,
           {
-            "navds-loader--transparent": transparent,
+            "aksel-loader--transparent": transparent,
           },
         )}
         focusable="false"
@@ -101,7 +99,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           {title || translate("title")}
         </title>
         <circle
-          className={cn("navds-loader__background")}
+          className="aksel-loader__background"
           xmlns="http://www.w3.org/2000/svg"
           cx="25"
           cy="25"
@@ -109,7 +107,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           fill="none"
         />
         <circle
-          className={cn("navds-loader__foreground")}
+          className="aksel-loader__foreground"
           cx="25"
           cy="25"
           r="20"

package/src/modal/Modal.context.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { createStrictContext } from "../util/create-strict-context";
+import { createStrictContext } from "../utils/helpers";
 
 interface ModalContextProps {
   closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  modalRef: React.RefObject<HTMLDialogElement>;
+  modalRef: React.RefObject<HTMLDialogElement | null>;
 }
 
 export const { Provider: ModalContextProvider, useContext: useModalContext } =

package/src/modal/Modal.tsx

@@ -3,12 +3,10 @@ import React, { forwardRef, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useDateInputContext } from "../date/Date.Input";
 import { useProvider } from "../provider/Provider";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail, Heading } from "../typography";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useId } from "../util/hooks";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { useScrollLock } from "../util/hooks/useScrollLock";
+import { useId } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
+import { useMergeRefs, useScrollLock } from "../utils/hooks";
 import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
@@ -22,6 +20,8 @@ import {
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
+const polyfillClassName = "aksel-modal--polyfilled";
+
 interface ModalComponent
   extends React.ForwardRefExoticComponent<
     ModalProps & React.RefAttributes<HTMLDialogElement>
@@ -98,10 +98,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     }: ModalProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
-    const polyfillClassName = useRef(cn("navds-modal--polyfilled"));
-
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMergeRefs(modalRef, ref);
 
@@ -126,7 +122,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         dialogPolyfill.registerDialog(modalRef.current);
 
         // Force-add the "polyfilled" class in case of SSR (needPolyfill will always be false on the server)
-        modalRef.current.classList.add(polyfillClassName.current);
+        modalRef.current.classList.add(polyfillClassName);
       }
       // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
       // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
@@ -158,11 +154,11 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    const mergedClassName = cn("navds-modal", className, {
-      [polyfillClassName.current]: needPolyfill,
-      "navds-modal--autowidth": !width,
-      [`navds-modal--${width}`]: isWidthPreset,
-      "navds-modal--top": placement === "top" && !needPolyfill,
+    const mergedClassName = cl("aksel-modal", className, {
+      [polyfillClassName]: needPolyfill,
+      "aksel-modal--autowidth": !width,
+      [`aksel-modal--${width}`]: isWidthPreset,
+      "aksel-modal--top": placement === "top" && !needPolyfill,
     });
 
     const mergedStyle = {
@@ -257,9 +253,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           {header && (
             <ModalHeader>
               {header.label && (
-                <Detail className={cn("navds-modal__label")}>
-                  {header.label}
-                </Detail>
+                <Detail className="aksel-modal__label">{header.label}</Detail>
               )}
               <Heading
                 size={header.size ?? "medium"}
@@ -267,7 +261,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
                 id={ariaLabelId}
               >
                 {header.icon && (
-                  <span className={cn("navds-modal__header-icon")}>
+                  <span className="aksel-modal__header-icon">
                     {header.icon}
                   </span>
                 )}

package/src/modal/ModalBody.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -7,9 +7,8 @@ export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
   ({ className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
-      <div {...rest} ref={ref} className={cn("navds-modal__body", className)} />
+      <div {...rest} ref={ref} className={cl("aksel-modal__body", className)} />
     );
   },
 );

package/src/modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -7,12 +7,11 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
   ({ className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <div
         {...rest}
         ref={ref}
-        className={cn("navds-modal__footer", className)}
+        className={cl("aksel-modal__footer", className)}
       />
     );
   },

package/src/modal/ModalHeader.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useRenameCSS } from "../theme/Theme";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,16 +16,15 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const context = useModalContext();
     const translate = useI18n("global");
 
     return (
-      <div {...rest} ref={ref} className={cn("navds-modal__header", className)}>
+      <div {...rest} ref={ref} className={cl("aksel-modal__header", className)}>
         {context.closeHandler && closeButton && (
           <Button
             type="button"
-            className={cn("navds-modal__button")}
+            className="aksel-modal__button"
             size="small"
             variant="tertiary-neutral"
             onKeyDown={(event) => {