cx 21.12.4 → 22.1.2

package/src/ui/FocusManager.js

@@ -25,108 +25,108 @@ let pending = false;
 
 export class FocusManager {
    static subscribe(callback) {
-       let unsubscribe = subscribers.subscribe(callback);
-       checkTimer();
-       return unsubscribe;
+      let unsubscribe = subscribers.subscribe(callback);
+      checkTimer();
+      return unsubscribe;
    }
 
    static onFocusOut(el, callback) {
-       let active = isSelfOrDescendant(el, getActiveElement());
-       return this.subscribe((focusedEl) => {
-           if (!active) active = isSelfOrDescendant(el, getActiveElement());
-           else if (!isSelfOrDescendant(el, focusedEl)) {
-               active = false;
-               callback(focusedEl);
-           }
-       });
+      let active = isSelfOrDescendant(el, getActiveElement());
+      return this.subscribe((focusedEl) => {
+         if (!active) active = isSelfOrDescendant(el, getActiveElement());
+         else if (!isSelfOrDescendant(el, focusedEl)) {
+            active = false;
+            callback(focusedEl);
+         }
+      });
    }
 
    static oneFocusOut(el, callback) {
-       this.nudge();
-       let off = this.subscribe((focusedEl) => {
-           if (!isSelfOrDescendant(el, focusedEl)) {
-               callback(focusedEl);
-               off();
-           }
-       });
-       return off;
+      this.nudge();
+      let off = this.subscribe((focusedEl) => {
+         if (!isSelfOrDescendant(el, focusedEl)) {
+            callback(focusedEl);
+            off();
+         }
+      });
+      return off;
    }
 
    static nudge() {
-       if (
-           typeof document !== "undefined" &&
-           getActiveElement() !== lastActiveElement
-       ) {
-           if (!pending) {
-               pending = true;
-               setTimeout(function () {
-                   pending = false;
-                   if (getActiveElement() !== lastActiveElement) {
-                       lastActiveElement = getActiveElement();
-                       batchUpdates(() => {
-                           subscribers.notify(lastActiveElement);
-                       });
-                       checkTimer();
-                   }
-               }, 0);
-           }
-       }
+      if (
+         typeof document !== "undefined" &&
+         getActiveElement() !== lastActiveElement
+      ) {
+         if (!pending) {
+            pending = true;
+            setTimeout(function () {
+               pending = false;
+               if (getActiveElement() !== lastActiveElement) {
+                  lastActiveElement = getActiveElement();
+                  batchUpdates(() => {
+                     subscribers.notify(lastActiveElement);
+                  });
+                  checkTimer();
+               }
+            }, 0);
+         }
+      }
    }
 
    static focus(el) {
-       el.focus();
-       this.nudge();
+      el.focus();
+      this.nudge();
    }
 
    static focusFirst(el) {
-       let focusable = findFirst(el, isFocusable);
-       if (focusable) this.focus(focusable);
-       return focusable;
+      let focusable = findFirst(el, isFocusable);
+      if (focusable) this.focus(focusable);
+      return focusable;
    }
 
    static focusFirstChild(el) {
-       let focusable = findFirstChild(el, isFocusable);
-       if (focusable) this.focus(focusable);
-       return focusable;
+      let focusable = findFirstChild(el, isFocusable);
+      if (focusable) this.focus(focusable);
+      return focusable;
    }
 
    static focusNext(el) {
-       let next = el,
-           skip = true;
-       do {
-           if (!skip) {
-               let focusable = this.focusFirst(next);
-               if (focusable) return focusable;
-           }
-
-           if (next.nextSibling) {
-               next = next.nextSibling;
-               skip = false;
-           } else {
-               next = next.parentNode;
-               skip = true;
-           }
-       } while (next);
+      let next = el,
+         skip = true;
+      do {
+         if (!skip) {
+            let focusable = this.focusFirst(next);
+            if (focusable) return focusable;
+         }
+
+         if (next.nextSibling) {
+            next = next.nextSibling;
+            skip = false;
+         } else {
+            next = next.parentNode;
+            skip = true;
+         }
+      } while (next);
    }
 
    static setInterval(interval) {
-       timerInterval = interval;
-       checkTimer();
+      timerInterval = interval;
+      checkTimer();
    }
 }
 
 export function oneFocusOut(component, el, callback) {
    if (!component.oneFocusOut)
-       component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
-           delete component.oneFocusOut;
-           callback(focus);
-       });
+      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
+         delete component.oneFocusOut;
+         callback(focus);
+      });
 }
 
 export function offFocusOut(component) {
    if (component.oneFocusOut) {
-       component.oneFocusOut();
-       delete component.oneFocusOut;
+      component.oneFocusOut();
+      delete component.oneFocusOut;
    }
 }
 
