feat: add dropdown-close modifier (#4238)

ref #4237

Author: pdanpdan

packages/daisyui/src/components/dropdown.css

@@ -9,6 +9,7 @@
     .dropdown-content {
       @apply absolute;
     }
+    &.dropdown-close .dropdown-content,
     &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content,
     &.dropdown-hover:not(:hover)
       [tabindex]:first-child:focus:not(:focus-visible)
@@ -36,21 +37,24 @@
       }
     }
 
-    &.dropdown-open,
-    &:not(.dropdown-hover):focus,
-    &:focus-within {
-      > [tabindex]:first-child {
-        @apply pointer-events-none;
-      }
-      .dropdown-content {
-        @apply opacity-100;
+    &:not(.dropdown-close) {
+      &.dropdown-open,
+      &:not(.dropdown-hover):focus,
+      &:focus-within {
+        > [tabindex]:first-child {
+          @apply pointer-events-none;
+        }
+        .dropdown-content {
+          @apply opacity-100;
+          scale: 100%;
+        }
       }
-    }
 
-    &.dropdown-hover:hover {
-      .dropdown-content {
-        @apply opacity-100;
-        scale: 100%;
+      &.dropdown-hover:hover {
+        .dropdown-content {
+          @apply opacity-100;
+          scale: 100%;
+        }
       }
     }
 
@@ -62,14 +66,6 @@
       }
     }
 
-    &.dropdown-open,
-    &:focus,
-    &:focus-within {
-      .dropdown-content {
-        scale: 100%;
-      }
-    }
-
     /* experimental */
     &:where([popover]) {
       background: #0000;
@@ -85,6 +81,7 @@
       @supports not (position-area: bottom) {
         @apply m-auto;
 
+        &.dropdown-close,
         &.dropdown-open:not(:popover-open) {
           @apply hidden origin-top opacity-0;
           scale: 95%;
@@ -95,6 +92,7 @@
         }
       }
 
+      &.dropdown-close,
       &:not(.dropdown-open, :popover-open) {
         @apply hidden origin-top opacity-0;
         scale: 95%;

packages/docs/src/routes/(routes)/components/dropdown/+page.md

@@ -32,6 +32,8 @@ classnames:
     desc: Opens on hover too
   - class: dropdown-open
     desc: Force open
+  - class: dropdown-close
+    desc: Force close
 ---
 
 <script>
@@ -527,6 +529,26 @@ The content gets displayed when the button is focused.
   </ul>
 </div>
 ```
+
+### ~Force close
+<div class="dropdown dropdown-close mb-32">
+  <div tabindex="0" role="button" class="m-1 btn">Button</div>
+  <ul tabindex="-1" class="p-2 shadow-sm menu dropdown-content z-1 bg-base-100 rounded-box w-52">
+    <li><button>Item 1</button></li>
+    <li><button>Item 2</button></li>
+  </ul>
+</div>
+
+```html
+<div class="$$dropdown $$dropdown-close">
+  <div tabindex="0" role="button" class="$$btn m-1">Button</div>
+  <ul tabindex="-1" class="$$dropdown-content $$menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
+    <li><a>Item 1</a></li>
+    <li><a>Item 2</a></li>
+  </ul>
+</div>
+```
+
 ## More examples
 
 ### ~Card as dropdown

packages/docs/static/llms.txt

@@ -663,7 +663,7 @@ Dropdown can open a menu or any other element when the button is clicked
 - component: `dropdown`
 - part: `dropdown-content`
 - placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right`
-- modifier: `dropdown-hover`, `dropdown-open`
+- modifier: `dropdown-hover`, `dropdown-open`, `dropdown-close`
 
 #### Syntax
 Using details and summary