@navikt/ds-react 8.0.0 → 8.1.0

package/src/form/search/Search.tsx

@@ -8,12 +8,12 @@ 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 { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { omit } from "../../utils-external";
+import { cl } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
@@ -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,9 +1,8 @@
 import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
-import { useRenameCSS } from "../../theme/Theme";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { cl, composeEventHandlers } from "../../utils/helpers";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps
@@ -20,7 +19,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 +36,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 { omit } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 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 { omit } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 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,11 +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 { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useId } from "../../util/hooks";
+import { omit, useId } from "../../utils-external";
+import TextareaAutosize from "../../utils/components/textarea-autosize/TextareaAutoSize";
+import { cl, composeEventHandlers } from "../../utils/helpers";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
@@ -100,8 +97,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
-
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
@@ -115,17 +110,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 +128,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 +137,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 +160,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 +177,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,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
-import debounce from "../../util/debounce";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { debounce } from "../../utils-external";
+import { cl } from "../../utils/helpers";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {
@@ -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 { omit } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 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,7 +1,7 @@
-import cl from "clsx";
 import React, { useContext } from "react";
 import { ReadMore } from "../read-more/ReadMore";
-import { useId } from "../util/hooks";
+import { useId } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { FieldsetContext } from "./fieldset/context";
 
 export interface FormFieldProps {

package/src/guide-panel/GuidePanel.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useThemeInternal } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 import { GudiepanelIllustration } from "./Illustration";
 
 export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
@@ -45,7 +46,6 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal();
 
     return (
@@ -53,21 +53,21 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
         data-color={color}
         {...rest}
         ref={ref}
-        className={cn("navds-guide-panel", className)}
+        className={cl("aksel-guide-panel", className)}
         data-responsive={poster === undefined}
         data-poster={poster}
       >
-        <div className={cn("navds-guide")}>
+        <div className="aksel-guide">
           {illustration ?? <GudiepanelIllustration />}
         </div>
-        <div className={cn("navds-guide-panel__content")}>
+        <div className="aksel-guide-panel__content">
           <svg
             viewBox="0 0 33 22"
             width="33"
             height="22"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className={cn("navds-guide-panel__tail")}
+            className="aksel-guide-panel__tail"
           >
             <path
               d="M8.74229e-08 22L0 20L33 20V22L8.74229e-08 22Z"
@@ -85,7 +85,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
             />
           </svg>
           <div
-            className={cn("navds-guide-panel__content-inner")}
+            className="aksel-guide-panel__content-inner"
             data-color={themeContext?.color}
           >
             {children}

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export const GudiepanelIllustration = () => {
   const translate = useI18n("GuidePanel");