cx 25.11.1 → 26.0.1

package/src/widgets/nav/MenuItem.js

@@ -1,445 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { HtmlElement } from "../HtmlElement";
-import { findFirstChild, isFocusable, isSelfOrDescendant, closest, isFocusedDeep, isFocused } from "../../util/DOM";
-import { Dropdown } from "../overlay/Dropdown";
-import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
-import { debug, menuFlag } from "../../util/Debug";
-import DropdownIcon from "../icons/drop-down";
-import { Icon } from "../Icon";
-import { Localization } from "../../ui/Localization";
-import { KeyCode } from "../../util/KeyCode";
-import { registerKeyboardShortcut } from "../../ui/keyboardShortcuts";
-import { getActiveElement } from "../../util/getActiveElement";
-import {
-   tooltipMouseLeave,
-   tooltipMouseMove,
-   tooltipParentWillUnmount,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { yesNo } from "../overlay/alerts";
-import { isTextInputElement, stopPropagation } from "../../util";
-import { unfocusElement } from "../../ui/FocusManager";
-
-/*
- Functionality:
- - renders dropdown when focused
- - tracks focus and closes if focusElement goes outside the dropdown
- - switches focus to the dropdown when right key pressed
- - listens to dropdown's key events and captures focus back when needed
- - automatically opens the dropdown if mouse is held over for a period of time
- */
-
-export class MenuItem extends HtmlElement {
-   init() {
-      if (this.hideCursor) this.showCursor = false;
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         icon: undefined,
-         disabled: undefined,
-         checked: false,
-         arrow: undefined,
-         confirm: undefined,
-      });
-   }
-
-   explore(context, instance) {
-      instance.horizontal = this.horizontal;
-      let { lastMenu } = context;
-      if (lastMenu) {
-         instance.horizontal = lastMenu.horizontal;
-         instance.padding = lastMenu.itemPadding;
-         instance.icons = lastMenu.icons;
-      }
-
-      instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
-
-      if (!instance.padding && this.pad == true) instance.padding = "medium";
-
-      if (this.padding) instance.padding = this.padding;
-
-      context.push("lastMenuItem", this);
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastMenuItem");
-   }
-
-   render(context, instance, key) {
-      return (
-         <MenuItemComponent key={key} instance={instance} data={instance.data}>
-            {instance.data.text ? <span>{instance.data.text}</span> : this.renderChildren(context, instance)}
-         </MenuItemComponent>
-      );
-   }
-
-   add(element) {
-      if (element && typeof element == "object" && element.putInto == "dropdown") {
-         this.dropdown = { ...element };
-         delete this.dropdown.putInto;
-      } else super.add(...arguments);
-   }
-
-   addText(text) {
-      this.add({
-         type: HtmlElement,
-         tag: "span",
-         text: text,
-      });
-   }
-}
-
-MenuItem.prototype.baseClass = "menuitem";
-MenuItem.prototype.hoverFocusTimeout = 500;
-MenuItem.prototype.hoverToOpen = false;
-MenuItem.prototype.clickToOpen = false;
-MenuItem.prototype.horizontal = true;
-MenuItem.prototype.arrow = false;
-MenuItem.prototype.dropdownOptions = null;
-MenuItem.prototype.showCursor = true;
-MenuItem.prototype.pad = true;
-MenuItem.prototype.placement = null; //default dropdown placement
-MenuItem.prototype.placementOrder = null; //allowed menu placements
-MenuItem.prototype.autoClose = false;
-MenuItem.prototype.checkedIcon = "check";
-MenuItem.prototype.uncheckedIcon = "dummy";
-MenuItem.prototype.keyboardShortcut = false;
-MenuItem.prototype.openOnFocus = true;
-
-Widget.alias("submenu", MenuItem);
-Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
-
-class MenuItemComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         dropdownOpen: false,
-      };
-   }
-
-   getDefaultPlacementOrder(horizontal) {
-      return horizontal
-         ? "down-right down down-left up-right up up-left"
-         : "right-down right right-up left-down left left-up";
-   }
-
-   getDropdown() {
-      let { horizontal, widget, parentPositionChangeEvent } = this.props.instance;
-      if (!this.dropdown && widget.dropdown) {
-         this.dropdown = Widget.create(Dropdown, {
-            matchWidth: false,
-            placementOrder: widget.placementOrder || this.getDefaultPlacementOrder(horizontal),
-            trackScroll: true,
-            inline: true,
-            onClick: stopPropagation,
-            ...widget.dropdownOptions,
-            relatedElement: this.el.parentElement,
-            placement: widget.placement,
-            onKeyDown: this.onDropdownKeyDown.bind(this),
-            onMouseDown: stopPropagation,
-            items: widget.dropdown,
-            parentPositionChangeEvent,
-            pipeValidateDropdownPosition: (cb) => {
-               this.validateDropdownPosition = cb;
-            },
-            onDismissAfterScroll: () => {
-               this.closeDropdown();
-               return false;
-            },
-         });
-      }
-      return this.dropdown;
-   }
-
-   render() {
-      let { instance, data, children } = this.props;
-      let { widget } = instance;
-      let { CSS, baseClass } = widget;
-      let dropdown = this.state.dropdownOpen && (
-         <Cx widget={this.getDropdown()} options={{ name: "submenu" }} parentInstance={instance} subscribe />
-      );
-
-      let arrow = data.arrow && <DropdownIcon className={CSS.element(baseClass, "arrow")} />;
-
-      let icon = null;
-
-      let checkbox = widget.checked != null;
-
-      if (checkbox) {
-         data.icon = data.checked ? widget.checkedIcon : widget.uncheckedIcon;
-      }
-
-      if (data.icon) {
-         icon = (
-            <div
-               className={CSS.element(baseClass, "button")}
-               onClick={(e) => {
-                  e.preventDefault();
-                  if (!instance.set("checked", !data.checked)) this.onClick(e);
-               }}
-               onMouseDown={(e) => {
-                  if (checkbox) e.stopPropagation();
-               }}
-            >
-               {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
-            </div>
-         );
-      }
-
-      let empty = !children || (Array.isArray(children) && children.length == 0);
-
-      let classNames = CSS.expand(
-         data.classNames,
-         CSS.state({
-            open: this.state.dropdownOpen,
-            horizontal: instance.horizontal,
-            vertical: !instance.horizontal,
-            arrow: data.arrow,
-            cursor: widget.showCursor,
-            [instance.padding + "-padding"]: instance.padding,
-            icon: !!icon || instance.icons,
-            disabled: data.disabled,
-            empty,
-         })
-      );
-
-      if (empty) children = <span className={CSS.element(baseClass, "baseline")}>&nbsp;</span>;
-
-      return (
-         <div
-            className={classNames}
-            style={data.style}
-            tabIndex={!data.disabled && (widget.dropdown || widget.onClick || widget.checked) ? 0 : null}
-            ref={(el) => {
-               this.el = el;
-            }}
-            onKeyDown={this.onKeyDown.bind(this)}
-            onMouseDown={this.onMouseDown.bind(this)}
-            onMouseEnter={this.onMouseEnter.bind(this)}
-            onMouseLeave={this.onMouseLeave.bind(this)}
-            onFocus={this.onFocus.bind(this)}
-            onClick={this.onClick.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-         >
-            {children}
-            {icon}
-            {arrow}
-            {dropdown}
-         </div>
-      );
-   }
-
-   componentDidUpdate() {
-      if (this.state.dropdownOpen && this.validateDropdownPosition) {
-         this.validateDropdownPosition();
-      }
-   }
-
-   componentDidMount() {
-      let { widget } = this.props.instance;
-      if (widget.keyboardShortcut)
-         this.unregisterKeyboardShortcut = registerKeyboardShortcut(widget.keyboardShortcut, (e) => {
-            this.el.focus(); //open the dropdown
-            this.onClick(e); //execute the onClick handler
-         });
-
-      tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
-   }
-
-   onDropdownKeyDown(e) {
-      debug(menuFlag, "MenuItem", "dropdownKeyDown");
-      let { horizontal } = this.props.instance;
-      if (
-         e.keyCode == KeyCode.esc ||
-         (!isTextInputElement(e.target) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))
-      ) {
-         FocusManager.focus(this.el);
-         e.preventDefault();
-         e.stopPropagation();
-      }
-   }
-
-   clearAutoFocusTimer() {
-      if (this.autoFocusTimerId) {
-         debug(menuFlag, "MenuItem", "autoFocusCancel");
-         clearTimeout(this.autoFocusTimerId);
-         delete this.autoFocusTimerId;
-      }
-   }
-
-   onMouseEnter(e) {
-      debug(menuFlag, "MenuItem", "mouseEnter", this.el);
-      let { widget } = this.props.instance;
-      if (widget.dropdown && !this.state.dropdownOpen) {
-         this.clearAutoFocusTimer();
-
-         if (widget.hoverToOpen) FocusManager.focus(this.el);
-         else if (!widget.clickToOpen) {
-            // Automatically open the dropdown only if parent menu is focused
-            let commonParentMenu = closest(this.el, (el) => el.tagName == "UL" && el.contains(getActiveElement()));
-            if (commonParentMenu)
-               this.autoFocusTimerId = setTimeout(() => {
-                  delete this.autoFocusTimerId;
-                  if (!this.state.dropdownOpen) {
-                     debug(menuFlag, "MenuItem", "hoverFocusTimeout:before", this.el);
-                     FocusManager.focus(this.el);
-                     debug(menuFlag, "MenuItem", "hoverFocusTimeout:after", this.el, getActiveElement());
-                  }
-               }, widget.hoverFocusTimeout);
-         }
-
-         e.stopPropagation();
-         e.preventDefault();
-      }
-
-      tooltipMouseMove(e, this.props.instance, widget.tooltip);
-   }
-
-   onMouseLeave(e) {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         debug(menuFlag, "MenuItem", "mouseLeave", this.el);
-         this.clearAutoFocusTimer();
-
-         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el);
-      }
-
-      tooltipMouseLeave(e, this.props.instance, widget.tooltip);
-   }
-
-   onKeyDown(e) {
-      debug(menuFlag, "MenuItem", "keyDown", this.el);
-      let { horizontal, widget } = this.props.instance;
-      if (widget.dropdown) {
-         if (
-            !this.state.dropdownOpen &&
-            e.target == this.el &&
-            (e.keyCode == KeyCode.enter || (horizontal ? e.keyCode == KeyCode.down : e.keyCode == KeyCode.right))
-         ) {
-            this.openDropdown(() => {
-               let focusableChild = findFirstChild(this.el, isFocusable);
-               if (focusableChild) FocusManager.focus(focusableChild);
-            });
-            e.preventDefault();
-            e.stopPropagation();
-         }
-
-         if (e.keyCode == KeyCode.esc) {
-            if (!isFocused(this.el)) {
-               FocusManager.focus(this.el);
-               e.preventDefault();
-               e.stopPropagation();
-            }
-            this.closeDropdown();
-         }
-      } else {
-         if (e.keyCode == KeyCode.enter && widget.onClick) this.onClick(e);
-      }
-   }
-
-   onMouseDown(e) {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         e.stopPropagation();
-         if (this.state.dropdownOpen && !widget.hoverToOpen) this.closeDropdown();
-         else {
-            //IE sometimes does not focus parent on child click
-            if (!isFocusedDeep(this.el)) FocusManager.focus(this.el);
-            this.openDropdown();
-
-            //If one of the elements is auto focused prevent stealing focus
-            if (isFocusedDeep(this.el)) e.preventDefault();
-         }
-      }
-   }
-
-   openDropdown(callback) {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         if (!this.state.dropdownOpen) {
-            this.setState(
-               {
-                  dropdownOpen: true,
-               },
-               callback
-            );
-
-            //hide tooltip if dropdown is open
-            tooltipMouseLeave(null, this.props.instance, widget.tooltip);
-         } else if (callback) callback(this.state);
-      }
-   }
-
-   onClick(e) {
-      e.stopPropagation();
-
-      let { instance } = this.props;
-      let { data } = instance;
-      if (data.disabled) {
-         e.preventDefault();
-         return;
-      }
-
-      let { widget } = instance;
-      if (widget.dropdown) e.preventDefault();
-      //prevent navigation
-      else {
-         instance.set("checked", !instance.data.checked);
-
-         if (widget.onClick) {
-            if (data.confirm) {
-               yesNo(data.confirm).then((btn) => {
-                  if (btn == "yes") instance.invoke("onClick", null, instance);
-               });
-            } else instance.invoke("onClick", e, instance);
-         }
-      }
-
-      if (widget.autoClose) unfocusElement(this.el, true);
-   }
-
-   onFocus() {
-      let { widget } = this.props.instance;
-      if (widget.dropdown) {
-         oneFocusOut(this, this.el, this.onFocusOut.bind(this));
-         debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
-         this.clearAutoFocusTimer();
-         if (widget.openOnFocus) this.openDropdown();
-      }
-   }
-
-   onBlur() {
-      FocusManager.nudge();
-   }
-
-   closeDropdown() {
-      this.setState({
-         dropdownOpen: false,
-      });
-      delete this.initialScreenPosition;
-   }
-
-   onFocusOut(focusedElement) {
-      debug(menuFlag, "MenuItem", "focusout", this.el, focusedElement);
-      this.clearAutoFocusTimer();
-      if (this.el && !isSelfOrDescendant(this.el, focusedElement)) {
-         debug(menuFlag, "MenuItem", "closing dropdown", this.el, focusedElement);
-         this.closeDropdown();
-      }
-   }
-
-   componentWillUnmount() {
-      this.clearAutoFocusTimer();
-      offFocusOut(this);
-
-      if (this.offParentPositionChange) this.offParentPositionChange();
-
-      if (this.unregisterKeyboardShortcut) this.unregisterKeyboardShortcut();
-
-      tooltipParentWillUnmount(this.props.instance);
-   }
-}

