cx 25.11.1 → 26.0.1

package/src/widgets/overlay/Toast.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 
 @mixin cx-toast(
    $name: 'toast',
@@ -5,10 +6,10 @@
    $mods: $cx-toast-mods
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       color: $cx-default-toast-color;
@@ -96,9 +97,9 @@
    $besm: $cx-besm
 ) {
 
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       position: fixed;

package/src/widgets/overlay/Toast.ts

@@ -0,0 +1,111 @@
+import { OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import { Text } from "../../ui/Text";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, StringProp, RecordsProp } from "../../ui/Prop";
+
+export interface ToastConfig extends OverlayConfig {
+   /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
+   timeout?: NumberProp;
+
+   message?: StringProp;
+
+   /** Add default padding. Default is `true`. */
+   pad?: boolean;
+
+   /**
+    * Defines where the toast will be placed.
+    * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`.
+    */
+   placement?: string;
+}
+
+export class Toast extends OverlayBase<ToastConfig, OverlayInstance> {
+   declare message?: StringProp;
+   declare pad?: boolean;
+   declare placement?: string;
+
+   init(): void {
+      if (this.message)
+         this.items = {
+            type: Text,
+            value: this.message,
+         } as any;
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         timeout: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: OverlayInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pad: this.pad,
+      };
+      super.prepareData(context, instance);
+   }
+
+   overlayDidUpdate(instance: OverlayInstance, component: any): void {
+      let el = component.containerEl || component.props.parentEl;
+      if (component.state.animated) {
+         el.style.height = `${component.el.offsetHeight}px`;
+         el.classList.add(this.CSS.state("live"));
+      }
+   }
+
+   overlayDidMount(instance: OverlayInstance, component: any): void {
+      let { data } = instance;
+      if (data.timeout > 0) {
+         component.timeoutTimer = setTimeout(() => {
+            instance.dismiss!();
+         }, data.timeout);
+      }
+   }
+
+   overlayWillUnmount(instance: OverlayInstance, component: any): void {
+      let el = component.containerEl || component.props.parentEl;
+      el.style.height = 0;
+      el.classList.remove(this.CSS.state("live"));
+      if (component.timeoutTimer) clearTimeout(component.timeoutTimer);
+   }
+
+   containerFactory(): HTMLElement {
+      let el = document.createElement("div");
+      el.className = this.CSS.element("toaster", "item");
+      let placement = this.placement || "top";
+      let toaster = getToaster(placement);
+      toaster.el.className = this.CSS.block("toaster", null, {
+         [`placement-${placement}`]: true,
+      });
+      toaster.el.insertBefore(el, toaster.el.firstChild);
+      return el;
+   }
+}
+
+interface ToasterInfo {
+   el: HTMLElement;
+}
+
+const toasters: Record<string, ToasterInfo> = {};
+
+function getToaster(placement: string): ToasterInfo {
+   let t = toasters[placement];
+   if (!t) {
+      let el = document.createElement("div");
+      document.body.appendChild(el);
+      t = toasters[placement] = {
+         el,
+      };
+   }
+   return t;
+}
+
+Toast.prototype.styled = true;
+Toast.prototype.pad = true;
+Toast.prototype.animate = true;
+Toast.prototype.baseClass = "toast";
+Toast.prototype.placement = "top";
+Toast.prototype.destroyDelay = 300;

