cx 26.4.1 → 26.4.2

package/src/widgets/nav/Tab.ts

@@ -1,122 +1,122 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
-import { Instance } from "../../ui/Instance";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { preventFocus, preventFocusOnTouch } from "../../ui/FocusManager";
-import { isUndefined } from "../../util/isUndefined";
-import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
-
-export interface TabConfig extends HtmlElementConfigBase {
-   /** A value to be written to the `value` property if the tab is clicked. */
-   tab?: Prop<string | number>;
-
-   /**
-    * Value of the currently selected tab.
-    * If `value` is equal to `tab`, the tab appears active.
-    */
-   value?: StringProp;
-
-   /** Set to `true` to disable selection. */
-   disabled?: BooleanProp;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string;
-
-   /**
-    * Determines if tab should receive focus on `mousedown` event.
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean;
-
-   /** Set to true to set the default tab. */
-   default?: boolean;
-}
-
-export class Tab extends HtmlElement<TabConfig> {
-   declare public baseClass: string;
-   declare public tag: string;
-   declare public focusOnMouseDown: boolean;
-   declare public default: boolean;
-   declare public shape?: string;
-   declare public onMouseDown?: any;
-   declare public onClick?: any;
-   declareData() {
-      super.declareData(
-         {
-            tab: undefined,
-            value: undefined,
-            disabled: undefined,
-            text: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
-      let { data } = instance;
-      data.stateMods = {
-         active: data.tab == data.value,
-         disabled: data.disabled,
-         shape: this.shape,
-      };
-      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName: string) {
-      switch (attrName) {
-         case "value":
-         case "tab":
-         case "text":
-         case "disabled":
-         case "default":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-      if (!data.disabled) {
-         props.href = "#";
-         delete props.value;
-
-         props.onMouseDown = (e: any) => {
-            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
-            if (!this.focusOnMouseDown) preventFocus(e);
-            else preventFocusOnTouch(e);
-         };
-
-         props.onClick = (e: any) => this.handleClick(e, instance);
-      }
-   }
-
-   handleClick(e: any, instance: Instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
-         return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { data } = instance;
-
-      if (data.disabled) return;
-
-      instance.set("value", data.tab);
-   }
-}
-
-Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = "a";
-Tab.prototype.focusOnMouseDown = false;
-Tab.prototype.default = false;
-
-Widget.alias("tab", Tab);
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { preventFocus, preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+
+export interface TabConfig extends HtmlElementConfigBase {
+   /** A value to be written to the `value` property if the tab is clicked. */
+   tab?: Prop<string | number>;
+
+   /**
+    * Value of the currently selected tab.
+    * If `value` is equal to `tab`, the tab appears active.
+    */
+   value?: StringProp;
+
+   /** Set to `true` to disable selection. */
+   disabled?: BooleanProp;
+
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string;
+
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string;
+
+   /**
+    * Determines if tab should receive focus on `mousedown` event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Set to true to set the default tab. */
+   default?: boolean;
+}
+
+export class Tab extends HtmlElement<TabConfig> {
+   declare public baseClass: string;
+   declare public tag: string;
+   declare public focusOnMouseDown: boolean;
+   declare public default: boolean;
+   declare public shape?: string;
+   declare public onMouseDown?: any;
+   declare public onClick?: any;
+   declareData() {
+      super.declareData(
+         {
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
+      let { data } = instance;
+      data.stateMods = {
+         active: data.tab == data.value,
+         disabled: data.disabled,
+         shape: this.shape,
+      };
+      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string) {
+      switch (attrName) {
+         case "value":
+         case "tab":
+         case "text":
+         case "disabled":
+         case "default":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+      if (!data.disabled) {
+         props.href = "#";
+         delete props.value;
+
+         props.onMouseDown = (e: any) => {
+            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
+            if (!this.focusOnMouseDown) preventFocus(e);
+            else preventFocusOnTouch(e);
+         };
+
+         props.onClick = (e: any) => this.handleClick(e, instance);
+      }
+   }
+
+   handleClick(e: any, instance: Instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+         return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { data } = instance;
+
+      if (data.disabled) return;
+
+      instance.set("value", data.tab);
+   }
+}
+
+Tab.prototype.baseClass = "tab";
+Tab.prototype.tag = "a";
+Tab.prototype.focusOnMouseDown = false;
+Tab.prototype.default = false;
+
+Widget.alias("tab", Tab);

package/src/widgets/overlay/ContextMenu.ts

@@ -20,6 +20,7 @@ ContextMenu.prototype.offset = 0;
 ContextMenu.prototype.autoFocus = true;
 ContextMenu.prototype.autoFocusFirstChild = false;
 ContextMenu.prototype.focusable = true;
+ContextMenu.prototype.alignArrow = true;
 
 Localization.registerPrototype("cx/widgets/ContextMenu", ContextMenu);
 

package/src/widgets/overlay/Dropdown.scss

@@ -96,11 +96,11 @@
    .#{$state}place-right-down,
    .#{$state}place-left-down {
       & > .#{$element}#{$name}-arrow-fill {
-         top: $cx-default-dropdown-arrow-offset;
+         top: var(--cx-scss-dropdown-arrow-offset);
       }
 
       & > .#{$element}#{$name}-arrow-border {
-         top: $cx-default-dropdown-arrow-offset;
+         top: var(--cx-scss-dropdown-arrow-offset);
       }
    }
 
@@ -108,7 +108,7 @@
    .#{$state}place-left-up {
       & > .#{$element}#{$name}-arrow-fill,
       & > .#{$element}#{$name}-arrow-border {
-         top: cx-calc(100%, cx-multiply($cx-default-dropdown-arrow-offset, -1));
+         top: calc(100% - var(--cx-scss-dropdown-arrow-offset));
       }
    }
 
@@ -156,18 +156,18 @@
    .#{$state}place-up-right {
       & > .#{$element}#{$name}-arrow-fill,
       & > .#{$element}#{$name}-arrow-border {
-         left: $cx-default-dropdown-arrow-offset;
+         left: var(--cx-scss-dropdown-arrow-offset);
       }
    }
 
    .#{$state}place-down-left,
    .#{$state}place-up-left {
       & > .#{$element}#{$name}-arrow-fill {
