@navikt/ds-react 7.15.0 → 7.16.0

package/src/popover/PopoverContent.tsx

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

package/src/progress-bar/ProgressBar.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
@@ -93,6 +93,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
     const onTimeoutRef = useRef<() => void>();
     onTimeoutRef.current = simulated?.onTimeout;
@@ -112,7 +113,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
       /* biome-ignore lint/a11y/useFocusableInteractive: Progressbar is not interactive. */
       <div
         ref={ref}
-        className={cl(
+        className={cn(
           "navds-progress-bar",
           `navds-progress-bar--${size}`,
           className,
@@ -136,7 +137,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         {...rest}
       >
         <div
-          className={cl("navds-progress-bar__foreground", {
+          className={cn("navds-progress-bar__foreground", {
             "navds-progress-bar__foreground--indeterminate":
               simulated?.seconds !== undefined,
           })}

package/src/read-more/ReadMore.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -68,6 +68,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -78,7 +79,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           "navds-read-more",
           `navds-read-more--${size}`,
           className,
@@ -90,7 +91,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           {...rest}
           ref={ref}
           type="button"
-          className={cl("navds-read-more__button", "navds-body-short", {
+          className={cn("navds-read-more__button", "navds-body-short", {
             "navds-body-short--small": size === "small",
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
@@ -98,7 +99,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
-            className="navds-read-more__expand-icon"
+            className={cn("navds-read-more__expand-icon")}
             aria-hidden
           />
           <span>{header}</span>
@@ -107,7 +108,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
         <BodyLong
           as="div"
           aria-hidden={!_open}
-          className={cl("navds-read-more__content", {
+          className={cn("navds-read-more__content", {
             "navds-read-more__content--closed": !_open,
           })}
           size={typoSize}

package/src/skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -45,11 +45,12 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     return (
       <As
         {...rest}
         ref={ref}
-        className={cl(
+        className={cn(
           "navds-skeleton",
           className,
           `navds-skeleton--${variant}`,

package/src/stepper/Step.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { OverridableComponent } from "../util/types";
@@ -37,6 +37,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
+      const { cn } = useRenameCSS();
       const context = useStepperContext();
 
       const { activeStep } = context;
@@ -54,7 +55,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           {...rest}
           aria-current={activeStep === context.index ? "step" : undefined}
           ref={ref}
-          className={cl("navds-stepper__step", className, {
+          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,
@@ -66,7 +67,11 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           onClick={composeEventHandlers(onClick, handleStepClick)}
         >
           {completed ? (
-            <span className="navds-stepper__circle navds-stepper__circle--success">
+            <span
+              className={cn(
+                "navds-stepper__circle navds-stepper__circle--success",
+              )}
+            >
               <svg
                 width="14"
                 height="10"
@@ -85,14 +90,14 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
             </span>
           ) : (
             <Label
-              className="navds-stepper__circle"
+              className={cn("navds-stepper__circle")}
               as="span"
               aria-hidden="true"
             >
               {context.index + 1}
             </Label>
           )}
-          <Label as="span" className="navds-stepper__content">
+          <Label as="span" className={cn("navds-stepper__content")}>
             {children}
           </Label>
         </Comp>

package/src/stepper/Stepper.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import Step, { StepperStepProps } from "./Step";
 import { StepperContextProvider } from "./context";
 
@@ -83,12 +83,13 @@ export const Stepper: StepperComponent = forwardRef<
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     activeStep = activeStep - 1;
     return (
       <ol
         {...rest}
         ref={ref}
-        className={cl(
+        className={cn(
           "navds-stepper",
           orientation === "horizontal" ? "navds-stepper--horizontal" : "",
           className,
@@ -101,7 +102,7 @@ export const Stepper: StepperComponent = forwardRef<
 
           return (
             <li
-              className={cl("navds-stepper__item", {
+              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,
@@ -111,7 +112,9 @@ export const Stepper: StepperComponent = forwardRef<
               })}
               key={index + (children?.toString?.() ?? "")}
             >
-              <span className="navds-stepper__line navds-stepper__line--1" />
+              <span
+                className={cn("navds-stepper__line navds-stepper__line--1")}
+              />
               <StepperContextProvider
                 interactive={interactive}
                 activeStep={activeStep}
@@ -122,7 +125,9 @@ export const Stepper: StepperComponent = forwardRef<
               >
                 {step}
               </StepperContextProvider>
-              <span className="navds-stepper__line navds-stepper__line--2" />
+              <span
+                className={cn("navds-stepper__line navds-stepper__line--2")}
+              />
             </li>
           );
         })}

package/src/table/AnimateHeight.tsx

@@ -1,5 +1,6 @@
 /* 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";
 
 // ------------------ Types
 
@@ -67,6 +68,7 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   height,
   ...props
 }) => {
+  const { cn } = useRenameCSS();
   // ------------------ Initialization
   const prevHeight = useRef<Height>(height);
   const contentElement = useRef<HTMLDivElement>(null);
@@ -227,10 +229,10 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const ariaHidden = hasAriaHiddenProp ? props["aria-hidden"] : height === 0;
 
   return (
-    <div {...props} className={className} style={componentStyle}>
+    <div {...props} className={cn(className)} style={componentStyle}>
       <div
         aria-hidden={ariaHidden}
-        className={innerClassName}
+        className={cn(innerClassName)}
         ref={contentElement}
       >
         {children}

package/src/table/Body.tsx

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

package/src/table/ColumnHeader.tsx

@@ -4,6 +4,7 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
 
@@ -26,6 +27,7 @@ export type ColumnHeaderType = React.ForwardRefExoticComponent<
 export const ColumnHeader: ColumnHeaderType = forwardRef(
   ({ className, 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.");
@@ -35,7 +37,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
       <HeaderCell
         scope="col"
         ref={ref}
-        className={className}
+        className={cn(className)}
         aria-sort={
           sortable
             ? context?.sort?.orderBy === sortKey
@@ -48,7 +50,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
         {sortable ? (
           <button
             type="button"
-            className="navds-table__sort-button"
+            className={cn("navds-table__sort-button")}
             onClick={
               sortable && sortKey
                 ? () => context?.onSortChange?.(sortKey)

package/src/table/DataCell.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography";
 
 export interface DataCellProps
@@ -17,11 +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={cl("navds-table__data-cell", className, {
+        className={cn("navds-table__data-cell", className, {
           [`navds-table__data-cell--align-${align}`]: align,
         })}
         size={textSize}

package/src/table/ExpandableRow.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -78,6 +78,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -104,7 +105,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         <Row
           {...rest}
           ref={ref}
-          className={cl("navds-table__expandable-row", className, {
+          className={cn("navds-table__expandable-row", className, {
             "navds-table__expandable-row--open": _open,
             "navds-table__expandable-row--expansion-disabled":
               expansionDisabled,
@@ -114,21 +115,21 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         >
           {togglePlacement === "right" && children}
           <DataCell
-            className={cl("navds-table__toggle-expand-cell", {
+            className={cn("navds-table__toggle-expand-cell", {
               "navds-table__toggle-expand-cell--open": _open,
             })}
             onClick={!expansionDisabled ? expansionHandler : () => null}
           >
             {!expansionDisabled && (
               <button
-                className="navds-table__toggle-expand-button"
+                className={cn("navds-table__toggle-expand-button")}
                 type="button"
                 aria-controls={id}
                 aria-expanded={_open}
                 onClick={expansionHandler}
               >
                 <ChevronDownIcon
-                  className="navds-table__expandable-icon"
+                  className={cn("navds-table__expandable-icon")}
                   title={_open ? translate("showLess") : translate("showMore")}
                 />
               </button>
@@ -138,16 +139,21 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         </Row>
         <tr
           data-state={_open ? "open" : "closed"}
-          className="navds-table__expanded-row"
+          className={cn("navds-table__expanded-row")}
           aria-hidden={!_open}
           id={id}
         >
-          <td colSpan={colSpan} className="navds-table__expanded-row-cell">
+          <td
+            colSpan={colSpan}
+            className={cn("navds-table__expanded-row-cell")}
+          >
             <AnimateHeight
-              className="navds-table__expanded-row-collapse"
-              innerClassName={`navds-table__expanded-row-content navds-table__expanded-row-content--gutter-${
-                contentGutter ?? togglePlacement
-              }`}
+              className={cn("navds-table__expanded-row-collapse")}
+              innerClassName={cn(
+                `navds-table__expanded-row-content navds-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 cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 
 export type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
@@ -7,8 +7,15 @@ export type HeaderType = React.ForwardRefExoticComponent<
   HeaderProps & React.RefAttributes<HTMLTableSectionElement>
 >;
 
-export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
-  <thead {...rest} ref={ref} className={cl("navds-table__header", className)} />
-));
+export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+  return (
+    <thead
+      {...rest}
+      ref={ref}
+      className={cn("navds-table__header", className)}
+    />
+  );
+});
 
 export default Header;

package/src/table/HeaderCell.tsx

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

package/src/table/Row.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -19,16 +19,19 @@ export type RowType = React.ForwardRefExoticComponent<
 >;
 
 export const Row: RowType = forwardRef(
-  ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => (
-    <tr
-      {...rest}
-      ref={ref}
-      className={cl("navds-table__row", className, {
-        "navds-table__row--selected": selected,
-        "navds-table__row--shade-on-hover": shadeOnHover,
-      })}
-    />
-  ),
+  ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+    return (
+      <tr
+        {...rest}
+        ref={ref}
+        className={cn("navds-table__row", className, {
+          "navds-table__row--selected": selected,
+          "navds-table__row--shade-on-hover": shadeOnHover,
+        })}
+      />
+    );
+  },
 );
 
 export default Row;

package/src/table/Table.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import Body from "./Body";
 import ColumnHeader from "./ColumnHeader";
 import DataCell from "./DataCell";
@@ -88,17 +88,20 @@ export const Table = forwardRef(
       ...rest
     },
     ref,
-  ) => (
-    <TableContext.Provider value={{ onSortChange, sort }}>
-      <table
-        {...rest}
-        ref={ref}
-        className={cl("navds-table", `navds-table--${size}`, className, {
-          "navds-table--zebra-stripes": zebraStripes,
-        })}
-      />
-    </TableContext.Provider>
-  ),
+  ) => {
+    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,
+          })}
+        />
+      </TableContext.Provider>
+    );
+  },
 ) as TableType;
 
 Table.Header = Header;

package/src/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import {
   TabsDescendantsProvider,
   TabsProvider,
@@ -44,13 +44,13 @@ interface TabsComponent
  *     <Tabs.Tab value="inbox" label="Inbox" />
  *     <Tabs.Tab value="sendt" label="Sendt" />
  *   </Tabs.List>
- *   <Tabs.Panel value="logg" className="h-24 w-full bg-gray-50 p-4">
+ *   <Tabs.Panel value="logg">
  *     Logg-tab
  *   </Tabs.Panel>
- *   <Tabs.Panel value="inbox" className="h-24 w-full bg-gray-50 p-4">
+ *   <Tabs.Panel value="inbox">
  *     Inbox-tab
  *   </Tabs.Panel>
- *   <Tabs.Panel value="sendt" className="h-24  w-full bg-gray-50 p-4">
+ *   <Tabs.Panel value="sendt">
  *     Sendt-tab
  *   </Tabs.Panel>
  * </Tabs>
@@ -74,6 +74,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const descendants = useTabsDescendants();
 
     const tabsContext = useTabs({ defaultValue, value, onChange, id });
@@ -97,7 +98,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
             ref={ref}
             {...rest}
             id={id}
-            className={cl("navds-tabs", className, `navds-tabs--${size}`)}
+            className={cn("navds-tabs", className, `navds-tabs--${size}`)}
           >
             {children}
           </div>

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

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

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

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