@navikt/ds-react 7.40.0 → 8.0.1

package/src/stepper/Step.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { Label } from "../typography";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { OverridableComponent } from "../util/types";
 import { useStepperContext } from "./context";
@@ -37,7 +37,6 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const context = useStepperContext();
 
       const { activeStep } = context;
@@ -55,11 +54,11 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           {...rest}
           aria-current={activeStep === context.index ? "step" : undefined}
           ref={ref}
-          className={cn("navds-stepper__step", className, {
-            "navds-stepper__step--active": activeStep === context.index,
-            "navds-stepper__step--behind": activeStep > context.index,
-            "navds-stepper__step--non-interactive": !isInteractive,
-            "navds-stepper__step--completed": completed,
+          className={cl("aksel-stepper__step", className, {
+            "aksel-stepper__step--active": activeStep === context.index,
+            "aksel-stepper__step--behind": activeStep > context.index,
+            "aksel-stepper__step--non-interactive": !isInteractive,
+            "aksel-stepper__step--completed": completed,
           })}
           data-active={activeStep === context.index}
           data-completed={completed}
@@ -67,11 +66,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           onClick={composeEventHandlers(onClick, handleStepClick)}
         >
           {completed ? (
-            <span
-              className={cn(
-                "navds-stepper__circle navds-stepper__circle--success",
-              )}
-            >
+            <span className="aksel-stepper__circle aksel-stepper__circle--success">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="1em"
@@ -90,14 +85,14 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
             </span>
           ) : (
             <Label
-              className={cn("navds-stepper__circle")}
+              className="aksel-stepper__circle"
               as="span"
               aria-hidden="true"
             >
               {context.index + 1}
             </Label>
           )}
-          <Label as="span" className={cn("navds-stepper__content")}>
+          <Label as="span" className="aksel-stepper__content">
             {children}
           </Label>
         </Comp>

package/src/stepper/Stepper.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import Step, { StepperStepProps } from "./Step";
 import { StepperContextProvider } from "./context";
 
@@ -84,17 +84,12 @@ export const Stepper: StepperComponent = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     activeStep = activeStep - 1;
     return (
       <ol
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-stepper",
-          orientation === "horizontal" ? "navds-stepper--horizontal" : "",
-          className,
-        )}
+        className={cl("aksel-stepper", className)}
         data-orientation={orientation}
       >
         {React.Children.map(children, (step, index) => {
@@ -105,18 +100,12 @@ export const Stepper: StepperComponent = forwardRef<
 
           return (
             <li
-              className={cn("navds-stepper__item", {
-                /* TODO: Remove these 3 classNames in darkmode update */
-                "navds-stepper__item--behind": activeStep > index,
-                "navds-stepper__item--completed": stepProps.completed,
-                "navds-stepper__item--non-interactive": !isInteractive,
-              })}
+              className="aksel-stepper__item"
+              data-interactive={isInteractive}
               data-color={isInteractive ? undefined : "neutral"}
               key={index + (children?.toString?.() ?? "")}
             >
-              <span
-                className={cn("navds-stepper__line navds-stepper__line--1")}
-              />
+              <span className="aksel-stepper__line aksel-stepper__line--1" />
               <StepperContextProvider
                 interactive={interactive}
                 activeStep={activeStep}
@@ -127,9 +116,7 @@ export const Stepper: StepperComponent = forwardRef<
               >
                 {step}
               </StepperContextProvider>
-              <span
-                className={cn("navds-stepper__line navds-stepper__line--2")}
-              />
+              <span className="aksel-stepper__line aksel-stepper__line--2" />
             </li>
           );
         })}

package/src/table/AnimateHeight.tsx

@@ -1,6 +1,5 @@
 /* https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx */
 import React, { CSSProperties, useEffect, useRef, useState } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { useTimeout } from "../util/hooks/useTimeout";
 
 // ------------------ Types
@@ -68,7 +67,6 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   height,
   ...props
 }) => {
-  const { cn } = useRenameCSS();
   // ------------------ Initialization
   const prevHeight = useRef<Height>(height);
   const contentElement = useRef<HTMLDivElement>(null);
@@ -226,10 +224,10 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const ariaHidden = hasAriaHiddenProp ? props["aria-hidden"] : height === 0;
 
   return (
-    <div {...props} className={cn(className)} style={componentStyle}>
+    <div {...props} className={className} style={componentStyle}>
       <div
         aria-hidden={ariaHidden}
-        className={cn(innerClassName)}
+        className={innerClassName}
         ref={contentElement}
       >
         {children}

package/src/table/Body.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
@@ -8,9 +8,8 @@ export type BodyType = React.ForwardRefExoticComponent<
 >;
 
 export const Body: BodyType = forwardRef(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   return (
-    <tbody {...rest} ref={ref} className={cn("navds-table__body", className)} />
+    <tbody {...rest} ref={ref} className={cl("aksel-table__body", className)} />
   );
 });
 

package/src/table/ColumnHeader.tsx

@@ -4,7 +4,6 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
 
@@ -25,9 +24,8 @@ export type ColumnHeaderType = React.ForwardRefExoticComponent<
 >;
 
 export const ColumnHeader: ColumnHeaderType = forwardRef(
-  ({ className, children, sortable = false, sortKey, ...rest }, ref) => {
+  ({ children, sortable = false, sortKey, ...rest }, ref) => {
     const context = useContext(TableContext);
-    const { cn } = useRenameCSS();
 
     if (sortable && !sortKey) {
       console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
@@ -37,7 +35,6 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
       <HeaderCell
         scope="col"
         ref={ref}
-        className={cn(className)}
         aria-sort={
           sortable
             ? context?.sort?.orderBy === sortKey
@@ -50,7 +47,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
         {sortable ? (
           <button
             type="button"
-            className={cn("navds-table__sort-button")}
+            className="aksel-table__sort-button"
             onClick={
               sortable && sortKey
                 ? () => context?.onSortChange?.(sortKey)

package/src/table/DataCell.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography";
+import { cl } from "../util/className";
 
 export interface DataCellProps
   extends React.TdHTMLAttributes<HTMLTableCellElement> {
@@ -17,13 +17,12 @@ export interface DataCellProps
 
 export const DataCell = forwardRef<HTMLTableCellElement, DataCellProps>(
   ({ className, children = "", align, textSize, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <BodyShort
         as="td"
         ref={ref}
-        className={cn("navds-table__data-cell", className, {
-          [`navds-table__data-cell--align-${align}`]: align,
+        className={cl("aksel-table__data-cell", className, {
+          [`aksel-table__data-cell--align-${align}`]: align,
         })}
         size={textSize}
         {...rest}

package/src/table/ExpandableRow.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -80,7 +80,6 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -107,31 +106,31 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         <Row
           {...rest}
           ref={ref}
-          className={cn("navds-table__expandable-row", className, {
-            "navds-table__expandable-row--open": _open,
-            "navds-table__expandable-row--expansion-disabled":
+          className={cl("aksel-table__expandable-row", className, {
+            "aksel-table__expandable-row--open": _open,
+            "aksel-table__expandable-row--expansion-disabled":
               expansionDisabled,
-            "navds-table__expandable-row--clickable": expandOnRowClick,
+            "aksel-table__expandable-row--clickable": expandOnRowClick,
           })}
           onClick={composeEventHandlers(onClick, handleRowClick)}
         >
           {togglePlacement === "right" && children}
           <DataCell
-            className={cn("navds-table__toggle-expand-cell", {
-              "navds-table__toggle-expand-cell--open": _open,
+            className={cl("aksel-table__toggle-expand-cell", {
+              "aksel-table__toggle-expand-cell--open": _open,
             })}
             onClick={!expansionDisabled ? expansionHandler : () => null}
           >
             {!expansionDisabled && (
               <button
-                className={cn("navds-table__toggle-expand-button")}
+                className="aksel-table__toggle-expand-button"
                 type="button"
                 aria-controls={id}
                 aria-expanded={_open}
                 onClick={expansionHandler}
               >
                 <ChevronDownIcon
-                  className={cn("navds-table__expandable-icon")}
+                  className="aksel-table__expandable-icon"
                   title={_open ? translate("showLess") : translate("showMore")}
                 />
               </button>
@@ -141,21 +140,16 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         </Row>
         <tr
           data-state={_open ? "open" : "closed"}
-          className={cn("navds-table__expanded-row")}
+          className="aksel-table__expanded-row"
           aria-hidden={!_open}
           id={id}
         >
-          <td
-            colSpan={colSpan}
-            className={cn("navds-table__expanded-row-cell")}
-          >
+          <td colSpan={colSpan} className="aksel-table__expanded-row-cell">
             <AnimateHeight
-              className={cn("navds-table__expanded-row-collapse")}
-              innerClassName={cn(
-                `navds-table__expanded-row-content navds-table__expanded-row-content--gutter-${
-                  contentGutter ?? togglePlacement
-                }`,
-              )}
+              className="aksel-table__expanded-row-collapse"
+              innerClassName={`aksel-table__expanded-row-content aksel-table__expanded-row-content--gutter-${
+                contentGutter ?? togglePlacement
+              }`}
               height={_open ? "auto" : 0}
               duration={150}
               easing="cubic-bezier(0.39,0.57,0.56,1)"

package/src/table/Header.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
@@ -8,12 +8,11 @@ export type HeaderType = React.ForwardRefExoticComponent<
 >;
 
 export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   return (
     <thead
       {...rest}
       ref={ref}
-      className={cn("navds-table__header", className)}
+      className={cl("aksel-table__header", className)}
     />
   );
 });

package/src/table/HeaderCell.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {
@@ -21,13 +21,12 @@ export type HeaderCellType = React.ForwardRefExoticComponent<
 
 export const HeaderCell: HeaderCellType = forwardRef(
   ({ className, children, align, textSize, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <th
         ref={ref}
-        className={cn("navds-table__header-cell", "navds-label", className, {
-          [`navds-table__header-cell--align-${align}`]: align,
-          "navds-label--small": textSize === "small",
+        className={cl("aksel-table__header-cell", "aksel-label", className, {
+          [`aksel-table__header-cell--align-${align}`]: align,
+          "aksel-label--small": textSize === "small",
         })}
         {...rest}
       >

package/src/table/Row.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { isElementInteractiveTarget } from "./Table.utils";
 
@@ -39,8 +39,6 @@ export const Row: RowType = forwardRef(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
       if (!onRowClick) {
         return;
@@ -55,9 +53,9 @@ export const Row: RowType = forwardRef(
       <tr
         {...rest}
         ref={ref}
-        className={cn("navds-table__row", className, {
-          "navds-table__row--selected": selected,
-          "navds-table__row--shade-on-hover": shadeOnHover,
+        className={cl("aksel-table__row", className, {
+          "aksel-table__row--selected": selected,
+          "aksel-table__row--shade-on-hover": shadeOnHover,
         })}
         onClick={composeEventHandlers(onClick, handleRowClick)}
         data-interactive={!!onRowClick}

package/src/table/Table.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import Body from "./Body";
 import ColumnHeader from "./ColumnHeader";
 import DataCell from "./DataCell";
@@ -95,15 +95,14 @@ export const Table = forwardRef(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <TableContext.Provider value={{ onSortChange, sort }}>
         <table
           {...rest}
           ref={ref}
-          className={cn("navds-table", `navds-table--${size}`, className, {
-            "navds-table--zebra-stripes": zebraStripes,
-            "navds-table--sticky-header": stickyHeader,
+          className={cl("aksel-table", `aksel-table--${size}`, className, {
+            "aksel-table--zebra-stripes": zebraStripes,
+            "aksel-table--sticky-header": stickyHeader,
           })}
         />
       </TableContext.Provider>

package/src/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import {
   TabsDescendantsProvider,
   TabsProvider,
@@ -74,7 +74,6 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const descendants = useTabsDescendants();
 
     const tabsContext = useTabs({ defaultValue, value, onChange, id });
@@ -98,7 +97,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
             ref={ref}
             {...rest}
             id={id}
-            className={cn("navds-tabs", className, `navds-tabs--${size}`)}
+            className={cl("aksel-tabs", className, `aksel-tabs--${size}`)}
           >
             {children}
           </div>

package/src/tabs/parts/tab/Tab.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
 import { OverridableComponent } from "../../../util";
+import { cl } from "../../../util/className";
 import { useTabsContext } from "../../Tabs.context";
 import { useTab } from "./useTab";
 
@@ -45,7 +45,6 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
       },
       ref: React.ForwardedRef<HTMLButtonElement>,
     ) => {
-      const { cn } = useRenameCSS();
       const tabCtx = useTab({ value, onClick, onFocus, disabled }, ref);
       const ctx = useTabsContext();
 
@@ -58,14 +57,14 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
         <Component
           ref={tabCtx.ref}
           {...rest}
-          className={cn(
-            "navds-tabs__tab",
-            `navds-tabs__tab--${ctx?.size ?? "medium"}`,
-            `navds-tabs__tab-icon--${ctx?.iconPosition}`,
+          className={cl(
+            "aksel-tabs__tab",
+            `aksel-tabs__tab--${ctx?.size ?? "medium"}`,
+            `aksel-tabs__tab-icon--${ctx?.iconPosition}`,
             className,
             {
-              "navds-tabs__tab--icon-only": icon && !label,
-              "navds-tabs__tab--fill": ctx.fill,
+              "aksel-tabs__tab--icon-only": icon && !label,
+              "aksel-tabs__tab--fill": ctx.fill,
             },
           )}
           role="tab"
@@ -80,7 +79,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
         >
           <BodyShort
             as="span"
-            className={cn("navds-tabs__tab-inner")}
+            className="aksel-tabs__tab-inner"
             size={ctx?.size}
           >
             <span aria-hidden={!!label}>{icon}</span>

package/src/tabs/parts/tablist/ScrollButtons.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 
 interface ScrollButtonProps {
   hidden: boolean;
@@ -9,12 +9,10 @@ interface ScrollButtonProps {
 }
 
 function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
-  const { cn } = useRenameCSS();
-
   return (
     <div
-      className={cn("navds-tabs__scroll-button", {
-        "navds-tabs__scroll-button--hidden": hidden,
+      className={cl("aksel-tabs__scroll-button", {
+        "aksel-tabs__scroll-button--hidden": hidden,
       })}
       onClick={onClick}
       aria-hidden

package/src/tabs/parts/tablist/TabList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 import React, { forwardRef, useRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
 import ScrollButton from "./ScrollButtons";
@@ -16,7 +16,6 @@ export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, onKeyDown, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const { onKeyDown: _onKeyDown } = useTabList();
 
     const listRef = useRef<HTMLDivElement>(null);
@@ -25,7 +24,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
     const scrollCtx = useScrollButtons(listRef);
 
     return (
-      <div className={cn("navds-tabs__tablist-wrapper")}>
+      <div className="aksel-tabs__tablist-wrapper">
         {scrollCtx.show && (
           <ScrollButton
             dir="left"
@@ -37,7 +36,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
           ref={mergedRef}
           {...rest}
           onScroll={scrollCtx.update}
-          className={cn("navds-tabs__tablist", className)}
+          className={cl("aksel-tabs__tablist", className)}
           role="tablist"
           aria-orientation="horizontal"
           onKeyDown={composeEventHandlers(onKeyDown, _onKeyDown)}

package/src/tabs/parts/tabpanel/TabPanel.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { useTabPanel } from "./useTabPanel";
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,13 +28,12 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   ({ className, value, children, lazy = true, id, ...rest }, ref) => {
     const ctx = useTabPanel({ value });
-    const { cn } = useRenameCSS();
 
     return (
       <div
         ref={ref}
         {...rest}
-        className={cn("navds-tabs__tabpanel", className)}
+        className={cl("aksel-tabs__tabpanel", className)}
         role="tabpanel"
         tabIndex={0}
         aria-labelledby={rest["aria-labelledby"] ?? ctx.labelledbyId}