@navikt/ds-react 8.0.0 → 8.0.1

package/src/overlays/action-menu/ActionMenu.tsx

@@ -2,8 +2,8 @@ import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS } from "../../theme/Theme";
 import { OverridableComponent, useId } from "../../util";
+import { cl } from "../../util/className";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { createStrictContext } from "../../util/create-strict-context";
 import { useMergeRefs } from "../../util/hooks";
@@ -371,7 +371,6 @@ export const ActionMenuContent = forwardRef<
     ref,
   ) => {
     const context = useActionMenuContext();
-    const { cn } = useRenameCSS();
 
     return (
       <Menu.Portal rootElement={context.rootElement}>
@@ -379,7 +378,7 @@ export const ActionMenuContent = forwardRef<
           ref={ref}
           id={context.contentId}
           aria-labelledby={context.triggerId}
-          className={cn("navds-action-menu__content", className)}
+          className={cl("aksel-action-menu__content", className)}
           {...rest}
           align={align}
           sideOffset={4}
@@ -398,9 +397,7 @@ export const ActionMenuContent = forwardRef<
             },
           }}
         >
-          <div className={cn("navds-action-menu__content-inner")}>
-            {children}
-          </div>
+          <div className="aksel-action-menu__content-inner">{children}</div>
         </Menu.Content>
       </Menu.Portal>
     );
