cx 22.4.1 → 22.5.0

package/dist/util.js

@@ -660,7 +660,7 @@ function getScrollerBoundingClientRect(scrollEl, topLevel) {
 	return topLevel ? getTopLevelBoundingClientRect(scrollEl) : scrollEl.getBoundingClientRect();
 }
 
-function scrollElementIntoView(el, vertical, horizontal, inflate) {
+function scrollElementIntoView(el, vertical, horizontal, inflate, scrollContainer) {
 	if (vertical === void 0) {
 		vertical = true;
 	}
@@ -673,8 +673,12 @@ function scrollElementIntoView(el, vertical, horizontal, inflate) {
 		inflate = 0;
 	}
 
+	if (scrollContainer === void 0) {
+		scrollContainer = null;
+	}
+
 	if (horizontal) {
-		var parentEl = findScrollableParent(el, true);
+		var parentEl = scrollContainer || findScrollableParent(el, true);
 
 		if (parentEl) {
 			var pr = getScrollerBoundingClientRect(parentEl);
@@ -688,7 +692,7 @@ function scrollElementIntoView(el, vertical, horizontal, inflate) {
 	}
 
 	if (vertical) {
-		var _parentEl = findScrollableParent(el);
+		var _parentEl = scrollContainer || findScrollableParent(el);
 
 		if (_parentEl) {
 			var _pr = getScrollerBoundingClientRect(_parentEl);
@@ -1200,15 +1204,17 @@ var lastTouchEvent = 0;
 var isTouchDetectionEnabled = false;
 function enableTouchEventDetection() {
 	if (isTouchDevice() && !isTouchDetectionEnabled) {
-		var options;
+		var options = true; //capture
+
 		if (browserSupportsPassiveEventHandlers())
 			options = {
-				passive: true
+				passive: true,
+				capture: true
 			};
 		document.addEventListener(
 			"touchstart",
 			function() {
-				lastTouchEvent = new Date().getTime();
+				lastTouchEvent = Date.now();
 			},
 			options
 		);
@@ -1216,14 +1222,14 @@ function enableTouchEventDetection() {
 			"touchmove",
 			function() {
 				//console.log('TOUCHMOVE');
-				lastTouchEvent = new Date().getTime();
+				lastTouchEvent = Date.now();
 			},
 			options
 		);
 		document.addEventListener(
 			"touchend",
 			function() {
-				lastTouchEvent = new Date().getTime(); //console.log('TOUCHEND');
+				lastTouchEvent = Date.now(); //console.log('TOUCHEND');
 			},
 			options
 		);
@@ -1231,7 +1237,7 @@ function enableTouchEventDetection() {
 	}
 }
 function isTouchEvent() {
-	return isTouchDevice() && (!isTouchDetectionEnabled || new Date().getTime() - lastTouchEvent < 1000);
+	return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
 } //enable touch event detection if there is no performance penalty on scrolling
 
 if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();

package/dist/widgets.js

@@ -1810,7 +1810,7 @@ var ListComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 		var firstSelectedRow = this.el.querySelector(selectedRowSelector);
 
 		if (firstSelectedRow != this.selectedEl) {
-			if (firstSelectedRow) scrollElementIntoView(firstSelectedRow);
+			if (firstSelectedRow) scrollElementIntoView(firstSelectedRow, true, false, 0, this.el);
 			this.selectedEl = firstSelectedRow;
 		}
 	};
@@ -8258,7 +8258,7 @@ var Input = /*#__PURE__*/ (function(_VDOM$Component) {
 					immediate: immediate
 				})
 			) {
-				if (text != this.trimmed(this.input.value)) this.input.value = text;
+				if (text != this.input.value && immediate) this.input.value = text;
 			} else {
 				if (value)
 					instance.setState({
@@ -9355,12 +9355,23 @@ var CalendarCmp = /*#__PURE__*/ (function(_VDOM$Component) {
 	_proto2.getPage = function getPage(refDate) {
 		refDate = monthStart(refDate); //make a copy
 
+		var startWithMonday = this.props.instance.widget.startWithMonday;
+		var startDay = startWithMonday ? 1 : 0;
 		var startDate = new Date(refDate);
-		startDate.setDate(1 - startDate.getDay());
+
+		while (startDate.getDay() != startDay) {
+			startDate.setDate(startDate.getDate() - 1);
+		}
+
 		var endDate = new Date(refDate);
 		endDate.setMonth(refDate.getMonth() + 1);
 		endDate.setDate(endDate.getDate() - 1);
-		endDate.setDate(endDate.getDate() + 6 - endDate.getDay());
+		var endDay = startWithMonday ? 0 : 6;
+
+		while (endDate.getDay() != endDay) {
+			endDate.setDate(endDate.getDate() + 1);
+		}
+
 		return {
 			refDate: refDate,
 			startDate: startDate,
@@ -9574,16 +9585,19 @@ var CalendarCmp = /*#__PURE__*/ (function(_VDOM$Component) {
 			baseClass = widget.baseClass,
 			disabledDaysOfWeek = widget.disabledDaysOfWeek,
 			startWithMonday = widget.startWithMonday;
-		var refDate = this.state.refDate;
+
+		var _this$getPage = this.getPage(this.state.refDate),
+			refDate = _this$getPage.refDate,
+			startDate = _this$getPage.startDate,
+			endDate = _this$getPage.endDate;
+
 		var month = refDate.getMonth();
 		var year = refDate.getFullYear();
-		var startDate = new Date(year, month, 1);
-		startDate.setDate(1 - startDate.getDay() + (startWithMonday ? 1 : 0));
 		var weeks = [];
 		var date = startDate;
 		var today = zeroTime(new Date());
 
-		while (date < refDate || date.getMonth() == month) {
+		while (date >= startDate && date <= endDate) {
 			var days = [];
 
 			for (var i = 0; i < 7; i++) {
@@ -17210,7 +17224,7 @@ var GridRowComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 				e.preventDefault();
 				e.stopPropagation(); //close context menu
 
-				unfocusElement(e.target);
+				unfocusElement(e.target, false);
 			}
 		}
 
@@ -18373,7 +18387,8 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 			baseClass = this.baseClass;
 		var data = store.getData();
 		var skip = 0;
-		var header = instance.header;
+		var header = instance.header,
+			state = instance.state;
 		var rowStyle = {};
 		var lines = [];
 		header.children.forEach(function(line, lineIndex) {
@@ -18383,7 +18398,7 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 				if (Boolean(ci.data.fixed) != fixedColumns) return null;
 				var v,
 					c = ci.widget,
-					colSpan,
+					colSpan = 1,
 					pad,
 					cls = "",
 					style = null;
@@ -18419,7 +18434,18 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 
 				if (cls) cls += " ";
 				if (c.align) cls += CSS.state("aligned-" + c.align);
-				if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
+				if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad"); // apply column width to footers too, but only if colSpan == 1,
+				//  otherwise set 1px so that the footer is not participating in the layout
+
+				var maxWidth = 1;
+				if (colSpan == 1) maxWidth = state.colWidth[c.uniqueColumnId];
+				style = _objectSpread2(
+					_objectSpread2({}, style),
+					{},
+					{
+						maxWidth: maxWidth
+					}
+				);
 				return /*#__PURE__*/ jsx(
 					"td",
 					{
@@ -20128,7 +20154,7 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 				if (!futureState.cellEdit && wasCellEditing) {
 					//If cell editing is in progress, moving the cursor may cause that the cell editor is unmounted before
 					//the blur event which may cause data loss for components which do not have reactOn=change set, e.g. NumberField.
-					unfocusElement();
+					unfocusElement(null, false);
 
 					var record = _this11.getRecordAt(prevState.cursor);
 

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.4.1",
+   "version": "22.5.0",
    "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

@@ -29,6 +29,8 @@ declare namespace Cx {
 
    type AccessorChain<M> = {
       toString(): string;
+      valueOf(): string;
+      nameOf(): string;
    } & {
       [prop in keyof M]: AccessorChain<M[prop]>;
    };

package/src/data/comparer.spec.js

@@ -1,38 +1,38 @@
-import {sorter} from './comparer';
-import assert from 'assert';
+import { sorter } from "./comparer";
+import assert from "assert";
 
-describe('comparer', function() {
-   describe('sorter', function() {
-      it('orders by numeric values ASC', function () {
+describe("comparer", function () {
+   describe("sorter", function () {
+      it("orders by numeric values ASC", function () {
          let records = [
-            {value: 3, id: 1},
-            {value: -1, id: 2},
-            {value: 2, id: 3},
-            {value: null, id: 4},
-            {value: null, id: 5},
+            { value: 3, id: 1 },
+            { value: -1, id: 2 },
+            { value: 2, id: 3 },
+            { value: null, id: 4 },
+            { value: null, id: 5 },
          ];
 
-         let sort = sorter([{value: {bind: 'value'}, direction: 'ASC'}]);
+         let sort = sorter([{ value: { bind: "value" }, direction: "ASC" }]);
 
          let sorted = sort(records);
 
-         assert.equal(sorted[0].value, null);
-         assert.equal(sorted[1].value, null);
-         assert.equal(sorted[2].value, -1);
-         assert.equal(sorted[3].value, 2);
-         assert.equal(sorted[4].value, 3);
+         assert.equal(sorted[0].value, -1);
+         assert.equal(sorted[1].value, 2);
+         assert.equal(sorted[2].value, 3);
+         assert.equal(sorted[3].value, null);
+         assert.equal(sorted[4].value, null);
       });
 
-      it('orders by numeric values DESC', function () {
+      it("orders by numeric values DESC", function () {
          let records = [
-            {value: 3, id: 1},
-            {value: 1, id: 2},
-            {value: -2, id: 3},
-            {value: null, id: 4},
-            {value: null, id: 5},
+            { value: 3, id: 1 },
+            { value: 1, id: 2 },
+            { value: -2, id: 3 },
+            { value: null, id: 4 },
+            { value: null, id: 5 },
          ];
 
-         let sort = sorter([{value: {bind: 'value'}, direction: 'DESC'}]);
+         let sort = sorter([{ value: { bind: "value" }, direction: "DESC" }]);
 
          let sorted = sort(records);
 
@@ -43,14 +43,14 @@ describe('comparer', function() {
          assert.equal(sorted[4].value, null);
       });
 
-      it('supports field', function () {
+      it("supports field", function () {
          let records = [
-            {value: 3, id: 1},
-            {value: 1, id: 2},
-            {value: 2, id: 3}
+            { value: 3, id: 1 },
+            { value: 1, id: 2 },
+            { value: 2, id: 3 },
          ];
 
-         let sort = sorter([{field: 'value', direction: 'ASC'}]);
+         let sort = sorter([{ field: "value", direction: "ASC" }]);
          let sorted = sort(records);
          assert.equal(sorted[0].value, 1);
          assert.equal(sorted[1].value, 2);

package/src/data/createAccessorModelProxy.js

@@ -1,21 +1,43 @@
+const emptyFn = () => {};
+
 export function createAccessorModelProxy(chain = "") {
-   const proxy = new Proxy(() => {}, {
-      get: (target, name) => {
-         if (name === "isAccessorChain") return true;
-         if (typeof name !== "string") return this;
-         if (name === "toString" || name === "valueOf") return proxy;
+   let lastOp = null;
+   let lastName = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
 
          let newChain = chain;
          if (newChain.length > 0) newChain += ".";
          newChain += name;
+         lastName = name;
          return createAccessorModelProxy(newChain);
       },
 
       apply() {
-         return chain;
+         switch (lastOp) {
+            case "nameOf":
+               if (lastName != null) return lastName;
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
       },
    });
-   proxy.isAccessorChain = true;
    return proxy;
 }
 

package/src/data/createAccessorModelProxy.spec.tsx

@@ -5,19 +5,33 @@ interface Model {
    firstName: string;
    address: {
       city: string;
+      streetNumber: number;
    };
 }
 
 describe("createAccessorModelProxy", () => {
    it("generates correct paths", () => {
-      var model = createAccessorModelProxy<Model>();
+      let model = createAccessorModelProxy<Model>();
       assert.strictEqual(model.firstName.toString(), "firstName");
       assert.strictEqual(model.address.toString(), "address");
       assert.strictEqual(model.address.city.toString(), "address.city");
    });
 
    it("can be used in string templates", () => {
-      var model = createAccessorModelProxy<Model>();
+      let model = createAccessorModelProxy<Model>();
       assert.strictEqual("address.city", `${model.address.city}`);
+      assert.strictEqual("address.city", "" + model.address.city);
+      assert.strictEqual("address.city.suffix", model.address.city + ".suffix");
+   });
+
+   it("nameOf returns name of the last prop ", () => {
+      let model = createAccessorModelProxy<Model>();
+      assert.strictEqual(model.firstName.nameOf(), "firstName");
+      assert.strictEqual(model.address.nameOf(), "address");
+      assert.strictEqual(model.address.city.nameOf(), "city");
+
+      let { streetNumber, city } = model.address;
+      assert.strictEqual(streetNumber.nameOf(), "streetNumber");
+      assert.strictEqual(city.nameOf(), "city");
    });
 });

package/src/ui/Controller.d.ts

@@ -18,6 +18,26 @@ export class Controller<D = any> {
    store: View<D>;
    widget: any;
 
+   addTrigger<V1>(name: string, args: [Cx.AccessorChain<V1>], callback: (v1: V1) => void, autoRun?: boolean): void;
+   addTrigger<V1, V2>(
+      name: string,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>],
+      callback: (v1: V1, v2: V2) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3>(
+      name: string,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>],
+      callback: (v1: V1, v2: V2, v3: V3) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3, V4>(
+      name: string,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4) => void,
+      autoRun?: boolean
+   ): void;
+
    addTrigger(
       name: string,
       args: (string | Cx.AccessorChain<any>)[],
@@ -25,7 +45,24 @@ export class Controller<D = any> {
       autoRun?: boolean
    ): void;
 
-   addComputable(name: string, args: string[], callback: (...args) => any): void;
+   addComputable<V1, R>(path: Cx.AccessorChain<R>, args: [Cx.AccessorChain<V1>], callback: (v1: V1) => R): void;
+   addComputable<V1, V2, R>(
+      path: Cx.AccessorChain<R>,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>],
+      callback: (v1: V1, v2: V2) => R
+   ): void;
+   addComputable<V1, V2, V3, R>(
+      path: Cx.AccessorChain<R>,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>],
+      callback: (v1: V1, v2: V2, v3: V3) => R
+   ): void;
+   addComputable<V1, V2, V3, V4, R>(
+      path: Cx.AccessorChain<R>,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4) => R
+   ): void;
+
+   addComputable(path: string, args: (string | Cx.AccessorChain<any>)[], callback: (...args) => any): void;
 
    removeTrigger(name: string): void;
 

package/src/ui/Repeater.d.ts

@@ -41,6 +41,9 @@ interface RepeaterProps extends PureContainerProps {
 
    /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
    sortOptions?: CollatorOptions;
+
+   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to movement of records inside the collection.  */
+   keyField: StringProp;
 }
 
 export class Repeater extends Widget<RepeaterProps> {}

package/src/ui/layout/Content.d.ts

@@ -1,11 +1,14 @@
-import * as Cx from '../../core';
+import * as Cx from "../../core";
 
 interface ContentProps extends Cx.PureContainerProps {
+   /** Placeholder name where the content is rendered. */
+   name?: string;
 
-   name?: string,
-   putInto?: string,
-   isContent?: boolean
+   /** Placeholder name where the content is rendered. */
+   for?: string;
 
+   /** Placeholder name where the content is rendered. */
+   putInto?: string;
 }
 
 export class Content extends Cx.Widget<ContentProps> {}

package/src/util/isTouchEvent.js

@@ -1,5 +1,5 @@
-import { browserSupportsPassiveEventHandlers } from './browserSupportsPassiveEventHandlers';
-import { isTouchDevice } from './isTouchDevice';
+import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
+import { isTouchDevice } from "./isTouchDevice";
 
 // This is primarily used for tooltips which behave differently on touch.
 // For example, tooltips are commonly toggled on touch or disabled completely.
@@ -15,38 +15,50 @@ let isTouchDetectionEnabled = false;
 
 export function enableTouchEventDetection() {
    if (isTouchDevice() && !isTouchDetectionEnabled) {
-      let options;
+      let options = true; //capture
 
       if (browserSupportsPassiveEventHandlers())
          options = {
-            passive: true
+            passive: true,
+            capture: true,
          };
 
-      document.addEventListener('touchstart', () => {
-         insideTouchEvent++;
-         //console.log('TOUCHSTART');
-         lastTouchEvent = new Date().getTime();
-      }, options);
+      document.addEventListener(
+         "touchstart",
+         () => {
+            insideTouchEvent++;
+            //console.log('TOUCHSTART');
+            lastTouchEvent = Date.now();
+         },
+         options
+      );
 
-      document.addEventListener('touchmove', () => {
-         //console.log('TOUCHMOVE');
-         lastTouchEvent = new Date().getTime();
-      }, options);
+      document.addEventListener(
+         "touchmove",
+         () => {
+            //console.log('TOUCHMOVE');
+            lastTouchEvent = Date.now();
+         },
+         options
+      );
 
-      document.addEventListener('touchend', () => {
-         insideTouchEvent--;
-         lastTouchEvent = new Date().getTime();
-         //console.log('TOUCHEND');
-      }, options);
+      document.addEventListener(
+         "touchend",
+         () => {
+            insideTouchEvent--;
+            lastTouchEvent = Date.now();
+            //console.log('TOUCHEND');
+         },
+         options
+      );
 
       isTouchDetectionEnabled = true;
    }
 }
 
 export function isTouchEvent() {
-   return isTouchDevice() && (!isTouchDetectionEnabled || (new Date().getTime() - lastTouchEvent) < 1000);
+   return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
 }
 
 //enable touch event detection if there is no performance penalty on scrolling
-if (isTouchDevice() && browserSupportsPassiveEventHandlers())
-   enableTouchEventDetection();
+if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();

package/src/util/scrollElementIntoView.d.ts

@@ -2,5 +2,6 @@ export function scrollElementIntoView(
    el: Element,
    vertical?: boolean,
    horizontal?: boolean,
-   inflate?: number
+   inflate?: number,
+   scrollContainer?: HTMLElement
 ): void;

package/src/util/scrollElementIntoView.js

@@ -1,59 +1,34 @@
 import { findScrollableParent } from "./findScrollableParent";
 import { getScrollerBoundingClientRect } from "./getScrollerBoundingClientRect";
 
-export function scrollElementIntoView(
-   el,
-   vertical = true,
-   horizontal = false,
-   inflate = 0
-) {
+export function scrollElementIntoView(el, vertical = true, horizontal = false, inflate = 0, scrollContainer = null) {
    if (horizontal) {
-      let parentEl = findScrollableParent(el, true);
+      let parentEl = scrollContainer || findScrollableParent(el, true);
       if (parentEl) {
          let pr = getScrollerBoundingClientRect(parentEl);
          let er = el.getBoundingClientRect();
          let scrollbarWidth = parentEl.offsetWidth - parentEl.clientWidth;
 
          if (er.right + inflate > pr.right - scrollbarWidth)
-            parentEl.scrollLeft = Math.max(
-               0,
-               parentEl.scrollLeft +
-                  er.right +
-                  inflate -
-                  pr.right +
-                  scrollbarWidth
-            );
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.right + inflate - pr.right + scrollbarWidth);
 
          if (er.left - inflate < pr.left)
-            parentEl.scrollLeft = Math.max(
-               0,
-               parentEl.scrollLeft + er.left - inflate - pr.left
-            );
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.left - inflate - pr.left);
       }
    }
 
    if (vertical) {
-      let parentEl = findScrollableParent(el);
+      let parentEl = scrollContainer || findScrollableParent(el);
       if (parentEl) {
          let pr = getScrollerBoundingClientRect(parentEl);
          let er = el.getBoundingClientRect();
          let scrollbarHeight = parentEl.offsetHeight - parentEl.clientHeight;
 
          if (er.bottom + inflate > pr.bottom - scrollbarHeight)
-            parentEl.scrollTop = Math.max(
-               0,
-               parentEl.scrollTop +
-                  er.bottom +
-                  inflate -
-                  pr.bottom +
-                  scrollbarHeight
-            );
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.bottom + inflate - pr.bottom + scrollbarHeight);
 
          if (er.top - inflate < pr.top)
-            parentEl.scrollTop = Math.max(
-               0,
-               parentEl.scrollTop + er.top - inflate - pr.top
-            );
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.top - inflate - pr.top);
       }
    }
 }

package/src/widgets/DocumentTitle.d.ts

@@ -4,7 +4,8 @@ interface DocumentTitleProps extends Cx.WidgetProps {
 
    value?: Cx.StringProp,
    append?: boolean,
-   action?: 'append' | 'replace' | 'prepend'
+   action?: 'append' | 'replace' | 'prepend',
+   separator?: Cx.StringProp
 }
 
 export class DocumentTitle extends Cx.Widget<DocumentTitleProps> {}

package/src/widgets/List.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
    BooleanProp,
    ClassProp,
@@ -11,7 +12,7 @@ import {
    StructuredProp,
    StyledContainerProps,
    StyleProp,
-   Widget,
+   Widget
 } from "../core";
 import { Instance } from "./../ui/Instance";
 
@@ -79,6 +80,8 @@ interface ListProps extends StyledContainerProps {
 
    /** Callback to be invoked when the list is being scrolled. Useful for loading additional items. */
    onScroll?: (event: Event, instance: Instance) => void;
+
+   onItemClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
 }
 
 export class List extends Widget<ListProps> {}