@navikt/ds-react 8.0.0 → 8.0.1

package/src/tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyShort } from "../typography";
+import { cl } from "../util/className";
 
 type legacyVariants =
   | "warning"
@@ -77,7 +77,6 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const filledVariant = variant?.endsWith("-filled") && "strong";
     const moderateVariant = variant?.endsWith("-moderate") && "moderate";
 
@@ -96,9 +95,9 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         ref={ref}
         as="span"
         size={size === "medium" ? "medium" : "small"}
-        className={cn("navds-tag", className, `navds-tag--${size}`)}
+        className={cl("aksel-tag", className, `aksel-tag--${size}`)}
       >
-        {icon && <span className={cn("navds-tag__icon--left")}>{icon}</span>}
+        {icon && <span className="aksel-tag__icon--left">{icon}</span>}
         {children}
       </BodyShort>
     );

package/src/theme/Theme.tsx

@@ -1,49 +1,10 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../slot/Slot";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { createStrictContext } from "../util/create-strict-context";
 import { AsChildProps } from "../util/types";
 
-/* -------------------------------------------------------------------------- */
-/*                               CSS Translation                              */
-/* -------------------------------------------------------------------------- */
-type RenameCSSContext = {
-  /**
-   * Extends `clsx` with custom className handler
-   */
-  cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
-};
-
-export const compositeClassFunction = (
-  ...inputs: Parameters<typeof cl>
-): string => {
-  const classes = cl(inputs)
-    /* Replaces only if start of string  "navds- navds-"*/
-    .replace(/^navds-/g, "aksel-")
-    /* Replaces all " navds-" hits */
-    .replace(/\snavds-/g, " aksel-");
-
-  return classes.trim();
-};
-
-const { Provider: RenameCSSProvider, useContext: useRenameCSS } =
-  createStrictContext<RenameCSSContext>({
-    name: "RenameCSS",
-    defaultValue: { cn: compositeClassFunction },
-  });
-
-const RenameCSS = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <RenameCSSProvider cn={compositeClassFunction}>
-      {children}
-    </RenameCSSProvider>
-  );
-};
-
-/* -------------------------------------------------------------------------- */
-/*                               Theme provider                               */
-/* -------------------------------------------------------------------------- */
 const DEFAULT_COLOR: AkselColor = "accent";
 
 type ThemeContext = {
@@ -104,19 +65,17 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
 
     return (
       <ThemeProvider theme={theme} color={color} isRoot={false}>
-        <RenameCSS>
-          <SlotElement
-            ref={ref}
-            className={cl("aksel-theme", className, theme)}
-            data-background={hasBackground}
-            data-color={color ?? DEFAULT_COLOR}
-          >
-            {children}
-          </SlotElement>
-        </RenameCSS>
+        <SlotElement
+          ref={ref}
+          className={cl("aksel-theme", className, theme)}
+          data-background={hasBackground}
+          data-color={color ?? DEFAULT_COLOR}
+        >
+          {children}
+        </SlotElement>
       </ThemeProvider>
     );
   },
 );
 
-export { Theme, useRenameCSS, useThemeInternal };
+export { Theme, useThemeInternal };

package/src/timeline/AxisLabels.tsx

@@ -15,7 +15,6 @@ import {
   subDays,
 } from "date-fns";
 import React from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography/Detail";
 import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks";
 import { TFunction } from "../util/i18n/i18n.types";