package/src/widgets/overlay/Tooltip.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @keyframes cx-tooltip-enter-animation {
    from {
       transform: scale(0.9);
@@ -26,10 +28,10 @@
    $name: 'tooltip',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map_get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @extend %cxb-overlay;

package/src/widgets/overlay/Tooltip.tsx

@@ -0,0 +1,393 @@
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Dropdown, DropdownBase, DropdownConfig, DropdownInstance } from "./Dropdown";
+import { debug, tooltipsFlag } from "../../util/Debug";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { shallowEquals } from "../../util/shallowEquals";
+import { isSelector } from "../../data/isSelector";
+import { TooltipConfig, TooltipParentInstance, TooltipProp, wireTooltipOps } from "./tooltip-ops";
+import { getCursorPos } from "./captureMouse";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { StringProp, BooleanProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+
+export class TooltipInstance extends DropdownInstance<Tooltip> {
+   tooltipComponent?: any;
+   parentValidityCheckTimer?: NodeJS.Timeout;
+   mouseOverTooltip?: boolean;
+   mouseOverTarget?: boolean;
+   trackMouse?: (e: MouseEvent) => void;
+   dismissTooltip?: (() => void) | null;
+   declare tooltipName: string;
+   lastClickTime?: number;
+   config?: TooltipConfig;
+   update?: () => void;
+   declare store: ReadOnlyDataView;
+   declare parent: Instance & TooltipParentInstance;
+}
+
+export class TooltipBase<
+   Config extends TooltipConfig = TooltipConfig,
+   InstanceType extends TooltipInstance = TooltipInstance,
+> extends DropdownBase<Config, InstanceType> {
+   declare text?: StringProp;
+   declare title?: StringProp;
+   declare alwaysVisible?: BooleanProp;
+   declare trackMouse?: boolean;
+   declare trackMouseX?: boolean;
+   declare trackMouseY?: boolean;
+   declare touchBehavior?: string;
+   declare globalMouseTracking?: boolean;
+   declare mouseTrap?: boolean;
+   declare createDelay?: number;
+   declare baseClass: string;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         text: undefined,
+         title: undefined,
+         alwaysVisible: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         "mouse-trap": this.mouseTrap,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderContents(context: RenderingContext, instance: InstanceType): any {
+      let { data } = instance;
+      let { CSS, baseClass } = this;
+      return [
+         data.title && (
+            <div key="title" className={CSS.element(baseClass, "title")}>
+               {data.title}
+            </div>
+         ),
+         data.text,
+         ...super.renderContents(context, instance),
+      ];
+   }
+
+   initInstance(context: RenderingContext, instance: InstanceType): void {
+      super.initInstance(context, instance);
+
+      if (this.trackMouseX || this.trackMouseY) {
+         instance.trackMouse = (e: any) => {
+            let pos = getCursorPos(e);
+            instance.mousePosition = {
+               x: pos.clientX,
+               y: pos.clientY,
+            };
+            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
+         };
+      }
+   }
+
+   overlayDidMount(instance: InstanceType, component: any): void {
+      instance.tooltipComponent = component;
+
+      super.overlayDidMount(instance, component);
+
+      instance.parentValidityCheckTimer = setInterval(() => {
+         if (this.relatedElement && !this.relatedElement.ownerDocument.body.contains(this.relatedElement)) {
+            if (instance.dismissTooltip) {
+               instance.dismissTooltip();
+               instance.dismissTooltip = null;
+            }
+         } else {
+            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
+         }
+      }, 500);
+
+      if (instance.widget.globalMouseTracking && instance.trackMouse) {
+         document.addEventListener("mousemove", instance.trackMouse);
+      }
+   }
+
+   overlayWillUnmount(instance: InstanceType, component: any): void {
+      clearInterval(instance.parentValidityCheckTimer);
+      super.overlayWillUnmount(instance, component);
+      instance.tooltipComponent = null;
+
+      if (instance.widget.globalMouseTracking && instance.trackMouse) {
+         document.removeEventListener("mousemove", instance.trackMouse);
+      }
+   }
+
+   handleMouseEnter(instance: InstanceType, component: any): void {
+      instance.mouseOverTooltip = true;
+      super.handleMouseEnter(instance, component);
+   }
+
+   handleMouseLeave(instance: InstanceType, component: any): void {
+      instance.mouseOverTooltip = false;
+      if (this.mouseTrap) this.handleMouseLeavesParent(instance);
+      super.handleMouseLeave(instance, component);
+   }
+
+   handleMouseLeavesParent(instance: InstanceType): void {
+      let timeout = this.mouseTrap ? 200 : 0;
+      setTimeout(() => {
+         if (!instance.mouseOverTarget && !(this.mouseTrap && instance.mouseOverTooltip)) this.dismissTooltip(instance);
+      }, timeout);
+   }
+
+   dismissTooltip(instance: InstanceType): void {
+      if (!instance || !instance.dismissTooltip) return;
+      if (
+         instance.data &&
+         instance.data.alwaysVisible &&
+         this.relatedElement &&
+         this.relatedElement.ownerDocument.body.contains(this.relatedElement)
+      )
+         return;
+      instance.dismissTooltip();
+      instance.dismissTooltip = null;
+   }
+
+   dismissAfterScroll(data: any, instance: InstanceType): void {
+      this.dismissTooltip(instance);
+   }
+
+   checkVisible(context: RenderingContext, instance: InstanceType, data: any): boolean {
+      if (!isNonEmptyArray(this.items) && !data.title && !data.text) return false;
+      return super.checkVisible(context, instance, data);
+   }
+}
+
+TooltipBase.prototype.baseClass = "tooltip";
+TooltipBase.prototype.offset = 8;
+TooltipBase.prototype.placementOrder =
+   "right up down left up-right up-left right-up right-down down-right down-left left-up left-down";
+TooltipBase.prototype.animate = true;
+TooltipBase.prototype.destroyDelay = 300;
+TooltipBase.prototype.createDelay = 200;
+TooltipBase.prototype.matchWidth = false;
+TooltipBase.prototype.trackMouse = false;
+TooltipBase.prototype.trackMouseX = false;
+TooltipBase.prototype.trackMouseY = false;
+TooltipBase.prototype.touchFriendly = false; //rename to positioningMode
+TooltipBase.prototype.touchBehavior = "toggle";
+TooltipBase.prototype.arrow = true;
+TooltipBase.prototype.alwaysVisible = false;
+TooltipBase.prototype.globalMouseTracking = false;
+
+export class Tooltip extends TooltipBase {}
+Widget.alias("tooltip", Tooltip);
+
+interface TooltipHelperOptions {
+   target?: HTMLElement;
+   tooltipName?: string;
+   data?: any;
+}
+
+export function getTooltipInstance(
+   e: MouseEvent | Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options: TooltipHelperOptions = {},
+) {
+   let target = options.target || (e instanceof Element ? e : e?.currentTarget) || e;
+
+   debug(tooltipsFlag, "mouse-move", target, parentInstance);
+
+   let name = options.tooltipName || "tooltip";
+
+   if (!parentInstance.tooltips) parentInstance.tooltips = {};
+   let tooltipInstance: TooltipInstance | null = parentInstance.tooltips[name] || null;
+
+   //no tooltips on disabled elements
+   if (parentInstance?.data.disabled) {
+      if (tooltipInstance && tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
+      return;
+   }
+
+   if (
+      tooltipInstance &&
+      (tooltipInstance.widget.relatedElement != target ||
+         !shallowEquals(tooltipInstance.config, tooltip) ||
+         tooltipInstance.store.store != parentInstance.store)
+   ) {
+      if (tooltipInstance.dismissTooltip) tooltipInstance.dismissTooltip();
+      delete parentInstance.tooltips[name];
+      tooltipInstance = null;
+   }
+
+   if (!tooltip || !target) return;
+
+   if (!tooltipInstance) {
+      let config: TooltipConfig = tooltip as TooltipConfig;
+      if (!isTooltipConfig(tooltip)) {
+         config = {
+            text: tooltip as StringProp,
+         };
+      }
+      let tooltipWidget = Tooltip.create({ relatedElement: target }, config);
+      let store = new ReadOnlyDataView({
+         store: parentInstance.store,
+      });
+      tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(
+         tooltipWidget,
+         name,
+         store,
+      ) as TooltipInstance;
+      tooltipInstance.config = config;
+      tooltipInstance.tooltipName = name;
+      tooltipInstance.init(new RenderingContext());
+
+      if (config.alwaysVisible || config.trackMouse || config.trackMouseX || config.trackMouseY) {
+         tooltipInstance.data = tooltipInstance.dataSelector!(store);
+      }
+   }
+
+   return tooltipInstance;
+}
+
+function tooltipMouseMove(
+   e: MouseEvent | Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options: TooltipHelperOptions = {},
+) {
+   let instance = getTooltipInstance(e, parentInstance, tooltip, options);
+   if (!instance) return;
+
+   if (isTouchEvent() && instance.widget.touchBehavior == "ignore") return false;
+
+   let dirty = !shallowEquals(options.data, instance.store.data);
+
+   instance.store.setData(options.data);
+   instance.mouseOverTarget = true;
+
+   if (!instance.dismissTooltip) {
+      let canceled = false;
+      let dismiss = () => {
+         canceled = true;
+      };
+      let unsubscribeDismiss = instance.parent.subscribeOnDestroy(() => {
+         dismiss();
+      });
+      instance.dismissTooltip = () => {
+         if (instance.parent.tooltips![instance.tooltipName] === instance)
+            delete instance.parent.tooltips[instance.tooltipName];
+         unsubscribeDismiss();
+         dismiss();
+         instance.dismissTooltip = null;
+      };
+      instance.lastClickTime = Date.now();
+      setTimeout(() => {
+         let { relatedElement } = instance.widget;
+         if (!canceled && instance.mouseOverTarget && relatedElement!.ownerDocument.body.contains(relatedElement!)) {
+            dismiss = instance.widget.open(instance, {
+               onPipeUpdate: (cb: () => void) => {
+                  instance.update = cb;
+               },
+            });
+         } else {
+            instance.dismissTooltip = null;
+         }
+      }, instance.widget.createDelay);
+   } else {
+      if (isTouchEvent() && instance.widget.touchBehavior == "toggle") {
+         // ios fires mousemove events after touchend
+         if (Date.now() - (instance.lastClickTime ?? 0) > 50) {
+            instance.lastClickTime = Date.now();
+            instance.dismissTooltip();
+            instance.dismissTooltip = null;
+         }
+      } else if (dirty && instance.update) instance.update();
+   }
+
+   if (instance.trackMouse && isMouseEvent(e)) instance.trackMouse(e);
+}
+
+function isMouseEvent(e: MouseEvent | Element): e is MouseEvent {
+   if (e instanceof Element) return false;
+   return !!e;
+}
+
+function isTooltipConfig(tooltip: TooltipProp | undefined): tooltip is TooltipConfig {
+   if (!tooltip) return false;
+   if (isSelector(tooltip)) return false;
+   return true;
+}
+
+function tooltipMouseLeave(
+   e: MouseEvent | Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipHelperOptions,
+) {
+   let instance = getTooltipInstance(e, parentInstance, tooltip, options);
+
+   // do not process leave events twice even if called multiple times
+   if (instance && instance.mouseOverTarget) {
+      instance.mouseOverTarget = false;
+      instance.widget.handleMouseLeavesParent(instance);
+   }
+}
+
+function tooltipParentDidMount(
+   element: Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipHelperOptions,
+) {
+   if (isTooltipConfig(tooltip) && tooltip.alwaysVisible) {
+      let instance = getTooltipInstance(element, parentInstance, tooltip, options);
+      if (instance && instance.data.alwaysVisible) tooltipMouseMove(element, parentInstance, tooltip, options);
+   }
+}
+
+function tooltipParentWillReceiveProps(
+   element: Element,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+   options?: TooltipHelperOptions,
+) {
+   let instance = getTooltipInstance(element, parentInstance, tooltip, options);
+   if (instance && options) {
+      instance.store.setData(options.data);
+      if (instance.update) instance.update();
+      if (instance.mouseOverTarget || (instance.data && instance.data.alwaysVisible))
+         tooltipMouseMove(element, parentInstance, tooltip, options);
+   }
+}
+
+function tooltipParentWillUnmount(parentInstance: Instance<any> & TooltipParentInstance) {
+   if (parentInstance.tooltips) {
+      for (let name in parentInstance.tooltips) {
+         let instance = parentInstance.tooltips[name];
+         instance.mouseOverTarget = false;
+         if (instance.dismissTooltip) instance.dismissTooltip();
+      }
+   }
+}
+
+function tooltipParentDidUpdate(
+   element: HTMLElement,
+   parentInstance: Instance<any> & TooltipParentInstance,
+   tooltip: TooltipProp | undefined,
+) {
+   let instance = getTooltipInstance(element, parentInstance, tooltip);
+   if (instance && instance.visible && instance.data?.alwaysVisible && instance.tooltipComponent)
+      instance.widget.updateDropdownPosition(instance, instance.tooltipComponent);
+}
+
+export function enableTooltips() {
+   wireTooltipOps({
+      tooltipMouseMove,
+      tooltipMouseLeave,
+      tooltipParentDidMount,
+      tooltipParentWillReceiveProps,
+      tooltipParentWillUnmount,
+      tooltipParentDidUpdate,
+   });
+}

package/src/widgets/overlay/Window.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-window(
    $name: "window",
    $state-style-map: $cx-window-state-style-map,
@@ -7,10 +9,10 @@
    $mods: $cx-window-mods,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       @extend %cxb-overlay;