From ce24ee8ee391c68d8c51cb88622b86f60b60ead4 Mon Sep 17 00:00:00 2001
From: Deryk DeGuzman <deryk@vectara.com>
Date: Tue, 21 May 2024 17:23:48 +0000
Subject: [PATCH] chore: migrate vui-source changes to v1.0.1

---
 src/docs/pages/searchSelect/SingleSelect.tsx  | 43 +++++++++++++++++++
 src/docs/pages/searchSelect/index.tsx         |  9 ++++
 .../components/searchSelect/SearchSelect.tsx  | 16 +++----
 3 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 src/docs/pages/searchSelect/SingleSelect.tsx

diff --git a/src/docs/pages/searchSelect/SingleSelect.tsx b/src/docs/pages/searchSelect/SingleSelect.tsx
new file mode 100644
index 0000000..5032eac
--- /dev/null
+++ b/src/docs/pages/searchSelect/SingleSelect.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { VuiButtonSecondary, VuiSearchSelect } from "../../../lib";
+
+const options = [
+  { value: "a", label: "Caffeine-free" },
+  { value: "b", label: "Freeze dried" },
+  { value: "c", label: "Gluten-free" },
+  { value: "d", label: "Halal" },
+  { value: "e", label: "High fiber" },
+  { value: "f", label: "Kosher" },
+  { value: "g", label: "Lactose-free" },
+  { value: "h", label: "Low-carb" },
+  { value: "i", label: "No nuts" },
+  { value: "j", label: "Non-GMO" },
+  { value: "k", label: "Sugar-free" },
+  { value: "l", label: "Vegan" }
+];
+
+export const SingleSelect = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [selectedOptions, setSelectedOptions] = useState(["a"]);
+
+  return (
+    <VuiSearchSelect
+      title="Choose one or none"
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      searchValue={searchValue}
+      setSearchValue={setSearchValue}
+      onSelect={(value: string[]) => {
+        setSelectedOptions(value);
+      }}
+      selectedOptions={selectedOptions}
+      options={options}
+      isMultiSelect={false}
+    >
+      <VuiButtonSecondary color="neutral" size="s">
+        Meal preference
+      </VuiButtonSecondary>
+    </VuiSearchSelect>
+  );
+};
diff --git a/src/docs/pages/searchSelect/index.tsx b/src/docs/pages/searchSelect/index.tsx
index 3c2fab1..1e8f8af 100644
--- a/src/docs/pages/searchSelect/index.tsx
+++ b/src/docs/pages/searchSelect/index.tsx
@@ -1,20 +1,29 @@
 import { SearchSelect } from "./SearchSelect";
 import { Async } from "./Async";
+import { SingleSelect } from "./SingleSelect";
 
 const SearchSelectSource = require("!!raw-loader!./SearchSelect");
 const AsyncSource = require("!!raw-loader!./Async");
+const SingleSelectSource = require("!!raw-loader!./SingleSelect");
 
 export const searchSelect = {
   name: "Search Select",
   path: "/searchSelect",
   examples: [
     {
+      name: "Synchronous search",
       component: <SearchSelect />,
       source: SearchSelectSource.default.toString()
     },
     {
+      name: "Asynchronous search",
       component: <Async />,
       source: AsyncSource.default.toString()
+    },
+    {
+      name: "Single selection",
+      component: <SingleSelect />,
+      source: SingleSelectSource.default.toString()
     }
   ]
 };
diff --git a/src/lib/components/searchSelect/SearchSelect.tsx b/src/lib/components/searchSelect/SearchSelect.tsx
index 0ba6f3c..321ed76 100644
--- a/src/lib/components/searchSelect/SearchSelect.tsx
+++ b/src/lib/components/searchSelect/SearchSelect.tsx
@@ -84,15 +84,15 @@ export const VuiSearchSelect = <T extends unknown = unknown>({
       }
 
       onSelect(updatedSelectedOptions);
-      return;
-    }
-
-    // If the user can only select one option at a time,
-    // close the search select as soon as they make a choice.
-    onSelect([value]);
+    } else {
+      if (selectedOptions[0] === value) {
+        // If the user clicks on the selected option, deselect it.
+        onSelect([]);
+        return;
+      }
 
-    // Signal the popover to be closed.
-    setIsOpen(false);
+      onSelect([value]);
+    }
   };
 
   // If onSearchChange is provided, we don't filter the options here because