From a145de56ee42a6fb32b7551da665a1fa2fe0a13b Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 21 Mar 2023 00:43:32 +0800
Subject: [PATCH] Adds multiselect checkbox fixes (#7835)

---
 .../form/checkbox/MultiSelectCheckboxes.tsx      |  7 +------
 packages/ui/components/form/select/Select.tsx    | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx b/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
index f9bf6f7d44..9315232684 100644
--- a/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
+++ b/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
@@ -29,12 +29,6 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
 
   return (
     <components.Option
-      className={classNames(
-        className,
-        "dark:bg-darkgray-100 !flex !cursor-pointer !py-3 text-[inherit]",
-        isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
-        isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
-      )}
       {...rest}
       isDisabled={isDisabled}
       isFocused={isFocused}
@@ -81,6 +75,7 @@ export default function MultiSelectCheckboxes({
         setSelected(s);
         setValue(s);
       }}
+      variant="checkbox"
       options={options}
       isMulti
       className={classNames(className ? className : "w-64 text-sm")}
diff --git a/packages/ui/components/form/select/Select.tsx b/packages/ui/components/form/select/Select.tsx
index 3d02e18932..ded07fa4a1 100644
--- a/packages/ui/components/form/select/Select.tsx
+++ b/packages/ui/components/form/select/Select.tsx
@@ -13,7 +13,7 @@ export type SelectProps<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
-> = Props<Option, IsMulti, Group>;
+> = Props<Option, IsMulti, Group> & { variant?: "default" | "checkbox" };
 
 export const Select = <
   Option,
@@ -22,6 +22,7 @@ export const Select = <
 >({
   components,
   menuPlacement,
+  variant = "default",
   ...props
 }: SelectProps<Option, IsMulti, Group>) => {
   const reactSelectProps = React.useMemo(() => {
@@ -46,12 +47,21 @@ export const Select = <
             props.classNames?.option
           ),
         placeholder: (state) =>
-          classNames("text-gray-400 text-sm dark:text-darkgray-400", state.isFocused && "hidden"),
+          classNames(
+            "text-gray-400 text-sm dark:text-darkgray-400",
+            state.isFocused && variant !== "checkbox" && "hidden"
+          ),
         dropdownIndicator: () => "text-gray-600 dark:text-darkgray-400",
         control: (state) =>
           classNames(
             "dark:bg-darkgray-100 dark:border-darkgray-300 !min-h-9 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal  focus-within:ring-2 focus-within:ring-gray-800 hover:border-gray-400 dark:focus-within:ring-darkgray-900 rounded-md border ",
-            state.isMulti ? (state.hasValue ? "p-1" : "px-3 py-2") : "py-2 px-3",
+            state.isMulti
+              ? variant === "checkbox"
+                ? "px-3 py-2"
+                : state.hasValue
+                ? "p-1"
+                : "px-3 py-2"
+              : "py-2 px-3",
             props.classNames?.control
           ),
         singleValue: () =>