cx 25.3.1 → 25.4.0

package/src/widgets/overlay/FlyweightTooltipTracker.js

@@ -1,39 +1,39 @@
-import { Widget } from "../../ui/Widget";
-import { VDOM } from "../../ui/VDOM";
-import { tooltipMouseMove, tooltipMouseLeave } from "./tooltip-ops";
-import { closest, isObject } from "../../util";
-
-export class FlyweightTooltipTracker extends Widget {
-   initInstance(context, instance) {
-      let handler = (e) => this.handleMouseMove(e, instance);
-      document.addEventListener("mousemove", handler);
-      instance.subscribeOnDestroy(() => {
-         document.removeEventListener("mousemove", handler);
-      });
-   }
-
-   render(context, instance, key) {
-      return null;
-   }
-
-   handleMouseMove(e, instance) {
-      if (!this.onGetTooltip) return;
-      let parentEl, tooltip;
-      if (instance.lastTarget == e.target) return;
-
-      instance.lastTarget = e.target;
-      parentEl = closest(e.target, (element) => {
-         tooltip = instance.invoke("onGetTooltip", element, instance);
-         if (tooltip) return true;
-      });
-
-      if (!parentEl) tooltipMouseLeave(e, instance, instance.tooltip, { target: instance.parentEl });
-      else {
-         instance.tooltip = tooltip;
-         instance.parentEl = parentEl;
-         tooltipMouseMove(e, instance, instance.tooltip, {
-            target: parentEl,
-         });
-      }
-   }
-}
+import { Widget } from "../../ui/Widget";
+import { VDOM } from "../../ui/VDOM";
+import { tooltipMouseMove, tooltipMouseLeave } from "./tooltip-ops";
+import { closest, isObject } from "../../util";
+
+export class FlyweightTooltipTracker extends Widget {
+   initInstance(context, instance) {
+      let handler = (e) => this.handleMouseMove(e, instance);
+      document.addEventListener("mousemove", handler);
+      instance.subscribeOnDestroy(() => {
+         document.removeEventListener("mousemove", handler);
+      });
+   }
+
+   render(context, instance, key) {
+      return null;
+   }
+
+   handleMouseMove(e, instance) {
+      if (!this.onGetTooltip) return;
+      let parentEl, tooltip;
+      if (instance.lastTarget == e.target) return;
+
+      instance.lastTarget = e.target;
+      parentEl = closest(e.target, (element) => {
+         tooltip = instance.invoke("onGetTooltip", element, instance);
+         if (tooltip) return true;
+      });
+
+      if (!parentEl) tooltipMouseLeave(e, instance, instance.tooltip, { target: instance.parentEl });
+      else {
+         instance.tooltip = tooltip;
+         instance.parentEl = parentEl;
+         tooltipMouseMove(e, instance, instance.tooltip, {
+            target: parentEl,
+         });
+      }
+   }
+}

package/src/widgets/overlay/Overlay.d.ts

