revert: dropdown changes

TalismanSociety · Jan 13, 2025 · 038595e · 038595e
1 parent a7e04d8
commit 038595e
Showing 1 changed file with 42 additions and 84 deletions.
diff --git a/packages/talisman-ui/src/components/Dropdown.tsx b/packages/talisman-ui/src/components/Dropdown.tsx
@@ -1,10 +1,8 @@
 import { Listbox } from "@headlessui/react"
-import { ChevronDownIcon, XIcon } from "@talismn/icons"
+import { ChevronDownIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
 import { ReactNode } from "react"
 
-import { SearchInput } from "./index"
-
 export type DropdownOption = Record<string, unknown>
 
 export type DropdownOptionRender<T extends DropdownOption> = (
@@ -23,17 +21,12 @@ export type DropdownProps<T extends DropdownOption> = {
   propertyLabel?: keyof T
   renderItem?: DropdownOptionRender<T>
   value?: T | null | undefined
-  placeholder?: string | ReactNode
+  placeholder?: string
   onChange?: (item: T | null) => void
-  onClear?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   disabled?: boolean
   className?: string
   buttonClassName?: string
   optionClassName?: string
-  isSearchable?: boolean
-  handleSearchChange?: (event: React.SetStateAction<string>) => void
-  searchPlaceholder?: string
-  searchLabel?: string
 }
 
 export const Dropdown = <T extends Record<string, unknown>>({
@@ -47,83 +40,48 @@ export const Dropdown = <T extends Record<string, unknown>>({
   items,
   value,
   placeholder,
-  isSearchable,
-  searchPlaceholder,
-  searchLabel,
   renderItem = DEFAULT_RENDER,
   onChange,
-  onClear,
-  handleSearchChange,
-}: DropdownProps<T>) => {
-  const canClear = !!value && onClear
-  return (
-    <Listbox disabled={disabled} value={value} onChange={onChange}>
-      {({ open }) => (
-        <div className={className}>
-          {label && (
-            <Listbox.Label className="text-body-secondary mb-8 block">{label}</Listbox.Label>
-          )}
-          <div className={"text-body-secondary inline-block h-full max-h-[20rem] w-full"}>
-            <Listbox.Button
-              className={classNames(
-                "bg-grey-800 enabled:hover:text-grey-300 disabled:bg-field disabled:text-body-disabled flex w-full items-center gap-8 p-8 text-left",
-                open ? "rounded-t-sm" : "rounded-sm",
-                buttonClassName,
-              )}
-            >
-              <div className="flex flex-grow flex-col justify-center overflow-hidden">
-                {value ? renderItem(value, propertyLabel) : placeholder}
-              </div>
-              {!disabled && canClear ? (
-                <div onClick={onClear} role="button" tabIndex={0} onKeyDown={() => null}>
-                  <XIcon className="shrink-0 text-[1.2em]" />
-                </div>
-              ) : (
-                !disabled && <ChevronDownIcon className="shrink-0 text-[1.2em]" />
-              )}
-            </Listbox.Button>
-            <div className="relative w-full">
-              <div className="scrollable scrollable-700 w-full">
-                <Listbox.Options
-                  className={classNames(
-                    "bg-grey-800 absolute right-0 top-0 z-10 rounded-sm",
-                    !isSearchable && "w-full rounded-b-sm",
-                  )}
-                >
-                  {isSearchable && (
-                    <div className="sticky top-0 z-10 space-y-6 px-6 pb-3 pt-6">
-                      {searchLabel && (
-                        <div className="text-body-secondary text-xs">{searchLabel}</div>
-                      )}
-                      <SearchInput
-                        placeholder={searchPlaceholder ?? "Search..."}
-                        onChange={handleSearchChange}
-                        initialValue=""
-                      />
-                    </div>
-                  )}
-                  <div className="max-h-[30rem] overflow-y-auto overflow-x-hidden">
-                    {items.map((item, i, arr) => (
-                      <Listbox.Option
-                        key={`${item[propertyKey]}-${i}` as string | number}
-                        value={item}
-                        className={classNames(
-                          "bg-grey-800 hover:bg-grey-750 hover:text-grey-300 w-full max-w-full cursor-pointer overflow-hidden p-8",
-                          "flex-grow flex-col justify-center",
-                          i === arr.length - 1 && "rounded-b-sm",
-                          optionClassName,
-                        )}
-                      >
-                        {renderItem(item, propertyLabel)}
-                      </Listbox.Option>
-                    ))}
-                  </div>
-                </Listbox.Options>
-              </div>
+}: DropdownProps<T>) => (
+  <Listbox disabled={disabled} value={value} onChange={onChange}>
+    {({ open }) => (
+      <div className={className}>
+        {label && <Listbox.Label className="text-body-secondary mb-8 block">{label}</Listbox.Label>}
+        <div className={"text-body-secondary inline-block max-h-[20rem] w-full"}>
+          <Listbox.Button
+            className={classNames(
+              "bg-grey-800 enabled:hover:text-grey-300 disabled:bg-field disabled:text-body-disabled flex w-full items-center gap-8 p-8 text-left",
+              open ? "rounded-t-sm" : "rounded-sm",
+              buttonClassName,
+            )}
+          >
+            <div className="flex flex-grow flex-col justify-center overflow-hidden">
+              {value ? renderItem(value, propertyLabel) : placeholder}
+            </div>
+            {!disabled && <ChevronDownIcon className="shrink-0 text-[1.2em]" />}
+          </Listbox.Button>
+          <div className="relative w-full">
+            <div className="bg-grey-800 scrollable scrollable-700 absolute left-0 top-0 z-10 max-h-[30rem] w-full overflow-y-auto overflow-x-hidden rounded-b-sm">
+              <Listbox.Options>
+                {items.map((item, i, arr) => (
+                  <Listbox.Option
+                    key={item[propertyKey] as string | number}
+                    value={item}
+                    className={classNames(
+                      "bg-grey-800 hover:bg-grey-750 hover:text-grey-300 w-full max-w-full cursor-pointer overflow-hidden p-8",
+                      "flex-grow flex-col justify-center",
+                      i === arr.length - 1 && "rounded-b-sm",
+                      optionClassName,
+                    )}
+                  >
+                    {renderItem(item, propertyLabel)}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
             </div>
           </div>
         </div>
-      )}
-    </Listbox>
-  )
-}
+      </div>
+    )}
+  </Listbox>
+)