cr-ui-lib 1.1.96 → 1.1.97

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("");
@@ -3642,16 +3643,70 @@ function SingleSelectDropdown({
           ),
           children: [
             searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+              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(
                 "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)
                 }
               ),