feat(dialog): close dialog on backdrop click

Add click handlers to the dialog component for all three targets that
close the dialog when clicking the backdrop area (outside the dialog box).
Uses event.target === event.currentTarget to distinguish backdrop clicks
from content clicks.

- :clj — inline onclick attribute
- :cljs — Replicant :on {:click handler}
- :squint — :on-click handler
- CSS: cursor: pointer on ::backdrop for affordance

src/ui/dialog.cljc

@@ -14,6 +14,9 @@
 (defn dialog
   "Render a dialog element.
 
+   Clicking the backdrop (the area outside the dialog box) will close the
+   dialog automatically when opened via .showModal().
+
    Props:
      :open  - boolean, whether the dialog is open
      :id    - dialog id for targeting
@@ -23,7 +26,10 @@
   #?(:squint
      (let [classes (cond-> (dialog-classes {})
                      class (str " " class))
-           base-attrs (merge {:class classes}
+           base-attrs (merge {:class classes
+                              :on-click (fn [e]
+                                          (when (identical? (.-target e) (.-currentTarget e))
+                                            (.close (.-currentTarget e))))}
                              (when id {:id id})
                              (when open {:open true})
                              attrs)]
@@ -32,7 +38,10 @@
      :cljs
      (let [cls (dialog-class-list {})
            classes (cond-> cls class (conj class))
-           base-attrs (merge {:class classes}
+           base-attrs (merge {:class classes
+                              :on {:click (fn [e]
+                                            (when (identical? (.-target e) (.-currentTarget e))
+                                              (.close (.-currentTarget e))))}}
                              (when id {:id id})
                              (when open {:open true})
                              attrs)]
@@ -41,7 +50,8 @@
      :clj
      (let [classes (cond-> (dialog-classes {})
                      class (str " " class))
-           base-attrs (merge {:class classes}
+           base-attrs (merge {:class classes
+                              :onclick "if(event.target===this)this.close()"}
                              (when id {:id id})
                              (when open {:open true})
                              attrs)]

src/ui/dialog.css

@@ -21,6 +21,7 @@
 
 .dialog::backdrop {
   background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
 }
 
 .dialog-header {

test/ui/dialog_test.clj

@@ -15,7 +15,12 @@
 
   (testing "open dialog has open attr"
     (let [result (dialog/dialog {:open true} "Content")]
-      (is (true? (get-in result [1 :open]))))))
+      (is (true? (get-in result [1 :open])))))
+
+  (testing "dialog has backdrop close handler"
+    (let [result (dialog/dialog {} "Content")]
+      (is (string? (get-in result [1 :onclick])))
+      (is (clojure.string/includes? (get-in result [1 :onclick]) "close")))))
 
 (deftest dialog-sections-test
   (testing "dialog-header renders header"