Add generic controller for closing details on outside click

Implemented a new Stimulus controller for `<details>` elements
and applied it to the address form.
This generic controller leverages the `useClickOutside` hook from
`stimulus-use` to automatically close the `<details>` when a
click is detected outside its boundaries.

Co-Authored-By: Elia Schito <[email protected]>

Author: rainerdema

admin/app/components/solidus_admin/orders/show/address/component.html.erb

@@ -10,7 +10,7 @@
           </h2>
 
           <% if @user&.addresses&.any? %>
-            <details class="text-black text-sm" data-<%= stimulus_id %>-target="addresses">
+            <details data-controller="details" data-<%= stimulus_id %>-target="addresses" class="text-black text-sm">
               <summary
                 class="text-left flex cursor-pointer select-none"
                 data-action="keydown.esc-><%= stimulus_id %>#close"

admin/app/javascript/solidus_admin/controllers/details_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
+export default class extends Controller {
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside(event) {
+    this.element.removeAttribute('open')
+  }
+}