@navikt/ds-react 7.40.0 → 8.0.1

package/src/modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 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,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { useModalContext } from "./Modal.context";
 
@@ -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) => {

package/src/modal/ModalUtils.ts

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { ownerDocument } from "../util/owner";
 import type { ModalProps } from "./types";
 
 export interface MouseCoordinates {
@@ -55,49 +54,4 @@ function useIsModalOpen(modalRef: HTMLDialogElement | null) {
   return isOpen;
 }
 
-export const BODY_CLASS_LEGACY = "navds-modal__document-body";
-
-function useBodyScrollLock(
-  modalRef: React.RefObject<HTMLDialogElement | null>,
-  portalNode: HTMLElement | null,
-  isNested: boolean,
-) {
-  React.useEffect(() => {
-    if (isNested) {
-      return;
-    }
-
-    // We check both to avoid running this twice when not using portal
-    if (!modalRef.current || !portalNode) {
-      return;
-    }
-
-    const ownerDoc = ownerDocument(modalRef.current);
-
-    // In case `open` is true initially
-    if (modalRef.current.open) {
-      ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
-    }
-
-    const observer = new MutationObserver(() => {
-      if (modalRef.current?.open) {
-        ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
-      } else {
-        ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
-      }
-    });
-
-    observer.observe(modalRef.current, {
-      attributes: true,
-      attributeFilter: ["open"],
-    });
-
-    return () => {
-      observer.disconnect();
-      // In case modal is unmounted before it's closed
-      ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
-    };
-  }, [modalRef, portalNode, isNested]);
-}
-
-export { useIsModalOpen, useBodyScrollLock };
+export { useIsModalOpen };

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, useThemeInternal } 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}
@@ -391,16 +390,14 @@ export const ActionMenuContent = forwardRef<
           style={{
             ...style,
             ...{
-              "--__ac-action-menu-content-transform-origin":
-                "var(--ac-floating-transform-origin)",
-              "--__ac-action-menu-content-available-height":
-                "var(--ac-floating-available-height)",
+              "--__axc-action-menu-content-transform-origin":
+                "var(--__axc-floating-transform-origin)",
+              "--__axc-action-menu-content-available-height":
+                "var(--__axc-floating-available-height)",
             },
           }}
         >
-          <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,30 +631,30 @@ 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"
                   rx="4"
-                  fill="var(--ax-border-neutral, var(--a-border-default))"
+                  fill="var(--ax-border-neutral)"
                 />
                 <rect
                   x="1"
@@ -677,20 +662,16 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="22"
                   height="22"
                   rx="3"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
                   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"
                   rx="4"
-                  fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
+                  fill="var(--ax-bg-strong-pressed)"
                 />
                 <rect
                   x="6"
@@ -698,19 +679,19 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="12"
                   height="4"
                   rx="1"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  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"
                   rx="4"
-                  fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
+                  fill="var(--ax-bg-strong-pressed)"
                 />
                 <path
                   d="M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
                 />
               </g>
             </svg>
@@ -775,9 +756,6 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
-
     return (
       <Menu.RadioItem
         ref={ref}
@@ -789,29 +767,29 @@ 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"
                   rx="12"
-                  fill="var(--ax-border-neutral, var(--a-border-default))"
+                  fill="var(--ax-border-neutral)"
                 />
                 <rect
                   x="1"
@@ -820,51 +798,25 @@ export const ActionMenuRadioItem = forwardRef<
                   height="22"
                   rx="11"
                   strokeWidth="2"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
+                />
+              </g>
+              <g className="aksel-action-menu__indicator-icon--checked">
+                <rect
+                  width="24"
+                  height="24"
+                  rx="12"
+                  fill="var(--ax-bg-strong-pressed)"
+                />
+                <rect
+                  x="8"
+                  y="8"
+                  width="8"
+                  height="8"
+                  rx="4"
+                  fill="var(--ax-bg-default)"
                 />
               </g>
-              {themeContext?.isDarkside ? (
-                <g className={cn("navds-action-menu__indicator-icon--checked")}>
-                  <rect
-                    width="24"
-                    height="24"
-                    rx="12"
-                    fill="var(--ax-bg-strong-pressed)"
-                  />
-                  <rect
-                    x="8"
-                    y="8"
-                    width="8"
-                    height="8"
-                    rx="4"
-                    fill="var(--ax-bg-default, var(--a-surface-default))"
-                  />
-                </g>
-              ) : (
-                <g className={cn("navds-action-menu__indicator-icon--checked")}>
-                  <rect
-                    x="1"
-                    y="1"
-                    width="22"
-                    height="22"
-                    rx="11"
-                    fill="var(--ax-bg-default, var(--a-surface-default))"
-                  />
-                  <rect
-                    x="1"
-                    y="1"
-                    width="22"
-                    height="22"
-                    rx="11"
-                    stroke="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
-                    strokeWidth="2"
-                  />
-                  <path
-                    d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                    fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
-                  />
-                </g>
-              )}
             </svg>
           </Menu.ItemIndicator>
         </Marker>
@@ -884,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)}
     />
   );
 });
@@ -943,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>
@@ -988,8 +930,7 @@ interface ActionMenuSubContentProps
 export const ActionMenuSubContent = forwardRef<
   ActionMenuSubContentElement,
   ActionMenuSubContentProps
->(({ children, className, style, ...rest }: ActionMenuSubContentProps, ref) => {
-  const { cn } = useRenameCSS();
+>(({ children, className, ...rest }: ActionMenuSubContentProps, ref) => {
   const context = useActionMenuContext();
 
   return (
@@ -1000,26 +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,
         )}
-        style={{
-          ...style,
-          ...{
-            "--ac-action-menu-content-transform-origin":
-              "var(--ac-floating-transform-origin)",
-            "--ac-action-menu-content-available-width":
-              "var(--ac-floating-available-width)",
-            "--ac-action-menu-content-available-height":
-              "var(--ac-floating-available-height)",
-            "--ac-action-menu-trigger-width": "var(--ac-floating-anchor-width)",
-            "--ac-action-menu-trigger-height":
-              "var(--ac-floating-anchor-height)",
-          },
-        }}
       >
-        <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/overlays/floating/Floating.tsx

@@ -316,19 +316,19 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
              * Allows styling and animations based on the available space.
              */
             contentStyle.setProperty(
-              "--ac-floating-available-width",
+              "--__axc-floating-available-width",
               `${availableWidth}px`,
             );
             contentStyle.setProperty(
-              "--ac-floating-available-height",
+              "--__axc-floating-available-height",
               `${availableHeight}px`,
             );
             contentStyle.setProperty(
-              "--ac-floating-anchor-width",
+              "--__axc-floating-anchor-width",
               `${anchorWidth}px`,
             );
             contentStyle.setProperty(
-              "--ac-floating-anchor-height",
+              "--__axc-floating-anchor-height",
               `${anchorHeight}px`,
             );
           },
@@ -388,7 +388,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
             : "translate(0, -200%)", // keep off the page when measuring
           minWidth: "max-content",
           zIndex: "9999999",
-          ["--ac-floating-transform-origin" as any]: [
+          ["--__axc-floating-transform-origin" as any]: [
             middlewareData.transformOrigin?.x,
             middlewareData.transformOrigin?.y,
           ].join(" "),