@@ -416,12 +413,11 @@ interface ActionMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const ActionMenuLabel = forwardRef<HTMLDivElement, ActionMenuLabelProps>(
   ({ children, className, ...rest }: ActionMenuLabelProps, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <div
         ref={ref}
         {...rest}
-        className={cn("navds-action-menu__label", className)}
+        className={cl("aksel-action-menu__label", className)}
       >
         {children}
       </div>
@@ -465,13 +461,12 @@ export const ActionMenuGroup = forwardRef<
   ActionMenuGroupProps
 >(({ children, className, label, ...rest }: ActionMenuGroupProps, ref) => {
   const labelId = useId();
-  const { cn } = useRenameCSS();
 
   return (
     <Menu.Group
       ref={ref}
       {...rest}
-      className={cn("navds-action-menu__group", className)}
+      className={cl("aksel-action-menu__group", className)}
       asChild={false}
       aria-labelledby={label ? labelId : undefined}
     >
@@ -495,15 +490,13 @@ type MarkerProps = {
 };
 
 const Marker = ({ children, className, placement }: MarkerProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <div
       aria-hidden
-      className={cn(
+      className={cl(
         className,
-        "navds-action-menu__marker",
-        `navds-action-menu__marker--${placement}`,
+        "aksel-action-menu__marker",
+        `aksel-action-menu__marker--${placement}`,
       )}
     >
       {children}
@@ -516,7 +509,6 @@ type ShortcutProps = {
 };
 
 const Shortcut = ({ children }: ShortcutProps) => {
-  const { cn } = useRenameCSS();
   /**
    * Assumes the user will input either a single keyboard key
    * or keys separated by "+"
@@ -526,7 +518,7 @@ const Shortcut = ({ children }: ShortcutProps) => {
   return (
     <Marker placement="right">
       {parsed.map((char, index) => (
-        <span key={char + index} className={cn("navds-action-menu__shortcut")}>
+        <span key={char + index} className="aksel-action-menu__shortcut">
           {char}
         </span>
       ))}
@@ -572,14 +564,12 @@ export const ActionMenuItem: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Menu.Item
         {...rest}
-        className={cn("navds-action-menu__item", className, {
-          "navds-action-menu__item--danger": variant === "danger",
-          "navds-action-menu__item--has-icon": icon,
+        className={cl("aksel-action-menu__item", className, {
+          "aksel-action-menu__item--danger": variant === "danger",
+          "aksel-action-menu__item--has-icon": icon,
         })}
         aria-keyshortcuts={shortcut ?? undefined}
         asChild
@@ -587,10 +577,7 @@ export const ActionMenuItem: OverridableComponent<
         <Component ref={ref}>
           {children}
           {icon && (
-            <Marker
-              placement="left"
-              className={cn("navds-action-menu__marker-icon")}
-            >
+            <Marker placement="left" className="aksel-action-menu__marker-icon">
               {icon}
             </Marker>
           )}
@@ -633,8 +620,6 @@ export const ActionMenuCheckboxItem = forwardRef<
     }: ActionMenuCheckboxItemProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Menu.CheckboxItem
         ref={ref}
@@ -646,25 +631,25 @@ export const ActionMenuCheckboxItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cn(
-          "navds-action-menu__item navds-action-menu__item--has-icon",
+        className={cl(
+          "aksel-action-menu__item aksel-action-menu__item--has-icon",
           className,
         )}
         aria-keyshortcuts={shortcut}
       >
         {children}
         <Marker placement="left">
-          <Menu.ItemIndicator className={cn("navds-action-menu__indicator")}>
+          <Menu.ItemIndicator className="aksel-action-menu__indicator">
             <svg
               width="1em"
               height="1em"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className={cn("navds-action-menu__indicator-icon")}
+              className="aksel-action-menu__indicator-icon"
               aria-hidden
             >
-              <g className={cn("navds-action-menu__indicator-icon--unchecked")}>
+              <g className="aksel-action-menu__indicator-icon--unchecked">
                 <rect
                   width="24"
                   height="24"
@@ -681,11 +666,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   strokeWidth="2"
                 />
               </g>
-              <g
-                className={cn(
-                  "navds-action-menu__indicator-icon--indeterminate",
-                )}
-              >
+              <g className="aksel-action-menu__indicator-icon--indeterminate">
                 <rect
                   width="24"
                   height="24"
@@ -701,7 +682,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   fill="var(--ax-bg-default)"
                 />
               </g>
-              <g className={cn("navds-action-menu__indicator-icon--checked")}>
+              <g className="aksel-action-menu__indicator-icon--checked">
                 <rect
                   width="24"
                   height="24"
@@ -775,8 +756,6 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Menu.RadioItem
         ref={ref}
@@ -788,24 +767,24 @@ export const ActionMenuRadioItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cn(
-          "navds-action-menu__item navds-action-menu__item--has-icon",
+        className={cl(
+          "aksel-action-menu__item aksel-action-menu__item--has-icon",
           className,
         )}
       >
         {children}
         <Marker placement="left">
-          <Menu.ItemIndicator className={cn("navds-action-menu__indicator")}>
+          <Menu.ItemIndicator className="aksel-action-menu__indicator">
             <svg
               width="1em"
               height="1em"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className={cn("navds-action-menu__indicator-icon")}
+              className="aksel-action-menu__indicator-icon"
               aria-hidden
             >
-              <g className={cn("navds-action-menu__indicator-icon--unchecked")}>
+              <g className="aksel-action-menu__indicator-icon--unchecked">
                 <rect
                   width="24"
                   height="24"
@@ -822,7 +801,7 @@ export const ActionMenuRadioItem = forwardRef<
                   fill="var(--ax-bg-default)"
                 />
               </g>
-              <g className={cn("navds-action-menu__indicator-icon--checked")}>
+              <g className="aksel-action-menu__indicator-icon--checked">
                 <rect
                   width="24"
                   height="24"
@@ -857,14 +836,12 @@ export const ActionMenuDivider = forwardRef<
   ActionMenuDividerElement,
   ActionMenuDividerProps
 >(({ className, ...rest }: ActionMenuDividerProps, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Menu.Divider
       ref={ref}
       asChild={false}
       {...rest}
-      className={cn("navds-action-menu__divider", className)}
+      className={cl("aksel-action-menu__divider", className)}
     />
   );
 });
@@ -916,32 +893,24 @@ export const ActionMenuSubTrigger = forwardRef<
   ActionMenuSubTriggerElement,
   ActionMenuSubTriggerProps
 >(({ children, className, icon, ...rest }: ActionMenuSubTriggerProps, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <Menu.SubTrigger
       ref={ref}
       {...rest}
       asChild={false}
-      className={cn(
-        "navds-action-menu__item navds-action-menu__sub-trigger",
+      className={cl(
+        "aksel-action-menu__item aksel-action-menu__sub-trigger",
         className,
-        { "navds-action-menu__item--has-icon": icon },
+        { "aksel-action-menu__item--has-icon": icon },
       )}
     >
       {children}
       {icon && (
-        <Marker
-          placement="left"
-          className={cn("navds-action-menu__marker-icon")}
-        >
+        <Marker placement="left" className="aksel-action-menu__marker-icon">
           {icon}
         </Marker>
       )}
-      <Marker
-        placement="right"
-        className={cn("navds-action-menu__marker-icon")}
-      >
+      <Marker placement="right" className="aksel-action-menu__marker-icon">
         <ChevronRightIcon aria-hidden />
       </Marker>
     </Menu.SubTrigger>
@@ -962,7 +931,6 @@ export const ActionMenuSubContent = forwardRef<
   ActionMenuSubContentElement,
   ActionMenuSubContentProps
 >(({ children, className, ...rest }: ActionMenuSubContentProps, ref) => {
-  const { cn } = useRenameCSS();
   const context = useActionMenuContext();
 
   return (
@@ -973,12 +941,12 @@ export const ActionMenuSubContent = forwardRef<
         sideOffset={1}
         collisionPadding={10}
         {...rest}
-        className={cn(
-          "navds-action-menu__content navds-action-menu__sub-content",
+        className={cl(
+          "aksel-action-menu__content aksel-action-menu__sub-content",
           className,
         )}
       >
-        <div className={cn("navds-action-menu__content-inner")}>{children}</div>
+        <div className="aksel-action-menu__content-inner">{children}</div>
       </Menu.SubContent>
     </Menu.Portal>
   );

package/src/pagination/Pagination.tsx

@@ -1,11 +1,10 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import PaginationItem, {
   PaginationItemProps,
@@ -161,7 +160,6 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const headingId = useId();
     const translate = useI18n("Pagination");
 
@@ -190,9 +188,9 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         aria-labelledby={
           srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
         }
-        className={cn(
-          "navds-pagination",
-          `navds-pagination--${size}`,
+        className={cl(
+          "aksel-pagination",
+          `aksel-pagination--${size}`,
           className,
         )}
       >
@@ -206,12 +204,12 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             {srHeading.text}
           </Heading>
         )}
-        <ul className={cn("navds-pagination__list")}>
+        <ul className="aksel-pagination__list">
           <li>
             <Item
               data-color={color}
-              className={cn({
-                "navds-pagination--invisible": page === 1,
+              className={cl({
+                "aksel-pagination--invisible": page === 1,
               })}
               disabled={page === 1}
               onClick={() => onPageChange?.(page - 1)}
@@ -232,10 +230,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             (step, i) => {
               const n = Number(step);
               return Number.isNaN(n) ? (
-                <li
-                  className={cn("navds-pagination__ellipsis")}
-                  key={`${step}${i}`}
-                >
+                <li className="aksel-pagination__ellipsis" key={`${step}${i}`}>
                   <BodyShort
                     size={size === "xsmall" ? "small" : size}
                     as="span"
@@ -262,8 +257,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           <li>
             <Item
               data-color={color}
-              className={cn({
-                "navds-pagination--invisible": page === count,
+              className={cl({
+                "aksel-pagination--invisible": page === count,
               })}
               disabled={page === count}
               onClick={() => onPageChange?.(page + 1)}

package/src/pagination/PaginationItem.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -40,8 +40,6 @@ export const Item: PaginationItemType = forwardRef(
     }: PaginationItemProps & { as?: React.ElementType },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Button
         as={Component}
@@ -50,8 +48,8 @@ export const Item: PaginationItemType = forwardRef(
         aria-current={selected}
         data-pressed={selected}
         ref={ref}
-        className={cn("navds-pagination__item", className, {
-          "navds-pagination__item--selected": selected,
+        className={cl("aksel-pagination__item", className, {
+          "aksel-pagination__item--selected": selected,
         })}
         data-page={page}
         /* TODO: Breaking change to remove since it's in use by some applications. Add to future major version. */

package/src/panel/Panel.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";
 
 /**
@@ -33,12 +33,11 @@ export const Panel: PanelType = forwardRef(
     { children, className, border = false, as: Component = "div", ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <Component
         ref={ref}
-        className={cn("navds-panel", className, {
-          "navds-panel--border": border,
+        className={cl("aksel-panel", className, {
+          "aksel-panel--border": border,
         })}
         {...rest}
       >

package/src/popover/Popover.tsx

@@ -11,8 +11,8 @@ import {
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { useRenameCSS } from "../theme/Theme";
 import { omit } from "../util";
+import { cl } from "../util/className";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -118,8 +118,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const isInModal = useModalContext(false) !== undefined;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
 
@@ -171,8 +169,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         <div
           ref={floatingRef}
           {...omit(restProps, ["arrow"])}
-          className={cn("navds-popover", className, {
-            "navds-popover--hidden": !open || !anchorEl,
+          className={cl("aksel-popover", className, {
+            "aksel-popover--hidden": !open || !anchorEl,
           })}
           style={{ ...restProps.style, ...floatingStyles }}
           data-placement={flPlacement}

package/src/popover/PopoverContent.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,12 +12,11 @@ export type PopoverContentType = React.ForwardRefExoticComponent<
 
 const PopoverContent: PopoverContentType = forwardRef(
   ({ className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <div
         {...rest}
         ref={ref}
-        className={cn("navds-popover__content", className)}
+        className={cl("aksel-popover__content", className)}
       />
     );
   },

package/src/process/Process.tsx

@@ -5,9 +5,9 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong, BodyShort, Heading } from "../typography";
 import { useId } from "../util";
+import { cl } from "../util/className";
 import { createStrictContext } from "../util/create-strict-context";
 import { useMergeRefs } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -108,8 +108,6 @@ export const Process: ProcessComponent = forwardRef<
     }: ProcessProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const rootId = useId(id);
 
     const rootRef = useRef<HTMLOListElement>(null);
@@ -158,7 +156,7 @@ export const Process: ProcessComponent = forwardRef<
         // biome-ignore lint/a11y/noRedundantRoles: See comment above
         role="list"
         {...restProps}
-        className={cn("navds-process", className)}
+        className={cl("aksel-process", className)}
         id={rootId}
         aria-controls={activeChildId}
         data-truncated={isTruncated}
@@ -220,7 +218,6 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
     forwardedRef,
   ) => {
     const translate = useI18n("Process");
-    const { cn } = useRenameCSS();
     const eventId = useId();
     const { syncAriaControls, hideStatusText, rootId } = useProcessContext();
 
@@ -237,22 +234,19 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
         id={id ?? eventId}
         {...restProps}
         aria-controls={isActive ? rootId : undefined}
-        className={cn("navds-process__event", className)}
+        className={cl("aksel-process__event", className)}
         data-dot={bullet === undefined}
         data-process-event=""
         data-status={status}
       >
         <ProcessLine position="start" />
-        <div className={cn("navds-process__item")}>
+        <div className="aksel-process__item">
           <ProcessBullet>{bullet}</ProcessBullet>
 
-          <div className={cn("navds-process__body")}>
+          <div className="aksel-process__body">
             {title && <ProcessTitle>{title}</ProcessTitle>}
             {isActive && !hideStatusText && (
-              <BodyShort
-                size="small"
-                className={cn("navds-process__active-label")}
-              >
+              <BodyShort size="small" className="aksel-process__active-label">
                 {translate("active")}
               </BodyShort>
             )}
@@ -277,10 +271,8 @@ interface ProcessTitleProps {
 }
 
 const ProcessTitle = ({ children }: ProcessTitleProps) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <Heading size="small" as="div" className={cn("navds-process__title")}>
+    <Heading size="small" as="div" className="aksel-process__title">
       {children}
     </Heading>
   );
@@ -295,15 +287,13 @@ interface ProcessTimestampProps {
 }
 
 const ProcessTimestamp = ({ children }: ProcessTimestampProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyShort
       spacing
       as="div"
       size="small"
       textColor="subtle"
-      className={cn("navds-process__timestamp")}
+      className="aksel-process__timestamp"
     >
       {children}
     </BodyShort>
@@ -319,10 +309,8 @@ interface ProcessContentProps {
 }
 
 const ProcessContent = ({ children }: ProcessContentProps) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <BodyLong as="div" className={cn("navds-process__content")}>
+    <BodyLong as="div" className="aksel-process__content">
       {children}
     </BodyLong>
   );
@@ -337,13 +325,11 @@ interface ProcessBulletProps {
 }
 
 const ProcessBullet = ({ children }: ProcessBulletProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyShort
       as="span"
       weight="semibold"
-      className={cn("navds-process__bullet")}
+      className="aksel-process__bullet"
       aria-hidden
     >
       {children}
@@ -357,11 +343,7 @@ type ProcessLineProps = {
   position?: "start" | "end";
 };
 const ProcessLine = ({ position }: ProcessLineProps) => {
-  const { cn } = useRenameCSS();
-
-  return (
-    <span className={cn("navds-process__line")} data-position={position} />
-  );
+  return <span className="aksel-process__line" data-position={position} />;
 };
 
 /* -------------------------- Process exports ------------------------- */

package/src/progress-bar/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef, useEffect } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { useTimeout } from "../util/hooks/useTimeout";
 import { useValueAsRef } from "../util/hooks/useValueAsRef";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -102,7 +102,6 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
     const onTimeoutRef = useValueAsRef(simulated?.onTimeout);
 
@@ -121,9 +120,9 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          "navds-progress-bar",
-          `navds-progress-bar--${size}`,
+        className={cl(
+          "aksel-progress-bar",
+          `aksel-progress-bar--${size}`,
           className,
         )}
         aria-valuemax={simulated?.seconds ? 0 : Math.round(valueMax)}
@@ -144,8 +143,8 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         {...rest}
       >
         <div
-          className={cn("navds-progress-bar__foreground", {
-            "navds-progress-bar__foreground--indeterminate":
+          className={cl("aksel-progress-bar__foreground", {
+            "aksel-progress-bar__foreground--indeterminate":
               simulated?.seconds !== undefined,
           })}
           style={{