@@ -137,34 +137,40 @@ export function preventFocus(e) {
 
    e.preventDefault();
 
-   //unfocus activeElement
-   const activeElement = getActiveElement();
-   if (e.currentTarget !== activeElement) {
-       //find the closest focusable parent of the clicked element and focus it instead
-       let focusableParent =
-           closestParent(e.currentTarget, (el) => isFocusable(el)) ||
-           document.body;
-       if (focusableParent === document.body) activeElement.blur();
-       else focusableParent.focus();
-
-       FocusManager.nudge();
-   }
+   unfocusElement(e.currentTarget, false);
 }
 
 function checkTimer() {
    let shouldRun = !subscribers.isEmpty();
 
    if (shouldRun && !timerId)
-       timerId = setInterval(() => {
-           FocusManager.nudge();
-       }, timerInterval);
+      timerId = setInterval(() => {
+         FocusManager.nudge();
+      }, timerInterval);
 
    if (!shouldRun && timerId) {
-       clearInterval(timerId);
-       timerId = null;
+      clearInterval(timerId);
+      timerId = null;
    }
 }
 
 export function preventFocusOnTouch(e, force = false) {
    if (force || isTouchEvent()) preventFocus(e);
 }
+
+export function unfocusElement(target = null, forceBlur = true) {
+   const activeElement = getActiveElement();
+
+   if (!target) target = activeElement;
+   else if (target != activeElement && !target.contains(activeElement))
+      return;
+
+   //find the closest focusable parent of the target element and focus it instead
+   let focusableParent = !forceBlur &&
+      closestParent(target, (el) => isFocusable(el)) ||
+      document.body;
+   if (focusableParent === document.body) activeElement.blur();
+   else focusableParent.focus();
+
+   FocusManager.nudge();
+}

package/src/widgets/form/TextField.d.ts

@@ -67,6 +67,9 @@ export interface TextFieldProps extends FieldProps {
 
    /** If trackFocus is set, this value will be set when the field recieves or loses focus. */
    focused?: Cx.BooleanProp;
+
+   /** Trim text to remove whitespace. Default is false. */
+   trim?: Cx.BooleanProp;
 }
 
 export class TextField extends Cx.Widget<TextFieldProps> {}

package/src/widgets/form/TextField.js

@@ -14,6 +14,7 @@ import { KeyCode } from "../../util/KeyCode";
 import { Localization } from "../../ui/Localization";
 import ClearIcon from "../icons/clear";
 import { autoFocus } from "../autoFocus";
+import { isString } from "../../util/isString";
 
 export class TextField extends Field {
    init() {
@@ -36,6 +37,7 @@ export class TextField extends Field {
             minLength: undefined,
             maxLength: undefined,
             icon: undefined,
+            trim: undefined
          },
          ...arguments
       );
@@ -80,6 +82,7 @@ TextField.prototype.icon = null;
 TextField.prototype.showClear = false;
 TextField.prototype.alwaysShowClear = false;
 TextField.prototype.keyboardShortcut = false;
+TextField.prototype.trim = false;
 
 Localization.registerPrototype("cx/widgets/TextField", TextField);
 
@@ -125,7 +128,7 @@ class Input extends VDOM.Component {
          );
       }
 
