Add button resetAll and open/close icon

Author: pbuba

example/MultiSelect/MultiSelect.css

@@ -14,9 +14,35 @@
   min-width: 400px;
   max-width: 700px;
   padding: 2px 5px;
+  background-color: #fff;
+}
+
+.inner-wrapper {
+  position: relative;
+  width: 100%;
+  padding-right: 40px;
   display: flex;
   flex-wrap: wrap;
-  background-color: #fff;
+}
+
+.inner-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(0, -50%) rotate(0deg);
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-image: url('./img/chevron-down.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: 0.3s ease-in-out;
+}
+
+.inner-wrapper-open::before {
+  transform: translate(0, -50%) rotate(180deg);
 }
 
 .input {
@@ -43,21 +69,21 @@
 }
 
 .item.selected::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 5px;
   right: 5px;
   width: 10px;
   height: 10px;
-  background-image: url("./check.svg");
+  background-image: url('./img/check.svg');
   background-repeat: no-repeat;
 }
 
 .multivalue {
   display: flex;
   justify-content: space-between;
   margin: 2px;
-  padding: 5px 10px;
+  padding: 2px 10px;
   padding-right: 5px;
   border: 1px solid #413d51;
   border-radius: 15px;
@@ -72,13 +98,33 @@
   border: none;
   border-radius: 50%;
   background-color: transparent;
-  background-image: url("./close.svg");
+  background-image: url('./img/close.svg');
   background-size: 10px 10px;
-  background-position: center center;
+  background-position: center;
   background-repeat: no-repeat;
 }
 
 .remove:hover {
   outline: 1px solid #413d51;
   cursor: pointer;
 }
+
+.reset {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  width: 16px;
+  height: 16px;
+  border: none;
+  cursor: pointer;
+  background-image: url('./img/x-circle.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  transform: translate(0, -50%);
+}
+
+.reset:hover,
+.reset:focus {
+  opacity: 0.5;
+}

example/MultiSelect/MultiSelect.tsx

@@ -103,6 +103,11 @@ export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
     }
   };
 
+  const handleResetClick = (event) => {
+    event.stopPropagation();
+    onSelect([]);
+  };
+
   const handleRemoveClick = (item: Item) => (event) => {
     event.stopPropagation();
     const newArr = values.filter((el) => el.value !== item.value);
@@ -126,33 +131,44 @@ export const Dropdown: React.FC<Props> = ({ onSelect, values }) => {
       onFocus={handleFocus}
       onBlur={handleBlur}
     >
-      {values.length === 0
-        ? null
-        : values.map((item: Item) => {
-            return (
-              <div className="multivalue" key={item.value}>
-                <span className="multivalue-name">{item.name}</span>
-                <button
-                  type="button"
-                  className="remove"
-                  onClick={handleRemoveClick(item)}
-                  tabIndex={isFocused ? 0 : -1}
-                  aria-label={`Remove value ${item.name}`}
-                ></button>
-              </div>
-            );
-          })}
-
-      <input
-        className="input"
-        type="text"
-        id="input"
-        {...getInputProps()}
-        placeholder="Select city"
-        value={inputValue}
-        onChange={handleChange}
-        autoComplete="off"
-      />
+      <div className={classNames('inner-wrapper', { 'inner-wrapper-open': isOpen })}>
+        {values.length === 0
+          ? null
+          : values.map((item: Item) => {
+              return (
+                <div className="multivalue" key={item.value}>
+                  <span className="multivalue-name">{item.name}</span>
+                  <button
+                    type="button"
+                    className="remove"
+                    onClick={handleRemoveClick(item)}
+                    tabIndex={isFocused ? 0 : -1}
+                    aria-label={`Remove value ${item.name}`}
+                  ></button>
+                </div>
+              );
+            })}
+
+        <input
+          className="input"
+          type="text"
+          id="input"
+          {...getInputProps()}
+          placeholder="Select city"
+          value={inputValue}
+          onChange={handleChange}
+          autoComplete="off"
+        />
+
+        {values.length === 0 ? null : (
+          <button
+            className="reset"
+            onClick={handleResetClick}
+            type="button"
+            aria-label="Clear all values"
+          ></button>
+        )}
+      </div>
 
       {isOpen && (
         <ul className="menu" {...(getMenuProps() as any)}>