package/src/widgets/nav/MenuSpacer.d.ts

@@ -1,5 +0,0 @@
-import * as Cx from '../../core';
-
-export interface MenuSpacerProps extends Cx.WidgetProps {}
-
-export class MenuSpacer extends Cx.Widget<MenuSpacerProps> {}

package/src/widgets/nav/MenuSpacer.js

@@ -1,13 +0,0 @@
-import {Widget} from "../../ui/Widget";
-
-export class MenuSpacer extends Widget {
-   render(context, instance, key) {
-      return {
-         key: true,
-         atomic: true,
-         spacer: true
-      };
-   }
-}
-
-MenuSpacer.prototype.isMenuSpacer = true;

package/src/widgets/nav/RedirectRoute.d.ts

@@ -1,9 +0,0 @@
-import * as Cx from "../../core";
-import { RouteProps } from "./Route";
-
-interface RedirectRouteProps extends RouteProps {
-   /** Redirection URL. */
-   redirect?: Cx.StringProp;
-}
-
-export class RedirectRoute extends Cx.Widget<RedirectRouteProps> {}

package/src/widgets/nav/RedirectRoute.js

@@ -1,41 +0,0 @@
-import {Widget} from '../../ui/Widget';
-import {Route} from './Route';
-import {History} from '../../ui/app/History';
-import {Url} from '../../ui/app/Url';
-import {routeAppend} from "../../util/routeAppend";
-
-export class RedirectRoute extends Route
-{
-   checkVisible(context, instance, data) {
-
-      if (!data.visible)
-         return false;
-
-      if (!data.url && !data.route)
-         return true;
-
-      return super.checkVisible(context, instance, data);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         redirect: undefined
-      });
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(...arguments);
-
-      var {data} = instance;
-
-      if (data.redirect && data.redirect[0] === '+')
-         data.redirect = routeAppend(context.lastRoute.reverse(), data.redirect.substring(1));
-
-      if (data.redirect && History.store)
-         History.replaceState({}, null, Url.resolve(data.redirect));
-      else
-         instance.set('url', data.redirect);
-   }
-}
-
-Widget.alias('redirect-route', RedirectRoute);

