cx 25.11.1 → 26.0.1

package/src/widgets/nav/LinkButton.ts

@@ -0,0 +1,176 @@
+import { Widget, VDOM } from "../../ui/Widget";
+import { Button } from "../Button";
+import { History } from "../../ui/app/History";
+import { Url } from "../../ui/app/Url";
+import { routeAppend } from "../../util/routeAppend";
+import { parseStyle } from "../../util/parseStyle";
+import { StringProp, StyleProp, ClassProp, Prop } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { ButtonConfig } from "../Button";
+import { HtmlElementInstance } from "../HtmlElement";
+
+export interface LinkButtonConfig extends ButtonConfig {
+   /** Url to the link's target location. Should start with `~/` or `#/` for pushState/hash based navigation. */
+   href?: StringProp;
+
+   /** Binding to the current url location in the store. If `href` matches `url`, additional CSS class `active` is applied. */
+   url?: StringProp;
+
+   /**
+    * Accepted values are `equal`, `prefix` and `subroute`. Default is `equal` which means that `url` must exactly match `href` in order to consider the link active.
+    * In `prefix` mode, if `href` is a prefix of `url`, the link is considered active. The `subroute` mode is similar to `prefix` mode, except that `href` must be followed by a forward slash `/`, indicating
+    * a subroute.
+    */
+   match?: "equal" | "prefix" | "subroute";
+
+   /** Explicitly set the active state of the link. If not set, the active state is determined by comparing `href` and `url`. */
+   active?: Prop<boolean>;
+
+   /** Additional CSS style to applied when the link is active. */
+   activeStyle?: StyleProp;
+
+   /** Additional CSS style to applied when the link is inactive. */
+   inactiveStyle?: StyleProp;
+
+   /** Additional CSS class to applied when the link is active. */
+   activeClass?: ClassProp;
+
+   /** Additional CSS class to applied when the link is inactive. */
+   inactiveClass?: ClassProp;
+
+   /** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>) */
+   target?: Prop<"_self" | "_blank" | "_parent" | "_top" | (string & {})>;
+}
+
+export class LinkButton extends Button {
+   constructor(config?: LinkButtonConfig) {
+      super(config);
+   }
+
+   declare match: "equal" | "prefix" | "subroute";
+   declare activeStyle: any;
+   declare inactiveStyle: any;
+   declare onClick?: string | ((e: MouseEvent, instance: Instance) => void);
+   declare tag: string;
+
+   init() {
+      this.activeStyle = parseStyle(this.activeStyle);
+      this.inactiveStyle = parseStyle(this.inactiveStyle);
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            href: undefined,
+            url: undefined,
+            target: undefined,
+            active: undefined,
+            activeClass: undefined,
+            activeStyle: undefined,
+            inactiveClass: undefined,
+            inactiveStyle: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
+      let { data } = instance;
+
+      data.unresolvedHref = data.href;
+
+      if (typeof data.href === "string") {
+         if (data.unresolvedHref[0] === "+")
+            data.unresolvedHref = routeAppend(context.lastRoute.reverse(), data.href.substring(1));
+
+         data.href = Url.resolve(data.unresolvedHref);
+      }
+
+      let active = this.isActive(data);
+
+      data.stateMods = {
+         disabled: data.disabled,
+         active,
+      };
+
+      super.prepareData(context, instance);
+
+      if (active) {
+         if (data.activeClass) data.classNames += " " + data.activeClass;
+         if (data.activeStyle)
+            data.style = {
+               ...data.style,
+               ...parseStyle(data.activeStyle),
+            };
+      } else {
+         if (data.inactiveClass) data.classNames += " " + data.inactiveClass;
+         if (data.inactiveStyle)
+            data.style = {
+               ...data.style,
+               ...parseStyle(data.inactiveStyle),
+            };
+      }
+   }
+
+   isActive(data: any) {
+      if (data.active != null) return data.active;
+
+      switch (this.match) {
+         default:
+         case "equal":
+            return data.url === data.unresolvedHref;
+
+         case "prefix":
+            return data.url && data.unresolvedHref && data.url.indexOf(data.unresolvedHref) === 0;
+
+         case "subroute":
+            return (
+               data.url &&
+               data.unresolvedHref &&
+               data.url.indexOf(data.unresolvedHref) === 0 &&
+               (data.url === data.unresolvedHref || data.url[data.unresolvedHref.length] === "/")
+            );
+      }
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
+      props.onClick = (ev: any) => {
+         this.handleClick(ev, instance);
+      };
+      super.attachProps(context, instance, props);
+      props.href = instance.data.href;
+      delete props.active;
+      delete props.activeClass;
+      delete props.activeStyle;
+      delete props.inactiveClass;
+      delete props.inactiveStyle;
+   }
+
+   isValidHtmlAttribute(attr: string) {
+      if (attr === "url" || attr === "match") return false;
+      return super.isValidHtmlAttribute(attr);
+   }
+
+   handleClick(e: React.MouseEvent, instance: Instance) {
+      let { data } = instance;
+
+      if (data.disabled) {
+         e.preventDefault();
+         return;
+      }
+
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      if (data.href && Url.isLocal(data.href) && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
+         e.preventDefault();
+         History.pushState({}, null, data.href);
+      }
+   }
+}
+
+LinkButton.prototype.match = "equal";
+LinkButton.prototype.tag = "a";
+
+Widget.alias("link-button", LinkButton);

