@navikt/ds-react 7.40.0 → 8.0.1

package/src/form/search/Search.tsx

@@ -6,10 +6,12 @@ import React, {
   useState,
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button } from "../../button";
-import { useRenameCSS, useThemeInternal } 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";
@@ -74,6 +76,10 @@ export interface SearchProps
    * HTML size attribute. Specifies the width of the input, in characters.
    */
   htmlSize?: number | string;
+  /**
+   * @private
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 interface SearchComponent
@@ -126,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);
 
@@ -161,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}
@@ -177,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}
@@ -195,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
@@ -210,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) } : {})}
             />
@@ -242,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"
@@ -267,14 +271,11 @@ function ClearButton({
   clearButtonLabel,
   handleClear,
 }: SearchClearButtonProps) {
-  const { cn } = useRenameCSS();
-
-  const themeContext = useThemeInternal();
   const translate = useI18n("Search");
 
-  return themeContext?.isDarkside ? (
+  return (
     <Button
-      className={cn("navds-search__button-clear")}
+      className="aksel-search__button-clear"
       variant="tertiary"
       data-color="neutral"
       size={size === "medium" ? "small" : "xsmall"}
@@ -283,17 +284,6 @@ function ClearButton({
       onClick={(event) => handleClear({ trigger: "Click", event })}
       type="button"
     />
-  ) : (
-    <button
-      type="button"
-      onClick={(event) => handleClear({ trigger: "Click", event })}
-      className={cn("navds-search__button-clear")}
-    >
-      <span className={cn("navds-sr-only")}>
-        {clearButtonLabel || translate("clear")}
-      </span>
-      <XMarkIcon aria-hidden />
-    </button>
   );
 }
 

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";