import React , { forwardRef , useContext } from "react" ; import cl from "classnames" ; import { SearchFieldContext } from "./SearchField" ; import { Button , ButtonProps } from "../.." ; export interface SearchFieldClearButtonProps extends Omit < ButtonProps , "size" > { example children : React . ReactNode ; default variant ? : "primary" | "secondary" ; } export type SearchFieldClearButtonType = React . ForwardRefExoticComponent < SearchFieldClearButtonProps & React . RefAttributes < HTMLButtonElement > > ; const SearchFieldClearButton = forwardRef ( ( { className , variant = "secondary" , disabled , ... rest } , ref ) => { const searchField = useContext ( SearchFieldContext ) ; if ( searchField === null ) { console . warn ( "SearchFieldClearButton has to be wrapped in <SearchField />" ) ; return null ; } const { size , inputProps } = searchField ; return ( < Button { ... rest } ref = { ref } className = { cl ( className , "navds-search-field__clear-button" ) } size = { size } variant = { variant } disabled = { disabled ?? inputProps ?. disabled } />); } ) ; export default SearchFieldClearButton ;