cx 26.2.2 → 26.2.3

package/src/widgets/overlay/MsgBox.tsx

@@ -7,123 +7,137 @@ import { isString } from "../../util/isString";
 import { Instance } from "../../ui/Instance";
 
 export interface MsgBoxOptions {
-   message?: string;
-   title?: string;
-   header?: string;
-   style?: string;
-   callback?: (option?: string) => boolean | void;
-   okText?: string;
-   yesText?: string;
-   noText?: string;
-   yesButtonMod?: string;
-   noButtonMod?: string;
-   items?: any;
-   children?: any;
-   store?: any;
+  message?: string;
+  title?: string;
+  header?: string;
+  style?: string;
+  callback?: (option?: string) => boolean | void;
+  okText?: string;
+  yesText?: string;
+  noText?: string;
+  yesButtonMod?: string;
+  noButtonMod?: string;
+  items?: any;
+  children?: any;
+  store?: any;
+  initiatingEvent?: React.SyntheticEvent;
 }
 
 export class MsgBox {
-   buttonMod?: string;
-   footerDirection?: string;
-   footerJustify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | false;
-   yesText?: string;
-   noText?: string;
+  buttonMod?: string;
+  footerDirection?: string;
+  footerJustify?:
+    | "start"
+    | "center"
+    | "end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | false;
+  yesText?: string;
+  noText?: string;
 
-   static alert(options: string | MsgBoxOptions): Promise<void> {
-      let opts: MsgBoxOptions;
-      if (isString(options))
-         opts = {
-            message: options,
-         };
-      else opts = options;
+  static alert(options: string | MsgBoxOptions): Promise<void> {
+    let opts: MsgBoxOptions;
+    if (isString(options))
+      opts = {
+        message: options,
+      };
+    else opts = options;
 
-      return new Promise<void>(function (resolve) {
-         let callback = (e: any, instance: Instance) => {
-            if (opts.callback && opts.callback() === false) return;
-            instance.parentOptions.dismiss();
-            resolve();
-         };
+    return new Promise<void>(function (resolve) {
+      let callback = (e: any, instance: Instance) => {
+        if (opts.callback && opts.callback() === false) return;
+        instance.parentOptions.dismiss();
+        resolve();
+      };
 
-         let w = Window.create(
-            <cx>
-               <Window
-                  title={opts.title}
-                  header={opts.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={opts.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {opts.message || opts.items || opts.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                  >
-                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
-                        {opts.okText || "OK"}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>,
-         ) as any;
+      let w: Window = Window.create(
+        <cx>
+          <Window
+            title={opts.title}
+            header={opts.header}
+            mod="alert"
+            modal
+            center
+            resizable={false}
+            closable={false}
+            style={opts.style || "max-width: 90vw"}
+            dismissOnPopState
+          >
+            {opts.message || opts.items || opts.children}
+            <FlexRow
+              putInto="footer"
+              direction={MsgBox.prototype.footerDirection}
+              justify={MsgBox.prototype.footerJustify}
+            >
+              <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
+                {opts.okText || "OK"}
+              </Button>
+            </FlexRow>
+          </Window>
+        </cx>,
+      ) as any;
 
-         w.open(opts.store);
-      });
-   }
+      w.open(opts.store, { initiatingEvent: opts.initiatingEvent });
+    });
+  }
 
-   static yesNo(options: string | MsgBoxOptions): Promise<string> {
-      let opts: MsgBoxOptions;
-      if (isString(options))
-         opts = {
-            message: options,
-         };
-      else opts = options;
+  static yesNo(options: string | MsgBoxOptions): Promise<string> {
+    let opts: MsgBoxOptions;
+    if (isString(options))
+      opts = {
+        message: options,
+      };
+    else opts = options;
 
-      return new Promise<string>(function (resolve, reject) {
-         let callback = (option: string) => (e: any, instance: Instance) => {
-            if (opts.callback && opts.callback(option) === false) return;
-            instance.parentOptions.dismiss();
-            if (option == "yes") resolve(option);
-            else resolve(option);
-         };
-         let w = Window.create(
-            <cx>
-               <Window
-                  title={opts.title}
-                  header={opts.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={opts.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {opts.message || opts.items || opts.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                     hspacing="small"
-                  >
-                     <Button mod={opts.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
-                        {opts.yesText || MsgBox.prototype.yesText}
-                     </Button>
-                     <Button mod={opts.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
-                        {opts.noText || MsgBox.prototype.noText}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>,
-         ) as any;
+    return new Promise<string>(function (resolve, reject) {
+      let callback = (option: string) => (e: any, instance: Instance) => {
+        if (opts.callback && opts.callback(option) === false) return;
+        instance.parentOptions.dismiss();
+        if (option == "yes") resolve(option);
+        else resolve(option);
+      };
+      let w: Window = Window.create(
+        <cx>
+          <Window
+            title={opts.title}
+            header={opts.header}
+            mod="alert"
+            modal
+            center
+            resizable={false}
+            closable={false}
+            style={opts.style || "max-width: 90vw"}
+            dismissOnPopState
+          >
+            {opts.message || opts.items || opts.children}
+            <FlexRow
+              putInto="footer"
+              direction={MsgBox.prototype.footerDirection}
+              justify={MsgBox.prototype.footerJustify}
+              hspacing="small"
+            >
+              <Button
+                mod={opts.yesButtonMod || MsgBox.prototype.buttonMod}
+                onClick={callback("yes")}
+              >
+                {opts.yesText || MsgBox.prototype.yesText}
+              </Button>
+              <Button
+                mod={opts.noButtonMod || MsgBox.prototype.buttonMod}
+                onClick={callback("no")}
+              >
+                {opts.noText || MsgBox.prototype.noText}
+              </Button>
+            </FlexRow>
+          </Window>
+        </cx>,
+      ) as any;
 
-         w.open(opts.store);
-      });
-   }
+      w.open(opts.store, { initiatingEvent: opts.initiatingEvent });
+    });
+  }
 }
 
 MsgBox.prototype.buttonMod = undefined;
@@ -134,8 +148,8 @@ MsgBox.prototype.noText = "No";
 Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
 
 export function enableMsgBoxAlerts(): void {
-   registerAlertImpl({
-      yesNo: MsgBox.yesNo.bind(MsgBox),
-      alert: MsgBox.alert.bind(MsgBox),
-   });
+  registerAlertImpl({
+    yesNo: MsgBox.yesNo.bind(MsgBox),
+    alert: MsgBox.alert.bind(MsgBox),
+  });
 }

package/src/widgets/overlay/Overlay.scss

@@ -1,53 +1,69 @@
 @use "sass:map";
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
-@mixin cx-overlay($name: "overlay", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
+@mixin cxb-overlay($name, $besm) {
    $state: map.get($besm, state);
 
-   %cxb-overlay {
-      left: calc(50% - 250px); //guess
-      top: calc(50% - 100px); //guess
-      min-width: 10px;
-      min-height: 10px;
-      position: fixed;
-      overflow: visible;
-      box-sizing: border-box;
+   left: calc(50% - 250px); //guess
+   top: calc(50% - 100px); //guess
+   min-width: 10px;
+   min-height: 10px;
+   position: fixed;
+   overflow: visible;
+   box-sizing: border-box;
 
-      &.#{$state}draggable {
-         cursor: pointer;
-         touch-action: none;
-      }
-
-      &.#{$state}shadow {
-         position: absolute;
-      }
-
-      &:focus {
-         outline: none;
-      }
+   &.#{$state}draggable {
+      cursor: pointer;
+      touch-action: none;
    }
 
-   %cxe-overlay-modal-backdrop {
-      position: fixed;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100vh;
+   &.#{$state}shadow {
+      position: absolute;
    }
 
-   %cxe-overlay-shadow {
-      position: fixed;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100vh;
-      background: rgba(128, 128, 128, 0.3);
-      overflow: auto;
+   &:focus {
+      outline: none;
    }
+}
+
+@mixin cxe-overlay-modal-backdrop {
+   position: fixed;
+   left: 0;
+   top: 0;
+   width: 100vw;
+   height: 100vh;
+}
+
+@mixin cxe-overlay-shadow {
+   position: fixed;
+   left: 0;
+   top: 0;
+   width: 100vw;
+   height: 100vh;
+   background: rgba(128, 128, 128, 0.3);
+   overflow: auto;
+}
+
+@mixin cxe-overlay-beacon {
+   position: absolute;
+   display: none;
+}
+
+@mixin cx-overlay($name: "overlay", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
-      @extend %cxb-overlay;
+      @include cxb-overlay($name, $besm);
 
       &.#{$state}pad {
          padding: $cx-default-container-padding;
@@ -55,11 +71,15 @@
    }
 
    .#{$element}#{$name}-modal-backdrop {
-      @extend %cxe-overlay-modal-backdrop;
+      @include cxe-overlay-modal-backdrop;
    }
 
    .#{$element}#{$name}-shadow {
-      @extend %cxe-overlay-shadow;
+      @include cxe-overlay-shadow;
+   }
+
+   .#{$element}#{$name}-beacon {
+      @include cxe-overlay-beacon;
    }
 }