From a1ee7a5453321e660943e75ffd8bc19f0178953f Mon Sep 17 00:00:00 2001
From: Angelina <angelina.stavniiciuc@toptal.com>
Date: Fri, 12 Jan 2024 10:12:08 +0200
Subject: [PATCH] [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
---
 .changeset/few-buckets-knock.md                           | 5 +++++
 packages/picasso-query-builder/package.json               | 2 +-
 .../picasso-query-builder/src/MultiSelect/MultiSelect.tsx | 1 +
 .../src/QueryBuilder/story/Default.example.tsx            | 1 +
 packages/picasso-query-builder/src/types/query-builder.ts | 8 +++-----
 5 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/few-buckets-knock.md

diff --git a/.changeset/few-buckets-knock.md b/.changeset/few-buckets-knock.md
new file mode 100644
index 0000000000..1447d20d24
--- /dev/null
+++ 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
index 72b8885ff9..3c74bdf649 100644
--- 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
index 576f186890..ed832e002a 100644
--- 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
index 767ae63989..1605d5deca 100644
--- 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
index 976a10338b..a0c217721d 100644
--- 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