@navikt/ds-react 8.0.0 → 8.0.1

package/src/form/radio/Radio.tsx

@@ -1,22 +1,20 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../util";
+import { cl } from "../../util/className";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
   const descriptionId = useId();
 
   return (
     <div
-      className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
-        "navds-radio--error": hasError,
-        "navds-radio--disabled": inputProps.disabled,
-        "navds-radio--readonly": readOnly,
+      className={cl(props.className, "aksel-radio", `aksel-radio--${size}`, {
+        "aksel-radio--error": hasError,
+        "aksel-radio--disabled": inputProps.disabled,
+        "aksel-radio--readonly": readOnly,
       })}
       data-color={hasError ? "danger" : props["data-color"]}
     >
@@ -28,13 +26,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             [descriptionId]: props.description,
           }) || undefined
         }
-        className={cn("navds-radio__input")}
+        className="aksel-radio__input"
         ref={ref}
       />
       <BodyShort
         as="label"
         htmlFor={inputProps.id}
-        className={cn("navds-radio__label")}
+        className="aksel-radio__label"
         size={size}
       >
         {props.children}
@@ -43,9 +41,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         <BodyShort
           id={descriptionId}
           size={size}
-          className={cn(
-            "navds-form-field__subdescription navds-radio__description",
-          )}
+          className="aksel-form-field__subdescription aksel-radio__description"
         >
           {props.description}
         </BodyShort>

package/src/form/radio/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useId } from "../../util/hooks";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
@@ -71,7 +71,6 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const nameId = useId();
@@ -81,10 +80,10 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         {...rest}
         readOnly={readOnly}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-radio-group",
-          `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          "aksel-radio-group",
+          `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -97,7 +96,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
             required,
           }}
         >
-          <div className={cn("navds-radio-buttons")}>{children}</div>
+          <div className="aksel-radio-buttons">{children}</div>
         </RadioGroupContext.Provider>
       </Fieldset>
     );

package/src/form/search/Search.tsx

@@ -8,10 +8,10 @@ import React, {
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button } from "../../button";
-import { useRenameCSS } from "../../theme/Theme";
 import { AkselColor } from "../../types";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { FormFieldProps, useFormField } from "../useFormField";
@@ -132,8 +132,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
-
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
 
@@ -167,15 +165,15 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           searchRef.current?.value && event.preventDefault();
           handleClear({ trigger: "Escape", event });
         }}
