cx 25.11.1 → 26.0.1

package/src/ui/DataProxy.ts

@@ -0,0 +1,55 @@
+import { NestedDataView } from "../data/NestedDataView";
+import { UseParentLayout } from "../ui/layout/UseParentLayout";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { StructuredProp, Bind } from "./Prop";
+
+export interface DataProxyConfig extends PureContainerConfig {
+   /** Data object with computed values to be exposed in the local store. */
+   data?: StructuredProp;
+
+   /** Binding to a value to be exposed under the `alias` name. */
+   value?: Bind;
+
+   /** Alias name under which `value` is exposed in the local store. */
+   alias?: string;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that local store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export class DataProxy extends PureContainerBase<DataProxyConfig> {
+   declare data?: any;
+   declare alias?: string;
+   declare value?: any;
+   declare immutable: boolean;
+   declare sealed: boolean;
+
+   init() {
+      if (!this.data) this.data = {};
+
+      if (this.alias) this.data[this.alias] = this.value;
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new NestedDataView({
+         store: instance.parentStore,
+         nestedData: new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true }),
+         immutable: this.immutable,
+         sealed: this.sealed,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+DataProxy.prototype.immutable = false;
+DataProxy.prototype.sealed = false;

package/src/ui/DetachedScope.tsx

@@ -0,0 +1,159 @@
+/** @jsxImportSource react */
+
+import { PureContainer } from "./PureContainer";
+import { SubscribableView, SubscribableViewConfig } from "../data/SubscribableView";
+import { getSelector } from "../data/getSelector";
+import { Cx } from "./Cx";
+import { VDOM } from "./Widget";
+import { IsolatedScope, IsolatedScopeConfig } from "./IsolatedScope";
+import { Instance } from "./Instance";
+import { StructuredProp } from "./Prop";
+
+interface ContainmentStoreConfig extends SubscribableViewConfig {
+   selector: any;
+}
+
+class ContainmentStore extends SubscribableView<any> {
+   declare selector: any;
+   declare cache: {
+      version: number;
+      data?: any;
+      result?: any;
+      itemIndex?: number;
+      key?: string;
+      parentStoreData?: any;
+      containedData?: any;
+   };
+
+   constructor(config: ContainmentStoreConfig) {
+      super(config);
+      this.selector = config.selector;
+   }
+
+   getData() {
+      return this.store!.getData();
+   }
+
+   setItem(path: string, value: any) {
+      return this.wrapper(() => {
+         this.store!.setItem(path, value);
+      });
+   }
+
+   deleteItem(path: string) {
+      return this.wrapper(() => {
+         this.store!.deleteItem(path);
+      });
+   }
+
+   wrapper(callback: () => void) {
+      if (this.store!.silently(callback)) {
+         let data = this.getData();
+         let containedData = this.selector(data);
+         if (containedData === this.cache.containedData) {
+            this.store!.notify();
+         } else {
+            this.cache.containedData = containedData;
+            this.notify(undefined!);
+         }
+         return true;
+      }
+      return false;
+   }
+}
+
+export interface DetachedScopeInstance extends Instance {
+   subStore: ContainmentStore;
+}
+
+export interface DetachedScopeConfig extends IsolatedScopeConfig {
+   /**
+    * A single binding path or a list of paths to be monitored for changes.
+    * Use `exclusive` as a shorthand for defining the `exclusiveData` object.
+    */
+   exclusive?: string | string[];
+
+   /**
+    * Exclusive data selector. If only exclusive data change, the scope will be re-rendered
+    * without recalculating other elements on the page.
+    * Use in case if the scope uses both exclusive and shared data.
+    */
+   exclusiveData?: StructuredProp;
+
+   /** Name of the scope used for debugging/reporting purposes. */
+   name?: string;
+
+   /** Options passed to the Cx component. */
+   options?: any;
+
+   /** Error handler for the detached scope. */
+   onError?: (error: Error, instance: Instance, info: any) => void;
+}
+
+export class DetachedScope extends IsolatedScope<DetachedScopeConfig, DetachedScopeInstance> {
+   declare exclusive?: string | string[];
+   declare exclusiveData?: any;
+   declare container?: any;
+   declare name?: string;
+   declare options?: any;
+   declare onError?: any;
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         exclusiveData: { structured: true },
+      });
+   }
+
+   init() {
+      if (typeof this.exclusive === "string") this.exclusiveData = { bind: this.exclusive };
+      if (Array.isArray(this.exclusive)) {
+         this.exclusiveData = {};
+         this.exclusive.forEach((x, i) => {
+            this.exclusiveData[String(i)] = { bind: x };
+         });
+      }
+
+      this.container = PureContainer.create({
+         type: PureContainer,
+         items: this.children || this.items,
+      });
+
+      delete this.children;
+      this.items = [];
+
+      if (this.name)
+         this.options = {
+            ...this.options,
+            name: this.name,
+         };
+
+      super.init();
+   }
+
+   initInstance(context: any, instance: DetachedScopeInstance) {
+      const config: ContainmentStoreConfig = {
+         store: instance.parentStore,
+         selector: getSelector(this.exclusiveData || this.data),
+      };
+      instance.subStore = new ContainmentStore(config);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store = instance.parentStore;
+      instance.subStore.setStore(instance.parentStore);
+   }
+
+   render(context: any, instance: any, key: string) {
+      return (
+         <Cx
+            key={key}
+            widget={this.container}
+            store={instance.subStore}
+            parentInstance={instance}
+            subscribe
+            options={this.options}
+            onError={this.onError}
+         />
+      );
+   }
+}

