From b8bfae3443535a8bfc594d82c245fbb0226a7705 Mon Sep 17 00:00:00 2001
From: Alcides Bezerra <alcides.bsilvaneto@gmail.com>
Date: Wed, 31 May 2023 11:20:52 -0300
Subject: [PATCH 1/2] tailwind-merge support

---
 src/components/DisabledItem.tsx | 10 +++---
 src/components/GroupItem.tsx    | 10 +++---
 src/components/Item.tsx         | 14 +++++---
 src/components/Options.tsx      |  6 ++--
 src/components/SearchInput.tsx  | 27 ++++++---------
 src/components/Select.tsx       | 59 +++++++++++++++------------------
 6 files changed, 58 insertions(+), 68 deletions(-)

diff --git a/src/components/DisabledItem.tsx b/src/components/DisabledItem.tsx
index e317328..d9d6ac7 100644
--- a/src/components/DisabledItem.tsx
+++ b/src/components/DisabledItem.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { SelectContext } from "./SelectProvider";
 
@@ -10,11 +11,10 @@ const DisabledItem: React.FC<DisabledItemProps> = ({ children }) => {
     const { classNames } = useContext(SelectContext);
     return (
         <div
-            className={
-                classNames && classNames.listDisabledItem
-                    ? classNames.listDisabledItem
-                    : "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none"
-            }
+            className={twMerge(
+                classNames?.listDisabledItem,
+                "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none"
+            )}
         >
             {children}
         </div>
diff --git a/src/components/GroupItem.tsx b/src/components/GroupItem.tsx
index 84da5ee..174829d 100644
--- a/src/components/GroupItem.tsx
+++ b/src/components/GroupItem.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { twMerge } from "tailwind-merge";
 
 import Item from "./Item";
 import { useSelectContext } from "./SelectProvider";
@@ -20,11 +21,10 @@ const GroupItem: React.FC<GroupItemProps> = ({ item, primaryColor }) => {
                         <>{formatGroupLabel(item)}</>
                     ) : (
                         <div
-                            className={
-                                classNames?.listGroupLabel
-                                    ? classNames.listGroupLabel
-                                    : "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700"
-                            }
+                            className={twMerge(
+                                classNames?.listGroupLabel,
+                                "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700"
+                            )}
                         >
                             {item.label}
                         </div>
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index a27feb3..0c8a1c2 100755
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants";
 
@@ -46,9 +47,12 @@ const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
             ? `text-white ${bgColor}`
             : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;
 
-        return classNames && classNames.listItem
-            ? classNames.listItem({ isSelected })
-            : `${baseClass} ${selectedClass}`;
+        const itemClass = twMerge(
+            classNames?.listItem?.({ isSelected }),
+            `${baseClass} ${selectedClass}`
+        );
+
+        return itemClass;
     }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);
 
     return (
@@ -65,8 +69,8 @@ const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
                         <li
                             tabIndex={0}
                             onKeyDown={(e: React.KeyboardEvent<HTMLLIElement>) => {
-                                if (e.key === ' ' || e.key === 'Enter') {
-                                    handleValueChange(item)
+                                if (e.key === " " || e.key === "Enter") {
+                                    handleValueChange(item);
                                 }
                             }}
                             aria-selected={isSelected}
diff --git a/src/components/Options.tsx b/src/components/Options.tsx
index 85e27d0..6a60e7b 100755
--- a/src/components/Options.tsx
+++ b/src/components/Options.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useContext, useMemo } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { DEFAULT_THEME } from "../constants";
 
@@ -92,10 +93,7 @@ const Options: React.FC<OptionsProps> = ({
     }, [filterByText, removeValues]);
 
     return (
-        <div
-            role="options"
-            className={classNames && classNames.list ? classNames.list : "max-h-72 overflow-y-auto"}
-        >
+        <div role="options" className={twMerge(classNames?.list, "max-h-72 overflow-y-auto")}>
             {filterResult.map((item, index) => (
                 <React.Fragment key={index}>
                     {"options" in item ? (
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index cce8e4f..d614c5c 100755
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, useContext } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { SearchIcon } from "./Icons";
 import { SelectContext } from "./SelectProvider";
@@ -16,27 +17,19 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function Sear
 ) {
     const { classNames } = useContext(SelectContext);
     return (
-        <div
-            className={
-                classNames && classNames.searchContainer
-                    ? classNames.searchContainer
-                    : "relative py-1 px-2.5"
-            }
-        >
+        <div className={twMerge(classNames?.searchContainer, "relative py-1 px-2.5")}>
             <SearchIcon
-                className={
-                    classNames && classNames.searchIcon
-                        ? classNames.searchIcon
-                        : "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500"
-                }
+                className={twMerge(
+                    classNames?.searchIcon,
+                    "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500"
+                )}
             />
             <input
                 ref={ref}
-                className={
-                    classNames && classNames.searchBox
-                        ? classNames.searchBox
-                        : "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none"
-                }
+                className={twMerge(
+                    classNames?.searchBox,
+                    "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none"
+                )}
                 type="text"
                 placeholder={placeholder}
                 value={value}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index ceef277..d4ca989 100755
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants";
 import useOnClickOutside from "../hooks/use-onclick-outside";
@@ -150,18 +151,20 @@ const Select: React.FC<SelectProps> = ({
                 : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`
         }`;
 
-        return classNames && classNames.menuButton
-            ? classNames.menuButton({ isDisabled })
-            : defaultClass;
+        const selectClass = twMerge(defaultClass, classNames?.menuButton?.({ isDisabled }));
+        return selectClass;
     }, [classNames, isDisabled, primaryColor]);
 
     const getTagItemClass = useCallback(
         (item: Option) => {
-            const baseClasse = "bg-gray-200 border rounded-sm flex space-x-1";
+            const baseClass = "bg-gray-200 border rounded-sm flex space-x-1";
             const disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1";
-            return classNames?.tagItem
-                ? classNames.tagItem({ item, isDisabled })
-                : `${baseClasse} ${disabledClass}`;
+            const tagClass = twMerge(
+                `${baseClass} ${disabledClass}`,
+                classNames?.tagItem?.({ item, isDisabled })
+            );
+
+            return tagClass;
         },
         [classNames, isDisabled]
     );
@@ -196,11 +199,10 @@ const Select: React.FC<SelectProps> = ({
                                     value.map((item, index) => (
                                         <div className={getTagItemClass(item)} key={index}>
                                             <p
-                                                className={
-                                                    classNames?.tagItemText
-                                                        ? classNames.tagItemText
-                                                        : "text-gray-600 truncate cursor-default select-none"
-                                                }
+                                                className={twMerge(
+                                                    classNames?.tagItemText,
+                                                    "text-gray-600 truncate cursor-default select-none"
+                                                )}
                                             >
                                                 {item.label}
                                             </p>
@@ -209,18 +211,16 @@ const Select: React.FC<SelectProps> = ({
                                                     role="button"
                                                     tabIndex={0}
                                                     onClick={e => removeItem(e, item)}
-                                                    className={
-                                                        classNames?.tagItemIconContainer
-                                                            ? classNames.tagItemIconContainer
-                                                            : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600"
-                                                    }
+                                                    className={twMerge(
+                                                        classNames?.tagItemIconContainer,
+                                                        "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600"
+                                                    )}
                                                 >
                                                     <CloseIcon
-                                                        className={
-                                                            classNames?.tagItemIcon
-                                                                ? classNames.tagItemIcon
-                                                                : "w-3 h-3 mt-0.5"
-                                                        }
+                                                        className={twMerge(
+                                                            classNames?.tagItemIcon,
+                                                            "w-3 h-3 mt-0.5"
+                                                        )}
                                                     />
                                                 </div>
                                             )}
@@ -240,11 +240,7 @@ const Select: React.FC<SelectProps> = ({
                         {isClearable && !isDisabled && value !== null && (
                             <div className="px-1.5 cursor-pointer" onClick={clearValue}>
                                 <CloseIcon
-                                    className={
-                                        classNames?.closeIcon
-                                            ? classNames.closeIcon
-                                            : "w-5 h-5 p-0.5"
-                                    }
+                                    className={twMerge(classNames?.closeIcon, "w-5 h-5 p-0.5")}
                                 />
                             </div>
                         )}
@@ -265,11 +261,10 @@ const Select: React.FC<SelectProps> = ({
 
                 {open && !isDisabled && (
                     <div
-                        className={
-                            classNames?.menu
-                                ? classNames.menu
-                                : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"
-                        }
+                        className={twMerge(
+                            classNames?.menu,
+                            "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"
+                        )}
                     >
                         {isSearchable && (
                             <SearchInput

From e3c745e4eb4a683eb77f5bb228d53f83e0ce9171 Mon Sep 17 00:00:00 2001
From: Alcides Bezerra <alcides.bsilvaneto@gmail.com>
Date: Wed, 31 May 2023 11:47:46 -0300
Subject: [PATCH 2/2] Fix twMerge arguments order

---
 package.json                    |  3 +++
 src/components/DisabledItem.tsx |  4 ++--
 src/components/GroupItem.tsx    |  4 ++--
 src/components/Item.tsx         |  4 ++--
 src/components/Options.tsx      |  2 +-
 src/components/SearchInput.tsx  | 10 +++++-----
 src/components/Select.tsx       | 18 +++++++++---------
 yarn.lock                       |  5 +++++
 8 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 9a84ffb..8bd653b 100644
--- a/package.json
+++ b/package.json
@@ -65,5 +65,8 @@
         "tailwindcss": "^3.1.7",
         "tslib": "^2.4.0",
         "typescript": "^4.8.4"
+    },
+    "dependencies": {
+        "tailwind-merge": "^1.12.0"
     }
 }
diff --git a/src/components/DisabledItem.tsx b/src/components/DisabledItem.tsx
index d9d6ac7..3169b2b 100644
--- a/src/components/DisabledItem.tsx
+++ b/src/components/DisabledItem.tsx
@@ -12,8 +12,8 @@ const DisabledItem: React.FC<DisabledItemProps> = ({ children }) => {
     return (
         <div
             className={twMerge(
-                classNames?.listDisabledItem,
-                "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none"
+                "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none",
+                classNames?.listDisabledItem
             )}
         >
             {children}
diff --git a/src/components/GroupItem.tsx b/src/components/GroupItem.tsx
index 174829d..dbb3313 100644
--- a/src/components/GroupItem.tsx
+++ b/src/components/GroupItem.tsx
@@ -22,8 +22,8 @@ const GroupItem: React.FC<GroupItemProps> = ({ item, primaryColor }) => {
                     ) : (
                         <div
                             className={twMerge(
-                                classNames?.listGroupLabel,
-                                "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700"
+                                "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700",
+                                classNames?.listGroupLabel
                             )}
                         >
                             {item.label}
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 0c8a1c2..2e3a0e3 100755
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -48,8 +48,8 @@ const Item: React.FC<ItemProps> = ({ item, primaryColor }) => {
             : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;
 
         const itemClass = twMerge(
-            classNames?.listItem?.({ isSelected }),
-            `${baseClass} ${selectedClass}`
+            `${baseClass} ${selectedClass}`,
+            classNames?.listItem?.({ isSelected })
         );
 
         return itemClass;
diff --git a/src/components/Options.tsx b/src/components/Options.tsx
index 6a60e7b..45c73b3 100755
--- a/src/components/Options.tsx
+++ b/src/components/Options.tsx
@@ -93,7 +93,7 @@ const Options: React.FC<OptionsProps> = ({
     }, [filterByText, removeValues]);
 
     return (
-        <div role="options" className={twMerge(classNames?.list, "max-h-72 overflow-y-auto")}>
+        <div role="options" className={twMerge("max-h-72 overflow-y-auto", classNames?.list)}>
             {filterResult.map((item, index) => (
                 <React.Fragment key={index}>
                     {"options" in item ? (
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index d614c5c..25d41a9 100755
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -17,18 +17,18 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function Sear
 ) {
     const { classNames } = useContext(SelectContext);
     return (
-        <div className={twMerge(classNames?.searchContainer, "relative py-1 px-2.5")}>
+        <div className={twMerge("relative py-1 px-2.5", classNames?.searchContainer)}>
             <SearchIcon
                 className={twMerge(
-                    classNames?.searchIcon,
-                    "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500"
+                    "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500",
+                    classNames?.searchIcon
                 )}
             />
             <input
                 ref={ref}
                 className={twMerge(
-                    classNames?.searchBox,
-                    "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none"
+                    "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none",
+                    classNames?.searchBox
                 )}
                 type="text"
                 placeholder={placeholder}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index d4ca989..d6bdb6c 100755
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -200,8 +200,8 @@ const Select: React.FC<SelectProps> = ({
                                         <div className={getTagItemClass(item)} key={index}>
                                             <p
                                                 className={twMerge(
-                                                    classNames?.tagItemText,
-                                                    "text-gray-600 truncate cursor-default select-none"
+                                                    "text-gray-600 truncate cursor-default select-none",
+                                                    classNames?.tagItemText
                                                 )}
                                             >
                                                 {item.label}
@@ -212,14 +212,14 @@ const Select: React.FC<SelectProps> = ({
                                                     tabIndex={0}
                                                     onClick={e => removeItem(e, item)}
                                                     className={twMerge(
-                                                        classNames?.tagItemIconContainer,
-                                                        "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600"
+                                                        "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600",
+                                                        classNames?.tagItemIconContainer
                                                     )}
                                                 >
                                                     <CloseIcon
                                                         className={twMerge(
-                                                            classNames?.tagItemIcon,
-                                                            "w-3 h-3 mt-0.5"
+                                                            "w-3 h-3 mt-0.5",
+                                                            classNames?.tagItemIcon
                                                         )}
                                                     />
                                                 </div>
@@ -240,7 +240,7 @@ const Select: React.FC<SelectProps> = ({
                         {isClearable && !isDisabled && value !== null && (
                             <div className="px-1.5 cursor-pointer" onClick={clearValue}>
                                 <CloseIcon
-                                    className={twMerge(classNames?.closeIcon, "w-5 h-5 p-0.5")}
+                                    className={twMerge("w-5 h-5 p-0.5", classNames?.closeIcon)}
                                 />
                             </div>
                         )}
@@ -262,8 +262,8 @@ const Select: React.FC<SelectProps> = ({
                 {open && !isDisabled && (
                     <div
                         className={twMerge(
-                            classNames?.menu,
-                            "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700"
+                            "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
+                            classNames?.menu
                         )}
                     >
                         {isSearchable && (
diff --git a/yarn.lock b/yarn.lock
index cd17f63..00b8166 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2366,6 +2366,11 @@ synckit@^0.8.4:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.5.0"
 
+tailwind-merge@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.12.0.tgz#747d09d64a25a4864150e8930f8e436866066cc8"
+  integrity sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==
+
 tailwindcss@^3.1.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.7.tgz#5936dd08c250b05180f0944500c01dce19188c07"