@navikt/ds-react 7.15.0 → 7.16.0

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { ExpansionCardContext } from "./context";
 
@@ -12,6 +12,7 @@ export const ExpansionCardDescription = forwardRef<
   HTMLParagraphElement,
   ExpansionCardDescriptionProps
 >(({ className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
 
   if (panelContext === null) {
@@ -26,7 +27,7 @@ export const ExpansionCardDescription = forwardRef<
       {...rest}
       as="p"
       ref={ref}
-      className={cl("navds-link-panel__description", className)}
+      className={cn("navds-link-panel__description", className)}
       size={panelContext.size}
     />
   );

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
@@ -13,6 +13,7 @@ const ExpansionCardHeader = forwardRef<
   HTMLDivElement,
   ExpansionCardHeaderProps
 >(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
   const translate = useI18n("global");
 
@@ -27,19 +28,21 @@ const ExpansionCardHeader = forwardRef<
     <div
       ref={ref}
       {...rest}
-      className={cl("navds-expansioncard__header", className)}
+      className={cn("navds-expansioncard__header", className)}
       data-open={panelContext.open}
     >
-      <div className="navds-expansioncard__header-content">{children}</div>
+      <div className={cn("navds-expansioncard__header-content")}>
+        {children}
+      </div>
 
       <button
-        className="navds-expansioncard__header-button"
+        className={cn("navds-expansioncard__header-button")}
         onClick={panelContext.toggleOpen}
         type="button"
         aria-expanded={panelContext.open}
       >
         <ChevronDownIcon
-          className="navds-expansioncard__header-chevron"
+          className={cn("navds-expansioncard__header-chevron")}
           title={translate("showMore")}
         />
       </button>

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface ExpansionCardTitleProps
@@ -16,19 +16,23 @@ export const ExpansionCardTitle: OverridableComponent<
   ExpansionCardTitleProps,
   HTMLHeadingElement
 > = forwardRef(
-  ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        "navds-expansioncard__title",
-        `navds-expansioncard__title--${size}`,
-        "navds-heading",
-        `navds-heading--${size}`,
-        className,
-      )}
-    />
-  ),
+  ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cn(
+          "navds-expansioncard__title",
+          `navds-expansioncard__title--${size}`,
+          "navds-heading",
+          `navds-heading--${size}`,
+          className,
+        )}
+      />
+    );
+  },
 );
 
 export default ExpansionCardTitle;

package/src/form/ReadOnlyIcon.tsx

@@ -1,17 +1,24 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
-export const ReadOnlyIcon = () => (
-  <PadlockLockedFillIcon
-    aria-hidden
-    className="navds-form-field__readonly-icon"
-  />
-);
+export const ReadOnlyIcon = () => {
+  const { cn } = useRenameCSS();
+  return (
+    <PadlockLockedFillIcon
+      aria-hidden
+      className={cn("navds-form-field__readonly-icon")}
+    />
+  );
+};
 
-export const ReadOnlyIconWithTitle = () => (
-  <PadlockLockedFillIcon
-    title={useI18n("global")("readOnly")}
-    className="navds-form-field__readonly-icon"
-  />
-);
+export const ReadOnlyIconWithTitle = () => {
+  const { cn } = useRenameCSS();
+  return (
+    <PadlockLockedFillIcon
+      title={useI18n("global")("readOnly")}
+      className={cn("navds-form-field__readonly-icon")}
+    />
+  );
+};

package/src/form/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
@@ -9,6 +9,7 @@ import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
+    const { cn } = useRenameCSS();
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
 
     const labelId = useId();
@@ -16,7 +17,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           props.className,
           "navds-checkbox",
           `navds-checkbox--${size}`,
@@ -40,7 +41,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           ])}
           {...omit(inputProps, ["aria-invalid"])}
           type="checkbox"
-          className="navds-checkbox__input"
+          className={cn("navds-checkbox__input")}
           ref={(el) => {
             if (el) {
               el.indeterminate = props.indeterminate ?? false;
@@ -52,7 +53,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               ref.current = el;
             }
           }}