@@ -1,73 +1,73 @@
-import * as Cx from "../../core";
-import { View } from "../../data";
-import { Instance } from "../../ui/Instance";
-
-export interface OverlayProps extends Cx.StyledContainerProps {
-   /** Set to `true` to enable resizing. */
-   resizable?: Cx.BooleanProp;
-
-   /** Set to `true` to enable dragging the overlay. */
-   draggable?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
-   baseClass?: string;
-
-   resizeWidth?: number;
-
-   /** Set to `true` to initially place the overlay in the center of the page. */
-   center?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
-   centerX?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page vertically. */
-   centerY?: boolean;
-
-   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
-   modal?: boolean;
-
-   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
-   backdrop?: boolean;
-
-   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
-    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
-   inline?: boolean;
-
-   /** Set to `true` to automatically focus the top level overlay element. */
-   autoFocus?: boolean;
-
-   /** Set to `true` to automatically focus the first focusable child in the overlay. */
-   autoFocusFirstChild?: boolean;
-
-   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
-   animate?: boolean;
-
-   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
-   destroyDelay?: number;
-
-   /** Automatically dismiss overlay if it loses focus. */
-   dismissOnFocusOut?: boolean;
-
-   /** Set to true to make the top level overlay element focusable. */
-   focusable?: boolean;
-
-   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
-   dismissOnPopState?: boolean;
-
-   /** A callback function which fires while the overlay is being moved around. */
-   onMove?(e: Event, instance: Instance, component: any);
-
-   /** A callback function which fires while the overlay is being resized. */
-   onResize?(e: Event, instance: Instance, component: any);
-
-   /** zIndex */
-   zIndex?: Cx.NumberProp;
-
-   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
-   closeOnEscape?: boolean;
-}
-
-export class Overlay extends Cx.Widget<OverlayProps> {
-   /** Opens the overlay. Returns a dismiss function. */
-   open(store: View | Instance): () => void;
-}
+import * as Cx from "../../core";
+import { View } from "../../data";
+import { Instance } from "../../ui/Instance";
+
+export interface OverlayProps extends Cx.StyledContainerProps {
+   /** Set to `true` to enable resizing. */
+   resizable?: Cx.BooleanProp;
+
+   /** Set to `true` to enable dragging the overlay. */
+   draggable?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
+   baseClass?: string;
+
+   resizeWidth?: number;
+
+   /** Set to `true` to initially place the overlay in the center of the page. */
+   center?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
+   centerX?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page vertically. */
+   centerY?: boolean;
+
+   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
+   modal?: boolean;
+
+   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
+   backdrop?: boolean;
+
+   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
+    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
+   inline?: boolean;
+
+   /** Set to `true` to automatically focus the top level overlay element. */
+   autoFocus?: boolean;
+
+   /** Set to `true` to automatically focus the first focusable child in the overlay. */
+   autoFocusFirstChild?: boolean;
+
+   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
+   animate?: boolean;
+
+   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
+   destroyDelay?: number;
+
+   /** Automatically dismiss overlay if it loses focus. */
+   dismissOnFocusOut?: boolean;
+
+   /** Set to true to make the top level overlay element focusable. */
+   focusable?: boolean;
+
+   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
+   dismissOnPopState?: boolean;
+
+   /** A callback function which fires while the overlay is being moved around. */
+   onMove?(e: Event, instance: Instance, component: any);
+
+   /** A callback function which fires while the overlay is being resized. */
+   onResize?(e: Event, instance: Instance, component: any);
+
+   /** zIndex */
+   zIndex?: Cx.NumberProp;
+
+   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
+   closeOnEscape?: boolean;
+}
+
+export class Overlay extends Cx.Widget<OverlayProps> {
+   /** Opens the overlay. Returns a dismiss function. */
+   open(store: View | Instance): () => void;
+}

package/src/widgets/overlay/Window.js

