[CPT-1479] Enable select clear button for the qb (#4084)

* [CPT-1479] Enable select clear button for the qb * [CPT-1479] Change multiselect field type
toptal · Jan 12, 2024 · a1ee7a5 · a1ee7a5
1 parent 349ec37
commit a1ee7a5
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/few-buckets-knock.md b/.changeset/few-buckets-knock.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-query-builder': minor
+---
+
+- add `enableReset` property for `multiselect` filter type
diff --git a/packages/picasso-query-builder/package.json b/packages/picasso-query-builder/package.json
@@ -23,7 +23,7 @@
     "url": "https://github.com/toptal/picasso/issues"
   },
   "peerDependencies": {
-    "@toptal/picasso": ">=38.0.0",
+    "@toptal/picasso": "^42.0.0",
     "react": ">=16.12.0 < 19.0.0",
     "react-dom": ">=16.12.0 < 19.0.0",
     "typescript": "~4.7.0"

diff --git a/packages/picasso-query-builder/src/MultiSelect/MultiSelect.tsx b/packages/picasso-query-builder/src/MultiSelect/MultiSelect.tsx
@@ -57,6 +57,7 @@ export const MultiSelect = ({
         value={values}
         status={hasError ? 'error' : undefined}
         data-testid={valueEditorTestId}
+        enableReset={fieldData?.enableReset}
         enableResetSearch={fieldData?.enableResetSearch}
       />
     </Container>

diff --git a/packages/picasso-query-builder/src/QueryBuilder/story/Default.example.tsx b/packages/picasso-query-builder/src/QueryBuilder/story/Default.example.tsx
@@ -200,6 +200,7 @@ const fields: Field[] = [
     label: 'Also plays',
     valueEditorType: 'multiselect',
     enableResetSearch: true,
+    enableReset: true,
     values: musicalInstruments,
     defaultValue: 'More cowbell',
   },

diff --git a/packages/picasso-query-builder/src/types/query-builder.ts b/packages/picasso-query-builder/src/types/query-builder.ts
@@ -1,3 +1,4 @@
+import type { SelectProps } from '@toptal/picasso'
 import type { ReactNode } from 'react'
 import type {
   Field as QueryBuilderField,
@@ -36,11 +37,8 @@ interface BooleanField
 }
 interface MultiSelectField
   extends Omit<QueryBuilderField, 'inputType' | 'valueEditorType'> {
-  valueEditorType?: 'multiselect'
-  /**
-   * Allow search input reset
-   */
-  enableResetSearch?: boolean
+  valueEditorType?: 'multiselect' &
+    Pick<SelectProps, 'enableReset' | 'enableResetSearch'>
 }
 
 interface AutoCompleteField