Added a onClear callback function to SearchField

Author: karleinarb

src/ui/SearchField/SearchField.stories.js

@@ -95,6 +95,7 @@ export function Basic () {
           onSearch={e => onSearch(e)}
           showClear={boolean('Vis tøm', true)}
           showSearch={boolean('Vis søkeknapp', true)}
+          onClear={() => console.log('onClear triggered')}
         />
         <h3>Rounded</h3>
         <SearchField
@@ -104,6 +105,7 @@ export function Basic () {
           rounded
           showClear={boolean('Vis tøm', true)}
           showSearch={boolean('Vis søkeknapp', true)}
+          onClear={() => console.log('onClear triggered')}
         />
       </div>
       <br />

src/ui/SearchField/index.js

@@ -9,7 +9,7 @@ import { Icon } from '../Icon'
 import { Paragraph } from '../Typography'
 import { nanoid } from 'nanoid'
 
-export function SearchField ({ placeholder, value, debounceMs, onSelected, rounded, onSearch, onChange, className, items, itemMapping, showDropdown, showClear, showSearch, onShowDropdown, onClickOutside, loading, loadingText, emptyText, style, onKeyDown, children, onBlur, onFocus, ...props }) {
+export function SearchField ({ placeholder, value, debounceMs, onSelected, rounded, onSearch, onChange, className, items, itemMapping, showDropdown, showClear, showSearch, onShowDropdown, onClickOutside, loading, loadingText, emptyText, style, onClear, onKeyDown, children, onBlur, onFocus, ...props }) {
   /*
     State
   */
@@ -198,6 +198,7 @@ export function SearchField ({ placeholder, value, debounceMs, onSelected, round
   const handleClear = () => {
     handleChange({ target: { value: '' } })
     handleItemClick(undefined, undefined)
+    if (onClear && typeof onClear === 'function') onClear()
   }
 
   // Handles clicking the searchResult items
@@ -340,6 +341,7 @@ SearchField.propTypes = {
   ]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
+  onClear: PropTypes.func,
   onClickOutside: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,