@@ -150,13 +149,11 @@ export const AxisLabels = ({
 
   const labels = getLabels(startDate, endDate, direction, locale, translate);
 
-  const { cn } = useRenameCSS();
-
   return (
-    <div className={cn("navds-timeline__axislabels")} aria-hidden="true">
+    <div className="aksel-timeline__axislabels" aria-hidden="true">
       {labels.filter(isVisible).map((etikett) => (
         <Detail
-          className={cn("navds-timeline__axislabels-label")}
+          className="aksel-timeline__axislabels-label"
           as="div"
           key={etikett.label}
           style={{

package/src/timeline/Timeline.tsx

@@ -1,6 +1,5 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AxisLabels } from "./AxisLabels";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
@@ -96,7 +95,6 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const isMultipleRows = Array.isArray(children);
 
     const firstFocusabled = useRef<
@@ -215,7 +213,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
         }}
       >
         <div {...rest} ref={ref}>
-          <div className={cn("navds-timeline")}>
+          <div className="aksel-timeline">
             <AxisLabels templates={axisLabelTemplates} />
 
             {pins.map((PinChild, i) => (

package/src/timeline/TimelineRow.tsx

@@ -1,7 +1,7 @@
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography/BodyShort";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
@@ -38,7 +38,6 @@ export interface TimelineRowType
 
 export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const { periods, id, active } = useRowContext();
     const { setActiveRow } = useTimelineContext();
     const translate = useI18n("Timeline");
@@ -61,7 +60,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           <BodyShort
             as={headingTag}
             id={`timeline-row-${id}`}
-            className={cn("navds-timeline__row-label")}
+            className="aksel-timeline__row-label"
             size="small"
           >
             {icon}
@@ -69,8 +68,8 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           </BodyShort>
         )}
         <div
-          className={cn("navds-timeline__row", {
-            "navds-timeline__row--active": active,
+          className={cl("aksel-timeline__row", {
+            "aksel-timeline__row--active": active,
           })}
         >
           {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
@@ -86,7 +85,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                     end: format(latest.end, translate("dateFormat")),
                   })
             }
-            className={cn("navds-timeline__row-periods", className)}
+            className={cl("aksel-timeline__row-periods", className)}
             onKeyDown={(e) => {
               if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 e.preventDefault();

package/src/timeline/period/ClickablePeriod.tsx

@@ -12,7 +12,7 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import React, { useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -51,7 +51,6 @@ const ClickablePeriod = React.memo(
     restProps,
     periodRef,
   }: TimelineClickablePeriodProps) => {
-    const { cn } = useRenameCSS();
     const [open, setOpen] = useState(false);
     const { index } = useRowContext();
     const { firstFocus } = usePeriodContext();
@@ -101,12 +100,12 @@ const ClickablePeriod = React.memo(
             mergedRef?.(r);
           }}
           aria-label={label}
-          className={cn(
-            "navds-timeline__period--clickable",
+          className={cl(
+            "aksel-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),
             restProps?.className,
             {
-              "navds-timeline__period--selected": isActive,
+              "aksel-timeline__period--selected": isActive,
             },
           )}
           aria-expanded={children ? open : undefined}
@@ -138,7 +137,7 @@ const ClickablePeriod = React.memo(
             },
           })}
         >
-          <span className={cn("navds-timeline__period--inner")}>{icon}</span>
+          <span className="aksel-timeline__period--inner">{icon}</span>
         </button>
         {children && open && (
           <FloatingFocusManager
@@ -148,7 +147,7 @@ const ClickablePeriod = React.memo(
             returnFocus={false}
           >
             <div
-              className={cn("navds-timeline__popover")}
+              className="aksel-timeline__popover"
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import type { PeriodProps } from "./types";
@@ -23,13 +23,12 @@ const NonClickablePeriod = ({
 }: TimelineNonClickablePeriodProps) => {
   const translate = useI18n("Timeline");
 
-  const { cn } = useRenameCSS();
   return (
     <div
       ref={periodRef}
       {...restProps}
       data-color={restProps?.["data-color"] ?? status}
-      className={cn(
+      className={cl(
         getConditionalClasses(cropped, direction, status),
         restProps?.className,
       )}
@@ -38,9 +37,9 @@ const NonClickablePeriod = ({
         [direction]: `${left}%`,
       }}
     >
-      <span className={cn("navds-timeline__period--inner")}>
+      <span className="aksel-timeline__period--inner">
         {icon}
-        <span className={cn("navds-sr-only")}>
+        <span className="aksel-sr-only">
           {ariaLabel(start, end, status, statusLabel, translate)}
         </span>
       </span>

package/src/timeline/pin/PinInternal.tsx

@@ -13,7 +13,6 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -33,7 +32,6 @@ export interface TimelinePinProps
 
 export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
   ({ date, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
 
@@ -81,13 +79,13 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
     return (
       <>
         <div
-          className={cn("navds-timeline__pin-wrapper")}
+          className="aksel-timeline__pin-wrapper"
           style={{ [direction]: `${position(date, startDate, endDate)}%` }}
         >
           <button
             {...rest}
             ref={mergedRef}
-            className={cn("navds-timeline__pin-button")}
+            className="aksel-timeline__pin-button"
             aria-label={label}
             type="button"
             aria-expanded={children ? open : undefined}
@@ -111,7 +109,7 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
             returnFocus={false}
           >
             <div
-              className={cn("navds-timeline__popover")}
+              className="aksel-timeline__popover"
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/utils/period.ts

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import { format } from "date-fns";
+import { cl } from "../../util/className";
 import type { TFunction } from "../../util/i18n/i18n.types";
 import type { PeriodProps } from "../period/types";
 
@@ -8,13 +8,12 @@ export const getConditionalClasses = (
   direction: string,
   status: PeriodProps["status"],
 ) => {
-  /* Renaming to aksel-* happends where these are used, so no need to rename here */
-  return cl(`navds-timeline__period navds-timeline__period--${status}`, {
-    "navds-timeline__period--connected-both": cropped === "both",
-    "navds-timeline__period--connected-right":
+  return cl(`aksel-timeline__period aksel-timeline__period--${status}`, {
+    "aksel-timeline__period--connected-both": cropped === "both",
+    "aksel-timeline__period--connected-right":
       (cropped === "right" && direction === "left") ||
       (cropped === "left" && direction === "right"),
-    "navds-timeline__period--connected-left":
+    "aksel-timeline__period--connected-left":
       (cropped === "left" && direction === "left") ||
       (cropped === "right" && direction === "right"),
   });

package/src/timeline/zoom/ZoomButton.tsx

@@ -7,7 +7,6 @@ import {
   subYears,
 } from "date-fns";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { Detail } from "../../typography/Detail";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -38,8 +37,6 @@ export const ZoomButton: ZoomButtonType = forwardRef(
     const translate = useI18n("Timeline");
     const dateFormat = translate("dateFormat");
 
-    const { cn } = useRenameCSS();
-
     let startOfRange: Date;
 
     if (interval === "month") {
@@ -73,7 +70,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
           }
           ref={ref}
           {...rest}
-          className={cn("navds-timeline__zoom-button")}
+          className="aksel-timeline__zoom-button"
           onClick={() => {
             setStart(startOfRange);
           }}

package/src/timeline/zoom/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import ZoomButton, { ZoomButtonType } from "./ZoomButton";
 
 interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {
@@ -16,10 +16,8 @@ export interface ZoomType<Props = ZoomProps>
 
 export const Zoom = forwardRef<HTMLUListElement, ZoomProps>(
   ({ className, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
-      <ul ref={ref} className={cn(className, "navds-timeline__zoom")} {...rest}>
+      <ul ref={ref} className={cl(className, "aksel-timeline__zoom")} {...rest}>
         {children}
       </ul>
     );

package/src/toggle-group/ToggleGroup.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
 import { useId } from "../util";
+import { cl } from "../util/className";
 import {
   ToggleGroupDescendantsProvider,
   ToggleGroupProvider,
@@ -54,7 +54,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({
@@ -85,8 +84,8 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       <ToggleGroupDescendantsProvider value={descendants}>
         <ToggleGroupProvider {...context}>
           <div
-            className={cn("navds-toggle-group__wrapper", className, {
-              "navds-toggle-group__wrapper--fill": fill,
+            className={cl("aksel-toggle-group__wrapper", className, {
+              "aksel-toggle-group__wrapper--fill": fill,
             })}
             data-color={color ?? variantToColor(variant)}
           >
@@ -94,7 +93,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               <Label
                 as="div"
                 size={size}
-                className={cn("navds-toggle-group__label")}
+                className="aksel-toggle-group__label"
                 id={labelId}
               >
                 {label}
@@ -104,9 +103,9 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               aria-labelledby={label ? labelId : undefined}
               {...rest}
               ref={ref}
-              className={cn(
-                "navds-toggle-group",
-                `navds-toggle-group--${size}`,
+              className={cl(
+                "aksel-toggle-group",
+                `aksel-toggle-group--${size}`,
               )}
               role="radiogroup"
             >

package/src/toggle-group/parts/ToggleItem.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography/BodyShort";
+import { cl } from "../../util/className";
 import { useToggleGroupContext } from "../ToggleGroup.context";
 import { useToggleItem } from "./useToggleItem";
 
@@ -62,7 +62,6 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
     },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const itemCtx = useToggleItem(
       { value, onClick, onFocus, disabled: false, onKeyDown },
       forwardedRef,
@@ -73,7 +72,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
       <button
         {...rest}
         ref={itemCtx.ref}
-        className={cn("navds-toggle-group__button", className)}
+        className={cl("aksel-toggle-group__button", className)}
         type="button"
         role="radio"
         aria-checked={itemCtx.isSelected}
@@ -85,7 +84,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
       >
         <BodyShort
           as="span"
-          className={cn("navds-toggle-group__button-inner")}
+          className="aksel-toggle-group__button-inner"
           size={ctx?.size}
         >
           {children ?? (

package/src/tooltip/Tooltip.tsx

@@ -15,8 +15,8 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { Slot } from "../slot/Slot";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography";
+import { cl } from "../util/className";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
@@ -123,8 +123,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -225,9 +223,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 },
                 role: "tooltip",
                 id: ariaId,
-                className: cn(
-                  "navds-tooltip",
-                  "navds-detail navds-detail--small",
+                className: cl(
+                  "aksel-tooltip",
+                  "aksel-detail aksel-detail--small",
                   className,
                 ),
               })}
@@ -236,13 +234,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             >
               {content}
               {keys && (
-                <span className={cn("navds-tooltip__keys")} aria-hidden>
+                <span className="aksel-tooltip__keys" aria-hidden>
                   {keys.map((key) => (
-                    <Detail
-                      as="kbd"
-                      key={key}
-                      className={cn("navds-tooltip__key")}
-                    >
+                    <Detail as="kbd" key={key} className="aksel-tooltip__key">
                       {key}
                     </Detail>
                   ))}
@@ -253,7 +247,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ref={(node) => {
                     arrowRef.current = node;
                   }}
-                  className={cn("navds-tooltip__arrow")}
+                  className="aksel-tooltip__arrow"
                   style={{
                     left: arrowX != null ? `${arrowX}px` : "",
                     top: arrowY != null ? `${arrowY}px` : "",

package/src/typography/BodyLong.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";
@@ -62,16 +62,14 @@ export const BodyLong: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-body-long",
-          `navds-body-long--${size}`,
+          "aksel-body-long",
+          `aksel-body-long--${size}`,
           typoClassNames({
             spacing,
             truncate,

package/src/typography/BodyShort.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";
@@ -60,16 +60,14 @@ export const BodyShort: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-body-short",
-          `navds-body-short--${size}`,
+          "aksel-body-short",
+          `aksel-body-short--${size}`,
           typoClassNames({
             spacing,
             truncate,

package/src/typography/Detail.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";
@@ -62,15 +62,13 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-detail",
+            "aksel-detail",
             typoClassNames({
               spacing,
               truncate,
@@ -81,7 +79,7 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
               uppercase,
             }),
             {
-              "navds-detail--small": size === "small",
+              "aksel-detail--small": size === "small",
             },
           )}
         />