-        className={cn(
+        className={cl(
           className,
-          "navds-form-field",
-          `navds-form-field--${size}`,
-          "navds-search",
+          "aksel-form-field",
+          `aksel-form-field--${size}`,
+          "aksel-search",
           {
-            "navds-search--error": hasError,
-            "navds-search--disabled": inputProps.disabled,
-            "navds-search--with-size": htmlSize,
+            "aksel-search--error": hasError,
+            "aksel-search--disabled": inputProps.disabled,
+            "aksel-search--with-size": htmlSize,
           },
         )}
         data-color={dataColor}
@@ -183,16 +181,16 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cn("navds-form-field__label", {
-            "navds-sr-only": hideLabel,
+          className={cl("aksel-form-field__label", {
+            "aksel-sr-only": hideLabel,
           })}
         >
           {label}
         </Label>
         {!!description && (
           <BodyShort
-            className={cn("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
+            className={cl("aksel-form-field__description", {
+              "aksel-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -201,12 +199,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {description}
           </BodyShort>
         )}
-        <div className={cn("navds-search__wrapper")}>
-          <div className={cn("navds-search__wrapper-inner")}>
+        <div className="aksel-search__wrapper">
+          <div className="aksel-search__wrapper-inner">
             {variant === "simple" && (
               <MagnifyingGlassIcon
                 aria-hidden
-                className={cn("navds-search__search-icon")}
+                className="aksel-search__search-icon"
               />
             )}
             <input
@@ -216,13 +214,13 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              className={cn(
+              className={cl(
                 className,
-                "navds-search__input",
-                `navds-search__input--${variant}`,
-                "navds-text-field__input",
-                "navds-body-short",
-                `navds-body-short--${size}`,
+                "aksel-search__input",
+                `aksel-search__input--${variant}`,
+                "aksel-text-field__input",
+                "aksel-body-short",
+                `aksel-body-short--${size}`,
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
@@ -248,7 +246,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           </SearchContext.Provider>
         </div>
         <div
-          className={cn("navds-form-field__error")}
+          className="aksel-form-field__error"
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"
@@ -273,13 +271,11 @@ function ClearButton({
   clearButtonLabel,
   handleClear,
 }: SearchClearButtonProps) {
-  const { cn } = useRenameCSS();
-
   const translate = useI18n("Search");
 
   return (
     <Button
-      className={cn("navds-search__button-clear")}
+      className="aksel-search__button-clear"
       variant="tertiary"
       data-color="neutral"
       size={size === "medium" ? "small" : "xsmall"}

package/src/form/search/SearchButton.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { SearchContext } from "./context";
@@ -20,7 +20,6 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 
 const SearchButton: SearchButtonType = forwardRef(
   ({ className, children, disabled, onClick, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n("Search");
     const context = useContext(SearchContext);
 
@@ -38,7 +37,7 @@ const SearchButton: SearchButtonType = forwardRef(
         ref={ref}
         size={size}
         variant={variant === "secondary" ? "secondary" : "primary"}
-        className={cn("navds-search__button-search", className)}
+        className={cl("aksel-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
         onClick={composeEventHandlers(onClick, handleClick)}
         icon={

package/src/form/select/Select.tsx

@@ -1,8 +1,8 @@
 import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
@@ -65,8 +65,6 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
-
     const readOnlyEventHandlers = {
       onMouseDown: (evt) => {
         // NOTE: does not prevent click
@@ -90,23 +88,23 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
     return (
       <div
-        className={cn(
+        className={cl(
           className,
-          "navds-form-field",
-          `navds-form-field--${size}`,
+          "aksel-form-field",
+          `aksel-form-field--${size}`,
           {
-            "navds-form-field--disabled": !!inputProps.disabled,
-            "navds-form-field--readonly": readOnly,
-            "navds-select--error": hasError,
-            "navds-select--readonly": readOnly,
+            "aksel-form-field--disabled": !!inputProps.disabled,
+            "aksel-form-field--readonly": readOnly,
+            "aksel-select--error": hasError,
+            "aksel-select--readonly": readOnly,
           },
         )}
       >
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cn("navds-form-field__label", {
-            "navds-sr-only": hideLabel,
+          className={cl("aksel-form-field__label", {
+            "aksel-sr-only": hideLabel,
           })}
         >
           {readOnly && <ReadOnlyIconWithTitle />}
@@ -114,8 +112,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cn("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
+            className={cl("aksel-form-field__description", {
+              "aksel-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -124,27 +122,24 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             {description}
           </BodyShort>
         )}
-        <div className={cn("navds-select__container")} style={style}>
+        <div className="aksel-select__container" style={style}>
           <select
             {...omit(rest, ["error", "errorId", "size", "readOnly"])}
             {...inputProps}
             {...readOnlyEventHandlers}
             ref={ref}
-            className={cn(
-              "navds-select__input",
-              "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`,
+            className={cl(
+              "aksel-select__input",
+              "aksel-body-short",
+              `aksel-body-short--${size ?? "medium"}`,
             )}
           >
             {children}
           </select>
-          <ChevronDownIcon
-            className={cn("navds-select__chevron")}
-            aria-hidden
-          />
+          <ChevronDownIcon className="aksel-select__chevron" aria-hidden />
         </div>
         <div
-          className={cn("navds-form-field__error")}
+          className="aksel-form-field__error"
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/switch/Switch.tsx

@@ -5,9 +5,9 @@ import React, {
   useState,
 } from "react";
 import { Loader } from "../../loader";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
@@ -64,8 +64,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
-
     const [_checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false,
     );
@@ -78,16 +76,16 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <div
-        className={cn(
-          "navds-switch",
+        className={cl(
+          "aksel-switch",
           props.className,
-          `navds-switch--${size}`,
-          `navds-switch--${position}`,
+          `aksel-switch--${size}`,
+          `aksel-switch--${position}`,
           {
-            "navds-switch--loading": loading,
-            "navds-switch--disabled": inputProps.disabled ?? loading,
-            "navds-switch--readonly": readOnly,
-            "navds-switch--standalone": hideLabel,
+            "aksel-switch--loading": loading,
+            "aksel-switch--disabled": inputProps.disabled ?? loading,
+            "aksel-switch--readonly": readOnly,
+            "aksel-switch--standalone": hideLabel,
           },
         )}
       >
@@ -113,28 +111,21 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             }
             props.onClick?.(event);
           }}
-          className={cn(className, "navds-switch__input")}
+          className={cl(className, "aksel-switch__input")}
         />
-        <span className={cn("navds-switch__track")}>
-          <span className={cn("navds-switch__thumb")}>
+        <span className="aksel-switch__track">
+          <span className="aksel-switch__thumb">
             <SwitchIcon size={size} checked={checked} loading={loading} />
           </span>
         </span>
-        <label
-          htmlFor={inputProps.id}
-          className={cn("navds-switch__label-wrapper")}
-        >
+        <label htmlFor={inputProps.id} className="aksel-switch__label-wrapper">
           <span
-            className={cn("navds-switch__content", {
-              "navds-sr-only": hideLabel,
-              "navds-switch--with-description": description && !hideLabel,
+            className={cl("aksel-switch__content", {
+              "aksel-sr-only": hideLabel,
+              "aksel-switch--with-description": description && !hideLabel,
             })}
           >
-            <BodyShort
-              as="span"
-              size={size}
-              className={cn("navds-switch__label")}
-            >
+            <BodyShort as="span" size={size} className="aksel-switch__label">
               {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
@@ -142,9 +133,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               <BodyShort
                 size={size}
                 as="span"
-                className={cn(
-                  "navds-form-field__subdescription navds-switch__description",
-                )}
+                className="aksel-form-field__subdescription aksel-switch__description"
               >
                 {description}
               </BodyShort>

package/src/form/textarea/Textarea.tsx

@@ -1,9 +1,8 @@
-import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import TextareaAutosize from "../../util/TextareaAutoSize";
+import { cl } from "../../util/className";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useId } from "../../util/hooks";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
@@ -100,8 +99,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
-
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
@@ -115,17 +112,17 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return (
       <div
-        className={cn(
+        className={cl(
           className,
-          "navds-form-field",
-          `navds-form-field--${size}`,
+          "aksel-form-field",
+          `aksel-form-field--${size}`,
           {
-            "navds-form-field--disabled": !!inputProps.disabled,
-            "navds-form-field--readonly": readOnly,
-            "navds-textarea--readonly": readOnly,
-            "navds-textarea--error": hasError,
-            "navds-textarea--autoscrollbar": UNSAFE_autoScrollbar,
-            [`navds-textarea--resize-${resize === true ? "both" : resize}`]:
+            "aksel-form-field--disabled": !!inputProps.disabled,
+            "aksel-form-field--readonly": readOnly,
+            "aksel-textarea--readonly": readOnly,
+            "aksel-textarea--error": hasError,
+            "aksel-textarea--autoscrollbar": UNSAFE_autoScrollbar,
+            [`aksel-textarea--resize-${resize === true ? "both" : resize}`]:
               resize,
           },
         )}
@@ -133,8 +130,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cn("navds-form-field__label", {
-            "navds-sr-only": hideLabel,
+          className={cl("aksel-form-field__label", {
+            "aksel-sr-only": hideLabel,
           })}
         >
           {readOnly && <ReadOnlyIcon />}
@@ -142,8 +139,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cn("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
+            className={cl("aksel-form-field__description", {
+              "aksel-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -165,10 +162,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           autoScrollbar={UNSAFE_autoScrollbar}
           ref={ref}
           readOnly={readOnly}
-          className={cn(
-            "navds-textarea__input",
-            "navds-body-short",
-            `navds-body-short--${size ?? "medium"}`,
+          className={cl(
+            "aksel-textarea__input",
+            "aksel-body-short",
+            `aksel-body-short--${size ?? "medium"}`,
           )}
           {...(describedBy ? { "aria-describedby": describedBy } : {})}
         />
@@ -182,7 +179,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           />
         )}
         <div
-          className={cn("navds-form-field__error")}
+          className="aksel-form-field__error"
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/textarea/TextareaCounter.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
+import { cl } from "../../util/className";
 import debounce from "../../util/debounce";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import type { TextareaProps } from "./Textarea";
@@ -20,7 +20,6 @@ const TextareaCounter = ({
   size,
   i18n,
 }: Props) => {
-  const { cn } = useRenameCSS();
   const translate = useI18n("Textarea", {
     charsLeft: i18n?.counterLeft ? `{chars} ${i18n.counterLeft}` : undefined,
     charsTooMany: i18n?.counterTooMuch
@@ -44,22 +43,22 @@ const TextareaCounter = ({
 
   return (
     <>
-      <span id={maxLengthId} className={cn("navds-sr-only")}>
+      <span id={maxLengthId} className="aksel-sr-only">
         {translate("maxLength", { maxLength })}
       </span>
 
       {difference < 20 && (
         <span
           role="status"
-          className={cn("navds-textarea__sr-counter navds-sr-only")}
+          className="aksel-textarea__sr-counter aksel-sr-only"
         >
           {getCounterText(debouncedDiff, translate)}
         </span>
       )}
 
       <BodyShort
-        className={cn("navds-textarea__counter", {
-          "navds-textarea__counter--error": difference < 0,
+        className={cl("aksel-textarea__counter", {
+          "aksel-textarea__counter--error": difference < 0,
         })}
         size={size}
       >

package/src/form/textfield/TextField.tsx

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
+import { cl } from "../../util/className";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
@@ -48,8 +48,6 @@ export interface TextFieldProps
  */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (props, ref) => {
-    const { cn } = useRenameCSS();
-
     const {
       inputProps,
       errorId,
@@ -72,25 +70,25 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     return (
       <div
-        className={cn(
+        className={cl(
           className,
-          "navds-form-field",
-          `navds-form-field--${size}`,
+          "aksel-form-field",
+          `aksel-form-field--${size}`,
 
           {
-            "navds-text-field--error": hasError,
-            "navds-text-field--disabled": !!inputProps.disabled,
-            "navds-form-field--disabled": !!inputProps.disabled,
-            "navds-form-field--readonly": readOnly,
-            "navds-text-field--readonly": readOnly,
+            "aksel-text-field--error": hasError,
+            "aksel-text-field--disabled": !!inputProps.disabled,
+            "aksel-form-field--disabled": !!inputProps.disabled,
+            "aksel-form-field--readonly": readOnly,
+            "aksel-text-field--readonly": readOnly,
           },
         )}
       >
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cn("navds-form-field__label", {
-            "navds-sr-only": hideLabel,
+          className={cl("aksel-form-field__label", {
+            "aksel-sr-only": hideLabel,
           })}
         >
           {readOnly && <ReadOnlyIcon />}
@@ -99,8 +97,8 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
         {!!description && (
           <BodyShort
-            className={cn("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
+            className={cl("aksel-form-field__description", {
+              "aksel-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -115,15 +113,15 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           ref={ref}
           type={type}
           readOnly={readOnly}
-          className={cn(
-            "navds-text-field__input",
-            "navds-body-short",
-            `navds-body-short--${size ?? "medium"}`,
+          className={cl(
+            "aksel-text-field__input",
+            "aksel-body-short",
+            `aksel-body-short--${size ?? "medium"}`,
           )}
           size={htmlSize}
         />
         <div
-          className={cn("navds-form-field__error")}
+          className="aksel-form-field__error"
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/useFormField.ts

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { useContext } from "react";
 import { ReadMore } from "../read-more/ReadMore";
+import { cl } from "../util/className";
 import { useId } from "../util/hooks";
 import { FieldsetContext } from "./fieldset/context";