cr-ui-lib 1.1.97 → 1.1.100

package/dist/index.d.mts

@@ -253,7 +253,7 @@ declare type SingleSelectDropdownProps = {
     uniqueSearch?: boolean;
 };
 declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, // default true
-iconClass, placeholderClass, displayContainerClass, selectedColorDropdownItem, uniqueSearch }: SingleSelectDropdownProps): JSX.Element;
+iconClass, placeholderClass, displayContainerClass, selectedColorDropdownItem, uniqueSearch, }: SingleSelectDropdownProps): JSX.Element;
 
 interface SelectionButton {
     data: string[];

package/dist/index.d.ts

@@ -253,7 +253,7 @@ declare type SingleSelectDropdownProps = {
     uniqueSearch?: boolean;
 };
 declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, // default true
-iconClass, placeholderClass, displayContainerClass, selectedColorDropdownItem, uniqueSearch }: SingleSelectDropdownProps): JSX.Element;
+iconClass, placeholderClass, displayContainerClass, selectedColorDropdownItem, uniqueSearch, }: SingleSelectDropdownProps): JSX.Element;
 
 interface SelectionButton {
     data: string[];

package/dist/index.js

@@ -3614,6 +3614,11 @@ function SingleSelectDropdown({
       setIsOpen(!isOpen);
     }
   };
+  const openList = () => {
+    if (!disabled) {
+      setIsOpen(true);
+    }
+  };
   const DropdownMenu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3643,71 +3648,19 @@ function SingleSelectDropdown({
           ),
           children: [
             searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              uniqueSearch ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  onClick: handleToggle,
-                  className: tailwindMerge.twMerge(
-                    `border-[1.5px] rounded-md h-[40px] pl-3 pr-2 py-2 bg-[#F8F8F8] cursor-pointer flex items-center justify-between ${disabled ? "bg-gray-100 cursor-not-allowed border-gray-200" : isOpen ? "border-[#4683B4]" : "border-[#E2E2E2]"}`,
-                    buttonClass
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: `text-sm ${disabled ? "text-gray-400" : selectedOption ? "text-gray-700" : "text-gray-[#757575]"} ${placeholderClass}`,
-                        children: (selectedOption == null ? void 0 : selectedOption.name) || placeholder
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: `transition-transform duration-200 ${!isOpen ? "rotate-180" : ""} ${disabled ? "text-gray-400" : ""} ${hasIcon ? "block" : "hidden"} ${iconClass}`,
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(
-                          "svg",
-                          {
-                            width: "20",
-                            height: "20",
-                            viewBox: "0 0 20 20",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_10508_5931)", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "path",
-                                {
-                                  d: "M5.83333 11.6665L10 7.49984L14.1667 11.6665H5.83333Z",
-                                  fill: "currentColor"
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_10508_5931", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "rect",
-                                {
-                                  width: "20",
-                                  height: "20",
-                                  fill: "white",
-                                  transform: "matrix(1 0 0 -1 0 20)"
-                                }
-                              ) }) })
-                            ]
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
                   type: "text",
-                  onClick: handleToggle,
                   autoFocus: true,
                   className: tailwindMerge.twMerge(
                     "input-placeholder-ellipsis w-full pr-[30px] h-[40px] px-2 py-1 rounded-md border border-gray-300 text-sm focus:border-1 focus:border-[#4683B4] focus:outline-none",
                     searchInputClass
                   ),
                   value: searchTerm,
-                  placeholder: "Required",
-                  onChange: (e) => handleSearchChange(e.target.value)
+                  onChange: (e) => {
+                    handleSearchChange(e.target.value);
+                  }
                 }
               ),
               !searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3747,6 +3700,15 @@ function SingleSelectDropdown({
                 }
               )
             ] }),
+            uniqueSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tailwindMerge.twMerge(
+                  "absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none",
+                  hasSearchIcon ? "block" : "hidden"
+                )
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -3763,12 +3725,15 @@ function SingleSelectDropdown({
                     "div",
                     {
                       className: tailwindMerge.twMerge(
-                        `h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none rounded-md hover:bg-gray-100 ${opt.id === value ? "bg-[#ECF3F7] font-semibold " + selectedColorDropdownItem : "text-[#131414]"}`,
+                        `h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none rounded-md hover:bg-gray-100 ${opt.id === value ? "bg-[#ECF3F7] font-semibold" + selectedColorDropdownItem : "text-[#131414]"}`,
                         displayItemClass
                       ),
                       onClick: () => {
                         onChange(opt.id);
                         setIsOpen(false);
+                        if (uniqueSearch) {
+                          setSearchTerm("");
+                        }
                       },
                       children: opt.name
                     },
@@ -3799,7 +3764,7 @@ function SingleSelectDropdown({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      !uniqueSearch ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           onClick: handleToggle,
@@ -3851,6 +3816,21 @@ function SingleSelectDropdown({
             )
           ]
         }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          autoFocus: true,
+          onClick: openList,
+          className: tailwindMerge.twMerge(
+            "input-placeholder-ellipsis w-full pr-[30px] h-[48px] px-2 py-1 rounded-md border border-gray-300 text-sm focus:border-1 focus:border-[#4683B4] focus:outline-none",
+            searchInputClass,
+            uniqueSearch && "placeholder:opacity-100 placeholder:text-[#131414]"
+          ),
+          value: searchTerm,
+          placeholder: (selectedOption == null ? void 0 : selectedOption.name) || placeholder,
+          onChange: (e) => handleSearchChange(e.target.value)
+        }
       ),
       isOpen && !disabled && (usePortal ? reactDom.createPortal(DropdownMenu, document.body) : DropdownMenu)
     ] })