cx 22.7.0 → 22.8.1

package/dist/ui.js

@@ -1623,26 +1623,30 @@ function preventFocusOnTouch(e, force) {
 
 	if (force || isTouchEvent()) preventFocus(e);
 }
-function unfocusElement(target, forceBlur) {
+function unfocusElement(target, unfocusParentOverlay) {
 	if (target === void 0) {
 		target = null;
 	}
 
-	if (forceBlur === void 0) {
-		forceBlur = true;
+	if (unfocusParentOverlay === void 0) {
+		unfocusParentOverlay = true;
 	}
 
 	var activeElement = getActiveElement();
-	if (!target) target = activeElement; //find the closest focusable parent of the target element and focus it instead
-
-	var focusableParent =
-		(!forceBlur &&
-			closestParent(target, function(el) {
-				return isFocusable(el);
-			})) ||
-		document.body;
-	if (focusableParent === document.body) activeElement.blur();
-	else focusableParent.focus();
+	if (!target) target = activeElement;
+
+	if (unfocusParentOverlay) {
+		var focusableOverlayContainer = closestParent(target, function(el) {
+			return el.dataset.focusableOverlayContainer;
+		});
+		if (focusableOverlayContainer) target = focusableOverlayContainer;
+	} //find the closest focusable parent of the target element and focus it instead
+
+	var focusableParent = closestParent(target, function(el) {
+		return isFocusable(el) && (!unfocusParentOverlay || el.dataset.focusableOverlayContainer);
+	});
+	if (focusableParent && focusableParent !== document.body) focusableParent.focus();
+	else activeElement.blur();
 	FocusManager.nudge();
 }
 

package/dist/widgets.css

@@ -2406,6 +2406,7 @@ th.cxe-calendar-display {
   height: 18px;
   margin-left: -9px;
   margin-top: -9px;
+  margin-bottom: -9px;
   touch-action: none;
   background-color: #ebebeb;
   border-style: solid;
@@ -2417,8 +2418,7 @@ th.cxe-calendar-display {
     left: 0;
     top: 50%; }
   .cxb-slider.cxs-vertical .cxe-slider-handle {
-    left: 50%;
-    top: 0; }
+    left: 50%; }
   .cxe-slider-handle:hover {
     box-shadow: 0 0 3px rgba(128, 128, 128, 0.5); }
   .cxe-slider-handle:focus {

package/dist/widgets.js

@@ -89,6 +89,7 @@ import {
 	calculateNaturalElementHeight,
 	findFirst,
 	isFocusable,
+	closestParent,
 	isNonEmptyArray,
 	tooltipsFlag,
 	shallowEquals,
@@ -2068,7 +2069,7 @@ var Sandbox = /*#__PURE__*/ (function(_PureContainer) {
 	_proto.init = function init() {
 		if (this.recordAlias) this.recordName = this.recordAlias;
 		if (this.accessKey) this.key = this.accessKey;
-		this.storageBinding = Binding.get(this.storage.bind);
+		this.storageBinding = Binding.get(this.storage);
 
 		_PureContainer.prototype.init.call(this);
 	};
@@ -3435,9 +3436,14 @@ var Overlay = /*#__PURE__*/ (function(_Container) {
 		if (this.onMouseEnter) instance.invoke("onMouseEnter", instance, component);
 	};
 
+	_proto.getOverlayContainer = function getOverlayContainer() {
+		return document.body;
+	};
+
 	_proto.containerFactory = function containerFactory() {
 		var el = document.createElement("div");
-		document.body.appendChild(el);
+		var container = this.getOverlayContainer();
+		container.appendChild(el);
 		el.style.position = "absolute";
 		if (this.containerStyle) Object.assign(el.style, parseStyle(this.containerStyle));
 		return el;
@@ -3565,6 +3571,7 @@ var OverlayContent = /*#__PURE__*/ (function(_VDOM$Component) {
 			onMouseEnter: this.props.onMouseEnter,
 			onMouseLeave: this.props.onMouseLeave,
 			onClick: this.props.onClick,
+			"data-focusable-overlay-container": this.props.focusableOverlayContainer,
 			children: this.props.children
 		});
 	};
@@ -3621,7 +3628,7 @@ var OverlayComponent = /*#__PURE__*/ (function(_VDOM$Component2) {
 				_this4.el = el;
 			};
 
-		var content = /*#__PURE__*/ jsxs(OverlayContent, {
+		var content = /*#__PURE__*/ jsx(OverlayContent, {
 			onRef: this.onOverlayRef,
 			className: data.classNames,
 			style: data.style,
@@ -3639,25 +3646,14 @@ var OverlayComponent = /*#__PURE__*/ (function(_VDOM$Component2) {
 			onMouseEnter: this.onMouseEnter.bind(this),
 			onClick: this.onClick.bind(this),
 			onDidUpdate: this.overlayDidUpdate.bind(this),
-			children: [
-				widget.modal ||
-					(widget.backdrop &&
-						/*#__PURE__*/ jsx(
-							"div",
-							{
-								className: CSS.element(baseClass, "modal-backdrop"),
-								onClick: this.onBackdropClick.bind(this)
-							},
-							"backdrop"
-						)),
-				this.renderOverlayBody()
-			]
+			focusableOverlayContainer: widget.dismissOnFocusOut,
+			children: this.renderOverlayBody()
 		});
 
 		var result = content;
 
 		if (widget.modal || widget.backdrop) {
-			result = /*#__PURE__*/ jsx(
+			result = /*#__PURE__*/ jsxs(
 				"div",
 				{
 					ref: function ref(el) {
@@ -3669,7 +3665,18 @@ var OverlayComponent = /*#__PURE__*/ (function(_VDOM$Component2) {
 						animate: widget.animate
 					}),
 					style: parseStyle(data.shadowStyle),
-					children: content
+					children: [
+						widget.backdrop &&
+							/*#__PURE__*/ jsx(
+								"div",
+								{
+									className: CSS.element("overlay", "modal-backdrop"),
+									onClick: this.onBackdropClick.bind(this)
+								},
+								"backdrop"
+							),
+						content
+					]
 				},
 				"shadow"
 			);
@@ -3740,7 +3747,10 @@ var OverlayComponent = /*#__PURE__*/ (function(_VDOM$Component2) {
 	};
 
 	_proto3.onMouseDown = function onMouseDown(e) {
-		var data = this.props.instance.data;
+		var instance = this.props.instance;
+		var widget = instance.widget,
+			data = instance.data;
+		if (widget.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
 		var prefix = this.getResizePrefix(e);
 
 		if (prefix) {
@@ -3758,9 +3768,7 @@ var OverlayComponent = /*#__PURE__*/ (function(_VDOM$Component2) {
 			captureMouseOrTouch(e, this.onMouseMove.bind(this), null, captureData, prefix + "-resize");
 		} else if (data.draggable) {
 			ddMouseDown(e);
-		}
-
-		e.stopPropagation();
+		} //e.stopPropagation();
 	};
 
 	_proto3.onBackdropClick = function onBackdropClick(e) {
@@ -4691,6 +4699,18 @@ var Dropdown = /*#__PURE__*/ (function(_Overlay) {
 		return [beacon, instance.relatedElement && _Overlay.prototype.render.call(this, context, instance, key)];
 	};
 
+	_proto.getOverlayContainer = function getOverlayContainer() {
+		// this should be instance.relatedElement
+		if (this.relatedElement) {
+			var container = closestParent(this.relatedElement, function(el) {
+				return el.dataset && el.dataset.focusableOverlayContainer;
+			});
+			if (container) return container;
+		}
+
+		return _Overlay.prototype.getOverlayContainer.call(this);
+	};
+
 	return Dropdown;
 })(Overlay);
 Dropdown.prototype.offset = 0;
@@ -6220,6 +6240,7 @@ var MenuItemComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 						relatedElement: this.el.parentElement,
 						placement: widget.placement,
 						onKeyDown: this.onDropdownKeyDown.bind(this),
+						onMouseDown: stopPropagation,
 						items: widget.dropdown,
 						parentPositionChangeEvent: parentPositionChangeEvent,
 						pipeValidateDropdownPosition: function pipeValidateDropdownPosition(cb) {
@@ -6509,7 +6530,7 @@ var MenuItemComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 				} else instance.invoke("onClick", e, instance);
 			}
 		}
-		if (widget.autoClose) unfocusElement(this.el);
+		if (widget.autoClose) unfocusElement(this.el, true);
 	};
 
 	_proto2.onFocus = function onFocus() {
@@ -6652,11 +6673,11 @@ var Menu = /*#__PURE__*/ (function(_HtmlElement) {
 	};
 
 	_proto.add = function add(item) {
-		if (item && item.tag == "a") {
+		if (item && (item.tag == "a" || item.tag == "hr")) {
 			var mi = {
 				type: MenuItem,
 				items: item,
-				autoClose: true
+				autoClose: item.tag == "a"
 			};
 			if (isDefined(item["if"])) mi["if"] = item["if"];
 			if (isDefined(item.visible)) mi.visible = item.visible;
@@ -14753,7 +14774,8 @@ var Slider = /*#__PURE__*/ (function(_Field) {
 					},
 					handleStyle: {
 						structured: true
-					}
+					},
+					invert: false
 				}
 			].concat(Array.prototype.slice.call(arguments))
 		);
@@ -14807,6 +14829,7 @@ Slider.prototype.maxValue = 100;
 Slider.prototype.vertical = false;
 Slider.prototype.incrementPercentage = 0.01;
 Slider.prototype.wheel = false;
+Slider.prototype.invert = false;
 Widget.alias("slider", Slider);
 
 var SliderComponent = /*#__PURE__*/ (function(_VDOM$Component) {
@@ -14848,12 +14871,15 @@ var SliderComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 		from = Math.min(maxValue, Math.max(minValue, from));
 		to = Math.min(maxValue, Math.max(minValue, to));
 		var handleStyle = CSS.parseStyle(data.handleStyle);
+		var anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
+		var rangeStart = from - minValue;
+		var rangeSize = to - from;
 
 		var fromHandleStyle = _objectSpread2(
 			_objectSpread2({}, handleStyle),
 			{},
 			((_objectSpread2$1 = {}),
-			(_objectSpread2$1[widget.vertical ? "top" : "left"] = (100 * (from - minValue)) / (maxValue - minValue) + "%"),
+			(_objectSpread2$1[anchor] = (100 * (from - minValue)) / (maxValue - minValue) + "%"),
 			_objectSpread2$1)
 		);
 
@@ -14861,19 +14887,16 @@ var SliderComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 			_objectSpread2({}, handleStyle),
 			{},
 			((_objectSpread3 = {}),
-			(_objectSpread3[widget.vertical ? "top" : "left"] = (100 * (to - minValue)) / (maxValue - minValue) + "%"),
+			(_objectSpread3[anchor] = (100 * (to - minValue)) / (maxValue - minValue) + "%"),
 			_objectSpread3)
 		);
 
-		var rangeStart = (from - minValue) / (maxValue - minValue);
-		var rangeSize = (to - from) / (maxValue - minValue);
-
 		var rangeStyle = _objectSpread2(
 			_objectSpread2({}, CSS.parseStyle(data.rangeStyle)),
 			{},
 			((_objectSpread4 = {}),
-			(_objectSpread4[widget.vertical ? "top" : "left"] = 100 * rangeStart + "%"),
-			(_objectSpread4[widget.vertical ? "height" : "width"] = 100 * rangeSize + "%"),
+			(_objectSpread4[anchor] = (100 * rangeStart) / (maxValue - minValue) + "%"),
+			(_objectSpread4[widget.vertical ? "height" : "width"] = (100 * rangeSize) / (maxValue - minValue) + "%"),
 			_objectSpread4)
 		);
 
@@ -15106,13 +15129,15 @@ var SliderComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 		var b = getTopLevelBoundingClientRect(this.dom.range);
 		var pos = getCursorPos(e);
 		var pct = widget.vertical
-			? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range.offsetHeight))
+			? widget.invert
+				? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range.offsetHeight))
+				: Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range.offsetHeight))
 			: Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range.offsetWidth));
 		var delta = (maxValue - minValue) * pct;
 
 		if (data.step) {
 			var currentValue = Math.round(delta / data.step) * data.step + minValue;
-			var value = this.checkBoundries(currentValue);
+			var value = this.checkBoundaries(currentValue);
 			if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
 			delta = value - minValue;
 		}
@@ -15167,13 +15192,13 @@ var SliderComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 
 		if (!data.disabled && !data.readOnly) {
 			if (widget.showFrom) {
-				var value = this.checkBoundries(data.from + increment);
+				var value = this.checkBoundaries(data.from + increment);
 				if (instance.set("from", value))
 					this.setState({
 						from: value
 					});
 			} else if (widget.showTo) {
-				var _value = this.checkBoundries(data.to + increment);
+				var _value = this.checkBoundaries(data.to + increment);
 
 				if (instance.set("to", _value))
 					this.setState({
@@ -15183,7 +15208,7 @@ var SliderComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 		}
 	};
 
-	_proto2.checkBoundries = function checkBoundries(value) {
+	_proto2.checkBoundaries = function checkBoundaries(value) {
 		var data = this.props.instance.data;
 		if (value > data.maxValue) value = data.maxValue;
 		else if (value < data.minValue) value = data.minValue;

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.7.0",
+   "version": "22.8.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/core.d.ts

@@ -23,6 +23,13 @@ declare namespace Cx {
 
    type Selector<T> = (data: any) => T;
 
+   type GetSet<T> = {
+      get: Selector<T>;
+      set?: (value: T, instance?: any) => boolean;
+      throttle?: number;
+      debounce?: number;
+   };
+
    interface StructuredSelector {
       [prop: string]: Selector<any>;
    }
@@ -35,7 +42,7 @@ declare namespace Cx {
       [prop in keyof M]: AccessorChain<M[prop]>;
    };
 
-   type Prop<T> = T | Binding | Selector<T> | AccessorChain<T>;
+   type Prop<T> = T | Binding | Selector<T> | AccessorChain<T> | GetSet<T>;
 
    interface Record {
       [prop: string]: any;
@@ -158,6 +165,7 @@ declare namespace Cx {
       onTouchMove?: string | ((event: TouchEvent, instance: any) => void);
       onTouchEnd?: string | ((event: TouchEvent, instance: any) => void);
       onClick?: string | ((event: MouseEvent, instance: any) => void);
+      onContextMenu?: string | ((event: MouseEvent, instance: any) => void);
    }
 
    type SortDirection = "ASC" | "DESC";

package/src/ui/FocusManager.js

@@ -149,15 +149,23 @@ export function preventFocusOnTouch(e, force = false) {
    if (force || isTouchEvent()) preventFocus(e);
 }
 
-export function unfocusElement(target = null, forceBlur = true) {
+export function unfocusElement(target = null, unfocusParentOverlay = true) {
    const activeElement = getActiveElement();
    if (!target) target = activeElement;
 
+   if (unfocusParentOverlay) {
+      let focusableOverlayContainer = closestParent(target, (el) => el.dataset.focusableOverlayContainer);
+      if (focusableOverlayContainer) target = focusableOverlayContainer;
+   }
+
    //find the closest focusable parent of the target element and focus it instead
-   let focusableParent = (!forceBlur && closestParent(target, (el) => isFocusable(el))) || document.body;
+   let focusableParent = closestParent(
+      target,
+      (el) => isFocusable(el) && (!unfocusParentOverlay || el.dataset.focusableOverlayContainer)
+   );
 
-   if (focusableParent === document.body) activeElement.blur();
-   else focusableParent.focus();
+   if (focusableParent && focusableParent !== document.body) focusableParent.focus();
+   else activeElement.blur();
 
    FocusManager.nudge();
 }

package/src/widgets/Button.d.ts

@@ -39,9 +39,9 @@ export interface ButtonProps extends Cx.HtmlElementProps {
     * @param e - Event.
     * @param instance - Cx widget instance that fired the event.
     */
-   onClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
 
-   onMouseDown?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
 
    /** Button type. */
    type?: "submit" | "button";

package/src/widgets/Sandbox.d.ts

@@ -1,18 +1,16 @@
-import * as Cx from '../core';
+import * as Cx from "../core";
 
 interface SandboxProps extends Cx.PureContainerProps {
+   storage: Cx.Prop<Cx.Record>;
 
-    storage: Cx.StringProp,
+   /* Cx.StringProp doesn't work for unknown reason */
+   key?: any;
 
-    /* Cx.StringProp doesn't work for unknown reason */
-    key?: any,
+   accessKey?: Cx.StringProp;
 
-    accessKey?: Cx.StringProp,
-    
-    recordName?: string,
-    recordAlias?: string,
-    immutable?: boolean
-    
+   recordName?: string;
+   recordAlias?: string;
+   immutable?: boolean;
 }
 
 export class Sandbox extends Cx.Widget<SandboxProps> {}

package/src/widgets/Sandbox.js

@@ -1,48 +1,51 @@
-import {Widget} from '../ui/Widget';
-import {PureContainer} from '../ui/PureContainer';
-import {Binding} from '../data/Binding';
-import {ExposedValueView} from '../data/ExposedValueView';
+import { Widget } from "../ui/Widget";
+import { PureContainer } from "../ui/PureContainer";
+import { Binding } from "../data/Binding";
+import { ExposedValueView } from "../data/ExposedValueView";
 
 export class Sandbox extends PureContainer {
    init() {
-      if (this.recordAlias)
-         this.recordName = this.recordAlias;
+      if (this.recordAlias) this.recordName = this.recordAlias;
 
-      if (this.accessKey)
-         this.key = this.accessKey;
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
 
-      this.storageBinding = Binding.get(this.storage.bind);
       super.init();
    }
 
    initInstance(context, instance) {
       instance.store = new ExposedValueView({
          store: instance.store,
-         containerBinding: this.storageBinding, key: null,
+         containerBinding: this.storageBinding,
+         key: null,
          recordName: this.recordName,
-         immutable: this.immutable
+         immutable: this.immutable,
       });
-      instance.setStore = store => {
+      instance.setStore = (store) => {
          instance.store.setStore(store);
       };
    }
 
    declareData() {
-      super.declareData({
-         storage: undefined,
-         key: undefined
-      }, ...arguments);
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...arguments
+      );
    }
 
    prepareData(context, instance) {
-      var {store, data} = instance;
+      var { store, data } = instance;
       if (store.getKey() !== data.key) {
          instance.store = new ExposedValueView({
             store: store,
             containerBinding: this.storageBinding,
             key: data.key,
             recordName: this.recordName,
-            immutable: this.immutable
+            immutable: this.immutable,
          });
 
          //when navigating to a page using the same widget tree as the previous page
@@ -53,7 +56,7 @@ export class Sandbox extends PureContainer {
    }
 }
 
-Sandbox.prototype.recordName = '$page';
+Sandbox.prototype.recordName = "$page";
 Sandbox.prototype.immutable = false;
 
-Widget.alias('sandbox', Sandbox);
+Widget.alias("sandbox", Sandbox);

package/src/widgets/form/Slider.js

@@ -34,6 +34,7 @@ export class Slider extends Field {
             handleStyle: {
                structured: true,
             },
+            invert: false,
          },
          ...arguments
       );
@@ -86,6 +87,7 @@ Slider.prototype.maxValue = 100;
 Slider.prototype.vertical = false;
 Slider.prototype.incrementPercentage = 0.01;
 Slider.prototype.wheel = false;
+Slider.prototype.invert = false;
 
 Widget.alias("slider", Slider);
 
@@ -111,23 +113,24 @@ class SliderComponent extends VDOM.Component {
       to = Math.min(maxValue, Math.max(minValue, to));
 
       let handleStyle = CSS.parseStyle(data.handleStyle);
+      let anchor = widget.vertical ? (widget.invert ? "top" : "bottom") : "left";
+      let rangeStart = from - minValue;
+      let rangeSize = to - from;
 
       let fromHandleStyle = {
          ...handleStyle,
-         [widget.vertical ? "top" : "left"]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
+         [anchor]: `${(100 * (from - minValue)) / (maxValue - minValue)}%`,
       };
+
       let toHandleStyle = {
          ...handleStyle,
-         [widget.vertical ? "top" : "left"]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
+         [anchor]: `${(100 * (to - minValue)) / (maxValue - minValue)}%`,
       };
 
-      let rangeStart = (from - minValue) / (maxValue - minValue);
-      let rangeSize = (to - from) / (maxValue - minValue);
-
       let rangeStyle = {
          ...CSS.parseStyle(data.rangeStyle),
-         [widget.vertical ? "top" : "left"]: `${100 * rangeStart}%`,
-         [widget.vertical ? "height" : "width"]: `${100 * rangeSize}%`,
+         [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
+         [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
       };
 
       return (
@@ -267,12 +270,14 @@ class SliderComponent extends VDOM.Component {
       let b = getTopLevelBoundingClientRect(this.dom.range);
       let pos = getCursorPos(e);
       let pct = widget.vertical
-         ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range.offsetHeight))
+         ? widget.invert
+            ? Math.max(0, Math.min(1, (pos.clientY - b.top - d) / this.dom.range.offsetHeight))
+            : Math.max(0, Math.min(1, (b.bottom - pos.clientY + d) / this.dom.range.offsetHeight))
          : Math.max(0, Math.min(1, (pos.clientX - b.left - d) / this.dom.range.offsetWidth));
       let delta = (maxValue - minValue) * pct;
       if (data.step) {
          let currentValue = Math.round(delta / data.step) * data.step + minValue;
-         let value = this.checkBoundries(currentValue);
+         let value = this.checkBoundaries(currentValue);
 
          if (maxValue % data.step === 0) delta = Math.round(delta / data.step) * data.step;
 
@@ -291,6 +296,7 @@ class SliderComponent extends VDOM.Component {
       if (!data.disabled && !data.readOnly) {
          let { value } = this.getValues(e);
          this.props.instance.set("value", value, { immediate: true });
+
          if (widget.showFrom) {
             this.setState({ from: value });
             this.props.instance.set("from", value, { immediate: true });
@@ -314,16 +320,16 @@ class SliderComponent extends VDOM.Component {
 
       if (!data.disabled && !data.readOnly) {
          if (widget.showFrom) {
-            let value = this.checkBoundries(data.from + increment);
+            let value = this.checkBoundaries(data.from + increment);
             if (instance.set("from", value)) this.setState({ from: value });
          } else if (widget.showTo) {
-            let value = this.checkBoundries(data.to + increment);
+            let value = this.checkBoundaries(data.to + increment);
             if (instance.set("to", value)) this.setState({ to: value });
          }
       }
    }
 
-   checkBoundries(value) {
+   checkBoundaries(value) {
       let { data } = this.props.instance;
       if (value > data.maxValue) value = data.maxValue;
       else if (value < data.minValue) value = data.minValue;

package/src/widgets/form/Slider.scss

@@ -84,6 +84,7 @@
       height: $size;
       margin-left: -$size / 2;
       margin-top: -$size / 2;
+      margin-bottom: -$size / 2;
       touch-action: none;
 
       .#{$block}#{$name}.#{$state}horizontal & {
@@ -93,7 +94,6 @@
 
       .#{$block}#{$name}.#{$state}vertical & {
          left: 50%;
-         top: 0;
       }
 
       @include cx-add-state-rules($styles, default);

package/src/widgets/nav/Menu.js

@@ -79,11 +79,11 @@ export class Menu extends HtmlElement {
    }
 
    add(item) {
-      if (item && item.tag == "a") {
+      if (item && (item.tag == "a" || item.tag == "hr")) {
          let mi = {
             type: MenuItem,
             items: item,
-            autoClose: true,
+            autoClose: item.tag == "a",
          };
 
          if (isDefined(item.if)) mi.if = item.if;
@@ -152,12 +152,7 @@ class MenuComponent extends VDOM.Component {
                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 widget.horizontal && <li className={CSS.element(baseClass, "spacer")} key={key} />;
                }
 
                return (

package/src/widgets/nav/MenuItem.js

@@ -140,6 +140,7 @@ class MenuItemComponent extends VDOM.Component {
             relatedElement: this.el.parentElement,
             placement: widget.placement,
             onKeyDown: this.onDropdownKeyDown.bind(this),
+            onMouseDown: stopPropagation,
             items: widget.dropdown,
             parentPositionChangeEvent,
             pipeValidateDropdownPosition: (cb) => {
@@ -398,7 +399,7 @@ class MenuItemComponent extends VDOM.Component {
          }
       }
 
-      if (widget.autoClose) unfocusElement(this.el);
+      if (widget.autoClose) unfocusElement(this.el, true);
    }
 
    onFocus() {