diff --git a/.changeset/soft-planets-peel.md b/.changeset/soft-planets-peel.md new file mode 100644 index 0000000000..5b056089b2 --- /dev/null +++ b/.changeset/soft-planets-peel.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Search: Remove redundant role attribute diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx index 6fd179210a..5144da0d6f 100644 --- a/@navikt/core/react/src/form/search/Search.tsx +++ b/@navikt/core/react/src/form/search/Search.tsx @@ -2,7 +2,6 @@ import cl from "clsx"; import React, { InputHTMLAttributes, forwardRef, - useCallback, useRef, useState, } from "react"; @@ -10,6 +9,7 @@ import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons"; import { BodyShort, ErrorMessage, Label } from "../../typography"; import { omit } from "../../util"; import { useMergeRefs } from "../../util/hooks/useMergeRefs"; +import { useI18n } from "../../util/i18n/i18n.context"; import { FormFieldProps, useFormField } from "../useFormField"; import SearchButton, { SearchButtonType } from "./SearchButton"; import { SearchContext } from "./context"; @@ -68,13 +68,9 @@ export interface SearchProps */ variant?: "primary" | "secondary" | "simple"; /** - * Exposes the HTML size attribute. Specifies the width of the element, in characters. + * HTML size attribute. Specifies the width of the input, in characters. */ htmlSize?: number | string; - /* - * Exposes role attribute. - */ - role?: string; } interface SearchComponent @@ -123,31 +119,24 @@ export const Search = forwardRef( onChange, onSearchClick, htmlSize, - role, ...rest } = props; const searchRef = useRef(null); const mergedRef = useMergeRefs(searchRef, ref); - + const translate = useI18n("Search"); const [internalValue, setInternalValue] = useState(defaultValue ?? ""); - const handleChange = useCallback( - (v: string) => { - value === undefined && setInternalValue(v); - onChange?.(v); - }, - [onChange, value], - ); + const handleChange = (newValue: string) => { + value === undefined && setInternalValue(newValue); + onChange?.(newValue); + }; - const handleClear = useCallback( - (event: SearchClearEvent) => { - onClear?.(event); - handleChange(""); - searchRef.current?.focus?.(); - }, - [handleChange, onClear], - ); + const handleClear = (clearEvent: SearchClearEvent) => { + onClear?.(clearEvent); + handleChange(""); + searchRef.current?.focus?.(); + }; const handleClick = () => { onSearchClick?.(`${value ?? internalValue}`); @@ -156,26 +145,22 @@ export const Search = forwardRef( return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ - if (e.key !== "Escape") { + onKeyDown={(event) => { + if (event.key !== "Escape") { return; } - searchRef.current?.value && - searchRef.current?.value !== "" && - e.preventDefault(); - - handleClear({ trigger: "Escape", event: e }); + searchRef.current?.value && event.preventDefault(); + handleClear({ trigger: "Escape", event }); }} className={cl( className, "navds-form-field", `navds-form-field--${size}`, "navds-search", - { "navds-search--error": hasError, - "navds-search--disabled": !!inputProps.disabled, - "navds-search--with-size": !!htmlSize, + "navds-search--disabled": inputProps.disabled, + "navds-search--with-size": htmlSize, }, )} > @@ -215,7 +200,6 @@ export const Search = forwardRef( value={value ?? internalValue} onChange={(e) => handleChange(e.target.value)} type="search" - role={role ?? "searchbox"} className={cl( className, "navds-search__input", @@ -229,11 +213,11 @@ export const Search = forwardRef( {(value ?? internalValue) && clearButton && ( diff --git a/@navikt/core/react/src/form/search/SearchButton.tsx b/@navikt/core/react/src/form/search/SearchButton.tsx index e21ddf07b2..8ebb7d4980 100644 --- a/@navikt/core/react/src/form/search/SearchButton.tsx +++ b/@navikt/core/react/src/form/search/SearchButton.tsx @@ -3,6 +3,7 @@ import React, { forwardRef, useContext } from "react"; import { MagnifyingGlassIcon } from "@navikt/aksel-icons"; import { Button, ButtonProps } from "../../button"; import { composeEventHandlers } from "../../util/composeEventHandlers"; +import { useI18n } from "../../util/i18n/i18n.context"; import { SearchContext } from "./context"; export interface SearchButtonProps @@ -19,6 +20,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent< const SearchButton: SearchButtonType = forwardRef( ({ className, children, disabled, onClick, ...rest }, ref) => { + const translate = useI18n("Search"); const context = useContext(SearchContext); if (context === null) { @@ -40,7 +42,9 @@ const SearchButton: SearchButtonType = forwardRef( onClick={composeEventHandlers(onClick, handleClick)} icon={ } > diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts index 687db5ffee..397e422790 100644 --- a/@navikt/core/react/src/util/i18n/locales/en.ts +++ b/@navikt/core/react/src/util/i18n/locales/en.ts @@ -37,4 +37,10 @@ export default { labelSuffix: "delete", }, }, + Search: { + clear: "Clear", + Button: { + search: "Search", + }, + }, } satisfies Translations; diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts index 988eea2593..89adf56b13 100644 --- a/@navikt/core/react/src/util/i18n/locales/nb.ts +++ b/@navikt/core/react/src/util/i18n/locales/nb.ts @@ -1,9 +1,5 @@ interface TranslationMap { - [component: string]: - | Record - | { - [subComponent: string]: Record; - }; + [component: string]: Record>; } export default { @@ -44,4 +40,10 @@ export default { labelSuffix: "slett", }, }, + Search: { + clear: "Tøm", + Button: { + search: "Søk", + }, + }, } satisfies TranslationMap; diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts index ac493cf2e0..9f24c42064 100644 --- a/@navikt/core/react/src/util/i18n/locales/nn.ts +++ b/@navikt/core/react/src/util/i18n/locales/nn.ts @@ -37,4 +37,10 @@ export default { labelSuffix: "slett", }, }, + Search: { + clear: "Tøm", + Button: { + search: "Søk", + }, + }, } satisfies Translations;