@navikt/ds-react 7.40.0 → 8.0.1

package/src/form/checkbox/Checkbox.tsx

@@ -1,190 +1,97 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../util";
+import { cl } from "../../util/className";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { cn } = useRenameCSS();
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
-    const themeContext = useThemeInternal();
-
-    if (themeContext?.isDarkside) {
-      return (
-        <div
-          className={cn(
-            props.className,
-            "navds-checkbox",
-            `navds-checkbox--${size}`,
-            {
-              "navds-checkbox--error": hasError,
-              "navds-checkbox--disabled": inputProps.disabled,
-              "navds-checkbox--readonly": readOnly,
-            },
-          )}
-          data-color={hasError ? "danger" : props["data-color"]}
-        >
-          <div className={cn("navds-checkbox__input-wrapper")}>
-            <input
-              {...omit(props, [
-                "children",
-                "size",
-                "error",
-                "description",
-                "hideLabel",
-                "indeterminate",
-                "errorId",
-                "readOnly",
-              ])}
-              {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-              aria-describedby={
-                cl(inputProps["aria-describedby"], {
-                  [descriptionId]: props.description,
-                }) || undefined
-              }
-              type="checkbox"
-              className={cn("navds-checkbox__input")}
-              ref={(el) => {
-                if (el) {
-                  el.indeterminate = props.indeterminate ?? false;
-                }
-
-                if (typeof ref === "function") {
-                  ref(el);
-                } else if (ref != null) {
-                  ref.current = el;
-                }
-              }}
-            />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-              fill="none"
-              focusable={false}
-              role="img"
-              aria-hidden
-              className={cn("navds-checkbox__icon")}
-            >
-              <path
-                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-          <BodyShort
-            as="label"
-            htmlFor={inputProps.id}
-            size={size}
-            className={cn("navds-checkbox__label", {
-              "navds-sr-only": props.hideLabel,
-            })}
-          >
-            {!nested && readOnly && <ReadOnlyIconWithTitle />}
-            {props.children}
-          </BodyShort>
-          {props.description && (
-            <BodyShort
-              id={descriptionId}
-              size={size}
-              className={cn(
-                "navds-form-field__subdescription navds-checkbox__description",
-              )}
-            >
-              {props.description}
-            </BodyShort>
-          )}
-        </div>
-      );
-    }
 
     return (
       <div
-        className={cn(
+        className={cl(
           props.className,
-          "navds-checkbox",
-          `navds-checkbox--${size}`,
+          "aksel-checkbox",
+          `aksel-checkbox--${size}`,
           {
-            "navds-checkbox--error": hasError,
-            "navds-checkbox--disabled": inputProps.disabled,
-            "navds-checkbox--readonly": readOnly,
+            "aksel-checkbox--error": hasError,
+            "aksel-checkbox--disabled": inputProps.disabled,
+            "aksel-checkbox--readonly": readOnly,
           },
         )}
         data-color={hasError ? "danger" : props["data-color"]}
       >
-        <input
-          {...omit(props, [
-            "children",
-            "size",
-            "error",
-            "description",
-            "hideLabel",
-            "indeterminate",
-            "errorId",
-            "readOnly",
-          ])}
-          {...omit(inputProps, ["aria-invalid"])}
-          type="checkbox"
-          className={cn("navds-checkbox__input")}
-          ref={(el) => {
-            if (el) {
-              el.indeterminate = props.indeterminate ?? false;
+        <div className="aksel-checkbox__input-wrapper">
+          <input
+            {...omit(props, [
+              "children",
+              "size",
+              "error",
+              "description",
+              "hideLabel",
+              "indeterminate",
+              "errorId",
+              "readOnly",
+            ])}
+            {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+            aria-describedby={
+              cl(inputProps["aria-describedby"], {
+                [descriptionId]: props.description,
+              }) || undefined
             }
+            type="checkbox"
+            className="aksel-checkbox__input"
+            ref={(el) => {
+              if (el) {
+                el.indeterminate = props.indeterminate ?? false;
+              }
 
-            if (typeof ref === "function") {
-              ref(el);
-            } else if (ref != null) {
-              ref.current = el;
-            }
-          }}
-        />
-        <label htmlFor={inputProps.id} className={cn("navds-checkbox__label")}>
-          <span className={cn("navds-checkbox__icon")}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-              fill="none"
-              focusable={false}
-              role="img"
-              aria-hidden
-            >
-              <path
-                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-          <span className={cn("navds-checkbox__icon-indeterminate")} />
-          <span
-            className={cn("navds-checkbox__content", {
-              "navds-sr-only": props.hideLabel,
-            })}
+              if (typeof ref === "function") {
+                ref(el);
+              } else if (ref != null) {
+                ref.current = el;
+              }
+            }}
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 13 10"
+            fill="none"
+            focusable={false}
+            role="img"
+            aria-hidden
+            className="aksel-checkbox__icon"
+          >
+            <path
+              d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <BodyShort
+          as="label"
+          htmlFor={inputProps.id}
+          size={size}
+          className={cl("aksel-checkbox__label", {
+            "aksel-sr-only": props.hideLabel,
+          })}
+        >
+          {!nested && readOnly && <ReadOnlyIconWithTitle />}
+          {props.children}
+        </BodyShort>
+        {props.description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className="aksel-form-field__subdescription aksel-checkbox__description"
           >
-            <BodyShort
-              as="span"
-              size={size}
-              className={cn("navds-checkbox__label-text")}
-            >
-              {!nested && readOnly && <ReadOnlyIconWithTitle />}
-              {props.children}
-            </BodyShort>
-            {props.description && (
-              <BodyShort
-                as="span"
-                size={size}
-                className={cn(
-                  "navds-form-field__subdescription navds-checkbox__description",
-                )}
-              >
-                {props.description}
-              </BodyShort>
-            )}
-          </span>
-        </label>
+            {props.description}
+          </BodyShort>
+        )}
       </div>
     );
   },

package/src/form/checkbox/CheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, forwardRef, useContext, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
 
@@ -59,7 +59,6 @@ export const CheckboxGroup = forwardRef<
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const [state, setState] = useState<any[]>(defaultValue ?? []);
@@ -78,10 +77,10 @@ export const CheckboxGroup = forwardRef<
       <Fieldset
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-checkbox-group",
-          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          "aksel-checkbox-group",
+          `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -92,7 +91,7 @@ export const CheckboxGroup = forwardRef<
             toggleValue,
           }}
         >
-          <div className={cn("navds-checkboxes")}>{children}</div>
+          <div className="aksel-checkboxes">{children}</div>
         </CheckboxGroupContext.Provider>
       </Fieldset>
     );

package/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Floating } from "../../overlays/floating/Floating";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { cl } from "../../util/className";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
@@ -18,8 +18,6 @@ export const Combobox = forwardRef<
 >((props, ref) => {
   const { className, hideLabel = false, description, label, ...rest } = props;
 
-  const { cn } = useRenameCSS();
-
   const {
     error,
     errorId,
@@ -42,8 +40,8 @@ export const Combobox = forwardRef<
         <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 />}
@@ -52,8 +50,8 @@ export const Combobox = forwardRef<
         {!!description && (
           <BodyShort
             as="div"
-            className={cn("navds-form-field__description", {
-              "navds-sr-only": hideLabel,
+            className={cl("aksel-form-field__description", {
+              "aksel-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -61,12 +59,12 @@ export const Combobox = forwardRef<
             {description}
           </BodyShort>
         )}
-        <div className={cn("navds-combobox__wrapper")}>
+        <div className="aksel-combobox__wrapper">
           <InputController ref={ref} {...rest} />
           <FilteredOptions />
         </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/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useInputContext } from "./Input/Input.context";
 
 type ComboboxWrapperProps = {
@@ -20,7 +20,6 @@ const ComboboxWrapper = ({
   inputProps,
   inputSize,
 }: ComboboxWrapperProps) => {
-  const { cn } = useRenameCSS();
   const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -46,16 +45,16 @@ const ComboboxWrapper = ({
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper for combobox input and chips.
     <div
       ref={wrapperRef}
-      className={cn(
+      className={cl(
         className,
-        "navds-form-field",
-        `navds-form-field--${inputSize}`,
+        "aksel-form-field",
+        `aksel-form-field--${inputSize}`,
         {
-          "navds-combobox--error": hasError,
-          "navds-combobox--disabled": !!inputProps.disabled,
-          "navds-combobox--focused": hasFocusWithin,
-          "navds-combobox--readonly": readOnly,
-          "navds-form-field--readonly": readOnly,
+          "aksel-combobox--error": hasError,
+          "aksel-combobox--disabled": !!inputProps.disabled,
+          "aksel-combobox--focused": hasFocusWithin,
+          "aksel-combobox--readonly": readOnly,
+          "aksel-form-field--readonly": readOnly,
         },
       )}
       onFocus={onFocusInsideWrapper}

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort, Label } from "../../../typography";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -10,8 +10,6 @@ import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const AddNewOption = () => {
-  const { cn } = useRenameCSS();
-
   const {
     inputProps: { id },
     size,
@@ -47,10 +45,10 @@ const AddNewOption = () => {
           toggleIsListOpen(false);
       }}
       id={filteredOptionsUtil.getAddNewOptionId(id)}
-      className={cn(
-        "navds-combobox__list-item navds-combobox__list-item--new-option",
+      className={cl(
+        "aksel-combobox__list-item aksel-combobox__list-item--new-option",
         {
-          "navds-combobox__list-item--new-option--focus":
+          "aksel-combobox__list-item--new-option--focus":
             activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
         },
       )}

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useState } from "react";
 import { DismissableLayer } from "../../../overlays/dismissablelayer/DismissableLayer";
 import { Floating } from "../../../overlays/floating/Floating";
-import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
 import { useClientLayoutEffect } from "../../../util";
+import { cl } from "../../../util/className";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import AddNewOption from "./AddNewOption";
@@ -14,8 +14,6 @@ import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
-  const { cn } = useRenameCSS();
-  const themeContext = useThemeInternal();
   const {
     inputProps: { id },
     anchorRef,
@@ -55,8 +53,6 @@ const FilteredOptions = () => {
     (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
     filteredOptions.length > 0; // Render filtered options
 
-  const height = themeContext?.isDarkside ? "316px" : "290px";
-
   return (
     <DismissableLayer
       asChild
@@ -72,9 +68,9 @@ const FilteredOptions = () => {
     >
       <Floating.Content
         ref={floatingRef}
-        className={cn("navds-combobox__list", {
-          "navds-combobox__list--closed": !isListOpen,
-          "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
+        className={cl("aksel-combobox__list", {
+          "aksel-combobox__list--closed": !isListOpen,
+          "aksel-combobox__list--with-hover": isMouseLastUsedInputDevice,
         })}
         id={filteredOptionsUtil.getFilteredOptionsId(id)}
         tabIndex={-1}
@@ -84,16 +80,13 @@ const FilteredOptions = () => {
         enabled={isListOpen}
         style={{
           maxHeight: localOpen
-            ? `min(${height}, var(--ac-floating-available-height))`
-            : `${height}`,
+            ? `min(316px, var(--__axc-floating-available-height))`
+            : `316px`,
         }}
         autoUpdateWhileMounted={false}
       >
         {shouldRenderNonSelectables && (
-          <div
-            className={cn("navds-combobox__list_non-selectables")}
-            role="status"
-          >
+          <div className="aksel-combobox__list_non-selectables" role="status">
             {isMultiSelect && maxSelected.limit && <MaxSelectedMessage />}
             {isLoading && <LoadingMessage />}
             {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
@@ -106,7 +99,7 @@ const FilteredOptions = () => {
           <ul
             ref={setFilteredOptionsRef}
             role="listbox"
-            className={cn("navds-combobox__list-options")}
+            className="aksel-combobox__list-options"
           >
             {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
               <AddNewOption />

package/src/form/combobox/FilteredOptions/FilteredOptionsItem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CheckmarkIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
+import { cl } from "../../../util/className";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList } from "../combobox-utils";
@@ -27,8 +27,6 @@ const useTextHighlight = (text: string, searchTerm: string) => {
 };
 
 const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
-  const { cn } = useRenameCSS();
-
   const {
     inputProps: { id },
     size,
@@ -52,9 +50,9 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
 
   return (
     <li
-      className={cn("navds-combobox__list-item", {
-        "navds-combobox__list-item--focus": isActive,
-        "navds-combobox__list-item--selected": isInList(
+      className={cl("aksel-combobox__list-item", {
+        "aksel-combobox__list-item--focus": isActive,
+        "aksel-combobox__list-item--selected": isInList(
           option.value,
           selectedOptions,
         ),

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Loader } from "../../../loader";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
@@ -9,12 +8,11 @@ const LoadingMessage = () => {
   const {
     inputProps: { id },
   } = useInputContext();
-  const { cn } = useRenameCSS();
   const translate = useI18n("Combobox");
 
   return (
     <div
-      className={cn("navds-combobox__list-item--loading")}
+      className="aksel-combobox__list-item--loading"
       id={filteredOptionsUtil.getIsLoadingId(id)}
     >
       <Loader title={translate("loading")} />

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const MaxSelectedMessage = () => {
-  const { cn } = useRenameCSS();
   const {
     inputProps: { id },
   } = useInputContext();
@@ -15,7 +13,7 @@ const MaxSelectedMessage = () => {
 
   return (
     <div
-      className={cn("navds-combobox__list-item--max-selected")}
+      className="aksel-combobox__list-item--max-selected"
       id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
     >
       {translate("maxSelected", {

package/src/form/combobox/FilteredOptions/NoSearchHitsMessage.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const NoSearchHitsMessage = () => {
-  const { cn } = useRenameCSS();
-
   const translate = useI18n("Combobox");
 
   const {
@@ -15,7 +12,7 @@ const NoSearchHitsMessage = () => {
 
   return (
     <div
-      className={cn("navds-combobox__list-item--no-options")}
+      className="aksel-combobox__list-item--no-options"
       id={filteredOptionsUtil.getNoHitsId(id)}
     >
       {translate("noMatches")}

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { SetStateAction, useCallback, useMemo, useState } from "react";
+import { cl } from "../../../util/className";
 import { createStrictContext } from "../../../util/create-strict-context";
 import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";

package/src/form/combobox/Input/Input.tsx

@@ -4,8 +4,8 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { omit } from "../../../util";
+import { cl } from "../../../util/className";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
@@ -38,8 +38,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     { inputClassName, shouldShowSelectedOptions, placeholder, onBlur, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const internalRef = useRef<HTMLInputElement>(null);
     const mergedRefs = useMergeRefs(ref, internalRef);
     const {
@@ -289,12 +287,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         onKeyDown={handleKeyDown}
         autoComplete="off"
         placeholder={selectedOptions.length ? undefined : placeholder}
-        className={cn(
+        className={cl(
           inputClassName,
-          "navds-combobox__input",
-          "navds-body-short",
-          `navds-body-short--${size}`,
-          { "navds-combobox__input--hide-caret": hideCaret },
+          "aksel-combobox__input",
+          "aksel-body-short",
+          `aksel-body-short--${size}`,
+          { "aksel-combobox__input--hide-caret": hideCaret },
         )}
         aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
         aria-expanded={!!isListOpen}