-         left: cx-calc(100%, cx-multiply($cx-default-dropdown-arrow-offset, -1));
+         left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
       }
 
       & > .#{$element}#{$name}-arrow-border {
-         left: cx-calc(100%, cx-multiply($cx-default-dropdown-arrow-offset, -1));
+         left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
       }
    }
 }
@@ -187,6 +187,7 @@
       display: block;
       left: -10000px;
       top: -10000px;
+      --cx-scss-dropdown-arrow-offset: var(--cx-js-dropdown-arrow-offset, #{$cx-default-dropdown-arrow-offset});
 
       @include cx-add-rules($styles);
 

package/src/widgets/overlay/Dropdown.tsx

@@ -52,6 +52,12 @@ export interface DropdownConfig extends OverlayConfig {
   /** Show an arrow pointing to the trigger element. */
   arrow?: boolean;
 
+  /** Shift the dropdown so the arrow tip lines up with the target point (e.g. the mouse cursor for context menus). Only applies when `arrow` is also set. */
+  alignArrow?: boolean;
+
+  /** Distance of the arrow tip from the dropdown's edge, in pixels. Override for the theme's default. */
+  arrowOffset?: number;
+
   /** Add padding around the dropdown. */
   pad?: boolean;
 
@@ -131,6 +137,8 @@ export class DropdownBase<
   declare positioning?: string;
   declare touchFriendly?: boolean;
   declare arrow?: boolean;
+  declare alignArrow?: boolean;
+  declare arrowOffset?: number;
   declare elementExplode?: number;
   declare screenPadding: number;
   declare firstChildDefinesHeight?: boolean;
@@ -174,6 +182,16 @@ export class DropdownBase<
     super.initInstance(context, instance);
   }
 
+  prepareData(context: RenderingContext, instance: InstanceType): void {
+    super.prepareData(context, instance);
+    if (this.arrowOffset != null) {
+      instance.data.style = {
+        ...instance.data.style,
+        "--cx-js-dropdown-arrow-offset": `${this.arrowOffset}px`,
+      };
+    }
+  }
+
   explore(context: RenderingContext, instance: InstanceType): void {
     context.push("lastDropdown", instance);
     super.explore(context, instance);
@@ -318,6 +336,8 @@ export class DropdownBase<
       component.lastPlacement,
     );
 
+    var arrowAdjust = this.getArrowAdjust(component);
+
     this.applyPositioningPlacementStyles(
       style,
       placement,
@@ -325,6 +345,7 @@ export class DropdownBase<
       parentBounds,
       el,
       false,
+      arrowAdjust,
     );
     component.setCustomStyle(style);
     this.setDirectionClass(component, placement);
@@ -344,6 +365,7 @@ export class DropdownBase<
           parentBounds,
           el,
           true,
+          arrowAdjust,
         );
         component.setCustomStyle(newStyle);
       }
@@ -369,6 +391,19 @@ export class DropdownBase<
     instance.positionChangeSubscribers.notify();
   }
 