package/src/widgets/nav/Menu.scss

@@ -1,8 +1,10 @@
+@use "sass:map";
+
 @mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $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} {
       box-sizing: border-box;
@@ -38,7 +40,7 @@
          & > hr {
             border: none;
             border-top: 1px solid $cx-default-menu-separator-color;
-            margin: map-get($cx-menu-padding-options, medium);
+            margin: map.get($cx-menu-padding-options, medium);
          }
 
          &.#{$state}hidden {

package/src/widgets/nav/Menu.tsx

@@ -0,0 +1,489 @@
+/** @jsxImportSource react */
+import { FocusManager } from "../../ui/FocusManager";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { VDOM, Widget } from "../../ui/Widget";
+import { isTextInputElement } from "../../util";
+import { debug, menuFlag } from "../../util/Debug";
+import { closest, findFirst, getFocusedElement, isFocusable, isFocusedDeep, isSelfOrDescendant } from "../../util/DOM";
+import { isDefined } from "../../util/isDefined";
+import { isString } from "../../util/isString";
+import { isUndefined } from "../../util/isUndefined";
+import { KeyCode } from "../../util/KeyCode";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { MenuItem } from "./MenuItem";
+import { MenuSpacer } from "./MenuSpacer";
+
+export interface MenuConfig extends HtmlElementConfig {
+   /** Set to `true` for horizontal menus. */
+   horizontal?: boolean;
+
+   /**
+    * Controls size of menu items. Supported values are `xsmall`, `small`, `medium`, `large` or `xlarge`.
+    * For horizontal menus default size is `small` and for vertical it's `medium`.
+    */
+   itemPadding?: string;
+
+   defaultVerticalItemPadding?: string;
+   defaultHorizontalItemPadding?: string;
+
+   /** Set to true to put overflow items into a submenu on the right. */
+   overflow?: boolean;
+
+   /** Icon to be used for the overflow menu. */
+   overflowIcon?: string;
+
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string;
+
+   /** Show only overflow items. Used internally for overflow menus. */
+   showOnlyOverflowItems?: boolean;
+
+   /** Auto focus first menu item. */
+   autoFocus?: boolean;
+}
+
+/*
+ Functionality:
+ - renders a list of items in a form of horizontal or vertical menu
+ - provides cursor with mouse and keyboard nav
+ - changes focusElement to the first focusable child when cursor is moved using keyboard
+ */
+
+export class Menu extends HtmlElement<MenuConfig, MenuInstance> {
+   declare public baseClass: string;
+   declare public horizontal: boolean;
+   declare public itemPadding: string | boolean;
+   declare public defaultHorizontalItemPadding: string;
+   declare public defaultVerticalItemPadding: string;
+   declare public overflow: boolean;
+   declare public overflowIcon: string;
+   declare public tag: string;
+   declare public showOnlyOverflowItems?: boolean;
+   declare public autoFocus?: boolean;
+   static Item: typeof MenuItem;
+   static Spacer: typeof MenuSpacer;
+   init() {
+      if (this.itemPadding === true) this.itemPadding = "medium";
+
+      if (this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultHorizontalItemPadding;
+
+      if (!this.horizontal && isUndefined(this.itemPadding)) this.itemPadding = this.defaultVerticalItemPadding;
+
+      super.init();
+
+      if (this.overflow) {
+         if (!this.horizontal) throw new Error("Overflow works only on horizontal menus.");
+
+         this.items.push(
+            MenuItem.create({
+               icon: this.overflowIcon,
+               mod: "overflow",
+               items: [
+                  {
+                     type: Menu,
+                     putInto: "dropdown",
+                     items: [...this.items],
+                     showOnlyOverflowItems: true,
+                  },
+               ],
+            }),
+         );
+      }
+   }
+
+   prepareData(context: RenderingContext, instance: MenuInstance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         horizontal: this.horizontal,
+         vertical: !this.horizontal,
+         overflow: this.overflow,
+         [this.itemPadding + "-item-padding"]: this.itemPadding,
+      };
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: MenuInstance) {
+      context.push("lastMenu", this);
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: MenuInstance) {
+      context.pop("lastMenu");
+   }
+
+   render(context: RenderingContext, instance: MenuInstance, key: string) {
+      return (
+         <MenuComponent key={key} instance={instance}>
+            {this.renderChildren(context, instance)}
+         </MenuComponent>
+      );
+   }
+
+   add(item: any) {
+      if (item && (item.tag == "a" || item.tag == "hr")) {
+         let mi: any = {
+            type: MenuItem,
+            items: item,
+            autoClose: item.tag == "a",
+         };
+
+         if (isDefined(item.if)) mi.if = item.if;
+
+         if (isDefined(item.visible)) mi.visible = item.visible;
+
+         super.add(mi);
+      } else super.add(...arguments);
+   }
+}
+
+Menu.prototype.horizontal = false;
+Menu.prototype.defaultVerticalItemPadding = "medium";
+Menu.prototype.defaultHorizontalItemPadding = "small";
+Menu.prototype.icons = false;
+Menu.prototype.overflow = false;
+Menu.prototype.overflowIcon = "drop-down";
+Menu.Item = MenuItem;
+Menu.Spacer = MenuSpacer;
+
+export class MenuInstance extends HtmlElementInstance<Menu> {
+   declare nonOverflownItemCount?: number;
+}
+
+interface MenuComponentProps {
+   instance: MenuInstance;
+   children: any[];
+}
+
+interface MenuComponentState {
+   cursor: any;
+   nonOverflownItemCount: number;
+}
+
+class MenuComponent extends VDOM.Component<MenuComponentProps, MenuComponentState> {
+   el: HTMLElement | null = null;
+   declare itemInfo: any[];
+   isMeasureOverflowDisabled: boolean = false;
+   unsubscribeFocusOut?: () => void;
+   unsubscribeResize?: () => void;
+
+   constructor(props: MenuComponentProps) {
+      super(props);
+      this.state = {
+         cursor: null,
+         nonOverflownItemCount: Infinity,
+      };
+      this.ref = (el: HTMLElement | null) => {
+         this.el = el;
+      };
+   }
+
+   ref: (el: HTMLElement | null) => void;
+
+   render() {
+      let { instance, children } = this.props;
+      let { data, widget } = instance;
+      let { CSS, baseClass } = widget;
+      this.itemInfo = Array.from({ length: children.length });
+
+      let parentNonOverflownItemCount = 0;
+
+      if (widget.showOnlyOverflowItems) {
+         let { parent } = instance;
+         while (parent != null) {
+            if (parent instanceof MenuInstance) {
+               parentNonOverflownItemCount = parent.nonOverflownItemCount || 0;
+               break;
+            }
+            parent = parent.parent;
+         }
+      }
+
+      return (
+         <ul
+            ref={this.ref}
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  pack: this.state.nonOverflownItemCount < children.length - 1,
+               }),
+            )}
+            style={data.style}
+            onBlur={FocusManager.nudge}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {children.map((content, index) => {
+               let key = content && typeof content == "object" && content.key ? content.key : index;
+
+               if (content && content.spacer) {
+                  return widget.horizontal && <li className={CSS.element(baseClass, "spacer")} key={key} />;
+               }
+
+               return (
+                  <MenuItemComponent
+                     key={key}
+                     cursor={key === this.state.cursor}
+                     hidden={
+                        index < parentNonOverflownItemCount ||
+                        (index >= this.state.nonOverflownItemCount && index + 1 != children.length)
+                     }
+                     instance={instance}
+                     itemInfo={this.itemInfo}
+                     itemKey={key}
+                     itemIndex={index}
+                     moveCursor={this.moveCursor.bind(this)}
+                  >
+                     {content}
+                  </MenuItemComponent>
+               );
+            })}
+         </ul>
+      );
+   }
+
+   moveCursor(itemKey: any) {
+      if (itemKey != this.state.cursor) {
+         debug(menuFlag, "Menu", "moveCursor", itemKey);
+         this.setState({ cursor: itemKey });
+      }
+   }
+
+   onKeyDown(e: React.KeyboardEvent) {
+      //ignore the event if it comes from an input element
+      if (isTextInputElement(e.target as Element)) return;
+
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      let keyCode = e.keyCode;
+      debug(menuFlag, "Menu", "keyDown", this.el, keyCode);
+      let { horizontal } = widget;
+
+      if (keyCode == KeyCode.tab) {
+         if (horizontal) keyCode = e.shiftKey ? KeyCode.left : KeyCode.up;
+         else keyCode = e.shiftKey ? KeyCode.right : KeyCode.down;
+      }
+
+      if (this.state.cursor != null) {
+         let cursorIndex = this.itemInfo.findIndex((a) => a.key == this.state.cursor);
+
+         if (horizontal ? keyCode == KeyCode.left : keyCode == KeyCode.up) {
+            for (let c = cursorIndex - 1; c >= 0; c--)
+               if (this.itemInfo[c].focusable) {
+                  FocusManager.focusFirst(this.itemInfo[c].el);
+                  e.stopPropagation();
+                  e.preventDefault();
+                  return;
+               }
+         }
+
+         if (horizontal ? keyCode == KeyCode.right : keyCode == KeyCode.down) {
+            for (let c = cursorIndex + 1; c < this.itemInfo.length; c++)
+               if (this.itemInfo[c].focusable) {
+                  FocusManager.focusFirst(this.itemInfo[c].el);
+                  e.stopPropagation();
+                  e.preventDefault();
+                  return;
+               }
+         }
+      }
+
+      switch (keyCode) {
+         case KeyCode.home:
+            if (this.itemInfo[0].focusable) {
+               FocusManager.focusFirst(this.itemInfo[0].el);
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+
+         case KeyCode.end:
+            if (this.itemInfo[this.itemInfo.length - 1].focusable) {
+               FocusManager.focusFirst(this.itemInfo[this.itemInfo.length - 1].el);
+               e.stopPropagation();
+               e.preventDefault();
+            }
+            break;
+      }
+   }
+
+   onFocusOut(elementReceivingFocus: any) {
+      debug(menuFlag, "Menu", "focusout", this.el, elementReceivingFocus);
+      if (this.el && !isSelfOrDescendant(this.el, elementReceivingFocus)) this.moveCursor(null);
+   }
+
+   componentDidMount() {
+      let { widget } = this.props.instance;
+      if (widget.autoFocus && this.itemInfo.length > 0 && !isFocusedDeep(this.el!))
+         FocusManager.focusFirst(this.itemInfo[0].el);
+      if (widget.overflow) {
+         this.measureOverflow();
+         this.unsubscribeResize = ResizeManager.trackElement(this.el, this.measureOverflow.bind(this));
+      }
+      this.unsubscribeFocusOut = FocusManager.onFocusOut(this.el, this.onFocusOut.bind(this));
+   }
+
+   componentDidUpdate() {
+      this.measureOverflow();
+   }
+
+   measureOverflow() {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      if (!widget.overflow) return;
+
+      let spacerClass = CSS.element(baseClass, "spacer")!;
+
+      let nonOverflownItemCount = 0;
+      let fitItemsWidth = 0;
+      let children = Array.from(this.el!.children);
+      let widths = children.map((c) => {
+         if (!(c instanceof HTMLElement)) return 0;
+         if (c.classList.contains(spacerClass)) return 0;
+         let w = c.offsetWidth;
+         let style = getComputedStyle(c);
+         let marginLeft = style.getPropertyValue("margin-left");
+         if (isString(marginLeft) && marginLeft.endsWith("px")) w += parseFloat(marginLeft);
+         let marginRight = style.getPropertyValue("margin-right");
+         if (isString(marginRight) && marginRight.endsWith("px")) w += parseFloat(marginRight);
+         return w;
+      });
+      let clientWidth = this.el!.clientWidth;
+      let overflowWidth = widths[widths.length - 1];
+      for (let i = 0; i < widths.length - 1; i++) {
+         let overflowReduction = i == widths.length - 2 ? 0 : overflowWidth;
+         if (widths[i] + fitItemsWidth > clientWidth - overflowReduction) break;
+         nonOverflownItemCount++;
+         fitItemsWidth += widths[i];
+      }
+
+      instance.nonOverflownItemCount = nonOverflownItemCount;
+
+      if (!this.isMeasureOverflowDisabled && this.state.nonOverflownItemCount != nonOverflownItemCount) {
+         this.isMeasureOverflowDisabled = true;
+         this.setState(
+            {
+               nonOverflownItemCount,
+            },
+            () => {
+               this.isMeasureOverflowDisabled = false;
+            },
+         );
+      }
+   }
+
+   componentWillUnmount() {
+      this.unsubscribeFocusOut && this.unsubscribeFocusOut();
+      this.unsubscribeResize && this.unsubscribeResize();
+   }
+}
+
+Menu.prototype.baseClass = "menu";
+Menu.prototype.tag = "ul";
+
+Widget.alias("menu", Menu);
+
+interface MenuItemComponentProps {
+   itemInfo: any[];
+   itemIndex: number;
+   itemKey: any;
+   instance: MenuInstance;
+   cursor: boolean;
+   hidden: boolean;
+   moveCursor: (itemKey: any) => void;
+   children?: any;
+}
+
+interface MenuItemComponentState {
+   focusable: boolean;
+}
+
+class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemComponentState> {
+   el: HTMLElement | null = null;
+
+   constructor(props: MenuItemComponentProps) {
+      super(props);
+      this.state = { focusable: true };
+   }
+
+   render() {
+      let { itemInfo, itemIndex, itemKey, instance, cursor, hidden } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let mods = {
+         cursor: cursor,
+         focusable: this.state.focusable,
+         hidden,
+      };
+
+      return (
+         <li
+            ref={(c) => {
+               this.el = c;
+               itemInfo[itemIndex] = {
+                  el: c,
+                  focusable: this.state.focusable,
+                  key: itemKey,
+               };
+            }}
+            className={CSS.element(baseClass, "item", mods)}
+            onFocus={this.onFocus.bind(this)}
+            onMouseDown={this.onMouseDown.bind(this)}
+            onKeyDown={this.onKeyDown.bind(this)}
+         >
+            {this.props.children}
+         </li>
+      );
+   }
+
+   onFocus(e: React.FocusEvent) {
+      FocusManager.nudge();
+      debug(menuFlag, "MenuItem", "focus", this.el, e.target);
+      this.props.moveCursor(this.props.itemKey);
+   }
+
+   onKeyDown(e: React.KeyboardEvent) {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (widget.onKeyDown) instance.invoke("onKeyDown", e, instance);
+   }
+
+   onMouseDown(e: React.MouseEvent) {
+      e.stopPropagation();
+
+      //e.preventDefault(); //Causes problems with focusing menu items. Figure out why is this really needed?
+
+      debug(menuFlag, "MenuItem", "mouseDown", this.el);
+      if (this.state.focusable) {
+         let { itemInfo, itemIndex } = this.props;
+         let el = itemInfo[itemIndex].el;
+         let focusableSubElement = closest(e.target as Element, (domEl) => domEl === el || isFocusable(domEl));
+         if (focusableSubElement == el) {
+            //the user clicked on an unfocusable branch of elements
+            //lets find a focusable child element and focus it
+            //TODO: explain why is this really needed
+            let focusedEl = getFocusedElement();
+            let focusedChild = FocusManager.focusFirst(el);
+            if (focusedChild !== focusedEl) {
+               debug(menuFlag, "MenuItem", "focusChild", focusedChild, focusedEl);
+            }
+         }
+      }
+   }
+
+   componentDidMount() {
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate() {
+      let { itemInfo, itemIndex, hidden } = this.props;
+      let focusable = !hidden && !!findFirst(this.el!, isFocusable);
+      if (focusable !== this.state.focusable) {
+         itemInfo[itemIndex].focusable = focusable;
+         this.setState({ focusable: focusable });
+      }
+   }
+}

package/src/widgets/nav/Menu.variables.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // MENU
 $cx-menu-state-style-map: $cx-list !default;
 $cx-default-menu-separator-color: lightgray !default;
@@ -13,7 +15,7 @@ $cx-menu-padding-options: (
 
 $cx-menu-list-item: () !default;
 
-$cx-dependencies: map-merge(
+$cx-dependencies: map.merge(
    $cx-dependencies,
    (
       "cx/widgets/Menu": "cx/widgets/MenuItem",