package/src/widgets/nav/Route.d.ts

@@ -1,21 +0,0 @@
-import * as Cx from '../../core';
-
-export interface RouteProps extends Cx.PureContainerProps {
-
-   /** Url binding. Bind this to the global `url` variable. */
-   url?: Cx.StringProp,
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   path?: string,
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   route?: string,
-   
-   /** Name used to expose local data. Defaults to `$route`. */
-   recordName?: string,
-
-   /** Match route even if given `route` is only a prefix of the current `url`. */
-   prefix?: boolean
-}
-
-export class Route extends Cx.Widget<RouteProps> {}

package/src/widgets/nav/Route.js

@@ -1,102 +0,0 @@
-import { Widget } from "../../ui/Widget";
-import { PureContainer } from "../../ui/PureContainer";
-import RouteMatcher from "route-parser";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { routeAppend } from "../../util/routeAppend";
-
-export class Route extends PureContainer {
-   init() {
-      if (this.path) this.route = this.path;
-
-      super.init();
-
-      if (this.route && this.route[0] !== "+")
-         this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ReadOnlyDataView({
-         store: instance.parentStore,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         url: undefined,
-      });
-   }
-
-   checkVisible(context, instance, data) {
-      if (!data.visible) return false;
-
-      if (data.url !== instance.cached.url) {
-         instance.cached.url = data.url;
-         let matcher = this.matcher;
-         let route = this.route;
-         if (this.route[0] === "+") {
-            route = routeAppend(context.lastRoute.route, this.route.substring(1));
-            if (!instance.cached.matcher || instance.cached.route !== route)
-               instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
-            matcher = instance.cached.matcher;
-         }
-         instance.cached.result = matcher.match(data.url);
-         instance.cached.matcher = matcher;
-         instance.cached.route = data.route = route;
-      }
-      if (!instance.cached.result) return false;
-
-      return super.checkVisible(context, instance, data);
-   }
-
-   prepareData(context, { data, store, cached }) {
-      super.prepareData(...arguments);
-
-      store.setData({
-         [this.recordName]: cached.result,
-      });
-
-      //TODO: Replace comparison with deepEquals
-      if (this.params && this.params.bind) {
-         var params = store.get(this.params.bind);
-         if (JSON.stringify(params) != JSON.stringify(cached.result)) {
-            store.set(this.params.bind, cached.result);
-         }
-      }
-
-      if (this.map) {
-         for (var key in result) {
-            var binding = this.map[key];
-            if (binding) store.set(binding, result[key]);
-         }
-      }
-   }
-
-   explore(context, instance) {
-      context.push("lastRoute", {
-         route: instance.cached.route,
-         result: instance.cached.result,
-         reverse: function (data) {
-            return instance.cached.matcher.reverse({
-               ...instance.cached.result,
-               remainder: "",
-               ...data,
-            });
-         },
-      });
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("lastRoute");
-   }
-}
-
-Route.prototype.recordName = "$route";
-Route.prototype.prefix = false;
-
-Widget.alias("route", Route);

