From b27d22db2de4a8d4b6a1d5d89ab94a0aacb7ea30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Wed, 29 Jul 2026 11:19:21 +0200
Subject: [PATCH] Style disabled dropdown checkbox items fully
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only the checkbox glyph was dimmed, so disabled options still
looked clickable. Apply data-disabled styles to the whole item
for opacity, cursor, and hover.

Signed-off-by: Émile Ré <emile@probo.com>
---
 packages/ui/src/Atoms/Dropdown/Dropdown.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/Atoms/Dropdown/Dropdown.tsx b/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
index b4b5b326a..7e9cd0f96 100644
--- a/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
+++ b/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
@@ -158,13 +158,18 @@ export function DropdownCheckboxItem({
       checked={checked}
       onCheckedChange={value => onCheckedChange(value === true)}
       disabled={disabled}
-      className={clsx(dropdownItem(), "rounded-lg outline-none", className)}
+      className={clsx(
+        dropdownItem(),
+        "rounded-lg outline-none",
+        "data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none",
+        "data-disabled:hover:bg-transparent data-disabled:active:bg-transparent data-disabled:data-active-item:bg-transparent",
+        className,
+      )}
     >
       <span
         className={clsx(
           "size-4 border border-border-mid relative rounded-sm flex items-center justify-center flex-none",
           checked && "bg-accent text-invert",
-          disabled && "opacity-50",
         )}
       >
         <DropdownMenu.ItemIndicator>