cx 22.6.0 → 22.6.3

package/dist/ui.js

@@ -5040,13 +5040,14 @@ var TreeAdapter = /*#__PURE__*/ (function(_ArrayAdapter) {
 	_proto.processNode = function processNode(context, instance, level, result, record) {
 		var _this2 = this;
 
-		result.push(record);
+		var isHiddenRootNode = level == 0 && this.hideRootNodes;
+		if (!isHiddenRootNode) result.push(record);
 		var data = record.data,
 			store = record.store;
-		data.$level = level;
+		data.$level = this.hideRootNodes ? level - 1 : level;
 
 		if (!data[this.leafField]) {
-			if (data[this.expandedField]) {
+			if (data[this.expandedField] || isHiddenRootNode) {
 				if (data[this.childrenField]) {
 					var childNodes = _ArrayAdapter.prototype.mapRecords.call(
 						this,
@@ -5099,6 +5100,7 @@ TreeAdapter.prototype.loadingField = "$loading";
 TreeAdapter.prototype.loadedField = "$loaded";
 TreeAdapter.prototype.foldersFirst = true;
 TreeAdapter.prototype.isTreeAdapter = true;
+TreeAdapter.prototype.hideRootNodes = false;
 
 function bind(path, defaultValue) {
 	return {

package/dist/widgets.js

@@ -1901,9 +1901,9 @@ var ListComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 		for (var i = 0; i < items.length; i++) {
 			var item = items[i];
 
-			if (isItemSelectable(item)) {
+			if (isDataItem(item)) {
 				index++;
-				if (firstValid == -1) firstValid = index;
+				if (!isItemDisabled(item) && firstValid == -1) firstValid = index;
 
 				if (item.instance.selected) {
 					firstSelected = index;
@@ -2045,7 +2045,15 @@ var ListItem = /*#__PURE__*/ (function(_Container) {
 })(Container);
 
 function isItemSelectable(item) {
-	return item && item.type == "data" && !item.instance.data.disabled;
+	return isDataItem(item) && !isItemDisabled(item);
+}
+
+function isDataItem(item) {
+	return (item == null ? void 0 : item.type) == "data";
+}
+
+function isItemDisabled(item) {
+	return item == null ? void 0 : item.instance.data.disabled;
 }
 
 var Sandbox = /*#__PURE__*/ (function(_PureContainer) {

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.6.0",
+   "version": "22.6.3",
    "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/charts/PieChart.d.ts

@@ -13,7 +13,7 @@ interface PieChartProps extends BoundedObjectProps {
    clockwise?: Cx.BooleanProp;
 }
 
-export class PieChart extends Cx.Widget<PieChartProps> { }
+export class PieChart extends Cx.Widget<PieChartProps> {}
 
 interface PieSliceProps extends Cx.StyledContainerProps {
    /** Used to indicate whether an item is active or not. Inactive items are shown only in the legend. */
@@ -43,7 +43,7 @@ interface PieSliceProps extends Cx.StyledContainerProps {
    /** Value in pixels to be used to explode the pie. */
    offset?: Cx.NumberProp;
 
-   value?: Cx.StringProp;
+   value?: Cx.NumberProp;
    disabled?: Cx.BooleanProp;
    innerPointRadius?: Cx.NumberProp;
    outerPointRadius?: Cx.NumberProp;
@@ -68,7 +68,7 @@ interface PieSliceProps extends Cx.StyledContainerProps {
    tooltip?: Cx.StringProp | Cx.StructuredProp;
 
    /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection;[prop: string]: any };
+   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
 
    /** A value used to identify the group of components participating in hover effect synchronization. */
    hoverChannel?: string;
@@ -77,4 +77,4 @@ interface PieSliceProps extends Cx.StyledContainerProps {
    hoverId?: Cx.StringProp;
 }
 
-export class PieSlice extends Cx.Widget<PieSliceProps> { }
+export class PieSlice extends Cx.Widget<PieSliceProps> {}

package/src/core.d.ts

@@ -150,6 +150,14 @@ declare namespace Cx {
 
       /** Tooltip configuration. */
       tooltip?: StringProp | StructuredProp;
+
+      onMouseDown?: string | ((event: MouseEvent, instance: any) => void);
+      onMouseMove?: string | ((event: MouseEvent, instance: any) => void);
+      onMouseUp?: string | ((event: MouseEvent, instance: any) => void);
+      onTouchStart?: string | ((event: TouchEvent, instance: any) => void);
+      onTouchMove?: string | ((event: TouchEvent, instance: any) => void);
+      onTouchEnd?: string | ((event: TouchEvent, instance: any) => void);
+      onClick?: string | ((event: MouseEvent, instance: any) => void);
    }
 
    type SortDirection = "ASC" | "DESC";

package/src/data/ops/findTreePath.d.ts

@@ -0,0 +1,6 @@
+export function findTreePath<T>(
+   array: T[],
+   criteria: (item: T) => boolean,
+   childrenField = "$children",
+   currentPath: T[] = []
+): T[] | false;

package/src/data/ops/findTreePath.js

@@ -0,0 +1,16 @@
+export function findTreePath(array, criteria, childrenField = "$children", currentPath = []) {
+   if (!Array.isArray(array)) return false;
+
+   for (let i = 0; i < array.length; i++) {
+      currentPath.push(array[i]);
+
+      if (criteria(array[i])) return currentPath;
+
+      let childPath = findTreePath(array[i][childrenField], criteria, childrenField, currentPath);
+      if (childPath) return childPath;
+
+      currentPath.pop();
+   }
+
+   return false;
+}

package/src/data/ops/index.d.ts

@@ -1,10 +1,10 @@
-export * from './append';
-export * from './merge';
-export * from './filter';
-export * from './updateArray';
-export * from './updateTree';
-export * from './removeTreeNodes';
-export * from './findTreeNode';
-export * from './moveElement';
-export * from './insertElement';
-
+export * from "./append";
+export * from "./merge";
+export * from "./filter";
+export * from "./updateArray";
+export * from "./updateTree";
+export * from "./removeTreeNodes";
+export * from "./findTreeNode";
+export * from "./moveElement";
+export * from "./insertElement";
+export * from "./findTreePath";

package/src/data/ops/index.js

@@ -7,4 +7,5 @@ export * from './removeTreeNodes';
 export * from './findTreeNode';
 export * from './moveElement';
 export * from './insertElement';
+export * from './findTreePath';
 

package/src/ui/adapter/TreeAdapter.js

@@ -22,12 +22,13 @@ export class TreeAdapter extends ArrayAdapter {
       });
    }
 
-   processNode(context, instance, level, result, record) {
-      result.push(record);
+processNode(context, instance, level, result, record) {
+      let isHiddenRootNode = level == 0 && this.hideRootNodes;
+      if (!isHiddenRootNode) result.push(record);
       let { data, store } = record;
-      data.$level = level;
+      data.$level = this.hideRootNodes ? level - 1 : level;
       if (!data[this.leafField]) {
-         if (data[this.expandedField]) {
+         if (data[this.expandedField] || isHiddenRootNode) {
             if (data[this.childrenField]) {
                let childNodes = super.mapRecords(
                   context,
@@ -71,3 +72,4 @@ TreeAdapter.prototype.loadingField = "$loading";
 TreeAdapter.prototype.loadedField = "$loaded";
 TreeAdapter.prototype.foldersFirst = true;
 TreeAdapter.prototype.isTreeAdapter = true;
+TreeAdapter.prototype.hideRootNodes = false;

package/src/widgets/Button.d.ts

@@ -1,52 +1,58 @@
-import * as Cx from '../core';
-import * as React from 'react';
-import {Instance} from "../ui/Instance";
+import * as Cx from "../core";
+import * as React from "react";
+import { Instance } from "../ui/Instance";
 
 export interface ButtonProps extends Cx.HtmlElementProps {
-
    /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Cx.Prop<string | Cx.Config>,
+   confirm?: Cx.Prop<string | Cx.Config>;
 
    /** If true button appears in pressed state. Useful for implementing toggle buttons. */
-   pressed?: Cx.BooleanProp,
+   pressed?: Cx.BooleanProp;
 
    /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp,
-   
+   icon?: Cx.StringProp;
+
    /** HTML tag to be used. Default is `button`. */
-   tag?: string,
+   tag?: string;
 
    /** Base CSS class to be applied to the element. Default is 'button'. */
-   baseClass?: string,
+   baseClass?: string;
 
-   /** 
-    * Determines if button should receive focus on mousedown event. 
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key. 
+   /**
+    * Determines if button should receive focus on mousedown event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
     */
-   focusOnMouseDown?: boolean,
+   focusOnMouseDown?: boolean;
 
    /** Add type="submit" to the button. */
-   submit?: boolean,
+   submit?: boolean;
 
    /** Set to `true` to disable the button. */
-   disabled?: Cx.BooleanProp,
+   disabled?: Cx.BooleanProp;
 
    /** Set to `false` to disable the button. */
-   enabled?: Cx.BooleanProp,
+   enabled?: Cx.BooleanProp;
 
-   /** 
+   /**
     * Click handler.
     *
     * @param e - Event.
-    * @param instance - Cx widget instance that fired the event. 
+    * @param instance - Cx widget instance that fired the event.
     */
-   onClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void),
+   onClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+
+   onMouseDown?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
 
    /** Button type. */
-   type?: 'submit' | 'button',
+   type?: "submit" | "button";
 
    /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
-   dismiss?: boolean
+   dismiss?: boolean;
+
+   /** The form attribute specifies the form the button belongs to.
+    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
+    */
+   form?: Cx.StringProp;
 }
 
 export class Button extends Cx.Widget<ButtonProps> {}

package/src/widgets/List.js

@@ -462,9 +462,10 @@ class ListComponent extends VDOM.Component {
          firstValid = -1;
       for (let i = 0; i < items.length; i++) {
          let item = items[i];
-         if (isItemSelectable(item)) {
+         if (isDataItem(item)) {
             index++;
-            if (firstValid == -1) firstValid = index;
+
+            if (!isItemDisabled(item) && firstValid == -1) firstValid = index;
             if (item.instance.selected) {
                firstSelected = index;
                break;
@@ -576,5 +577,13 @@ class ListItem extends Container {
 }
 
 function isItemSelectable(item) {
-   return item && item.type == "data" && !item.instance.data.disabled;
+   return isDataItem(item) && !isItemDisabled(item);
+}
+
+function isDataItem(item) {
+   return item?.type == "data";
+}
+
+function isItemDisabled(item) {
+   return item?.instance.data.disabled;
 }

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

@@ -17,11 +17,11 @@ export interface MenuItemProps extends Cx.HtmlElementProps {
    placementOrder?: string;
    autoClose?: boolean;
    icons?: boolean;
-   icon: Cx.StringProp;
+   icon?: Cx.StringProp;
    keyboardShortcut?: KeyboardShortcut;
    tooltip?: string | Cx.Config;
    openOnFocus?: boolean;
-   disabled: Cx.BooleanProp;
+   disabled?: Cx.BooleanProp;
 
    /**
     * Click handler.

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

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