package/src/ui/FocusManager.ts

@@ -0,0 +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: any = null;
+
+let lastActiveElement: any = null;
+let pending = false;
+
+export class FocusManager {
+   static subscribe(callback: (el: any) => void) {
+      let unsubscribe = subscribers.subscribe(callback);
+      checkTimer();
+      return unsubscribe;
+   }
+
+   static onFocusOut(el: any, callback: (el: any) => void) {
+      let active = isSelfOrDescendant(el, getActiveElement());
+      return this.subscribe((focusedEl: any) => {
+         if (!active) active = isSelfOrDescendant(el, getActiveElement());
+         else if (!isSelfOrDescendant(el, focusedEl)) {
+            active = false;
+            callback(focusedEl);
+         }
+      });
+   }
+
+   static oneFocusOut(el: any, callback: (el: any) => void) {
+      this.nudge();
+      let off = this.subscribe((focusedEl: any) => {
+         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: HTMLElement) {
+      el.focus();
+      this.nudge();
+   }
+
+   static focusFirst(el: HTMLElement) {
+      let focusable = findFirst(el, isFocusable);
+      if (focusable) this.focus(focusable as HTMLElement);
+      return focusable;
+   }
+
+   static focusFirstChild(el: HTMLElement) {
+      let focusable = findFirstChild(el, isFocusable);
+      if (focusable) this.focus(focusable as HTMLElement);
+      return focusable;
+   }
+
+   static focusNext(el: HTMLElement) {
+      let next: Node | null = el,
+         skip = true;
+      do {
+         if (!skip) {
+            let focusable = this.focusFirst(next as HTMLElement);
+            if (focusable) return focusable;
+         }
+
+         if (next.nextSibling) {
+            next = next.nextSibling;
+            skip = false;
+         } else {
+            next = next.parentNode;
+            skip = true;
+         }
+      } while (next);
+   }
+
+   static setInterval(interval: number) {
+      timerInterval = interval;
+      checkTimer();
+   }
+}
+
+export function oneFocusOut(component: any, el: any, callback: (focus: any) => void) {
+   if (!component.oneFocusOut)
+      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus: any) => {
+         delete component.oneFocusOut;
+         callback(focus);
+      });
+}
+
+export function offFocusOut(component: any) {
+   if (component.oneFocusOut) {
+      component.oneFocusOut();
+      delete component.oneFocusOut;
+   }
+}
+
+export function preventFocus(e: React.MouseEvent) {
+   //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: any, force = false) {
+   if (force || isTouchEvent()) preventFocus(e);
+}
+
+export function unfocusElement(target: Element | null = null, unfocusParentOverlay = true) {
+   const activeElement = getActiveElement();
+   if (!target) target = activeElement;
+
+   if (unfocusParentOverlay) {
+      let focusableOverlayContainer = closestParent(target, (el: any) => 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: any) => isFocusable(el) && (!unfocusParentOverlay || !!el.dataset?.focusableOverlayContainer),
+   ) as HTMLElement | null;
+
+   if (focusableParent && focusableParent !== document.body) focusableParent.focus({ preventScroll: true });
+   else (activeElement as HTMLElement).blur();
+
+   FocusManager.nudge();
+}

