[CPT-1478] Add enableResetSearch prop to Select and QB

.changeset/great-pens-do.md

@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-query-builder': minor
+'@toptal/picasso': minor
+---
+
+- add `enableResetSearch` prop to `Select` component and expose it for `QueryBuilder`

packages/picasso-query-builder/src/MultiSelect/MultiSelect.tsx

@@ -12,6 +12,7 @@ import styles from './styles'
 type Props = BaseVersatileSelectorProps &
   ValueEditorValidationProps & {
     valueEditorTestId?: string
+    enableResetSearch?: boolean
   }
 
 const useStyles = makeStyles(styles)
@@ -27,6 +28,7 @@ export const MultiSelect = ({
   className,
   fieldData,
   valueEditorTestId,
+  enableResetSearch,
 }: Props) => {
   const classes = useStyles()
 
@@ -57,6 +59,7 @@ export const MultiSelect = ({
         value={values}
         status={hasError ? 'error' : undefined}
         data-testid={valueEditorTestId}
+        enableResetSearch={enableResetSearch}
       />
     </Container>
   )

packages/picasso-query-builder/src/QueryBuilder/story/Default.example.tsx

@@ -199,6 +199,7 @@ const fields: Field[] = [
     name: 'alsoPlays',
     label: 'Also plays',
     valueEditorType: 'multiselect',
+    enableResetSearch: true,
     values: musicalInstruments,
     defaultValue: 'More cowbell',
   },

packages/picasso-query-builder/src/ValueEditor/ValueEditor.tsx

@@ -65,6 +65,7 @@ export const ValueEditor = ({
           touched={touched}
           fieldData={fieldData}
           valueEditorTestId={valueEditorTestId}
+          enableResetSearch={fieldData.enableResetSearch}
         />
       )
     case 'select':

packages/picasso/src/NonNativeSelect/NonNativeSelect.tsx

@@ -64,6 +64,7 @@ export const NonNativeSelect = documentable(
         enableReset,
         popperContainer,
         enableAutofill,
+        enableResetSearch,
         autoComplete,
         searchPlaceholder,
         searchThreshold = DEFAULT_SEARCH_THRESHOLD,
@@ -135,6 +136,7 @@ export const NonNativeSelect = documentable(
               </InputAdornment>
             }
             placeholder={searchPlaceholder}
+            enableReset={enableResetSearch}
             size={size}
             value={filterOptionsValue}
             testIds={testIds}

packages/picasso/src/NonNativeSelect/test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 /* eslint-disable max-lines */
 import React from 'react'
 import type { PicassoConfig } from '@toptal/picasso/test-utils'
@@ -169,6 +170,33 @@ describe('NonNativeSelect', () => {
     expect(queryByTestId('loader')).toBeInTheDocument()
   })
 
+  it('renders reset icon when `enableResetSearch` is set to true', () => {
+    const placeholder = 'Choose an option...'
+    const searchPlaceholder = 'Search for an option'
+
+    const { getByPlaceholderText, queryByTestId } = renderSelect({
+      options: OPTIONS,
+      placeholder,
+      searchPlaceholder,
+      searchThreshold: -1,
+      enableResetSearch: true,
+      testIds: {
+        resetButton: 'reset-search-input',
+      },
+    })
+
+    const selectInput = getByPlaceholderText(placeholder)
+
+    fireEvent.click(selectInput)
+
+    const searchInput = getByPlaceholderText(searchPlaceholder)
+
+    fireEvent.focus(searchInput)
+    fireEvent.change(searchInput, { target: { value: '3' } })
+
+    expect(queryByTestId('reset-search-input')).toBeInTheDocument()
+  })
+
   it('filters options based on entered value to the input field', () => {
     const placeholder = 'Choose an option...'
     const searchPlaceholder = 'Search for an option'

packages/picasso/src/Select/Select.tsx

@@ -73,6 +73,7 @@ Select.defaultProps = {
   searchPlaceholder: 'Search',
   native: false,
   status: 'default',
+  enableResetSearch: false,
 }
 
 export default Select

packages/picasso/src/Select/story/SearchBehavior.example.tsx

@@ -38,7 +38,7 @@ const SelectSearchBehaviourExample = () => {
           />
         </Form.Field>
       </Container>
-      <Container>
+      <Container right={SPACING_4}>
         <Form.Field>
           <Form.Label>Search threshold</Form.Label>
           <NumberInput
@@ -48,6 +48,21 @@ const SelectSearchBehaviourExample = () => {
           />
         </Form.Field>
       </Container>
+      <Container>
+        <Form.Field>
+          <Form.Label>Search with input reset</Form.Label>
+          <Select
+            onChange={handleChange}
+            value={value}
+            options={OPTIONS}
+            placeholder='Choose an option...'
+            width='auto'
+            enableResetSearch
+            searchThreshold={threshold}
+            data-testid='select'
+          />
+        </Form.Field>
+      </Container>
     </Container>
   )
 }

packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/index.ts

@@ -0,0 +1 @@
+export { default } from './use-search-reset-handler'

packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/test.ts

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react'
+
+import { getUseSelectPropsMock } from '../mocks'
+import useSearchResetHandler from './use-search-reset-handler'
+
+describe('useSearchResetHandler', () => {
+  it('handles reset', () => {
+    const props = getUseSelectPropsMock()
+    const { result } = renderHook(() => useSearchResetHandler(props))
+
+    result.current()
+
+    expect(props.selectState.setFilterOptionsValue).toHaveBeenCalledTimes(1)
+    expect(props.selectState.setFilterOptionsValue).toHaveBeenCalledWith('')
+  })
+})

packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/use-search-reset-handler.ts

@@ -0,0 +1,10 @@
+import type { ValueType, UseSelectProps } from '../../../types'
+
+const useSearchResetHandler =
+  <T extends ValueType, M extends boolean = false>({
+    selectState: { setFilterOptionsValue },
+  }: UseSelectProps<T, M>) =>
+  () =>
+    setFilterOptionsValue('')
+
+export default useSearchResetHandler

packages/picasso/src/SelectBase/hooks/use-select-props/use-select-props.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 import type {
   Option,
   ItemProps,
@@ -20,6 +21,7 @@ import useSearchChangeHandler from './use-search-change-handler'
 import useItemOnMouseDownHandler from './use-item-on-mouse-down-handler'
 import useItemOnMouseEnter from './use-item-on-mouse-enter-handler'
 import useItemOnClick from './use-item-on-click-handler'
+import useSearchResetHandler from './use-search-reset-handler'
 
 const useSelectProps = <T extends ValueType, M extends boolean = false>(
   props: UseSelectProps<T, M>
@@ -39,6 +41,7 @@ const useSelectProps = <T extends ValueType, M extends boolean = false>(
     ...props,
     handleSelect,
   })
+  const handleSearchReset = useSearchResetHandler(props)
   const handleSearchChange = useSearchChangeHandler(props)
   const handleItemOnMouseDown = useItemOnMouseDownHandler()
   const handleItemOnMouseEnter = useItemOnMouseEnter(props)
@@ -77,6 +80,7 @@ const useSelectProps = <T extends ValueType, M extends boolean = false>(
     onChange: handleSearchChange,
     onKeyDown: handleSearchKeyDown,
     onBlur: handleSearchBlur,
+    onResetClick: handleSearchReset,
   })
 
   return {

packages/picasso/src/SelectBase/types.ts

@@ -80,6 +80,8 @@ export interface SelectProps<
   size?: SizeType<'small' | 'medium' | 'large'>
   /** Whether to render reset icon which clears selected value */
   enableReset?: boolean
+  /** Whether to render reset icon which clears search input value */
+  enableResetSearch?: boolean
   popperContainer?: HTMLElement
   /** Defines the minimum options number to show the search
    * @default 10