package/src/widgets/nav/Route.spec.js

@@ -1,27 +0,0 @@
-import { Cx } from "../../ui/Cx";
-import { VDOM } from "../../ui/VDOM";
-import { Route } from "./Route";
-import { Store } from "../../data/Store";
-import { HtmlElement } from "../HtmlElement";
-
-import renderer from "react-test-renderer";
-import assert from "assert";
-
-describe("Route", () => {
-   it("matching works for ~/widgets/color-pickers", () => {
-      let widget = (
-         <cx>
-            <Route url="~/widgets/color-pickers" route="~/widgets/color-pickers">
-               <div />
-            </Route>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = renderer.create(<Cx widget={widget} store={store} />);
-
-      let tree = component.toJSON();
-      assert.equal(tree.type, "div");
-   });
-});

package/src/widgets/nav/Scroller.d.ts

@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-
-interface ScrollerProps extends Cx.StyledContainerProps {
-
-   /** Base CSS class. Default is `hscroller`. */
-   baseClass?: string,
-
-   horizontal?: boolean,
-
-   vertical?: boolean
-
-   scrollIntoViewSelector?: Cx.StringProp
-}
-
-export class Scroller extends Cx.Widget<ScrollerProps> {}
-export class HScroller extends Cx.Widget<ScrollerProps> {}
-export class VScroller extends Cx.Widget<ScrollerProps> {}