package/src/ui/Format.ts

@@ -0,0 +1,108 @@
+import { Culture, getCurrentCultureCache } from "./Culture";
+import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
+import { setGetExpressionCacheCallback } from "../data/Expression";
+import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
+import { parseDateInvariant } from "../util";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+
+export const Format = Fmt;
+
+let cultureSensitiveFormatsRegistered = false;
+
+export function resolveNumberFormattingFlags(flags?: string): any {
+   if (!flags) return null;
+   let result: any = {};
+   if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
+   if (flags.indexOf("c") >= 0) result.notation = "compact";
+   if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
+   return result;
+}
+
+export function enableCultureSensitiveFormatting() {
+   if (cultureSensitiveFormatsRegistered) return;
+
+   cultureSensitiveFormatsRegistered = true;
+
+   Fmt.registerFactory(["number", "n"], (format: any, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+
+      let formatter = culture.getFormatter({
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+
+      return (value: any) => formatter.format(value);
+   });
+
+   Fmt.registerFactory("currency", (format: any, currency?: string, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+      currency = currency || Culture.defaultCurrency;
+
+      let formatter = culture.getFormatter({
+         style: "currency",
+         currency: currency,
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+
+      return (value: any) => formatter.format(value);
+   });
+
+   Fmt.registerFactory(["percentage", "p", "%"], (format: any, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+      let formatter = culture.getFormatter({
+         style: "percent",
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+      return (value: any) => formatter.format(value);
+   });
+
+   Fmt.registerFactory(["percentSign", "ps"], (format: any, minimumFractionDigits?: any, maximumFractionDigits?: any, flags?: string) => {
+      let culture = Culture.getNumberCulture();
+      let formatter = culture.getFormatter({
+         style: "percent",
+         ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
+         ...resolveNumberFormattingFlags(flags),
+      });
+      return (value: any) => formatter.format(value / 100);
+   });
+
+   Fmt.registerFactory(["date", "d"], (fmt: any, format = "yyyyMMdd") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(parseDateInvariant(value));
+   });
+
+   Fmt.registerFactory(["time", "t"], (fmt: any, format = "hhmmss") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(parseDateInvariant(value));
+   });
+
+   Fmt.registerFactory(["datetime", "dt"], (fmt: any, format = "yyyyMd hhmm") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(parseDateInvariant(value));
+   });
+
+   setGetFormatCacheCallback(() => {
+      let cache = getCurrentCultureCache();
+      if (!cache.formatCache) cache.formatCache = {};
+      return cache.formatCache;
+   });
+
+   setGetExpressionCacheCallback(() => {
+      let cache = getCurrentCultureCache();
+      if (!cache.exprCache) cache.exprCache = {};
+      return cache.exprCache;
+   });
+
+   setGetStringTemplateCacheCallback(() => {
+      let cache = getCurrentCultureCache();
+      if (!cache.strTplCache) cache.strTplCache = {};
+      return cache.strTplCache;
+   });
+
+   GlobalCacheIdentifier.change();
+}

package/src/ui/HoverSync.tsx

@@ -0,0 +1,189 @@
+/** @jsxImportSource react */
+/*
+   HoverSync transfers through the context methods for reporting and subscribing to hover data to
+   its descendants. How this should work is that each component can subscribe and unsubscribe
+   to a hover channel and receive info about hover changes.
+   Also, each component should report mouse enter/leave events.
+   Similar to controllers, hover sync should transcend into child contexts.
+*/
+
+import { dummyCallback } from "../util/dummyCallback";
+import { parseStyle } from "../util/parseStyle";
+import { SubscriberList } from "../util/SubscriberList";
+import { StyledContainerBase, StyledContainerConfig } from "./Container";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Instance } from "./Instance";
+import { VDOM } from "./VDOM";
+import { Prop, StyleProp, ClassProp } from "./Prop";
+
+export interface HoverSyncConfig extends PureContainerConfig {}
+
+export class HoverSync extends PureContainerBase<HoverSyncConfig, Instance> {
+   constructor(config?: HoverSyncConfig) {
+      super(config);
+   }
+   initInstance(context: any, instance: any) {
+      let channels: any = {};
+      instance.hoverSync = {
+         report: (channel: string, hoverId: any, active: boolean) => {
+            let ch = channels[channel];
+            if (!ch) return;
+            let state = active && hoverId != null;
+            if (ch.state !== state && (ch.state === hoverId || active)) {
+               ch.state = state;
+               ch.subscribers.notify(state);
+            }
+         },
+         subscribe: (channel: string, callback: (state: any) => void) => {
+            let ch = channels[channel];
+            if (!ch)
+               ch = channels[channel] = {
+                  subscribers: new SubscriberList(),
+                  state: false,
+               };
+            return ch.subscribers.subscribe(callback);
+         },
+      };
+   }
+
+   explore(context: any, instance: any) {
+      context.push("hoverSync", instance.hoverSync);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: any, instance: any) {
+      context.pop("hoverSync");
+   }
+}
+
+interface HoverSyncChildProps {
+   hoverSync: any;
+   hoverChannel: string;
+   hoverId: any;
+   render: (props: any) => any;
+}
+
+interface HoverSyncChildState {
+   hover: boolean;
+}
+
+class HoverSyncChild extends VDOM.Component<HoverSyncChildProps, HoverSyncChildState> {
+   declare unsubscribe: any;
+
+   constructor(props: HoverSyncChildProps) {
+      super(props);
+      this.state = { hover: false };
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseLeave = this.onMouseLeave.bind(this);
+   }
+
+   onMouseMove() {
+      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
+   }
+
+   onMouseLeave() {
+      this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
+   }
+
+   componentWillUnmount() {
+      this.unsubscribe();
+   }
+
+   componentDidMount() {
+      this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId: any) => {
+         let hover = hoverId === this.props.hoverId;
+         if (hover !== this.state.hover) this.setState({ hover });
+      });
+   }
+
+   render() {
+      return this.props.render({
+         hover: this.state.hover,
+         onMouseLeave: this.onMouseLeave,
+         onMouseMove: this.onMouseMove,
+         key: "child",
+      });
+   }
+}
+
+export function withHoverSync(
+   key: string | number,
+   hoverSync: any,
+   hoverChannel: string | undefined,
+   hoverId: any,
+   render: (props: any) => any,
+) {
+   if (!hoverSync || !hoverChannel || hoverId == null)
+      return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
+   return (
+      <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
+   );
+}
+
+export interface HoverSyncElementConfig extends StyledContainerConfig {
+   hoverChannel?: string;
+   hoverId?: Prop<any>;
+   hoverClass?: ClassProp;
+   hoverStyle?: StyleProp;
+}
+
+export class HoverSyncElement extends StyledContainerBase<HoverSyncElementConfig, Instance> {
+   declare hoverChannel: string;
+   declare hoverId?: Prop<any>;
+   declare hoverClass?: ClassProp;
+   declare hoverStyle?: StyleProp;
+
+   constructor(config?: HoverSyncElementConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         hoverId: undefined,
+         hoverClass: { structured: true },
+         hoverStyle: { structured: true },
+      });
+   }
+
+   prepareData(context: any, instance: any) {
+      instance.hoverSync = context.hoverSync;
+      instance.inSvg = !!context.inSvg;
+      let { data } = instance;
+      data.hoverStyle = parseStyle(data.hoverStyle);
+      super.prepareData(context, instance);
+   }
+
+   render(context: any, instance: any, key: string) {
+      let { data, inSvg } = instance;
+      let { CSS } = this;
+      let children = this.renderChildren(context, instance);
+      let eventHandlers = instance.getJsxEventProps();
+      return withHoverSync(
+         key,
+         instance.hoverSync,
+         this.hoverChannel,
+         data.hoverId,
+         ({ hover, onMouseMove, onMouseLeave, key }: any) => {
+            let style = {
+               ...data.style,
+               ...(hover && data.hoverStyle),
+            };
+            return VDOM.createElement(
+               inSvg ? "g" : "div",
+               {
+                  key,
+                  className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
+                  style,
+                  ...eventHandlers,
+                  onMouseLeave,
+                  onMouseMove,
+               },
+               children,
+            );
+         },
+      );
+   }
+}
+
+HoverSyncElement.prototype.baseClass = "hoversyncelement";
+HoverSyncElement.prototype.hoverChannel = "default";