cx 22.1.1 → 22.1.4

package/src/widgets/nav/MenuItem.d.ts

@@ -19,8 +19,6 @@ export interface MenuItemProps extends Cx.HtmlElementProps {
    keyboardShortcut?: KeyboardShortcut;
    tooltip?: string | Cx.Config;
    openOnFocus?: boolean;
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeDropdownOnScrollDistance?: number;
 
    /**
     * Click handler.

package/src/widgets/nav/MenuItem.js

@@ -109,7 +109,6 @@ MenuItem.prototype.checkedIcon = "check";
 MenuItem.prototype.uncheckedIcon = "dummy";
 MenuItem.prototype.keyboardShortcut = false;
 MenuItem.prototype.openOnFocus = true;
-MenuItem.prototype.closeDropdownOnScrollDistance = 100;
 
 Widget.alias("submenu", MenuItem);
 Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
@@ -145,19 +144,10 @@ class MenuItemComponent extends VDOM.Component {
             pipeValidateDropdownPosition: (cb) => {
                this.validateDropdownPosition = cb;
             },
-            onDropdownPositionDidUpdate: (params) => {
-               let { parentBounds } = params;
-               let { initialScreenPosition } = this;
-
-               if (!initialScreenPosition)
-                  initialScreenPosition = this.initialScreenPosition = params.parentBounds;
-
-               if (
-                  Math.abs(parentBounds.top - initialScreenPosition.top) > widget.closeDropdownOnScrollDistance ||
-                  Math.abs(parentBounds.left - initialScreenPosition.left) > widget.closeDropdownOnScrollDistance
-               )
-                  this.closeDropdown();
-            }
+            onDismissAfterScroll: () => {
+               this.closeDropdown();
+               return false;
+            },
          });
       }
       return this.dropdown;
@@ -261,7 +251,10 @@ class MenuItemComponent extends VDOM.Component {
    onDropdownKeyDown(e) {
       debug(menuFlag, "MenuItem", "dropdownKeyDown");
       let { horizontal } = this.props.instance;
-      if (e.keyCode == KeyCode.esc || (!isTextInputElement(e.target) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))) {
+      if (
+         e.keyCode == KeyCode.esc ||
+         (!isTextInputElement(e.target) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))
+      ) {
          FocusManager.focus(this.el);
          e.preventDefault();
          e.stopPropagation();

package/src/widgets/nav/Tab.js

@@ -1,38 +1,39 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {HtmlElement} from '../HtmlElement';
-import {preventFocusOnTouch} from '../../ui/FocusManager';
-import {isUndefined} from '../../util/isUndefined';
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
 
 export class Tab extends HtmlElement {
-
    declareData() {
-      super.declareData({
-         tab: undefined,
-         value: undefined,
-         disabled: undefined,
-         text: undefined
-      }, ...arguments);
+      super.declareData(
+         {
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+         },
+         ...arguments
+      );
    }
 
    prepareData(context, instance) {
-      let {data} = instance;
+      let { data } = instance;
       data.stateMods = {
          active: data.tab == data.value,
          disabled: data.disabled,
-         shape: this.shape
+         shape: this.shape,
       };
-      if (this.default && isUndefined(data.value))
-         instance.set('value', data.tab);
+      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
       super.prepareData(context, instance);
    }
 
    isValidHtmlAttribute(attrName) {
       switch (attrName) {
-         case 'value':
-         case 'tab':
-         case 'text':
-         case 'disabled':
-         case 'default':
+         case "value":
+         case "tab":
+         case "text":
+         case "disabled":
+         case "default":
             return false;
 
          default:
@@ -43,41 +44,39 @@ export class Tab extends HtmlElement {
    attachProps(context, instance, props) {
       super.attachProps(context, instance, props);
 
-      let {data} = instance;
+      let { data } = instance;
       if (!data.disabled) {
-         props.href = '#';
+         props.href = "#";
          delete props.value;
 
-         props.onMouseDown = e => {
-            if (this.onMouseDown)
-               instance.invoke('onMouseDown', e, instance);
+         props.onMouseDown = (e) => {
+            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
             preventFocusOnTouch(e);
          };
 
-         props.onClick = e => this.handleClick(e, instance);
+         props.onClick = (e) => this.handleClick(e, instance);
       }
    }
 
    handleClick(e, instance) {
-
-      if (this.onClick)
-         instance.invoke('onClick', e, instance);
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+         return;
+      }
 
       e.preventDefault();
       e.stopPropagation();
 
-      let {data} = instance;
+      let { data } = instance;
 
-      if (data.disabled)
-         return;
+      if (data.disabled) return;
 
-      instance.set('value', data.tab);
+      instance.set("value", data.tab);
    }
 }
 
 Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = 'a';
+Tab.prototype.tag = "a";
 Tab.prototype.focusOnMouseDown = false;
 Tab.prototype.default = false;
 
-Widget.alias('tab', Tab);
+Widget.alias("tab", Tab);

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

@@ -18,6 +18,9 @@ export interface DropdownProps extends OverlayProps {
    firstChildDefinesHeight?: boolean;
    firstChildDefinesWidth?: boolean;
 
+   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
+   closeOnScrollDistance?: number;
+
    onResolveRelatedElement?(beaconEl: Element, instance: any);
 }
 

package/src/widgets/overlay/Dropdown.js

@@ -19,8 +19,7 @@ export class Dropdown extends Overlay {
          this.trackMouseX = true;
          this.trackMouseY = true;
       }
-      if (this.autoFocus && !this.hasOwnProperty(this.focusable))
-         this.focusable = true;
+      if (this.autoFocus && !this.hasOwnProperty(this.focusable)) this.focusable = true;
       super.init();
    }
 
@@ -51,6 +50,8 @@ export class Dropdown extends Overlay {
       var scrollableParents = (component.scrollableParents = [window]);
       component.updateDropdownPosition = (e) => this.updateDropdownPosition(instance, component);
 
+      instance.initialScreenPosition = null;
+
       var el = instance.relatedElement.parentElement;
       while (el) {
          scrollableParents.push(el);
@@ -67,7 +68,9 @@ export class Dropdown extends Overlay {
          instance.invoke("pipeValidateDropdownPosition", component.updateDropdownPosition, instance);
 
       if (instance.parentPositionChangeEvent)
-         component.offParentPositionChange = instance.parentPositionChangeEvent.subscribe(component.updateDropdownPosition);
+         component.offParentPositionChange = instance.parentPositionChangeEvent.subscribe(
+            component.updateDropdownPosition
+         );
    }
 
    overlayDidUpdate(instance, component) {
@@ -90,10 +93,17 @@ export class Dropdown extends Overlay {
       if (component.offParentPositionChange) component.offParentPositionChange();
 
       delete component.parentBounds;
+      delete component.initialScreenPosition;
+   }
+
+   dismissAfterScroll(data, instance, component) {
+      if (this.onDismissAfterScroll && instance.invoke("onDismissAfterScroll", data, instance, component) === false)
+         return;
+      if (instance.dismiss) instance.dismiss();
    }
 
    updateDropdownPosition(instance, component) {
-      var { el } = component;
+      var { el, initialScreenPosition } = component;
       var { data, relatedElement } = instance;
       var parentBounds = (component.parentBounds = getTopLevelBoundingClientRect(relatedElement));
 
@@ -150,13 +160,15 @@ export class Dropdown extends Overlay {
          }
       }
 
-      let params = {
-         style, placement, parentBounds
-      };
+      if (!initialScreenPosition) initialScreenPosition = component.initialScreenPosition = parentBounds;
 
-      if (this.onDropdownPositionDidUpdate) instance.invoke("onDropdownPositionDidUpdate", params, instance, component);
+      if (
+         Math.abs(parentBounds.top - initialScreenPosition.top) > this.closeOnScrollDistance ||
+         Math.abs(parentBounds.left - initialScreenPosition.left) > this.closeOnScrollDistance
+      )
+         this.dismissAfterScroll({ parentBounds, initialScreenPosition }, instance, component);
 
-      instance.positionChangeSubcribers.notify();
+      instance.positionChangeSubscribers.notify();
    }
 
    applyFixedPositioningPlacementStyles(style, placement, contentSize, rel, el, noAuto) {
@@ -534,8 +546,7 @@ export class Dropdown extends Overlay {
       //if relatedElement is not provided, a beacon is rendered to and used to resolve a nearby element as a target
       //if onResolveTarget doesn't provide another element, the beacon itself is used as a target
       let beacon = null;
-      if (this.relatedElement)
-         instance.relatedElement = this.relatedElement;
+      if (this.relatedElement) instance.relatedElement = this.relatedElement;
 
       if (!this.relatedElement || instance.needsBeacon) {
          beacon = (
@@ -571,6 +582,7 @@ Dropdown.prototype.touchFriendly = false;
 Dropdown.prototype.arrow = false;
 Dropdown.prototype.pad = false;
 Dropdown.prototype.elementExplode = 0;
+Dropdown.prototype.closeOnScrollDistance = 50;
 Dropdown.prototype.screenPadding = 5;
 Dropdown.prototype.firstChildDefinesHeight = false;
 Dropdown.prototype.firstChildDefinesWidth = false;

package/src/widgets/overlay/Overlay.js

@@ -26,8 +26,7 @@ import { KeyCode } from "../../util/KeyCode";
 
 export class Overlay extends Container {
    init() {
-      if (this.center)
-         this.centerX = this.centerY = this.center;
+      if (this.center) this.centerX = this.centerY = this.center;
 
       super.init();
    }
@@ -60,7 +59,7 @@ export class Overlay extends Container {
    }
 
    initInstance(context, instance) {
-      instance.positionChangeSubcribers = new SubscriberList();
+      instance.positionChangeSubscribers = new SubscriberList();
       super.initInstance(context, instance);
    }
 
@@ -83,7 +82,7 @@ export class Overlay extends Container {
 
       if (instance.cache("dismiss", instance.dismiss)) instance.markShouldUpdate(context);
 
-      context.push("parentPositionChangeEvent", instance.positionChangeSubcribers);
+      context.push("parentPositionChangeEvent", instance.positionChangeSubscribers);
 
       super.explore(context, instance);
    }
@@ -112,15 +111,14 @@ export class Overlay extends Container {
 
    overlayDidMount(instance, component) {
       let { el } = component;
-      if (this.centerX)
-         if (!el.style.left) el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
+      if (this.centerX) if (!el.style.left) el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
       if (this.centerY)
          if (!el.style.top) el.style.top = `${Math.max(0, (window.innerHeight - el.offsetHeight) / 2)}px`;
    }
 
-   overlayDidUpdate(instance, component) { }
+   overlayDidUpdate(instance, component) {}
 
-   overlayWillUnmount(instance, component) { }
+   overlayWillUnmount(instance, component) {}
 
    handleFocusOut(instance, component) {
       if (this.onFocusOut) instance.invoke("onFocusOut", instance, component);
@@ -193,7 +191,7 @@ export class Overlay extends Container {
             }
          });
       }
-      instance.positionChangeSubcribers.notify();
+      instance.positionChangeSubscribers.notify();
    }
 
    handleResize(e, instance, component) {
@@ -209,7 +207,7 @@ export class Overlay extends Container {
             }
          });
       }
-      instance.positionChangeSubcribers.notify();
+      instance.positionChangeSubscribers.notify();
    }
 }
 
@@ -373,7 +371,7 @@ export class OverlayComponent extends VDOM.Component {
       FocusManager.nudge();
    }
 
-   onFocusIn() { }
+   onFocusIn() {}
 
    onFocusOut() {
       let { widget } = this.props.instance;

package/src/widgets/overlay/Tooltip.js

@@ -107,16 +107,19 @@ export class Tooltip extends Dropdown {
    }
 
    dismissTooltip(instance) {
-      if (instance && instance.dismissTooltip) {
-         if (
-            instance.data &&
-            instance.data.alwaysVisible &&
-            this.relatedElement.ownerDocument.body.contains(this.relatedElement)
-         )
-            return;
-         instance.dismissTooltip();
-         instance.dismissTooltip = null;
-      }
+      if (!instance || !instance.dismissTooltip) return;
+      if (
+         instance.data &&
+         instance.data.alwaysVisible &&
+         this.relatedElement.ownerDocument.body.contains(this.relatedElement)
+      )
+         return;
+      instance.dismissTooltip();
+      instance.dismissTooltip = null;
+   }
+
+   dismissAfterScroll(data, instance) {
+      this.dismissTooltip(instance);
    }
 
    checkVisible(context, instance, data) {