cx 26.8.0 → 26.9.1

package/src/svg/Svg.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource react */
+import { StringProp } from "../ui/Prop";
 import { RenderingContext } from "../ui/RenderingContext";
 import { ResizeManager } from "../ui/ResizeManager";
 import { VDOM, Widget } from "../ui/Widget";
@@ -18,6 +19,15 @@ interface SvgInstance extends BoundedObjectInstance {
 }
 
 export interface SvgConfig extends BoundedObjectConfig {
+   /** ARIA role for the `svg` element. Defaults to `img` when `ariaLabel` is set. */
+   role?: StringProp;
+
+   /**
+    * Accessible name for the `svg` element. Setting it announces the drawing as a single graphic
+    * instead of as its individual shapes, which is also how a tagged PDF export tags it.
+    */
+   ariaLabel?: StringProp;
+
    /** Set to `true` to automatically calculate width based on the measured height and `aspectRatio`. */
    autoWidth?: boolean;
 
@@ -53,6 +63,16 @@ export class Svg extends BoundedObject<SvgConfig, SvgInstance> {
       super(config);
    }
 
+   declareData(...args: any[]) {
+      return super.declareData(
+         {
+            role: undefined,
+            ariaLabel: undefined,
+         },
+         ...args,
+      );
+   }
+
    initState(context: RenderingContext, instance: SvgInstance) {
       const size = {
          width: 0,
@@ -147,6 +167,9 @@ class SvgComponent extends VDOM.Component<SvgComponentProps> {
       const { instance, data, size, children, eventHandlers } = this.props;
       const { widget } = instance;
 
+      // An unnamed drawing is left alone: `role="img"` would hide its text and put nothing in its place.
+      const role = data.role ?? (data.ariaLabel ? "img" : undefined);
+
       const defs: any[] = [];
       for (const k in (instance as any).clipRects) {
          let cr = (instance as any).clipRects[k];
@@ -181,7 +204,7 @@ class SvgComponent extends VDOM.Component<SvgComponentProps> {
             {...eventHandlers}
          >
             {size.width > 0 && size.height > 0 && (
-               <svg>
+               <svg role={role} aria-label={data.ariaLabel}>
                   <defs>{defs}</defs>
                   {children}
                </svg>

package/src/ui/index.ts

@@ -43,9 +43,6 @@ export * from "./exprHelpers";
 
 //re-export computable here
 import { computable } from "../data/computable";
-import {
-   createAccessorModelProxy,
-   createModel,
-   AccessorChain,
-} from "../data/createAccessorModelProxy";
-export { computable, createAccessorModelProxy, createModel, AccessorChain };
+import { createAccessorModelProxy, createModel } from "../data/createAccessorModelProxy";
+export { computable, createAccessorModelProxy, createModel };
+export type { AccessorChain } from "../data/createAccessorModelProxy";

package/src/util/DOM.ts

@@ -1,4 +1,5 @@
 import { isNumber } from "../util/isNumber";
+import { getActiveElement } from "./getActiveElement";
 
 type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
 
@@ -51,11 +52,11 @@ export function closestParent(el: Element, condition: (el: any) => boolean): HTM
 }
 
 export function isFocused(el: Element): boolean {
-   return document.activeElement == el;
+   return getActiveElement() == el;
 }
 
 export function isFocusedDeep(el: Element): boolean {
-   return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
+   return isSelfOrDescendant(el, getActiveElement());
 }
 
 const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
@@ -76,13 +77,23 @@ export function isFocusable(el: Element): el is HTMLElement {
  * @returns {Element}
  */
 export function getFocusedElement(): Element | null {
-   return document.activeElement;
+   return getActiveElement();
 }
 
 export function isDescendant(el: Element, descEl: Element): boolean {
    return el.contains(descEl);
 }
 
+//`descEl` may live in a different document than `el` (e.g. focus is inside a same-origin
+//iframe) - Node.contains never crosses document boundaries, so walk out through each
+//frame's <iframe> element in its parent document until we either cross into el's document
+//or run out of ancestor frames.
 export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
-   return el == descEl || el.contains(descEl);
+   let node: Element | null | undefined = descEl;
+   while (node) {
+      if (el == node || el.contains(node)) return true;
+      let win: Window | null = node.ownerDocument?.defaultView;
+      node = win?.frameElement;
+   }
+   return false;
 }

package/src/util/getActiveElement.ts

@@ -1,4 +1,18 @@
 //IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement(): Element {
-   return document.activeElement ?? document.body;
+export function getActiveElement(doc: Document = document): Element {
+  let active = doc.activeElement ?? doc.body;
+
+  //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
+  //<iframe> element itself - drill into its own document to find the element that's
+  //actually focused there (recursively, in case of nested iframes)
+  if (active && active.tagName === "IFRAME") {
+    const iframe = active as HTMLIFrameElement;
+    let frameDoc = iframe.contentDocument;
+    if (frameDoc) {
+      const inner = getActiveElement(frameDoc);
+      return inner ?? active;
+    }
+  }
+
+  return active;
 }

package/src/widgets/form/TextArea.tsx

@@ -16,8 +16,13 @@ import { stopPropagation } from "../../util/eventCallbacks";
 import { KeyCode } from "../../util/KeyCode";
 import { autoFocus } from "../autoFocus";
 import { getActiveElement } from "../../util/getActiveElement";
+import { isString } from "../../util/isString";
 import { NumberProp } from "../../ui/Prop";
 
+/**
+ * `trim` applies to the commit that ends the edit, not to intermediate `input` commits. Whitespace
+ * inside the text is never touched.
+ */
 export interface TextAreaConfig extends TextFieldConfig {
    /** Specifies the number of visible lines. */
    rows?: NumberProp;
@@ -199,8 +204,12 @@ class Input extends VDOM.Component<InputProps, InputState> {
       }
 
       if (instance.widget.reactOn.indexOf(change) != -1) {
-         let value = inputValue || widget.emptyValue;
+         // Trimming on `input` would strip whitespace the user is still typing, so a trailing
+         // newline could never be entered.
+         let text = change != "input" && data.trim && isString(inputValue) ? inputValue.trim() : inputValue;
+         let value = text || widget.emptyValue;
          instance.set("value", value);
+         if (this.input && text != inputValue) this.input.value = text;
       }
    }
 

package/src/widgets/grid/Grid.tsx

@@ -72,10 +72,11 @@ import DropDownIcon from "../icons/sort-asc";
 import { captureMouse2, getCursorPos } from "../overlay/captureMouse";
 import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
 import { createGridCellEditor } from "./createGridCellEditor";
-import { GridRow, GridRowComponent, GridRowConfig, GridRowInstance } from "./GridRow";
+import { GridRow, GridRowComponent, GridRowInstance } from "./GridRow";
+import type { GridRowConfig } from "./GridRow";
 import { Create, CreateConfig } from "../../util";
 import type { TreeAdapter } from "../../ui/adapter/TreeAdapter";
-export { GridRowConfig };
+export type { GridRowConfig };
 
 export type GridFetchRecordsResult<T> = T[] | { records: T[]; lastPage?: boolean; totalRecordCount?: number };
 

package/src/widgets/nav/MenuItem.tsx

@@ -385,7 +385,7 @@ class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemC
          debug(menuFlag, "MenuItem", "mouseLeave", this.el);
          this.clearAutoFocusTimer();
 
-         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el!);
+         if (widget.hoverToOpen && getActiveElement() == this.el) unfocusElement(this.el!);
       }
 
       tooltipMouseLeave(e, this.props.instance, widget.tooltip);
@@ -486,7 +486,7 @@ class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemC
       let { widget } = this.props.instance;
       if (widget.dropdown) {
          oneFocusOut(this, this.el!, this.onFocusOut.bind(this));
-         debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
+         debug(menuFlag, "MenuItem", "focus", this.el, getActiveElement());
          this.clearAutoFocusTimer();
          if (widget.openOnFocus) this.openDropdown();
       }

package/src/widgets/overlay/Dropdown.tsx

@@ -5,6 +5,7 @@ import { Widget, VDOM } from "../../ui/Widget";
 import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
 import { closestParent, findFirst, isFocusable } from "../../util/DOM";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
 import { isTouchDevice } from "../../util/isTouchDevice";
 import {
   ConfigureOverlayContainerContext,
@@ -224,6 +225,23 @@ export class DropdownBase<
       component.updateDropdownPosition,
     );
 
+    //if the related element lives in a different document (e.g. inside a same-origin
+    //iframe), that document/window has its own scroll position and its own resize event
+    //(which also fires when the <iframe> element itself is resized) - neither is observed
+    //by the top-level `window` above or by the relatedElement's parentElement chain, so
+    //track every frame window between the related element's document and the top document.
+    var frameWindows: Window[] = (component.frameWindows = []);
+    var frameWin: Window | null | undefined =
+      instance.relatedElement?.ownerDocument?.defaultView;
+    while (frameWin && frameWin !== window) {
+      frameWindows.push(frameWin);
+      frameWin = frameWin.frameElement?.ownerDocument?.defaultView;
+    }
+    frameWindows.forEach((w) => {
+      w.addEventListener("scroll", component.updateDropdownPosition);
+      w.addEventListener("resize", component.updateDropdownPosition);
+    });
+
     if (this.onDropdownDidMount)
       instance.invoke("onDropdownDidMount", instance, component);
 
@@ -246,14 +264,21 @@ export class DropdownBase<
   }
 
   overlayWillUnmount(instance: InstanceType, component: any): void {
-    var { scrollableParents } = component;
+    var { scrollableParents, frameWindows } = component;
     if (scrollableParents) {
       scrollableParents.forEach((el: Element) => {
         el.removeEventListener("scroll", component.updateDropdownPosition);
       });
       delete component.scrollableParents;
-      delete component.updateDropdownPosition;
     }
+    if (frameWindows) {
+      frameWindows.forEach((w: Window) => {
+        w.removeEventListener("scroll", component.updateDropdownPosition);
+        w.removeEventListener("resize", component.updateDropdownPosition);
+      });
+      delete component.frameWindows;
+    }
+    delete component.updateDropdownPosition;
     if (component.offResize) component.offResize();
 
     if (this.pipeValidateDropdownPosition)
@@ -278,7 +303,17 @@ export class DropdownBase<
   updateDropdownPosition(instance: InstanceType, component: any): void {
     var { el, initialScreenPosition } = component;
     var { data, relatedElement } = instance;
-    var parentBounds = getTopLevelBoundingClientRect(relatedElement!);
+    var elDocument: Document = el.ownerDocument || document;
+
+    //if the dropdown renders in the same document as its related element (e.g. not
+    //portaled to the top-level body, such as an inline dropdown living inside an
+    //iframe together with its field), no cross-document offset should be applied -
+    //getBoundingClientRect() is already relative to that shared document/viewport.
+    var isSameDocument =
+      el && relatedElement && el.ownerDocument === relatedElement.ownerDocument;
+    var parentBounds = isSameDocument
+      ? relatedElement!.getBoundingClientRect()
+      : getTopLevelBoundingClientRect(relatedElement!);
 
     //getBoundingClientRect() will return an empty rect if the element is hidden or removed
     if (
@@ -291,19 +326,33 @@ export class DropdownBase<
       parentBounds = component.parentBounds;
     } else component.parentBounds = parentBounds;
 
-    if (this.trackMouseX && instance.mousePosition) {
+    //instance.mousePosition (set from getCursorPos) is always expressed in top-document
+    //coordinates. When the dropdown and its related element share a document that isn't
+    //the top document (e.g. both live inside the same iframe), parentBounds above is in
+    //that document's own coordinate space, so the mouse position must be translated into
+    //the same space before it can replace part of parentBounds.
+    var mousePosition = instance.mousePosition;
+    if (mousePosition && isSameDocument && elDocument !== document) {
+      const frameOffset = getParentFrameBoundingClientRect(relatedElement!);
+      mousePosition = {
+        x: mousePosition.x - frameOffset.left,
+        y: mousePosition.y - frameOffset.top,
+      };
+    }
+
+    if (this.trackMouseX && mousePosition) {
       parentBounds = new DOMRect(
-        instance.mousePosition.x,
+        mousePosition.x,
         parentBounds.top,
         0,
         parentBounds.bottom - parentBounds.top,
       );
     }
 
-    if (this.trackMouseY && instance.mousePosition) {
+    if (this.trackMouseY && mousePosition) {
       parentBounds = new DOMRect(
         parentBounds.left,
-        instance.mousePosition.y,
+        mousePosition.y,
         parentBounds.right - parentBounds.left,
         0,
       );
@@ -334,6 +383,7 @@ export class DropdownBase<
       parentBounds,
       data.placement,
       component.lastPlacement,
+      elDocument,
     );
 
     var arrowAdjust = this.getArrowAdjust(component);
@@ -346,6 +396,7 @@ export class DropdownBase<
       el,
       false,
       arrowAdjust,
+      elDocument,
     );
     component.setCustomStyle(style);
     this.setDirectionClass(component, placement);
@@ -366,6 +417,7 @@ export class DropdownBase<
           el,
           true,
           arrowAdjust,
+          elDocument,
         );
         component.setCustomStyle(newStyle);
       }
@@ -412,8 +464,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    let viewport = getViewportRect(this.screenPadding);
+    let viewport = getViewportRect(this.screenPadding, elDocument);
     style.position = "fixed";
 
     if (placement.startsWith("down")) {
@@ -431,7 +484,7 @@ export class DropdownBase<
           ? Math.max(this.screenPadding, top) + "px"
           : "auto";
       style.bottom =
-        document.documentElement.offsetHeight -
+        elDocument.documentElement.clientHeight -
         (this.cover ? rel.bottom : rel.top) +
         this.offset +
         "px";
@@ -450,7 +503,7 @@ export class DropdownBase<
         break;
 
       case "down-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -466,7 +519,7 @@ export class DropdownBase<
         break;
 
       case "up-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -488,45 +541,45 @@ export class DropdownBase<
       case "right-up":
         style.top = "auto";
         style.right = "auto";
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.bottom = `${elDocument.documentElement.clientHeight - rel.bottom - arrowAdjust}px`;
         style.left = `${rel.right + this.offset}px`;
         break;
 
       case "left":
       case "left-center":
         style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
         break;
 
       case "left-down":
         style.top = `${rel.top - arrowAdjust}px`;
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
         break;
 
       case "left-up":
         style.top = "auto";
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
+        style.bottom = `${elDocument.documentElement.clientHeight - rel.bottom - arrowAdjust}px`;
         style.left = "auto";
         break;
 
       case "screen-center":
         let w = Math.min(
           contentSize.width,
-          document.documentElement.offsetWidth - 2 * this.screenPadding,
+          elDocument.documentElement.clientWidth - 2 * this.screenPadding,
         );
         let h = Math.min(
           contentSize.height,
-          document.documentElement.offsetHeight - 2 * this.screenPadding,
+          elDocument.documentElement.clientHeight - 2 * this.screenPadding,
         );
-        style.top = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-        style.right = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
-        style.bottom = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-        style.left = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
+        style.top = `${Math.round((elDocument.documentElement.clientHeight - h) / 2)}px`;
+        style.right = `${Math.round((elDocument.documentElement.clientWidth - w) / 2)}px`;
+        style.bottom = `${Math.round((elDocument.documentElement.clientHeight - h) / 2)}px`;
+        style.left = `${Math.round((elDocument.documentElement.clientWidth - w) / 2)}px`;
         break;
     }
   }
@@ -539,8 +592,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    var viewport = getViewportRect(this.screenPadding);
+    var viewport = getViewportRect(this.screenPadding, elDocument);
 
     style.position = "absolute";
 
@@ -647,6 +701,7 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
     switch (this.positioning) {
       case "absolute":
@@ -658,6 +713,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
 
@@ -671,6 +727,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         else
           this.applyFixedPositioningPlacementStyles(
@@ -681,6 +738,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         break;
 
@@ -693,6 +751,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
     }
@@ -749,13 +808,14 @@ export class DropdownBase<
     target: any,
     placement: string,
     lastPlacement: any,
+    elDocument: Document,
   ): any {
     var placementOrder = this.placementOrder.split(" ");
     var best = lastPlacement || placement;
     var first;
 
     var score: Record<string, number> = {};
-    var viewport = getViewportRect();
+    var viewport = getViewportRect(0, elDocument);
 
     for (var i = 0; i < placementOrder.length; i++) {
       var p = placementOrder[i];
@@ -970,11 +1030,11 @@ export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
 Widget.alias("dropdown", Dropdown);
 Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
 
-function getViewportRect(padding = 0) {
+function getViewportRect(padding = 0, elDocument: Document = document) {
   return {
     left: padding,
     top: padding,
-    right: document.documentElement.offsetWidth - padding,
-    bottom: document.documentElement.offsetHeight - padding,
+    right: elDocument.documentElement.clientWidth - padding,
+    bottom: elDocument.documentElement.clientHeight - padding,
   };
 }

package/src/widgets/overlay/Overlay.tsx

@@ -765,9 +765,11 @@ export class OverlayComponent<
          widget.handleResize(e, instance, this);
       } else {
          let prefix = this.getResizePrefix(e);
-         this.setCustomStyle({
-            cursor: prefix ? prefix + "-resize" : undefined,
-         });
+         if (prefix) this.setCustomStyle({ cursor: `${prefix}-resize` });
+         else if (this.customStyle.cursor) {
+            delete this.customStyle.cursor;
+            if (this.el) this.el.style.cursor = data.style?.cursor ?? "";
+         }
       }
    }
 

package/src/widgets/overlay/Window.tsx

@@ -21,6 +21,7 @@ import { isDefined } from "../../util/isDefined";
 import { isString } from "../../util/isString";
 import { BooleanProp, StringProp, StyleProp, ClassProp } from "../../ui/Prop";
 import { RenderingContext } from "../../ui/RenderingContext";
+import { getActiveElement } from "../../util/getActiveElement";
 
 export interface WindowConfig extends OverlayConfig {
    /** Text to be displayed in the header. */
@@ -292,7 +293,7 @@ class WindowComponent extends OverlayComponent<WindowComponentProps, WindowCompo
    onFocusIn() {
       super.onFocusIn();
       if (!this.state.active) {
-         if (this.containerEl?.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+         if (this.containerEl?.contains(getActiveElement())) this.setZIndex(ZIndexManager.next());
          this.setState({ active: true });
       }
    }