cx 24.3.2 → 24.3.3

package/src/ui/FocusManager.js

@@ -1,171 +1,171 @@
-import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
-import { batchUpdates } from "./batchUpdates";
-import { SubscriberList } from "../util/SubscriberList";
-import { isTouchEvent } from "../util/isTouchEvent";
-import { getActiveElement } from "../util/getActiveElement";
-
-/*
- *  Purpose of FocusManager is to provide focusout notifications.
- *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
- *  to determine if focus went outside or stayed inside the component.
- */
-
-let subscribers = new SubscriberList(),
-   timerInterval = 300,
-   timerId = null;
-
-let lastActiveElement = null;
-let pending = false;
-
-export class FocusManager {
-   static subscribe(callback) {
-      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);
-         }
-      });
-   }
-
-   static oneFocusOut(el, callback) {
-      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);
-         }
-      }
-   }
-
-   static focus(el) {
-      el.focus();
-      this.nudge();
-   }
-
-   static focusFirst(el) {
-      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;
-   }
-
-   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);
-   }
-
-   static setInterval(interval) {
-      timerInterval = interval;
-      checkTimer();
-   }
-}
-
-export function oneFocusOut(component, el, callback) {
-   if (!component.oneFocusOut)
-      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
-         delete component.oneFocusOut;
-         callback(focus);
-      });
-}
-
-export function offFocusOut(component) {
-   if (component.oneFocusOut) {
-      component.oneFocusOut();
-      delete component.oneFocusOut;
-   }
-}
-
-export function preventFocus(e) {
-   //Focus can be prevented only on mousedown event. On touchstart this will not work
-   //preventDefault cannot be used as it prevents scrolling
-   if (e.type !== "mousedown") return;
-
-   e.preventDefault();
-
-   unfocusElement(e.currentTarget, false);
-}
-
-function checkTimer() {
-   let shouldRun = !subscribers.isEmpty();
-
-   if (shouldRun && !timerId)
-      timerId = setInterval(() => {
-         FocusManager.nudge();
-      }, timerInterval);
-
-   if (!shouldRun && timerId) {
-      clearInterval(timerId);
-      timerId = null;
-   }
-}
-
-export function preventFocusOnTouch(e, force = false) {
-   if (force || isTouchEvent()) preventFocus(e);
-}
-
-export function unfocusElement(target = null, unfocusParentOverlay = true) {
-   const activeElement = getActiveElement();
-   if (!target) target = activeElement;
-
-   if (unfocusParentOverlay) {
-      let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
-      if (focusableOverlayContainer) target = focusableOverlayContainer;
-   }
-
-   //find the closest focusable parent of the target element and focus it instead
-   let focusableParent = closestParent(
-      target,
-      (el) => isFocusable(el) && (!unfocusParentOverlay || el.dataset?.focusableOverlayContainer)
-   );
-
-   if (focusableParent && focusableParent !== document.body) focusableParent.focus();
-   else activeElement.blur();
-
-   FocusManager.nudge();
-}
+import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
+import { batchUpdates } from "./batchUpdates";
+import { SubscriberList } from "../util/SubscriberList";
+import { isTouchEvent } from "../util/isTouchEvent";
+import { getActiveElement } from "../util/getActiveElement";
+
+/*
+ *  Purpose of FocusManager is to provide focusout notifications.
+ *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
+ *  to determine if focus went outside or stayed inside the component.
+ */
+
+let subscribers = new SubscriberList(),
+   timerInterval = 300,
+   timerId = null;
+
+let lastActiveElement = null;
+let pending = false;
+
+export class FocusManager {
+   static subscribe(callback) {
+      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);
+         }
+      });
+   }
+
+   static oneFocusOut(el, callback) {
+      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);
+         }
+      }
+   }
+
+   static focus(el) {
+      el.focus();
+      this.nudge();
+   }
+
+   static focusFirst(el) {
+      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;
+   }
+
+   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);
+   }
+
+   static setInterval(interval) {
+      timerInterval = interval;
+      checkTimer();
+   }
+}
+
+export function oneFocusOut(component, el, callback) {
+   if (!component.oneFocusOut)
+      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
+         delete component.oneFocusOut;
+         callback(focus);
+      });
+}
+
+export function offFocusOut(component) {
+   if (component.oneFocusOut) {
+      component.oneFocusOut();
+      delete component.oneFocusOut;
+   }
+}
+
+export function preventFocus(e) {
+   //Focus can be prevented only on mousedown event. On touchstart this will not work
+   //preventDefault cannot be used as it prevents scrolling
+   if (e.type !== "mousedown") return;
+
+   e.preventDefault();
+
+   unfocusElement(e.currentTarget, false);
+}
+
+function checkTimer() {
+   let shouldRun = !subscribers.isEmpty();
+
+   if (shouldRun && !timerId)
+      timerId = setInterval(() => {
+         FocusManager.nudge();
+      }, timerInterval);
+
+   if (!shouldRun && timerId) {
+      clearInterval(timerId);
+      timerId = null;
+   }
+}
+
+export function preventFocusOnTouch(e, force = false) {
+   if (force || isTouchEvent()) preventFocus(e);
+}
+
+export function unfocusElement(target = null, unfocusParentOverlay = true) {
+   const activeElement = getActiveElement();
+   if (!target) target = activeElement;
+
+   if (unfocusParentOverlay) {
+      let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
+      if (focusableOverlayContainer) target = focusableOverlayContainer;
+   }
+
+   //find the closest focusable parent of the target element and focus it instead
+   let focusableParent = closestParent(
+      target,
+      (el) => isFocusable(el) && (!unfocusParentOverlay || el.dataset?.focusableOverlayContainer)
+   );
+
+   if (focusableParent && focusableParent !== document.body) focusableParent.focus();
+   else activeElement.blur();
+
+   FocusManager.nudge();
+}

