Typescript support for Search (#660)

libraries/core-react/src/Search/Search.test.jsx → libraries/core-react/src/Search/Search.test.tsx

@@ -115,7 +115,7 @@ describe('Search', () => {
 
     rerender(<Search value="new" />)
 
-    const searchBox = screen.queryByRole('searchbox')
+    const searchBox = screen.queryByRole('searchbox') as HTMLInputElement
 
     expect(searchBox.value).toEqual('new')
   })

libraries/core-react/src/Search/Search.jsx → libraries/core-react/src/Search/Search.tsx

@@ -1,6 +1,4 @@
-// @ts-nocheck
 import React, { useState, useRef, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { search, close } from '@equinor/eds-icons'
 import { search as tokens } from './Search.tokens'
@@ -29,7 +27,12 @@ const {
   },
 } = tokens
 
-const Container = styled.span`
+type ContainerProps = {
+  isFocused: boolean
+  disabled: boolean
+}
+
+const Container = styled.span<ContainerProps>`
   position: relative;
   background: ${background};
   width: 100%;
@@ -121,7 +124,11 @@ const Input = styled.input`
     `}
 `
 
-const InsideButton = styled.div`
+type InsideButtonProps = {
+  isActive: boolean
+}
+
+const InsideButton = styled.div<InsideButtonProps>`
   display: flex;
   align-items: center;
   visibility: hidden;
@@ -162,17 +169,26 @@ const InsideButton = styled.div`
     `}
 `
 
+type Props = {
+  /** Disabled state */
+  disabled?: boolean
+  /** Default value for search field */
+  defaultValue?: string
+  /** Value for search field */
+  value?: string
+} & React.HTMLAttributes<HTMLInputElement>
+
 export const Search = React.forwardRef(function EdsSearch(
   {
     onChange,
-    defaultValue,
+    defaultValue = '',
     value,
-    className,
-    disabled,
+    className = '',
+    disabled = false,
     onBlur,
     onFocus,
     ...rest
-  },
+  }: Props,
   ref,
 ) {
   const isControlled = typeof value !== 'undefined'
@@ -237,13 +253,13 @@ export const Search = React.forwardRef(function EdsSearch(
       role: 'searchbox',
       'aria-label': 'search input',
       onBlur: (e) => {
-        handleBlur(e)
+        handleBlur()
         if (onBlur) {
           onBlur(e)
         }
       },
       onFocus: (e) => {
-        handleFocus(e)
+        handleFocus()
         if (onFocus) {
           onFocus(e)
         }
@@ -282,34 +298,4 @@ export const Search = React.forwardRef(function EdsSearch(
   )
 })
 
-Search.propTypes = {
-  /** @ignore */
-  className: PropTypes.string,
-  /** Placeholder */
-  placeholder: PropTypes.string,
-  /** Disabled state */
-  disabled: PropTypes.bool,
-  /** onChange handler */
-  onChange: PropTypes.func,
-  /** Default value for search field */
-  defaultValue: PropTypes.string,
-  /** Value for search field */
-  value: PropTypes.string,
-  /** onBlur handler */
-  onBlur: PropTypes.func,
-  /** onFocus handler */
-  onFocus: PropTypes.func,
-}
-
-Search.defaultProps = {
-  className: '',
-  placeholder: '',
-  disabled: false,
-  onChange: undefined,
-  defaultValue: '',
-  value: undefined,
-  onBlur: undefined,
-  onFocus: undefined,
-}
-
 Search.displayName = 'eds-search'

libraries/core-react/src/Search/index.js → libraries/core-react/src/Search/index.ts

@@ -1,2 +1 @@
-// @ts-nocheck
 export { Search } from './Search'