-          aria-labelledby={cl(
+          aria-labelledby={cn(
             labelId,
             !!props["aria-labelledby"] && props["aria-labelledby"],
             {
@@ -60,8 +61,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             },
           )}
         />
-        <label htmlFor={inputProps.id} className="navds-checkbox__label">
-          <span className="navds-checkbox__icon">
+        <label htmlFor={inputProps.id} className={cn("navds-checkbox__label")}>
+          <span className={cn("navds-checkbox__icon")}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="0.8125rem"
@@ -78,9 +79,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               />
             </svg>
           </span>
-          <span className="navds-checkbox__icon-indeterminate" />
+          <span className={cn("navds-checkbox__icon-indeterminate")} />
           <span
-            className={cl("navds-checkbox__content", {
+            className={cn("navds-checkbox__content", {
               "navds-sr-only": props.hideLabel,
             })}
           >
@@ -88,7 +89,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               as="span"
               id={labelId}
               size={size}
-              className="navds-checkbox__label-text"
+              className={cn("navds-checkbox__label-text")}
               aria-hidden
             >
               {!nested && readOnly && <ReadOnlyIconWithTitle />}
@@ -99,7 +100,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 as="span"
                 id={descriptionId}
                 size={size}
-                className="navds-form-field__subdescription navds-checkbox__description"
+                className={cn(
+                  "navds-form-field__subdescription navds-checkbox__description",
+                )}
                 aria-hidden
               >
                 {props.description}

package/src/form/checkbox/CheckboxGroup.tsx

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

package/src/form/combobox/Combobox.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
@@ -18,6 +18,8 @@ export const Combobox = forwardRef<
 >((props, ref) => {
   const { className, hideLabel = false, description, label, ...rest } = props;
 
+  const { cn } = useRenameCSS();
+
   const { toggleIsListOpen } = useFilteredOptionsContext();
 
   const {
@@ -42,7 +44,7 @@ export const Combobox = forwardRef<
       <Label
         htmlFor={inputProps.id}
         size={size}
-        className={cl("navds-form-field__label", {
+        className={cn("navds-form-field__label", {
           "navds-sr-only": hideLabel,
         })}
       >
@@ -52,7 +54,7 @@ export const Combobox = forwardRef<
       {!!description && (
         <BodyShort
           as="div"
-          className={cl("navds-form-field__description", {
+          className={cn("navds-form-field__description", {
             "navds-sr-only": hideLabel,
           })}
           id={inputDescriptionId}
@@ -61,12 +63,12 @@ export const Combobox = forwardRef<
           {description}
         </BodyShort>
       )}
-      <div className="navds-combobox__wrapper">
+      <div className={cn("navds-combobox__wrapper")}>
         <InputController ref={ref} {...rest} />
         <FilteredOptions />
       </div>
       <div
-        className="navds-form-field__error"
+        className={cn("navds-form-field__error")}
         id={errorId}
         aria-relevant="additions removals"
         aria-live="polite"

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { useRef, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useInputContext } from "./Input/Input.context";
 
 type ComboboxWrapperProps = {
@@ -22,6 +22,7 @@ const ComboboxWrapper = ({
   inputSize,
   toggleIsListOpen,
 }: ComboboxWrapperProps) => {
+  const { cn } = useRenameCSS();
   const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -47,7 +48,7 @@ const ComboboxWrapper = ({
   return (
     <div
       ref={wrapperRef}
-      className={cl(
+      className={cn(
         className,
         "navds-form-field",
         `navds-form-field--${inputSize}`,

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

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort, Label } from "../../../typography";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
@@ -10,20 +10,26 @@ import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const AddNewOption = () => {
+  const { cn } = useRenameCSS();
+
   const {
     inputProps: { id },
     size,
     searchTerm,
   } = useInputContext();
+
   const {
     setIsMouseLastUsedInputDevice,
     toggleIsListOpen,
     activeDecendantId,
     virtualFocus,
   } = useFilteredOptionsContext();
+
   const { isMultiSelect, selectedOptions, toggleOption } =
     useSelectedOptionsContext();
+
   const translate = useI18n("Combobox");
+
   return (
     <li
       tabIndex={-1}
@@ -41,7 +47,7 @@ const AddNewOption = () => {
           toggleIsListOpen(false);
       }}
       id={filteredOptionsUtil.getAddNewOptionId(id)}
-      className={cl(
+      className={cn(
         "navds-combobox__list-item navds-combobox__list-item--new-option",
         {
           "navds-combobox__list-item--new-option--focus":

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

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import AddNewOption from "./AddNewOption";
@@ -11,9 +11,11 @@ import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
+  const { cn } = useRenameCSS();
   const {
     inputProps: { id },
   } = useInputContext();
+
   const {
     allowNewValues,
     isLoading,
@@ -23,6 +25,7 @@ const FilteredOptions = () => {
     isMouseLastUsedInputDevice,
     isValueNew,
   } = useFilteredOptionsContext();
+
   const { maxSelected, isMultiSelect } = useSelectedOptionsContext();
 
   const shouldRenderNonSelectables =
@@ -36,7 +39,7 @@ const FilteredOptions = () => {
 
   return (
     <div
-      className={cl("navds-combobox__list", {
+      className={cn("navds-combobox__list", {
         "navds-combobox__list--closed": !isListOpen,
         "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
@@ -44,7 +47,10 @@ const FilteredOptions = () => {
       tabIndex={-1}
     >
       {shouldRenderNonSelectables && (
-        <div className="navds-combobox__list_non-selectables" role="status">
+        <div
+          className={cn("navds-combobox__list_non-selectables")}
+          role="status"
+        >
           {isMultiSelect && maxSelected.limit && <MaxSelectedMessage />}
           {isLoading && <LoadingMessage />}
           {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
@@ -58,7 +64,7 @@ const FilteredOptions = () => {
         <ul
           ref={setFilteredOptionsRef}
           role="listbox"
-          className="navds-combobox__list-options"
+          className={cn("navds-combobox__list-options")}
         >
           {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
             <AddNewOption />

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

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React from "react";
 import { CheckmarkIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -23,6 +23,8 @@ const useTextHighlight = (text: string, searchTerm: string) => {
 };
 
 const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
+  const { cn } = useRenameCSS();
+
   const {
     inputProps: { id },
     size,
@@ -43,7 +45,7 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
 
   return (
     <li
-      className={cl("navds-combobox__list-item", {
+      className={cn("navds-combobox__list-item", {
         "navds-combobox__list-item--focus":
           activeDecendantId ===
           filteredOptionsUtil.getOptionId(id, option.label),

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

@@ -1,5 +1,6 @@
 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";
@@ -8,10 +9,12 @@ const LoadingMessage = () => {
   const {
     inputProps: { id },
   } = useInputContext();
+  const { cn } = useRenameCSS();
   const translate = useI18n("Combobox");
+
   return (
     <div
-      className="navds-combobox__list-item--loading"
+      className={cn("navds-combobox__list-item--loading")}
       id={filteredOptionsUtil.getIsLoadingId(id)}
     >
       <Loader title={translate("loading")} />

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

@@ -1,10 +1,12 @@
 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();
@@ -13,7 +15,7 @@ const MaxSelectedMessage = () => {
 
   return (
     <div
-      className="navds-combobox__list-item--max-selected"
+      className={cn("navds-combobox__list-item--max-selected")}
       id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
     >
       {translate("maxSelected", {

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

@@ -1,14 +1,18 @@
 import React from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const NoSearchHitsMessage = () => {
+  const { cn } = useRenameCSS();
+
   const {
     inputProps: { id },
   } = useInputContext();
+
   return (
     <div
-      className="navds-combobox__list-item--no-options"
+      className={cn("navds-combobox__list-item--no-options")}
       id={filteredOptionsUtil.getNoHitsId(id)}
     >
       Ingen søketreff

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

@@ -1,10 +1,10 @@
-import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
   useCallback,
   useRef,
 } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { omit } from "../../../util";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { useMergeRefs } from "../../../util/hooks";
@@ -38,6 +38,8 @@ 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 {
@@ -287,7 +289,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         onKeyDown={handleKeyDown}
         autoComplete="off"
         placeholder={selectedOptions.length ? undefined : placeholder}
-        className={cl(
+        className={cn(
           inputClassName,
           "navds-combobox__input",
           "navds-body-short",

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

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useMergeRefs } from "../../../util/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
@@ -37,6 +37,8 @@ export const InputController = forwardRef<
     ...rest
   } = props;
 
+  const { cn } = useRenameCSS();
+
   const {
     focusInput,
     inputProps,
@@ -54,7 +56,7 @@ export const InputController = forwardRef<
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
-      className={cl("navds-combobox__wrapper-inner navds-text-field__input", {
+      className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
         "navds-combobox__wrapper-inner--virtually-unfocused":
           activeDecendantId !== undefined,
       })}

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

@@ -1,9 +1,11 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input.context";
 
 export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
+  const { cn } = useRenameCSS();
   const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
   const { focusInput } = useInputContext();
 
@@ -14,7 +16,7 @@ export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
         toggleIsListOpen();
         focusInput();
       }}
-      className="navds-combobox__button-toggle-list"
+      className={cn("navds-combobox__button-toggle-list")}
       aria-hidden
     >
       {isListOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Chips } from "../../../chips";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useInputContext } from "../Input/Input.context";
 import { ComboboxOption } from "../types";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
@@ -11,12 +12,14 @@ interface SelectedOptionsProps {
 }
 
 const Option = ({ option }: { option: ComboboxOption }) => {
+  const { cn } = useRenameCSS();
+
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput, readOnly, inputProps } = useInputContext();
 
   if (!isMultiSelect) {
     return (
-      <div className="navds-combobox__selected-options--no-bg">
+      <div className={cn("navds-combobox__selected-options--no-bg")}>
         {option.label}
       </div>
     );
@@ -48,11 +51,12 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
   size,
   children,
 }) => {
+  const { cn } = useRenameCSS();
   const { value } = useInputContext();
   const { isMultiSelect } = useSelectedOptionsContext();
   return (
     <Chips
-      className="navds-combobox__selected-options"
+      className={cn("navds-combobox__selected-options")}
       size={size}
       data-type={isMultiSelect ? "multiple" : "single"}
     >