package/src/ui/Instance.d.ts

@@ -1,72 +1,72 @@
-import { Record } from "../core";
-import { RenderingContext } from "./RenderingContext";
-import { View } from "../data/View";
-import { Widget } from "./Widget";
-
-export class Instance<ViewModel = any, Controller = any> {
-   store: View<ViewModel>;
-   data: Record;
-   widget: Widget;
-   key: number;
-   id: string;
-   controller: Controller;
-   parentOptions: any;
-   children?: Instance[];
-
-   constructor(widget: Widget, key: string | number, parent?: Instance, store?: View);
-
-   setStore(store: View): void;
-
-   init(context: RenderingContext): void;
-
-   explore(context: RenderingContext): boolean;
-
-   prepare(context: RenderingContext): void;
-
-   cleanup(context: RenderingContext): void;
-
-   render(context: RenderingContext, keyPrefix?: string): JSX.Element | void;
-
-   setState(state: Cx.Record): void;
-
-   set(prop: string, value: any, internal?: boolean);
-
-   definePropertySetter(prop: string, setter: (value: any) => void): boolean;
-
-   /**
-    * @protected
-    * @param prop
-    * @param value
-    * @returns {boolean}
-    */
-   protected doSet(prop: string, value: any): boolean;
-
-   replaceState(state: Cx.Config);
-
-   getInstanceCache(): InstanceCache;
-
-   clearChildrenCache();
-
-   getChild(context: RenderingContext | null, widget: Widget, keyPrefix?: string, store?: View): Instance;
-
-   getDetachedChild(widget: Widget, key: number | string, store?: View): Instance;
-
-   // TODO: check return type
-   prepareRenderCleanupChild(widget: Widget, store?: View, keyPrefix?: string, options?: object): JSX.Element | void;
-
-   getJsxEventProps(): Cx.Config;
-
-   nestedDataSet(key: string, value: any, dataConfig: Cx.Config): boolean;
-
-   invokeControllerMethod(methodName: string, ...args: any[]);
-}
-
-export class InstanceCache {
-   constructor(parent: Instance);
-
-   getChild(widget: Widget, store: View, keyPrefix?: string): Instance;
-
-   mark();
-
-   sweep();
-}
+import { Record } from "../core";
+import { RenderingContext } from "./RenderingContext";
+import { View } from "../data/View";
+import { Widget } from "./Widget";
+
+export class Instance<ViewModel = any, Controller = any> {
+   store: View<ViewModel>;
+   data: Record;
+   widget: Widget;
+   key: number;
+   id: string;
+   controller: Controller;
+   parentOptions: any;
+   children?: Instance[];
+
+   constructor(widget: Widget, key: string | number, parent?: Instance, store?: View);
+
+   setStore(store: View): void;
+
+   init(context: RenderingContext): void;
+
+   explore(context: RenderingContext): boolean;
+
+   prepare(context: RenderingContext): void;
+
+   cleanup(context: RenderingContext): void;
+
+   render(context: RenderingContext, keyPrefix?: string): JSX.Element | void;
+
+   setState(state: Cx.Record): void;
+
+   set(prop: string, value: any, internal?: boolean);
+
+   definePropertySetter(prop: string, setter: (value: any) => void): boolean;
+
+   /**
+    * @protected
+    * @param prop
+    * @param value
+    * @returns {boolean}
+    */
+   protected doSet(prop: string, value: any): boolean;
+
+   replaceState(state: Cx.Config);
+
+   getInstanceCache(): InstanceCache;
+
+   clearChildrenCache();
+
+   getChild(context: RenderingContext | null, widget: Widget, keyPrefix?: string, store?: View): Instance;
+
+   getDetachedChild(widget: Widget, key: number | string, store?: View): Instance;
+
+   // TODO: check return type
+   prepareRenderCleanupChild(widget: Widget, store?: View, keyPrefix?: string, options?: object): JSX.Element | void;
+
+   getJsxEventProps(): Cx.Config;
+
+   nestedDataSet(key: string, value: any, dataConfig: Cx.Config): boolean;
+
+   invokeControllerMethod(methodName: string, ...args: any[]);
+}
+
+export class InstanceCache {
+   constructor(parent: Instance);
+
+   getChild(widget: Widget, store: View, keyPrefix?: string): Instance;
+
+   mark();
+
+   sweep();
+}

package/src/widgets/form/Label.js

@@ -1,88 +1,88 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      data.asterisk = context.parentAsterisk || this.asterisk;
-
-      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (data.required && data.asterisk) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { FocusManager } from "../../ui/FocusManager";
+import { isArray } from "../../util/isArray";
+import { coalesce } from "../../util/coalesce";
+
+export class Label extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled
+      );
+
+      data.asterisk = context.parentAsterisk || this.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         props.children.push(" ");
+         props.children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
+               *
+            </span>
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;