+  getArrowAdjust(component: any): number {
+    if (!this.alignArrow || !this.arrow) return 0;
+    if (component.cachedArrowOffset != null) return component.cachedArrowOffset;
+    if (!component.el) return 0;
+    let raw = getComputedStyle(component.el)
+      .getPropertyValue("--cx-scss-dropdown-arrow-offset")
+      .trim();
+    let parsed = parseFloat(raw);
+    if (!isFinite(parsed)) return 0;
+    component.cachedArrowOffset = parsed;
+    return parsed;
+  }
+
   applyFixedPositioningPlacementStyles(
     style: any,
     placement: string,
@@ -376,6 +411,7 @@ export class DropdownBase<
     rel: any,
     el: HTMLElement,
     noAuto: boolean,
+    arrowAdjust: number = 0,
   ): void {
     let viewport = getViewportRect(this.screenPadding);
     style.position = "fixed";
@@ -410,11 +446,11 @@ export class DropdownBase<
 
       case "down-right":
         style.right = "auto";
-        style.left = `${rel.left}px`;
+        style.left = `${rel.left - arrowAdjust}px`;
         break;
 
       case "down-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -426,11 +462,11 @@ export class DropdownBase<
 
       case "up-right":
         style.right = "auto";
-        style.left = `${rel.left}px`;
+        style.left = `${rel.left - arrowAdjust}px`;
         break;
 
       case "up-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right}px`;
+        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -443,7 +479,7 @@ export class DropdownBase<
         break;
 
       case "right-down":
-        style.top = `${rel.top}px`;
+        style.top = `${rel.top - arrowAdjust}px`;
         style.right = "auto";
         style.bottom = "auto";
         style.left = `${rel.right + this.offset}px`;
@@ -452,7 +488,7 @@ export class DropdownBase<
       case "right-up":
         style.top = "auto";
         style.right = "auto";
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
         style.left = `${rel.right + this.offset}px`;
         break;
 
@@ -465,7 +501,7 @@ export class DropdownBase<
         break;
 
       case "left-down":
-        style.top = `${rel.top}px`;
+        style.top = `${rel.top - arrowAdjust}px`;
         style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
@@ -474,7 +510,7 @@ export class DropdownBase<
       case "left-up":
         style.top = "auto";
         style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom}px`;
+        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -502,6 +538,7 @@ export class DropdownBase<
     rel: any,
     el: HTMLElement,
     noAuto: boolean,
+    arrowAdjust: number = 0,
   ): void {
     var viewport = getViewportRect(this.screenPadding);
 
@@ -532,11 +569,11 @@ export class DropdownBase<
 
       case "down-right":
         style.right = "auto";
-        style.left = `0`;
+        style.left = `${-arrowAdjust}px`;
         break;
 
       case "down-left":
-        style.right = `0`;
+        style.right = `${-arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -548,11 +585,11 @@ export class DropdownBase<
 
       case "up-right":
         style.right = "auto";
-        style.left = `0`;
+        style.left = `${-arrowAdjust}px`;
         break;
 
       case "up-left":
-        style.right = `0`;
+        style.right = `${-arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -565,7 +602,7 @@ export class DropdownBase<
         break;
 
       case "right-down":
-        style.top = `0`;
+        style.top = `${-arrowAdjust}px`;
         style.right = "auto";
         style.bottom = "auto";
         style.left = `${rel.right - rel.left + this.offset}px`;
@@ -574,7 +611,7 @@ export class DropdownBase<
       case "right-up":
         style.top = "auto";
         style.right = "auto";
-        style.bottom = `0`;
+        style.bottom = `${-arrowAdjust}px`;
         style.left = `${rel.right - rel.left + this.offset}px`;
         break;
 
@@ -587,7 +624,7 @@ export class DropdownBase<
         break;
 
       case "left-down":
-        style.top = `0`;
+        style.top = `${-arrowAdjust}px`;
         style.right = `${rel.right - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
@@ -596,7 +633,7 @@ export class DropdownBase<
       case "left-up":
         style.top = "auto";
         style.right = `${rel.right - rel.left + this.offset}px`;
-        style.bottom = `0`;
+        style.bottom = `${-arrowAdjust}px`;
         style.left = "auto";
         break;
     }
@@ -609,6 +646,7 @@ export class DropdownBase<
     parentBounds: any,
     el: HTMLElement,
     noAuto: boolean,
+    arrowAdjust: number = 0,
   ): void {
     switch (this.positioning) {
       case "absolute":
@@ -619,6 +657,7 @@ export class DropdownBase<
           parentBounds,
           el,
           noAuto,
+          arrowAdjust,
         );
         break;
 
@@ -631,6 +670,7 @@ export class DropdownBase<
             parentBounds,
             el,
             noAuto,
+            arrowAdjust,
           );
         else
           this.applyFixedPositioningPlacementStyles(
@@ -640,6 +680,7 @@ export class DropdownBase<
             parentBounds,
             el,
             noAuto,
+            arrowAdjust,
           );
         break;
 
@@ -651,6 +692,7 @@ export class DropdownBase<
           parentBounds,
           el,
           noAuto,
+          arrowAdjust,
         );
         break;
     }
@@ -914,6 +956,7 @@ DropdownBase.prototype.constrain = false;
 DropdownBase.prototype.positioning = "fixed";
 DropdownBase.prototype.touchFriendly = false;
 DropdownBase.prototype.arrow = false;
+DropdownBase.prototype.alignArrow = false;
 DropdownBase.prototype.pad = false;
 DropdownBase.prototype.elementExplode = 0;
 DropdownBase.prototype.closeOnScrollDistance = 50;