@navikt/ds-react 7.6.0 → 7.8.0

package/src/date/utils/locale.ts

@@ -16,7 +16,7 @@ export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
 
 /**
  * @private
- * Temporary for backwards compatibility with locale prop
+ * Temporary for backwards compatibility with locale prop. Can be removed when locale prop has been removed.
  */
 export const getTranslations = (locale: string | undefined) => {
   switch (locale) {
@@ -29,3 +29,19 @@ export const getTranslations = (locale: string | undefined) => {
       return undefined;
   }
 };
+
+/**
+ * @private
+ * Temporary for backwards compatibility with locale prop. Can be removed when locale prop has been removed.
+ */
+export const getGlobalTranslations = (locale: string | undefined) => {
+  switch (locale) {
+    case "nn":
+      return nn_translations.global;
+    case "en":
+    case "en-GB":
+      return en_translations.global;
+    default:
+      return undefined;
+  }
+};

package/src/form/combobox/ComboboxWrapper.tsx

@@ -27,21 +27,21 @@ const ComboboxWrapper = ({
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
-  function onFocusInsideWrapper(e) {
+  function onFocusInsideWrapper(event: React.FocusEvent<HTMLDivElement>) {
     if (
-      !wrapperRef.current?.contains(e.relatedTarget) &&
-      toggleOpenButtonRef?.current !== e.target
+      !wrapperRef.current?.contains(event.relatedTarget) &&
+      toggleOpenButtonRef?.current !== event.target
     ) {
       toggleIsListOpen(true);
       setHasFocusWithin(true);
     }
   }
 
-  function onBlurWrapper(e) {
-    if (!wrapperRef.current?.contains(e.relatedTarget)) {
+  function onBlurWrapper(event: React.FocusEvent<HTMLDivElement>) {
+    if (!wrapperRef.current?.contains(event.relatedTarget)) {
       toggleIsListOpen(false);
       setHasFocusWithin(false);
-      clearInput(e);
+      clearInput(event);
     }
   }
 

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

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
@@ -22,6 +23,7 @@ const AddNewOption = () => {
   } = useFilteredOptionsContext();
   const { isMultiSelect, selectedOptions, toggleOption } =
     useSelectedOptionsContext();
+  const translate = useI18n("Combobox");
   return (
     <li
       tabIndex={-1}
@@ -51,7 +53,7 @@ const AddNewOption = () => {
     >
       <PlusIcon aria-hidden />
       <BodyShort size={size}>
-        Legg til{" "}
+        {translate("addOption")}{" "}
         <Label as="span" size={size}>
           &#8220;{searchTerm}&#8221;
         </Label>

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

@@ -26,12 +26,12 @@ const FilteredOptions = () => {
   const { maxSelected } = useSelectedOptionsContext();
 
   const shouldRenderNonSelectables =
-    maxSelected?.isLimitReached || // Render maxSelected message
+    maxSelected.isLimitReached || // Render maxSelected message
     isLoading || // Render loading message
     (!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message
 
   const shouldRenderFilteredOptionsList =
-    (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option
+    (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
     filteredOptions.length > 0; // Render filtered options
 
   return (
@@ -45,7 +45,7 @@ const FilteredOptions = () => {
     >
       {shouldRenderNonSelectables && (
         <div className="navds-combobox__list_non-selectables" role="status">
-          {maxSelected?.isLimitReached && <MaxSelectedMessage />}
+          {maxSelected.isLimitReached && <MaxSelectedMessage />}
           {isLoading && <LoadingMessage />}
           {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
             <NoSearchHitsMessage />
@@ -60,7 +60,7 @@ const FilteredOptions = () => {
           role="listbox"
           className="navds-combobox__list-options"
         >
-          {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
+          {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
             <AddNewOption />
           )}
           {filteredOptions.map((option) => (

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

@@ -39,7 +39,7 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
   const [start, highlight, end] = useTextHighlight(option.label, searchTerm);
 
   const isDisabled = (_option: ComboboxOption) =>
-    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+    maxSelected.isLimitReached && !isInList(_option.value, selectedOptions);
 
   return (
     <li

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
@@ -7,12 +8,13 @@ const LoadingMessage = () => {
   const {
     inputProps: { id },
   } = useInputContext();
+  const translate = useI18n("Combobox");
   return (
     <div
       className="navds-combobox__list-item--loading"
       id={filteredOptionsUtil.getIsLoadingId(id)}
     >
-      <Loader title="Søker..." />
+      <Loader title={translate("loading")} />
     </div>
   );
 };

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
@@ -8,18 +9,17 @@ const MaxSelectedMessage = () => {
     inputProps: { id },
   } = useInputContext();
   const { maxSelected, selectedOptions } = useSelectedOptionsContext();
-
-  if (!maxSelected) {
-    return null;
-  }
+  const translate = useI18n("Combobox");
 
   return (
     <div
       className="navds-combobox__list-item--max-selected"
       id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
     >
-      {maxSelected.message ??
-        `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+      {translate("maxSelected", {
+        selected: selectedOptions.length,
+        limit: maxSelected.limit || 0,
+      })}
     </div>
   );
 };

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

@@ -142,13 +142,13 @@ const FilteredOptionsProvider = ({
       }
       virtualFocus.resetFocus();
       if (newState ?? !isInternalListOpen) {
-        setHideCaret(!!maxSelected?.isLimitReached);
+        setHideCaret(maxSelected.isLimitReached);
       }
       setInternalListOpen((oldState) => newState ?? !oldState);
     },
     [
       virtualFocus,
-      maxSelected?.isLimitReached,
+      maxSelected.isLimitReached,
       isInternalListOpen,
       setHideCaret,
       disabled,
@@ -178,7 +178,7 @@ const FilteredOptionsProvider = ({
       }
     }
     const maybeMaxSelectedOptionsId =
-      maxSelected?.isLimitReached &&
+      maxSelected.isLimitReached &&
       filteredOptionsUtils.getMaxSelectedOptionsId(id);
 
     return (
@@ -188,7 +188,7 @@ const FilteredOptionsProvider = ({
   }, [
     isListOpen,
     isLoading,
-    maxSelected?.isLimitReached,
+    maxSelected.isLimitReached,
     value,
     partialAriaDescribedBy,
     shouldAutocomplete,

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

@@ -15,7 +15,7 @@ interface InputContextValue extends FormFieldType {
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
-  toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
+  toggleOpenButtonRef: React.RefObject<HTMLDivElement>;
   hideCaret: boolean;
   setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -72,7 +72,7 @@ const InputProvider = ({ children, value: props }: Props) => {
     "comboboxfield",
   );
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const toggleOpenButtonRef = useRef<HTMLButtonElement>(null);
+  const toggleOpenButtonRef = useRef<HTMLDivElement>(null);
   const [internalValue, setInternalValue] = useState<string>(defaultValue);
   const [hideCaret, setHideCaret] = useState(false);
 
@@ -93,7 +93,7 @@ const InputProvider = ({ children, value: props }: Props) => {
   );
 
   const clearInput = useCallback(
-    (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
+    (event: React.PointerEvent | React.KeyboardEvent | React.FocusEvent) => {
       onClear?.(event);
       externalOnChange?.("");
       setInternalValue("");

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

@@ -279,7 +279,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         value={value}
         onBlur={composeEventHandlers(onBlur, virtualFocus.resetFocus)}
         onClick={() => {
-          setHideCaret(!!maxSelected?.isLimitReached);
+          setHideCaret(maxSelected.isLimitReached);
           value !== searchTerm && onChange(value);
         }}
         onInput={onChangeHandler}

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

@@ -1,7 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { XMarkIcon } from "@navikt/aksel-icons";
 import { useMergeRefs } from "../../../util/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
@@ -11,7 +10,6 @@ import Input from "./Input";
 import { useInputContext } from "./Input.context";
 import ToggleListButton from "./ToggleListButton";
 
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 export const InputController = forwardRef<
   HTMLInputElement,
   Omit<
@@ -28,20 +26,19 @@ export const InputController = forwardRef<
   >
 >((props, ref) => {
   const {
-    clearButton = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
+    clearButton,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
     clearButtonLabel,
     toggleListButton = true,
-    toggleListButtonLabel,
     inputClassName,
     shouldShowSelectedOptions = true,
     ...rest
   } = props;
 
   const {
-    clearInput,
     focusInput,
     inputProps,
-    value,
     size = "medium",
     inputRef,
     toggleOpenButtonRef,
@@ -54,6 +51,7 @@ export const InputController = forwardRef<
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       className={cl("navds-combobox__wrapper-inner navds-text-field__input", {
         "navds-combobox__wrapper-inner--virtually-unfocused":
@@ -81,27 +79,7 @@ export const InputController = forwardRef<
           />
         </SelectedOptions>
       )}
-      <div>
-        {value && clearButton && (
-          <button
-            type="button"
-            onClick={clearInput}
-            className="navds-combobox__button-clear"
-            tabIndex={-1}
-          >
-            <span className="navds-sr-only">
-              {clearButtonLabel ? clearButtonLabel : "Tøm"}
-            </span>
-            <XMarkIcon aria-hidden />
-          </button>
-        )}
-        {toggleListButton && (
-          <ToggleListButton
-            toggleListButtonLabel={toggleListButtonLabel}
-            ref={toggleOpenButtonRef}
-          />
-        )}
-      </div>
+      {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
     </div>
   );
 });

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

@@ -3,38 +3,22 @@ import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input.context";
 
-interface ToggleListButtonProps {
-  toggleListButtonLabel?: string;
-}
-
-export const ToggleListButton = forwardRef<
-  HTMLButtonElement,
-  ToggleListButtonProps
->(({ toggleListButtonLabel }, ref) => {
+export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
   const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
   const { focusInput } = useInputContext();
+
   return (
-    <button
-      type="button"
-      onPointerUp={() => {
+    <div
+      ref={ref}
+      onClick={() => {
         toggleIsListOpen();
         focusInput();
       }}
-      onKeyDown={({ key }) => key === "Enter" && toggleIsListOpen()}
       className="navds-combobox__button-toggle-list"
-      aria-expanded={isListOpen}
-      tabIndex={-1}
-      ref={ref}
+      aria-hidden
     >
-      <span className="navds-sr-only">
-        {toggleListButtonLabel ?? "Alternativer"}
-      </span>
-      {isListOpen ? (
-        <ChevronUpIcon aria-hidden />
-      ) : (
-        <ChevronDownIcon aria-hidden />
-      )}
-    </button>
+      {isListOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+    </div>
   );
 });
 

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

@@ -14,12 +14,6 @@ const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput, readOnly, inputProps } = useInputContext();
 
-  const onClick = (e) => {
-    e.stopPropagation();
-    removeSelectedOption(option);
-    focusInput();
-  };
-
   if (!isMultiSelect) {
     return (
       <div className="navds-combobox__selected-options--no-bg">
@@ -28,12 +22,24 @@ const Option = ({ option }: { option: ComboboxOption }) => {
     );
   }
 
-  return readOnly || inputProps.disabled ? (
-    <Chips.Toggle variant="neutral" checkmark={false} as="div">
+  if (readOnly || inputProps.disabled) {
+    return (
+      <Chips.Toggle variant="neutral" checkmark={false} as="div">
+        {option.label}
+      </Chips.Toggle>
+    );
+  }
+
+  return (
+    <Chips.Removable
+      onClick={(event) => {
+        event.stopPropagation();
+        removeSelectedOption(option);
+        focusInput();
+      }}
+    >
       {option.label}
-    </Chips.Toggle>
-  ) : (
-    <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>
+    </Chips.Removable>
   );
 };
 

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

@@ -12,7 +12,7 @@ type SelectedOptionsContextValue = {
   removeSelectedOption: (option: ComboboxOption) => void;
   prevSelectedOptions?: ComboboxOption[];
   selectedOptions: ComboboxOption[];
-  maxSelected?: ComboboxProps["maxSelected"] & { isLimitReached: boolean };
+  maxSelected: { limit: number | undefined; isLimitReached: boolean };
   setSelectedOptions: (any) => void;
   toggleOption: (
     option: ComboboxOption,
@@ -101,14 +101,17 @@ const SelectedOptionsProvider = ({
     [customOptions, onToggleSelected, removeCustomOption],
   );
 
+  const maxSelectedLimit =
+    typeof maxSelected === "object" ? maxSelected.limit : maxSelected;
   const isLimitReached =
-    (!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit) ||
-    (!isMultiSelect && selectedOptions.length > 0);
+    !!maxSelectedLimit && selectedOptions.length >= maxSelectedLimit;
+  const newHideCaret =
+    isLimitReached || (!isMultiSelect && selectedOptions.length > 0);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this effect when selectedOptions changes to match the view with the selected options.
   useEffect(() => {
-    setHideCaret(isLimitReached);
-  }, [isLimitReached, selectedOptions, setHideCaret]);
+    setHideCaret(newHideCaret);
+  }, [newHideCaret, selectedOptions, setHideCaret]);
 
   const toggleOption = useCallback(
     (
@@ -142,8 +145,8 @@ const SelectedOptionsProvider = ({
     selectedOptions,
     setSelectedOptions,
     toggleOption,
-    maxSelected: maxSelected && {
-      ...maxSelected,
+    maxSelected: {
+      limit: maxSelectedLimit,
       isLimitReached,
     },
   };

package/src/form/combobox/__tests__/combobox.test.tsx

@@ -3,6 +3,7 @@ import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { describe, expect, test, vi } from "vitest";
+import nb from "../../../util/i18n/locales/nb";
 import { ComboboxProps, UNSAFE_Combobox } from "../index";
 
 const options = [
@@ -73,7 +74,7 @@ describe("Render combobox", () => {
     test("Should show loading icon when loading (used for async search)", async () => {
       render(<App options={[]} isListOpen isLoading />);
 
-      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+      expect(await screen.findByText(nb.Combobox.loading)).toBeInTheDocument();
     });
 
     test("Should not select previous focused element when closes", async () => {

package/src/form/combobox/types.ts

@@ -45,15 +45,11 @@ export interface ComboboxProps
    */
   allowNewValues?: boolean;
   /**
-   * Adds a button to clear the input value when not empty.
-   * NB: Will not clear selected values.
-   * @default true
+   * @deprecated The clear button has been removed. This prop has no effect.
    */
   clearButton?: boolean;
   /**
-   * Custom name for the clear button. Requires `clearButton` to be `true`.
-   *
-   * @default "Tøm"
+   * @deprecated The clear button has been removed. This prop has no effect.
    */
   clearButtonLabel?: string;
   /**
@@ -102,7 +98,7 @@ export interface ComboboxProps
    * @param event
    */
   onClear?: (
-    event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent,
+    event: React.PointerEvent | React.KeyboardEvent | React.FocusEvent,
   ) => void;
   /**
    * Callback function triggered whenever an option is selected or de-selected.
@@ -124,18 +120,15 @@ export interface ComboboxProps
    */
   selectedOptions?: string[] | ComboboxOption[];
   /**
-   * Options for the maximum number of selected options.
+   * Maximum number of selected options.
+   * @example maxSelected={3}
    */
-  maxSelected?: {
-    /**
-     * The limit for maximum selected options
-     */
-    limit: number;
-    /**
-     * Override the message to display when the limit for maximum selected options has been reached
-     */
-    message?: string;
-  };
+  maxSelected?:
+    | {
+        /** @deprecated Provide a number instead of an object */
+        limit: number;
+      }
+    | number;
   /**
    * Set to `true` to enable inline autocomplete.
    *
@@ -154,12 +147,6 @@ export interface ComboboxProps
    * @default true
    */
   toggleListButton?: boolean;
-  /**
-   * Custom name for the toggle list-button. Requires "toggleListButton" to be `true`.
-   *
-   * @default "Alternativer"
-   */
-  toggleListButtonLabel?: string;
   /**
    * Set this to override the value of the input field.
    *

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { OverridableComponent } from "../../util/types";
 
-// export type FormSummaryEditProps = Partial<LinkProps>;
 export interface FormSummaryEditProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
@@ -22,17 +22,18 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
-> = forwardRef(
-  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+> = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
+  const translate = useI18n("FormSummary");
+  return (
     <Link
       ref={ref}
       as={as}
       {...rest}
       className={cl("navds-form-summary__edit", className)}
     >
-      {children}
+      {children || translate("editAnswer")}
     </Link>
-  ),
-);
+  );
+});
 
 export default FormSummaryEditLink;

package/src/form/search/Search.tsx

@@ -6,6 +6,8 @@ import React, {
   useState,
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../button";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -50,7 +52,8 @@ export interface SearchProps
   onSearchClick?: (value: string) => void;
   /**
    * Sets the `aria-label` for the clear button.
-   * @default "Tøm"
+   * @default "Tøm feltet"
+   * @deprecated Use `<Provider />`-component
    */
   clearButtonLabel?: string;
   /**
@@ -122,6 +125,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
     const translate = useI18n("Search");
@@ -142,6 +147,34 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onSearchClick?.(`${value ?? internalValue}`);
     };
 
+    const showClearButton =
+      clearButton && !inputProps.disabled && (value ?? internalValue);
+
+    const ClearButton = () =>
+      themeContext ? (
+        <Button
+          className="navds-search__button-clear"
+          variant="tertiary-neutral"
+          size={size === "medium" ? "small" : "xsmall"}
+          icon={<XMarkIcon aria-hidden />}
+          title={clearButtonLabel || translate("clear")}
+          hidden={!showClearButton}
+          onClick={(event) => handleClear({ trigger: "Click", event })}
+        />
+      ) : (
+        <button
+          type="button"
+          onClick={(event) => handleClear({ trigger: "Click", event })}
+          className="navds-search__button-clear"
+          hidden={!showClearButton}
+        >
+          <span className="navds-sr-only">
+            {clearButtonLabel || translate("clear")}
+          </span>
+          <XMarkIcon aria-hidden />
+        </button>
+      );
+
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
@@ -210,18 +243,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
-            {(value ?? internalValue) && clearButton && (
-              <button
-                type="button"
-                onClick={(event) => handleClear({ trigger: "Click", event })}
-                className="navds-search__button-clear"
-              >
-                <span className="navds-sr-only">
-                  {clearButtonLabel || translate("clear")}
-                </span>
-                <XMarkIcon aria-hidden />
-              </button>
-            )}
+            <ClearButton />
           </div>
           <SearchContext.Provider
             value={{

package/src/form/textarea/Textarea.tsx

@@ -54,6 +54,7 @@ export interface TextareaProps
   UNSAFE_autoScrollbar?: boolean;
   /**
    * i18n-translations for counter-text
+   * @deprecated Use `<Provider />`-component
    */
   i18n?: {
     /** @default tegn igjen */