@@ -1,202 +1,202 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Overlay, OverlayComponent } from "./Overlay";
-import { ContentPlaceholder } from "../../ui/layout/ContentPlaceholder";
-import { ZIndexManager } from "../../ui/ZIndexManager";
-import { Button } from "../Button";
-import { parseStyle } from "../../util/parseStyle";
-import { Localization } from "../../ui/Localization";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { ddMouseDown, ddDetect, ddMouseUp } from "../drag-drop/ops";
-import { isDefined } from "../../util/isDefined";
-import { isString } from "../../util/isString";
-
-export class Window extends Overlay {
-   init() {
-      if (isDefined(this.closeable)) this.closable = this.closeable;
-
-      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
-
-      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
-
-      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         title: undefined,
-         closable: undefined,
-         bodyStyle: { structured: true },
-         bodyClass: { structured: true },
-         headerStyle: { structured: true },
-         footerStyle: { structured: true },
-      });
-   }
-
-   initHelpers() {
-      return super.initHelpers(...arguments, {
-         header: Widget.create(this.header || { type: ContentPlaceholder, name: "header", scoped: true }),
-         footer: Widget.create(this.footer || { type: ContentPlaceholder, name: "footer", scoped: true }),
-         close:
-            this.closable &&
-            Button.create({
-               mod: "hollow",
-               dismiss: true,
-               icon: "close",
-               style: "margin-left: auto",
-               onTouchStart: stopPropagation,
-               onMouseDown: stopPropagation,
-            }),
-      });
-   }
-
-   exploreCleanup(context, instance) {
-      super.exploreCleanup(context, instance);
-
-      let { helpers } = instance;
-      let unregisterHeader = helpers.header && helpers.header.unregisterContentPlaceholder;
-      if (unregisterHeader) unregisterHeader();
-
-      let unregisterFooter = helpers.footer && helpers.footer.unregisterContentPlaceholder;
-      if (unregisterFooter) unregisterFooter();
-   }
-
-   renderHeader(context, instance, key) {
-      let { data } = instance;
-      let result = [];
-      if (data.title) result.push(data.title);
-      if (instance.helpers) {
-         let header = getContent(instance.helpers.header && instance.helpers.header.render(context, key));
-         if (header) result.push(header);
-         if (data.closable && instance.helpers.close) result.push(getContent(instance.helpers.close.render(context)));
-      }
-      return result;
-   }
-
-   renderFooter(context, instance, key) {
-      return getContent(instance.helpers && instance.helpers.footer && instance.helpers.footer.render(context, key));
-   }
-
-   render(context, instance, key) {
-      var header = this.renderHeader(context, instance, "header");
-      var footer = this.renderFooter(context, instance, "footer");
-      return (
-         <WindowComponent
-            key={key}
-            instance={instance}
-            header={header}
-            footer={footer}
-            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
-         >
-            {this.renderContents(context, instance)}
-         </WindowComponent>
-      );
-   }
-}
-
-Window.prototype.baseClass = "window";
-Window.prototype.closable = true;
-Window.prototype.resizable = false;
-Window.prototype.fixed = false;
-Window.prototype.autoFocus = true;
-Window.prototype.focusable = true;
-Window.prototype.pad = true;
-
-Widget.alias("window", Window);
-Localization.registerPrototype("cx/widgets/Window", Window);
-
-class WindowComponent extends OverlayComponent {
-   renderOverlayBody() {
-      var { widget, data } = this.props.instance;
-      var { CSS, baseClass } = widget;
-
-      let header, footer;
-
-      if (this.props.header.length > 0) {
-         header = (
-            <header
-               key="header"
-               ref={(c) => {
-                  this.headerEl = c;
-               }}
-               className={CSS.element(baseClass, "header")}
-               style={data.headerStyle}
-               onMouseDown={this.onHeaderMouseDown.bind(this)}
-               onMouseUp={ddMouseUp}
-               onMouseMove={this.onHeaderMouseMove.bind(this)}
-               onTouchStart={this.onHeaderMouseDown.bind(this)}
-               onTouchEnd={ddMouseUp}
-               onTouchMove={this.onHeaderMouseMove.bind(this)}
-            >
-               {this.props.header}
-            </header>
-         );
-      }
-
-      if (this.props.footer) {
-         footer = (
-            <footer
-               key="footer"
-               ref={(c) => {
-                  this.footerEl = c;
-               }}
-               className={CSS.element(baseClass, "footer")}
-               style={data.footerStyle}
-            >
-               {this.props.footer}
-            </footer>
-         );
-      }
-
-      var body = (
-         <div
-            key="body"
-            ref={(c) => {
-               this.bodyEl = c;
-            }}
-            className={CSS.expand(CSS.element(widget.baseClass, "body", { pad: widget.pad }), data.bodyClass)}
-            style={data.bodyStyle}
-         >
-            {this.props.children}
-         </div>
-      );
-
-      return [header, body, footer];
-   }
-
-   getOverlayCssClass() {
-      var cls = super.getOverlayCssClass();
-      if (this.state.active) cls += " cxs-active";
-      return cls;
-   }
-
-   onFocusIn() {
-      super.onFocusIn();
-      if (!this.state.active) {
-         if (this.containerEl.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
-         this.setState({ active: true });
-      }
-   }
-
-   onFocusOut() {
-      super.onFocusOut();
-      if (this.state.active) {
-         this.setState({
-            active: false,
-         });
-      }
-   }
-
-   onHeaderMouseDown(e) {
-      e.stopPropagation();
-      ddMouseDown(e);
-   }
-
-   onHeaderMouseMove(e) {
-      e.stopPropagation();
-      if (!this.props.instance.widget.fixed && ddDetect(e)) {
-         this.startMoveOperation(e);
-      }
-   }
-}
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Overlay, OverlayComponent } from "./Overlay";
+import { ContentPlaceholder } from "../../ui/layout/ContentPlaceholder";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { Button } from "../Button";
+import { parseStyle } from "../../util/parseStyle";
+import { Localization } from "../../ui/Localization";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { ddMouseDown, ddDetect, ddMouseUp } from "../drag-drop/ops";
+import { isDefined } from "../../util/isDefined";
+import { isString } from "../../util/isString";
+
+export class Window extends Overlay {
+   init() {
+      if (isDefined(this.closeable)) this.closable = this.closeable;
+
+      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
+
+      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
+
+      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
+
+      super.init();
+   }
+
+   declareData() {
+      return super.declareData(...arguments, {
+         title: undefined,
+         closable: undefined,
+         bodyStyle: { structured: true },
+         bodyClass: { structured: true },
+         headerStyle: { structured: true },
+         footerStyle: { structured: true },
+      });
+   }
+
+   initHelpers() {
+      return super.initHelpers(...arguments, {
+         header: Widget.create(this.header || { type: ContentPlaceholder, name: "header", scoped: true }),
+         footer: Widget.create(this.footer || { type: ContentPlaceholder, name: "footer", scoped: true }),
+         close:
+            this.closable &&
+            Button.create({
+               mod: "hollow",
+               dismiss: true,
+               icon: "close",
+               style: "margin-left: auto",
+               onTouchStart: stopPropagation,
+               onMouseDown: stopPropagation,
+            }),
+      });
+   }
+
+   exploreCleanup(context, instance) {
+      super.exploreCleanup(context, instance);
+
+      let { helpers } = instance;
+      let unregisterHeader = helpers.header && helpers.header.unregisterContentPlaceholder;
+      if (unregisterHeader) unregisterHeader();
+
+      let unregisterFooter = helpers.footer && helpers.footer.unregisterContentPlaceholder;
+      if (unregisterFooter) unregisterFooter();
+   }
+
+   renderHeader(context, instance, key) {
+      let { data } = instance;
+      let result = [];
+      if (data.title) result.push(data.title);
+      if (instance.helpers) {
+         let header = getContent(instance.helpers.header && instance.helpers.header.render(context, key));
+         if (header) result.push(header);
+         if (data.closable && instance.helpers.close) result.push(getContent(instance.helpers.close.render(context)));
+      }
+      return result;
+   }
+
+   renderFooter(context, instance, key) {
+      return getContent(instance.helpers && instance.helpers.footer && instance.helpers.footer.render(context, key));
+   }
+
+   render(context, instance, key) {
+      var header = this.renderHeader(context, instance, "header");
+      var footer = this.renderFooter(context, instance, "footer");
+      return (
+         <WindowComponent
+            key={key}
+            instance={instance}
+            header={header}
+            footer={footer}
+            subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
+         >
+            {this.renderContents(context, instance)}
+         </WindowComponent>
+      );
+   }
+}
+
+Window.prototype.baseClass = "window";
+Window.prototype.closable = true;
+Window.prototype.resizable = false;
+Window.prototype.fixed = false;
+Window.prototype.autoFocus = true;
+Window.prototype.focusable = true;
+Window.prototype.pad = true;
+
+Widget.alias("window", Window);
+Localization.registerPrototype("cx/widgets/Window", Window);
+
+class WindowComponent extends OverlayComponent {
+   renderOverlayBody() {
+      var { widget, data } = this.props.instance;
+      var { CSS, baseClass } = widget;
+
+      let header, footer;
+
+      if (this.props.header.length > 0) {
+         header = (
+            <header
+               key="header"
+               ref={(c) => {
+                  this.headerEl = c;
+               }}
+               className={CSS.element(baseClass, "header")}
+               style={data.headerStyle}
+               onMouseDown={this.onHeaderMouseDown.bind(this)}
+               onMouseUp={ddMouseUp}
+               onMouseMove={this.onHeaderMouseMove.bind(this)}
+               onTouchStart={this.onHeaderMouseDown.bind(this)}
+               onTouchEnd={ddMouseUp}
+               onTouchMove={this.onHeaderMouseMove.bind(this)}
+            >
+               {this.props.header}
+            </header>
+         );
+      }
+
+      if (this.props.footer) {
+         footer = (
+            <footer
+               key="footer"
+               ref={(c) => {
+                  this.footerEl = c;
+               }}
+               className={CSS.element(baseClass, "footer")}
+               style={data.footerStyle}
+            >
+               {this.props.footer}
+            </footer>
+         );
+      }
+
+      var body = (
+         <div
+            key="body"
+            ref={(c) => {
+               this.bodyEl = c;
+            }}
+            className={CSS.expand(CSS.element(widget.baseClass, "body", { pad: widget.pad }), data.bodyClass)}
+            style={data.bodyStyle}
+         >
+            {this.props.children}
+         </div>
+      );
+
+      return [header, body, footer];
+   }
+
+   getOverlayCssClass() {
+      var cls = super.getOverlayCssClass();
+      if (this.state.active) cls += " cxs-active";
+      return cls;
+   }
+
+   onFocusIn() {
+      super.onFocusIn();
+      if (!this.state.active) {
+         if (this.containerEl.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+         this.setState({ active: true });
+      }
+   }
+
+   onFocusOut() {
+      super.onFocusOut();
+      if (this.state.active) {
+         this.setState({
+            active: false,
+         });
+      }
+   }
+
+   onHeaderMouseDown(e) {
+      e.stopPropagation();
+      ddMouseDown(e);
+   }
+
+   onHeaderMouseMove(e) {
+      e.stopPropagation();
+      if (!this.props.instance.widget.fixed && ddDetect(e)) {
+         this.startMoveOperation(e);
+      }
+   }
+}