feat: add clearableInput component

src/app/sidebar/sidenav/SidenavFilter.tsx

@@ -1,18 +1,19 @@
 import i18n from '@dhis2/d2-i18n'
-import { Input, InputEventPayload, InputChangeHandler } from '@dhis2/ui'
+import { InputEventPayload, InputEventHandler } from '@dhis2/ui'
 import React, { useState } from 'react'
+import { ClearableInput } from '../../../components'
 import styles from './Sidenav.module.css'
 
 interface SidenavParentProps {
-    onChange?: InputChangeHandler
+    onChange?: InputEventHandler<React.SyntheticEvent>
 }
 
 export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
     const [value, setValue] = useState('')
 
     const handleChange = (
         input: InputEventPayload,
-        e: React.ChangeEvent<HTMLInputElement>
+        e: React.SyntheticEvent
     ) => {
         setValue(input.value ?? '')
         if (onChange) {
@@ -21,13 +22,20 @@ export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
     }
 
     return (
-        <Input
-            className={styles['sidenav-filter']}
-            dense
-            type="text"
-            value={value}
-            placeholder={i18n.t('Search for menu items')}
-            onChange={handleChange}
-        />
+        <div>
+            <ClearableInput
+                className={styles['sidenav-filter']}
+                dense
+                name="sidenav-filter"
+                type="text"
+                value={value}
+                placeholder={i18n.t('Search for menu items')}
+                onChange={handleChange}
+                showClearButton={value.length > 0}
+                onClear={(e) =>
+                    handleChange({ value: '', name: 'sidenav-filter' }, e)
+                }
+            />
+        </div>
     )
 }

src/components/index.tsx

@@ -7,3 +7,4 @@ export * from './metadataFormControls'
 export * from './SearchableSingleSelect'
 export * from './sectionList'
 export * from './standardForm'
+export * from './input'

src/components/input/ClearableInput.module.css

@@ -0,0 +1,17 @@
+.clearableInputWrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: flex-start;
+}
+
+.clearableInputWrapper > div {
+    flex-grow: 1;
+}
+
+.clearableInputClearButton {
+    cursor: pointer;
+    position: absolute;
+    display: inline-flex;
+    right: var(--spacers-dp16);
+}

src/components/input/ClearableInput.tsx

@@ -0,0 +1,36 @@
+import { IconCross16, Input, InputProps } from '@dhis2/ui'
+import cx from 'classnames'
+import React from 'react'
+import css from './ClearableInput.module.css'
+
+export type ClearableInputProps = InputProps & {
+    showClearButton?: boolean
+    className?: string
+    inputClassName?: string
+    clearButtonClassName?: string
+    onClear?: (e: React.MouseEvent<HTMLSpanElement>) => void
+}
+
+export const ClearableInput = ({
+    className,
+    inputClassName,
+    clearButtonClassName,
+    onClear,
+    showClearButton = true,
+    ...inputProps
+}: ClearableInputProps) => {
+    return (
+        <span className={cx(css.clearableInputWrapper, className)}>
+            <Input {...inputProps} className={inputClassName} />
+            <span
+                className={cx(
+                    css.clearableInputClearButton,
+                    clearButtonClassName
+                )}
+                onClick={onClear}
+            >
+                {showClearButton && <IconCross16 />}
+            </span>
+        </span>
+    )
+}

src/components/input/index.ts

@@ -0,0 +1 @@
+export * from './ClearableInput'