💥 fix(custom-dialog): close popup if closeOnClick is enabled on option

ags/widget/CustomDialog.tsx

@@ -3,7 +3,7 @@ import { Windows } from "../windows";
 import { PopupWindow } from "./PopupWindow";
 import { Separator } from "./Separator";
 import { tr } from "../i18n/intl";
-import { Accessor, For, With } from "ags";
+import { Accessor } from "ags";
 import { transformWidget, variableToBoolean, WidgetNodeType } from "../scripts/utils";
 
 
@@ -28,58 +28,49 @@ export interface CustomDialogOption {
     closeOnClick?: boolean | Accessor<boolean>;
 }
 
-function CustomDialogOption({closeOnClick = true, ...props}: CustomDialogOption & { dialog: Astal.Window }) {
-    function onClicked() {
+function CustomDialogOption({closeOnClick = true, ...props}: CustomDialogOption & {
+    dialog: Astal.Window;
+}) {
+    return <Gtk.Button class="option" hexpand label={props.text} 
+      onClicked={() => {
           props.onClick?.();
           closeOnClick && 
               props.dialog?.close();
-    }
-
-    return <Gtk.Button class="option" hexpand label={props.text} 
-      onClicked={onClicked} onActivate={onClicked}/>
+      }} 
+    />
 }
 
 export function CustomDialog({ options = [{ text: tr("accept") }], ...props}: CustomDialogProps) {
-    return Windows.getDefault().createWindowForFocusedMonitor((mon) => 
-        <PopupWindow namespace={props.namespace ?? "custom-dialog"} monitor={mon}
+    return Windows.getDefault().createWindowForFocusedMonitor((mon) => {
+        const popup = <PopupWindow namespace={props.namespace ?? "custom-dialog"} monitor={mon}
           cssBackgroundWindow={props.cssBackground ?? "background: rgba(0, 0, 0, .3);"}
           exclusivity={Astal.Exclusivity.IGNORE} layer={Astal.Layer.OVERLAY}
-          halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER}
-          widthRequest={props.widthRequest ?? 400} heightRequest={props.heightRequest ?? 220}
-          onDestroy={props.onFinish} $={(self) => self.set_child(
+          halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} actionClosed={() => props.onFinish?.()}
+          widthRequest={props.widthRequest ?? 400} heightRequest={props.heightRequest ?? 220}>
 
             <Gtk.Box class={props.className ?? "custom-dialog-container"}
               orientation={Gtk.Orientation.VERTICAL}>
 
                 <Gtk.Label class={"title"} visible={variableToBoolean(props.title)} label={props.title} />
                 <Gtk.Label class={"text"} visible={variableToBoolean(props.text)} label={props.text} 
-                    vexpand/>
+                  vexpand valign={Gtk.Align.START} />
                 <Gtk.Box class={"custom-children custom-child"} visible={variableToBoolean(props.children)}
                   orientation={props.childOrientation ?? Gtk.Orientation.VERTICAL}>
-                      {
-                        (props.children instanceof Accessor) ?
-                          (Array.isArray(props.children) ?
-                            <For each={props.children! as Accessor<Array<JSX.Element>>}>
-                                {(widget) => widget && widget}
-                            </For>
-                          : <With value={props.children as Accessor<JSX.Element>}>
-                                {(widget) => widget && widget}
-                            </With>)
-                        : (Array.isArray(props.children) ? 
-                            props.children.map(widget => widget && widget).filter(w => w)
-                          : props.children)
-                      }
+                    {transformWidget(props.children, (child) => child as JSX.Element)}
                 </Gtk.Box>
                 <Separator alpha={.2} visible={options && options.length > 0}
                   spacing={8} orientation={Gtk.Orientation.VERTICAL} />
+            </Gtk.Box>
+        </PopupWindow> as Astal.Window;
 
+        (popup.get_child()!.get_first_child()!.get_first_child() as Gtk.Box).append(
             <Gtk.Box class={"options"} orientation={props.optionsOrientation ?? Gtk.Orientation.HORIZONTAL}
               hexpand={true} heightRequest={38} homogeneous={true}>
 
-                      {transformWidget(options, (props) => <CustomDialogOption {...props} dialog={self} />)}
-                  </Gtk.Box>
+                {transformWidget(options, (props) => <CustomDialogOption {...props} dialog={popup} />)}
             </Gtk.Box> as Gtk.Box
-          )}
-        /> as Astal.Window
-    )();
+        );
+
+        return popup;
+    })();
 }

ags/widget/PopupWindow.tsx

@@ -7,12 +7,12 @@ import GObject from "ags/gobject";
 
 
 type PopupWindowSpecificProps = {
-    $?: (self: Astal.Window, container: Gtk.Box) => void;
+    $?: (self: Astal.Window) => void;
     children?: WidgetNodeType;
     /** Stylesheet for the background of the popup-window */
     cssBackgroundWindow?: string;
     class?: string | Accessor<string>;
-    onCloseRequest?: (self: Astal.Window) => void|boolean;
+    actionClosed?: (self: Astal.Window) => void|boolean;
     actionClickedOutside?: (self: Astal.Window) => void;
     actionKeyPressed?: (self: Astal.Window, keyval: number, keycode: number) => void;
 };
@@ -64,7 +64,11 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
         "visible",
         "marginLeft",
         "marginRight",
-        "marginBottom"
+        "marginBottom",
+        "hexpand",
+        "vexpand",
+        "actionClosed",
+        "$"
     ])} namespace={props.namespace ?? "popup-window"} class={
           (props.class instanceof Accessor) ? 
               ((props.namespace instanceof Accessor) ?
@@ -73,7 +77,8 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
                : props.class.as(clss => `popup-window ${clss} ${props.namespace ?? ""}`))
           : `popup-window ${props.class ?? ""} ${props.namespace ?? ""}`
       } keymode={Astal.Keymode.EXCLUSIVE} exclusivity={props.exclusivity ?? Astal.Exclusivity.NORMAL}
-      anchor={TOP | LEFT | BOTTOM | RIGHT} visible={false} onCloseRequest={props.onCloseRequest}
+      anchor={TOP | LEFT | BOTTOM | RIGHT} visible={false} 
+      onCloseRequest={(self) => props.actionClosed?.(self)}
       $={(self) => {
           const conns: Map<GObject.Object, number> = new Map();
           const gestureClick = Gtk.GestureClick.new();
@@ -120,7 +125,10 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
           conns.set(self, self.connect("close-request", () => conns.forEach((id, obj) =>
               obj.disconnect(id))));
 
-          props.$?.(self, self.get_first_child()!.get_first_child()!.get_first_child() as Gtk.Box);
+          conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
+              obj.disconnect(id))));
+
+          props.$?.(self);
       }}>
           <Gtk.Box hexpand={false} vexpand={false}>
               <Gtk.Box class={"popup-window-container"} halign={props.halign} 
@@ -145,10 +153,8 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
                     conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
                         obj.disconnect(id))));
                 }}>
-                  <Gtk.Box>
                   {props.children}
               </Gtk.Box>
           </Gtk.Box>
-          </Gtk.Box>
     </Astal.Window> as Astal.Window;
 }