From 6f84e306c8a901565cfaaefb03d11368c752ac4b Mon Sep 17 00:00:00 2001
From: Kannan Balasubramanian <rbkannan1@gmail.com>
Date: Sat, 3 Oct 2020 19:15:23 +0530
Subject: [PATCH 1/3] Add clear selected items button

---
 README.md                     |  1 +
 src/lib/get-string.tsx        |  1 +
 src/lib/interfaces.ts         |  1 +
 src/multi-select/dropdown.tsx | 30 ++++++++++++++++++++++++++++++
 src/multi-select/index.tsx    |  2 ++
 5 files changed, 35 insertions(+)

diff --git a/README.md b/README.md
index 4d0c7cc..3fc6b52 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,7 @@ export default Example;
 | `valueRenderer`       | custom dropdown header [docs](#-custom-value-renderer) | `function`                   |                |
 | `ItemRenderer`        | custom dropdown option [docs](#-custom-item-renderer)  | `function`                   |                |
 | `ClearIcon`           | Custom Clear Icon for Search                           | `string|function`            |                |
+| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `string|function`            |                |
 
 ## 🔍 Custom filter logic
 
diff --git a/src/lib/get-string.tsx b/src/lib/get-string.tsx
index b2b52d4..449f8c9 100644
--- a/src/lib/get-string.tsx
+++ b/src/lib/get-string.tsx
@@ -4,6 +4,7 @@ const strings = {
   selectAll: "Select All",
   search: "Search",
   clearSearch: "Clear Search",
+  clearSelected: "Clear Selected",
 };
 
 export default function getString(key: string, overrideStrings?): string {
diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
index c2d8698..85806d4 100644
--- a/src/lib/interfaces.ts
+++ b/src/lib/interfaces.ts
@@ -35,4 +35,5 @@ export interface ISelectProps {
   className?: string;
   onMenuToggle?;
   ClearIcon?: string | Function;
+  ClearSelectedIcon?: string | Function;
 }
diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
index da5c317..f4eeab5 100644
--- a/src/multi-select/dropdown.tsx
+++ b/src/multi-select/dropdown.tsx
@@ -6,7 +6,9 @@
 import { css } from "goober";
 import React, { useEffect, useRef, useState } from "react";
 
+import getString from "../lib/get-string";
 import Arrow from "./arrow";
+import Cross from "../select-panel/cross";
 import Loading from "./loading";
 
 interface IDropdownProps {
@@ -19,6 +21,7 @@ interface IDropdownProps {
   labelledBy?: string;
   onMenuToggle?;
   ArrowRenderer?;
+  ClearSelectedIcon?;
 }
 
 const PanelContainer = css({
@@ -65,6 +68,16 @@ const DropdownHeading = css({
   },
 });
 
+const ClearSelectedButton = css({
+  cursor: "pointer",
+  background: "none",
+  border: 0,
+  padding: 0,
+  "[hidden]": {
+    display: "none",
+  },
+});
+
 const Dropdown = ({
   children,
   contentComponent: ContentComponent,
@@ -75,6 +88,7 @@ const Dropdown = ({
   labelledBy,
   onMenuToggle,
   ArrowRenderer,
+  ClearSelectedIcon,
 }: IDropdownProps) => {
   const [expanded, setExpanded] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
@@ -125,6 +139,11 @@ const Dropdown = ({
   const toggleExpanded = () =>
     setExpanded(isLoading || disabled ? false : !expanded);
 
+  const handleClearSelected = (e) => {
+    e.stopPropagation();
+    contentProps["onChange"] && contentProps["onChange"]([]);
+  };
+
   return (
     <div
       tabIndex={0}
@@ -146,6 +165,17 @@ const Dropdown = ({
       >
         <div className="dropdown-heading-value">{children}</div>
         {isLoading && <Loading />}
+        <button
+          hidden={!contentProps["value"].length}
+          className={`${ClearSelectedButton} clear-selected-button`}
+          onClick={handleClearSelected}
+          aria-label={getString(
+            "clearSelected",
+            contentProps["overrideStrings"]
+          )}
+        >
+          {ClearSelectedIcon || <Cross />}
+        </button>
         <FinalArrow expanded={expanded} />
       </div>
       {expanded && (
diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx
index b24a985..41a0b70 100644
--- a/src/multi-select/index.tsx
+++ b/src/multi-select/index.tsx
@@ -46,6 +46,7 @@ const MultiSelect = ({
   labelledBy,
   onMenuToggle,
   ClearIcon,
+  ClearSelectedIcon,
 }: ISelectProps) => {
   const nvalue = value || [];
   return (
@@ -72,6 +73,7 @@ const MultiSelect = ({
         labelledBy={labelledBy}
         onMenuToggle={onMenuToggle}
         ArrowRenderer={ArrowRenderer}
+        ClearSelectedIcon={ClearSelectedIcon}
       >
         <DropdownHeader
           value={nvalue}

From c417a15827d4a45fff4d0ba876a80847f632ba41 Mon Sep 17 00:00:00 2001
From: Kannan Balasubramanian <rbkannan1@gmail.com>
Date: Sun, 4 Oct 2020 10:53:21 +0530
Subject: [PATCH 2/3] Add conditional rendering and type to clear selected
 button

---
 src/multi-select/dropdown.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
index f4eeab5..ec8794a 100644
--- a/src/multi-select/dropdown.tsx
+++ b/src/multi-select/dropdown.tsx
@@ -141,7 +141,7 @@ const Dropdown = ({
 
   const handleClearSelected = (e) => {
     e.stopPropagation();
-    contentProps["onChange"] && contentProps["onChange"]([]);
+    contentProps["onChange"]([]);
   };
 
   return (
@@ -165,17 +165,19 @@ const Dropdown = ({
       >
         <div className="dropdown-heading-value">{children}</div>
         {isLoading && <Loading />}
-        <button
-          hidden={!contentProps["value"].length}
-          className={`${ClearSelectedButton} clear-selected-button`}
-          onClick={handleClearSelected}
-          aria-label={getString(
-            "clearSelected",
-            contentProps["overrideStrings"]
-          )}
-        >
-          {ClearSelectedIcon || <Cross />}
-        </button>
+        {contentProps["value"].length > 0 && (
+          <button
+            type="button"
+            className={`${ClearSelectedButton} clear-selected-button`}
+            onClick={handleClearSelected}
+            aria-label={getString(
+              "clearSelected",
+              contentProps["overrideStrings"]
+            )}
+          >
+            {ClearSelectedIcon || <Cross />}
+          </button>
+        )}
         <FinalArrow expanded={expanded} />
       </div>
       {expanded && (

From 126d1d083530b4c4770344de477e384b3ea635fd Mon Sep 17 00:00:00 2001
From: harshzalavadiya <harsh@strandls.com>
Date: Tue, 6 Oct 2020 22:34:15 +0530
Subject: [PATCH 3/3] :recycle: cleanup

---
 src/multi-select/dropdown.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
index ec8794a..ccea788 100644
--- a/src/multi-select/dropdown.tsx
+++ b/src/multi-select/dropdown.tsx
@@ -7,8 +7,8 @@ import { css } from "goober";
 import React, { useEffect, useRef, useState } from "react";
 
 import getString from "../lib/get-string";
-import Arrow from "./arrow";
 import Cross from "../select-panel/cross";
+import Arrow from "./arrow";
 import Loading from "./loading";
 
 interface IDropdownProps {
@@ -73,9 +73,6 @@ const ClearSelectedButton = css({
   background: "none",
   border: 0,
   padding: 0,
-  "[hidden]": {
-    display: "none",
-  },
 });
 
 const Dropdown = ({