cx 23.5.0 → 23.5.1

package/dist/ui.js

@@ -1403,14 +1403,19 @@ function unfocusElement(target, unfocusParentOverlay) {
 	if (!target) target = activeElement;
 	if (unfocusParentOverlay) {
 		var focusableOverlayContainer = closestParent(target, function (el) {
-			return el.dataset.focusableOverlayContainer;
+			var _el$dataset;
+			return (_el$dataset = el.dataset) == null ? void 0 : _el$dataset.focusableOverlayContainer;
 		});
 		if (focusableOverlayContainer) target = focusableOverlayContainer;
 	}
 
 	//find the closest focusable parent of the target element and focus it instead
 	var focusableParent = closestParent(target, function (el) {
-		return isFocusable(el) && (!unfocusParentOverlay || el.dataset.focusableOverlayContainer);
+		var _el$dataset2;
+		return (
+			isFocusable(el) &&
+			(!unfocusParentOverlay || ((_el$dataset2 = el.dataset) == null ? void 0 : _el$dataset2.focusableOverlayContainer))
+		);
 	});
 	if (focusableParent && focusableParent !== document.body) focusableParent.focus();
 	else activeElement.blur();

package/dist/widgets.js

@@ -17364,11 +17364,15 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var widget = instance.widget;
 		if (widget.scrollable)
 			this.offResize = ResizeManager.trackElement(this.dom.scroller, function () {
+				//ignore changes if the element is not visible on the page
+				if (_this10.dom.scroller.offsetWidth == 0) return;
 				//update fixed header/footer
-				_this10.componentDidUpdate();
-				instance.setState({
-					dimensionsVersion: instance.state.dimensionsVersion + 1,
-					lockedColWidth: {},
+				requestAnimationFrame(function () {
+					_this10.componentDidUpdate();
+					instance.setState({
+						dimensionsVersion: instance.state.dimensionsVersion + 1,
+						lockedColWidth: {},
+					});
 				});
 			});
 		if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.5.0",
+   "version": "23.5.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/data/StringTemplate.spec.js

@@ -1,95 +1,105 @@
-import { StringTemplate } from "./StringTemplate";
-import assert from "assert";
-
-describe("StringTemplate", function () {
-   describe("#compile()", function () {
-      it("returns a selector", function () {
-         var e = StringTemplate.compile("Hello {person.name}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello Jim");
-      });
-
-      it("properly encodes ' and \"", function () {
-         var e = StringTemplate.compile('It\'s "working"!');
-         assert.equal(e({}), 'It\'s "working"!');
-      });
-
-      it("supports multi-line strings", function () {
-         var e = StringTemplate.compile("a\nb");
-         assert.equal(e(), "a\nb");
-
-         var e = StringTemplate.compile("a\r\nb");
-         assert.equal(e(), "a\r\nb");
-      });
-   });
-
-   describe("double brackets are used to escape brackets", function () {
-      it("double brackets are preserved", function () {
-         var e = StringTemplate.compile("Hello {{person.name}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {person.name}");
-      });
-
-      it("triple brackets are converted to single brackets and a binding", function () {
-         var e = StringTemplate.compile("Hello {{{person.name}}}");
-         var state = {
-            person: {
-               name: "Jim",
-            },
-         };
-         assert.equal(e(state), "Hello {Jim}");
-      });
-   });
-
-   describe("supports formatting", function () {
-      it("with colon", function () {
-         var e = StringTemplate.compile("{str:suffix;kg}");
-         assert.equal(e({ str: "5" }), "5kg");
-      });
-
-      it("with multiple formats", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
-         assert.equal(e({ str: "5" }), "(5kg)");
-      });
-
-      it("with null values", function () {
-         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-
-      it("of null values", function () {
-         var e = StringTemplate.compile("{str|N/A}");
-         assert.equal(e({ str: null }), "N/A");
-      });
-   });
-
-   describe("supports expressions", function () {
-      it("using []", function () {
-         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("using %", function () {
-         var e = StringTemplate.compile("1 + 2 = %{1+2}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with subexpressions", function () {
-         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-
-      it("with a conditional operator", function () {
-         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
-         assert.equal(e(), "1 + 2 = 3");
-      });
-   });
-});
+import { StringTemplate } from "./StringTemplate";
+import assert from "assert";
+
+describe("StringTemplate", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         var e = StringTemplate.compile("Hello {person.name}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello Jim");
+      });
+
+      it("properly encodes ' and \"", function () {
+         var e = StringTemplate.compile('It\'s "working"!');
+         assert.equal(e({}), 'It\'s "working"!');
+      });
+
+      it("supports multi-line strings", function () {
+         var e = StringTemplate.compile("a\nb");
+         assert.equal(e(), "a\nb");
+
+         var e = StringTemplate.compile("a\r\nb");
+         assert.equal(e(), "a\r\nb");
+      });
+   });
+
+   describe("double brackets are used to escape brackets", function () {
+      it("double brackets are preserved", function () {
+         var e = StringTemplate.compile("Hello {{person.name}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {person.name}");
+      });
+
+      it("triple brackets are converted to single brackets and a binding", function () {
+         var e = StringTemplate.compile("Hello {{{person.name}}}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello {Jim}");
+      });
+   });
+
+   describe("supports formatting", function () {
+      it("with colon", function () {
+         var e = StringTemplate.compile("{str:suffix;kg}");
+         assert.equal(e({ str: "5" }), "5kg");
+      });
+
+      it("with multiple formats", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
+         assert.equal(e({ str: "5" }), "(5kg)");
+      });
+
+      it("with null values", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+
+      it("of null values", function () {
+         var e = StringTemplate.compile("{str|N/A}");
+         assert.equal(e({ str: null }), "N/A");
+      });
+   });
+
+   describe("supports expressions", function () {
+      it("using []", function () {
+         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("using %", function () {
+         var e = StringTemplate.compile("1 + 2 = %{1+2}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with subexpressions", function () {
+         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with a conditional operator", function () {
+         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
+         assert.equal(e(), "1 + 2 = 3");
+      });
+
+      it("with sub-expression formatting", function () {
+         var e = StringTemplate.compile("{[!!{person.age} ? {person.age:suffix; years old} : 'Age unknown']}");
+         var state = {
+            person: {
+               age: 32,
+            },
+         };
+         assert.equal(e(state), "32 years old");
+      });
+   });
+});

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();
+}