cr-ui-lib 1.1.96 → 1.1.99

package/dist/index.d.mts

@@ -250,9 +250,10 @@ declare type SingleSelectDropdownProps = {
     iconClass?: string;
     displayContainerClass?: string;
     selectedColorDropdownItem?: string;
+    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, }: SingleSelectDropdownProps): JSX.Element;
+iconClass, placeholderClass, displayContainerClass, selectedColorDropdownItem, uniqueSearch, }: SingleSelectDropdownProps): JSX.Element;
 
 interface SelectionButton {
     data: string[];

package/dist/index.d.ts

@@ -250,9 +250,10 @@ declare type SingleSelectDropdownProps = {
     iconClass?: string;
     displayContainerClass?: string;
     selectedColorDropdownItem?: string;
+    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, }: SingleSelectDropdownProps): JSX.Element;
+iconClass, placeholderClass, displayContainerClass, selectedColorDropdownItem, uniqueSearch, }: SingleSelectDropdownProps): JSX.Element;
 
 interface SelectionButton {
     data: string[];

package/dist/index.js

@@ -3484,7 +3484,8 @@ function SingleSelectDropdown({
   iconClass = "",
   placeholderClass = "",
   displayContainerClass = "",
-  selectedColorDropdownItem = "text-[#131414]"
+  selectedColorDropdownItem = "text-[#131414]",
+  uniqueSearch = false
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState("");
@@ -3613,6 +3614,11 @@ function SingleSelectDropdown({
       setIsOpen(!isOpen);
     }
   };
+  const openList = () => {
+    if (!disabled) {
+      setIsOpen(true);
+    }
+  };
   const DropdownMenu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3652,7 +3658,9 @@ function SingleSelectDropdown({
                     searchInputClass
                   ),
                   value: searchTerm,
-                  onChange: (e) => handleSearchChange(e.target.value)
+                  onChange: (e) => {
+                    handleSearchChange(e.target.value);
+                  }
                 }
               ),
               !searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3692,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",
               {
@@ -3708,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
                     },
@@ -3744,7 +3764,7 @@ function SingleSelectDropdown({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      !uniqueSearch ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           onClick: handleToggle,
@@ -3796,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-[40px] 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)
     ] })