cx 25.10.1 → 26.0.1

package/src/widgets/overlay/Toast.d.ts

@@ -1,30 +0,0 @@
-import * as Cx from '../../core';
-import { OverlayProps } from './Overlay';
-
-interface ToastProps extends OverlayProps {
-
-   /** Value of timeout in milliseconds after which the toast is automatically dismissed. */
-   timeout?: Cx.NumberProp,
-   
-   message?: string,
-
-   /** List of child elements. */
-   items?: Cx.RecordsProp,
-
-   /** Add default padding. Default is `true`. */
-   pad?: boolean,
-   
-   /** Base CSS class. Default is `toast`. */
-   baseClass?: string,
-
-   /** 
-    * Defines where the toast will be placed. 
-    * Supported values are `top`, `right`, `bottom` and `left`. Default value is `top`. 
-    */
-   placement?: string,
-
-   styled?: boolean
-   
-}
-
-export class Toast extends Cx.Widget<ToastProps> {}

package/src/widgets/overlay/Toast.js

@@ -1,93 +0,0 @@
-import {Overlay} from './Overlay';
-import {Text} from '../../ui/Text';
-
-export class Toast extends Overlay {
-
-   init() {
-      if (this.message)
-         this.items = {
-            type: Text,
-            value: this.message
-         };
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         timeout: undefined
-      })
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad
-      };
-      super.prepareData(context, instance);
-   }
-
-   overlayDidUpdate(instance, component) {
-      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, component) {
-      let {data} = instance;
-      if (data.timeout > 0) {
-         component.timeoutTimer = setTimeout(() => {
-            instance.dismiss();
-         }, data.timeout);
-      }
-   }
-
-   overlayWillDismiss(instance, component) {
-      let el = component.containerEl || component.props.parentEl;
-      el.style.height = 0;
-      el.classList.remove(this.CSS.state('live'));
-   }
-
-   overlayWillUnmount(instance, component) {
-      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() {
-      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;
-   }
-}
-
-const toasters = {};
-
-function getToaster(placement) {
-   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.d.ts

@@ -1,50 +0,0 @@
-import * as Cx from '../../core';
-import { DropdownProps } from './Dropdown';
-
-export interface TooltipProps extends DropdownProps {
-
-   /** Text to be displayed inside the tooltip. */
-   text?: Cx.StringProp,
-
-   /** Text to be displayed in the header. */
-   title?: Cx.StringProp,
-
-   /** 
-    * Set to true to make the tooltip always visible. 
-    * This is useful e.g. in product tours, when instructions need to be shown, even if the mouse pointer is not around. 
-    */
-   alwaysVisible?: Cx.BooleanProp,
-   
-   /** Base CSS class to be applied to the field. Defaults to 'tooltip'. */
-   baseClass?: string,
-
-   /** 
-    * Set to `true` to append the set `animate` state after the initial render.
-    *  Appended CSS class may be used to add show/hide animations.
-    */
-   animate?: boolean,
-   
-   /** Set to `true` to make the tooltip follow the mouse movement. */
-   trackMouse?: boolean,
-
-   trackMouseX?: boolean,
-   trackMouseY?: boolean,
-
-   /** 
-    * This property controls how tooltips behave on touch events. 
-    * Default value is `toggle` which means that the tooltip is shown on first tap and closed on the second tap. 
-    * Use `ignore` to skip showing tooltips on touch events. 
-    */
-   touchBehavior?: string,
-
-
-   /**
-    * Set to true to rely on browser's window mousemove event for getting mouse coordinates
-    * instead of using the element that tooltip is attached to.
-    */
-   globalMouseTracking?: boolean
-}
-
-export class Tooltip extends Cx.Widget<TooltipProps> {}
-
-export function enableTooltips();

package/src/widgets/overlay/Tooltip.js

@@ -1,308 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Dropdown } 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 { wireTooltipOps } from "./tooltip-ops";
-import { getCursorPos } from "./captureMouse";
-import { RenderingContext } from "../../ui/RenderingContext";
-
-export class Tooltip extends Dropdown {
-   declareData() {
-      super.declareData(...arguments, {
-         text: undefined,
-         title: undefined,
-         alwaysVisible: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         "mouse-trap": this.mouseTrap,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderContents(context, instance) {
-      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, instance) {
-      super.initInstance(context, instance);
-
-      if (this.trackMouseX || this.trackMouseY) {
-         instance.trackMouse = (e) => {
-            let pos = getCursorPos(e);
-            instance.mousePosition = {
-               x: pos.clientX,
-               y: pos.clientY,
-            };
-            if (instance.tooltipComponent) this.updateDropdownPosition(instance, instance.tooltipComponent);
-         };
-      }
-   }
-
-   overlayDidMount(instance, component) {
-      instance.tooltipComponent = component;
-
-      super.overlayDidMount(instance, component);
-
-      instance.parentValidityCheckTimer = setInterval(() => {
-         if (!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, component) {
-      clearInterval(instance.parentValidityCheckTimer);
-      super.overlayWillUnmount(instance, component);
-      instance.tooltipComponent = null;
-
-      if (instance.widget.globalMouseTracking && instance.trackMouse) {
-         document.removeEventListener("mousemove", instance.trackMouse);
-      }
-   }
-
-   handleMouseEnter(instance, component) {
-      instance.mouseOverTooltip = true;
-      super.handleMouseEnter(instance, component);
-   }
-
-   handleMouseLeave(instance, component) {
-      instance.mouseOverTooltip = false;
-      if (this.mouseTrap) this.handleMouseLeavesParent(instance);
-      super.handleMouseLeave(instance, component);
-   }
-
-   handleMouseLeavesParent(instance) {
-      let timeout = this.mouseTrap ? 200 : 0;
-      setTimeout(() => {
-         if (!instance.mouseOverTarget && !(this.mouseTrap && instance.mouseOverTooltip)) this.dismissTooltip(instance);
-      }, timeout);
-   }
-
-   dismissTooltip(instance) {
-      if (!instance || !instance.dismissTooltip) return;
-      if (
-         instance.data &&
-         instance.data.alwaysVisible &&
-         this.relatedElement.ownerDocument.body.contains(this.relatedElement)
-      )
-         return;
-      instance.dismissTooltip();
-      instance.dismissTooltip = null;
-   }
-
-   dismissAfterScroll(data, instance) {
-      this.dismissTooltip(instance);
-   }
-
-   checkVisible(context, instance, data) {
-      if (!isNonEmptyArray(this.items) && !data.title && !data.text) return false;
-      return super.checkVisible(context, instance, data);
-   }
-}
-
-Widget.alias("tooltip", Tooltip);
-
-Tooltip.prototype.baseClass = "tooltip";
-Tooltip.prototype.offset = 8;
-Tooltip.prototype.placementOrder =
-   "right up down left up-right up-left right-up right-down down-right down-left left-up left-down";
-Tooltip.prototype.animate = true;
-Tooltip.prototype.destroyDelay = 300;
-Tooltip.prototype.createDelay = 200;
-Tooltip.prototype.matchWidth = false;
-Tooltip.prototype.trackMouse = false;
-Tooltip.prototype.trackMouseX = false;
-Tooltip.prototype.trackMouseY = false;
-Tooltip.prototype.touchFriendly = false; //rename to positioningMode
-Tooltip.prototype.touchBehavior = "toggle";
-Tooltip.prototype.arrow = true;
-Tooltip.prototype.alwaysVisible = false;
-Tooltip.prototype.globalMouseTracking = false;
-
-export function getTooltipInstance(e, parentInstance, tooltip, options = {}) {
-   let target = options.target || (e && e.currentTarget) || e;
-
-   debug(tooltipsFlag, "mouse-move", target, parentInstance);
-
-   let name = options.tooltipName || "tooltip";
-
-   if (!parentInstance.tooltips) parentInstance.tooltips = {};
-   let tooltipInstance = parentInstance.tooltips[name];
-
-   //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 = tooltip;
-      if (isSelector(tooltip)) {
-         config = {
-            text: tooltip,
-         };
-      }
-      let tooltipWidget = Tooltip.create({ relatedElement: target }, config);
-      let store = new ReadOnlyDataView({
-         store: parentInstance.store,
-      });
-      tooltipInstance = parentInstance.tooltips[name] = parentInstance.getDetachedChild(tooltipWidget, name, store);
-      tooltipInstance.config = tooltip;
-      tooltipInstance.tooltipName = name;
-      tooltipInstance.init(new RenderingContext());
-
-      if (tooltip.alwaysVisible || tooltip.trackMouse || tooltip.trackMouseX || tooltip.trackMouseY) {
-         tooltipInstance.data = tooltipInstance.dataSelector(store);
-      }
-   }
-
-   return tooltipInstance;
-}
-
-function tooltipMouseMove(e, parentInstance, tooltip, options = {}) {
-   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) => {
-                  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 && e && e.target) instance.trackMouse(e);
-}
-
-function tooltipMouseLeave(e, parentInstance, tooltip, options) {
-   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, parentInstance, tooltip, options) {
-   if (tooltip && tooltip.alwaysVisible) {
-      let instance = getTooltipInstance(element, parentInstance, tooltip, options);
-      if (instance && instance.data.alwaysVisible) tooltipMouseMove(element, parentInstance, tooltip, options);
-   }
-}
-
-function tooltipParentWillReceiveProps(element, parentInstance, tooltip, options) {
-   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) {
-   if (parentInstance.tooltips) {
-      for (let name in parentInstance.tooltips) {
-         let instance = parentInstance.tooltips[name];
-         instance.mouseOverTarget = false;
-         if (instance.dismissTooltip) parentInstance.tooltips[name].dismissTooltip();
-      }
-   }
-}
-
-function tooltipParentDidUpdate(element, parentInstance, tooltip) {
-   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.d.ts

@@ -1,42 +0,0 @@
-import * as Cx from "../../core";
-import { OverlayProps } from "./Overlay";
-
-interface WindowProps extends OverlayProps {
-   /** Text to be displayed in the header. */
-   title?: Cx.StringProp;
-
-   /** Controls the close button visibility. Defaults to `true`. */
-   closable?: Cx.BooleanProp;
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: Cx.StyleProp;
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: Cx.StyleProp;
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: Cx.StyleProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `window`. */
-   baseClass?: string;
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: Cx.ClassProp;
-
-   /** Set to `true` to enable resizing. */
-   resizable?: boolean;
-
-   /** Set to `true` to automatically focus the field, after it renders for the first time. */
-   autoFocus?: boolean;
-
-   /** Set to `false` to prevent the window itself to be focusable. Default value is true.*/
-   focusable?: boolean;
-
-   /** Set to `true` to disable moving the window by dragging the header. */
-   fixed?: boolean;
-
-   /** Set to `true` to add default padding to the window body. */
-   pad?: boolean;
-}
-
-export class Window extends Cx.Widget<WindowProps> {}