cx 26.4.1 → 26.4.3

package/src/jsx-dev-runtime.ts

@@ -2,3 +2,4 @@ import { jsx, jsxs } from "./jsx-runtime";
 
 export const jsxDEV = jsx;
 export const jsxsDEV = jsxs;
+export { Fragment, JSX } from "./jsx-runtime";

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;

package/src/widgets/overlay/Overlay.tsx

@@ -278,6 +278,7 @@ export class OverlayBase<
 
       return (
          <OverlayComponent
+            key={key}
             beaconEl={null}
             instance={instance}
             subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}