-      let empty = this.input ? !this.input.value : data.empty;
+      let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
 
       return (
          <div
@@ -258,7 +261,7 @@ class Input extends VDOM.Component {
       let { widget } = instance;
 
       if (widget.reactOn.indexOf(change) != -1) {
-         let text = e.target.value;
+         let text = this.trimmed(e.target.value);
          if (data.maxLength != null && text.length > data.maxLength) {
             text = text.substring(0, data.maxLength);
             this.input.value = text;
@@ -266,12 +269,18 @@ class Input extends VDOM.Component {
 
          let value = text || widget.emptyValue;
          if (!instance.set("value", value, { immediate })) {
-            if (text != this.input.value) this.input.value = text;
+            if (text != this.trimmed(this.input.value)) this.input.value = text;
          } else {
             if (value) instance.setState({ visited: true });
          }
       }
    }
+
+   trimmed(value) {
+      if (this.props.data.trim && isString(value))
+         return value.trim();
+      return value;
+   }
 }
 
 Widget.alias("textfield", TextField);

package/src/widgets/grid/Grid.d.ts

@@ -305,6 +305,9 @@ interface GridProps extends Cx.StyledContainerProps {
    /** Set to true to enable cell editing. Please note that all editable columns should specify the editor field. */
    cellEditable?: boolean;
 
+   /** A callback function which is executed before a cell editor is initalized. Return false from the callback to prevent the cell from going into the edit mode. */
+   onBeforeCellEdit?: (change, record) => any;
+
    /** A callback function which is executed after a cell has been successfully edited. */
    onCellEdited?: (change, record) => void;
 

package/src/widgets/grid/Grid.js

@@ -39,6 +39,7 @@ import { GridCellEditor } from "./GridCellEditor";
 import { batchUpdates } from "../../ui/batchUpdates";
 import { parseStyle } from "cx/src/util";
 import { StaticText } from "../../ui/StaticText";
+import { unfocusElement } from "../../ui/FocusManager";
 
 export class Grid extends Widget {
    declareData(...args) {
@@ -161,16 +162,16 @@ export class Grid extends Widget {
                   value: isDefined(c.aggregateValue)
                      ? c.aggregateValue
                      : isDefined(c.value)
-                        ? c.value
-                        : c.aggregateField
-                           ? { bind: this.recordName + "." + c.aggregateField }
-                           : null,
+                     ? c.value
+                     : c.aggregateField
+                     ? { bind: this.recordName + "." + c.aggregateField }
+                     : null,
                   weight:
                      c.weight != null
                         ? c.weight
                         : c.weightField && {
-                           bind: this.recordName + "." + c.weightField,
-                        },
+                             bind: this.recordName + "." + c.weightField,
+                          },
                   type: c.aggregate,
                };
             }
@@ -593,8 +594,9 @@ export class Grid extends Widget {
                               let initialPosition = getCursorPos(e);
                               resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
                               resizeOverlayEl.style.width = `${initialWidth}px`;
-                              resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
-                                 }px`;
+                              resizeOverlayEl.style.left = `${
+                                 headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
+                              }px`;
                               gridEl.appendChild(resizeOverlayEl);
                               captureMouse2(e, {
                                  onMouseMove: (e) => {
@@ -742,7 +744,7 @@ export class Grid extends Widget {
                   widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
                },
             },
-            () => { }
+            () => {}
          );
       }
    }
@@ -768,14 +770,14 @@ export class Grid extends Widget {
 
          let sorters = direction
             ? [
-               {
-                  field,
-                  direction,
-                  value,
-                  comparer,
-                  sortOptions,
-               },
-            ]
+                 {
+                    field,
+                    direction,
+                    value,
+                    comparer,
+                    sortOptions,
+                 },
+              ]
             : null;
 
          instance.set("sorters", sorters);
@@ -1017,7 +1019,6 @@ export class Grid extends Widget {
                   )
                );
 
-
             if (g.showHeader) {
                record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
                if (hasFixedColumns)
@@ -1075,7 +1076,7 @@ export class Grid extends Widget {
          instance,
          record.grouping,
          record.level,
-         record.group || { "$key": "fixed-footer" },
+         record.group || { $key: "fixed-footer" },
          record.key + "-footer",
          record.store,
          true,
@@ -1088,7 +1089,7 @@ export class Grid extends Widget {
             instance,
             record.grouping,
             record.level,
-            record.group || { "$key": "fixed-footer" },
+            record.group || { $key: "fixed-footer" },
             record.key + "-footer",
             record.store,
             true,
@@ -1214,8 +1215,8 @@ class GridComponent extends VDOM.Component {
                   style={
                      this.rowHeight > 0
                         ? {
-                           height: this.rowHeight + 1,
-                        }
+                             height: this.rowHeight + 1,
+                          }
                         : null
                   }
                >
@@ -1483,8 +1484,6 @@ class GridComponent extends VDOM.Component {
                               true
                            )
                         );
-
-
                   }
                }
             }
@@ -1914,8 +1913,7 @@ class GridComponent extends VDOM.Component {
             };
             instance.invoke("onColumnDrop", e, instance);
          }
-      }
-      catch (err) {
+      } catch (err) {
          console.error("Grid drop operation failed. Please fix this error:", err);
       }
 
@@ -2462,7 +2460,7 @@ class GridComponent extends VDOM.Component {
             if (!futureState.cellEdit && wasCellEditing) {
                //If cell editing is in progress, moving the cursor may cause that the cell editor is unmounted before
                //the blur event which may cause data loss for components which do not have reactOn=change set, e.g. NumberField.
-               getActiveElement().blur();
+               unfocusElement();
                let record = this.getRecordAt(prevState.cursor);
                if ((!this.cellEditorValid || cancelEdit) && this.cellEditUndoData)
                   record.store.set(widget.recordName, this.cellEditUndoData);
@@ -2482,8 +2480,26 @@ class GridComponent extends VDOM.Component {
                }
             }
 
-            if (futureState.cellEdit && !wasCellEditing)
-               this.cellEditUndoData = this.getRecordAt(futureState.cursor).data;
+            if (futureState.cellEdit && !wasCellEditing) {
+               let record = this.getRecordAt(futureState.cursor);
+               let cellEditUndoData = record.data;
+
+               if (
+                  widget.onBeforeCellEdit &&
+                  this.props.instance.invoke(
+                     "onBeforeCellEdit",
+                     {
+                        column: visibleColumns[futureState.cursorCellIndex],
+                        data: cellEditUndoData,
+                        field: visibleColumns[futureState.cursorCellIndex].field,
+                     },
+                     record
+                  ) === false
+               )
+                  return;
+
+               this.cellEditUndoData = cellEditUndoData;
+            }
 
             this.setState(newState, () => {
                if (this.state.focused && !this.state.cellEdit && wasCellEditing) FocusManager.focus(this.dom.el);
@@ -2500,7 +2516,7 @@ class GridComponent extends VDOM.Component {
                            hscroll = true;
                            item =
                               item.firstChild.children[
-                              this.state.cursorCellIndex - this.props.instance.fixedColumnCount
+                                 this.state.cursorCellIndex - this.props.instance.fixedColumnCount
                               ];
                         } else {
                            let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
@@ -3154,7 +3170,6 @@ class AvgHeight {
    }
 }
 
-
 function getDragDropEvent(ev) {
    return {
       event: ev,
@@ -3163,7 +3178,7 @@ function getDragDropEvent(ev) {
       source: {
          width: 32,
          height: 32,
-         margin: []
-      }
+         margin: [],
+      },
    };
-}
+}

package/src/widgets/grid/GridRow.js

@@ -1,12 +1,11 @@
-import { ValidationGroup } from "../../widgets/form/ValidationGroup";
+import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
 import { VDOM } from "../../ui/Widget";
-import { ddMouseDown, ddMouseUp, ddDetect, isDragHandleEvent } from "../drag-drop/ops";
+import { closest } from "../../util/DOM";
 import { isTouchEvent } from "../../util/isTouchEvent";
-import { preventFocusOnTouch } from "../../ui/FocusManager";
-import { GridRowLine } from "./GridRowLine";
-import { closest, isFocusedDeep } from "../../util/DOM";
 import { KeyCode } from "../../util/KeyCode";
-import { getActiveElement } from "../../util/getActiveElement";
+import { ValidationGroup } from "../../widgets/form/ValidationGroup";
+import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
+import { GridRowLine } from "./GridRowLine";
 
 export class GridRow extends ValidationGroup {
    declareData(...args) {
@@ -120,7 +119,7 @@ export class GridRowComponent extends VDOM.Component {
             e.stopPropagation();
 
             //close context menu
-            if (!getActiveElement().contains(e.target)) document.activeElement.blur();
+            unfocusElement(e.target);
          }
       }
 

package/src/widgets/nav/MenuItem.js

@@ -19,6 +19,7 @@ import {
 } from "../overlay/tooltip-ops";
 import { yesNo } from "../overlay/alerts";
 import { isTextInputElement } from "../../util";
+import { unfocusElement } from "../../ui/FocusManager";
 
 /*
  Functionality:
@@ -309,7 +310,7 @@ class MenuItemComponent extends VDOM.Component {
          debug(menuFlag, "MenuItem", "mouseLeave", this.el);
          this.clearAutoFocusTimer();
 
-         if (widget.hoverToOpen && document.activeElement == this.el) this.el.blur();
+         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el);
       }
 
       tooltipMouseLeave(e, this.props.instance, widget.tooltip);
@@ -402,7 +403,7 @@ class MenuItemComponent extends VDOM.Component {
          }
       }
 
-      if (widget.autoClose) getActiveElement().blur();
+      if (widget.autoClose) unfocusElement(this.el);
    }
 
    onFocus() {