cx 23.9.0 → 23.11.0

package/dist/svg.js

@@ -303,18 +303,28 @@ var Text = /*#__PURE__*/ (function (_BoundedObject) {
 		}
 		_BoundedObject.prototype.init.call(this);
 	};
+	_proto.prepare = function prepare(context, instance) {
+		if (this.autoTextAnchor) {
+			instance.textAnchor =
+				context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
+			var changed = instance.cache("textAnchor", instance.textAnchor);
+			if (changed) instance.markShouldUpdate(context);
+		}
+		_BoundedObject.prototype.prepare.call(this, context, instance);
+	};
 	_proto.render = function render(context, instance, key) {
 		var data = instance.data;
 		var bounds = data.bounds;
+		var textAnchor = this.autoTextAnchor ? instance.textAnchor : data.textAnchor;
 		return /*#__PURE__*/ jsxs(
 			"text",
 			{
 				className: data.classNames,
-				x: bounds.l,
+				x: this.autoTextAnchor && textAnchor == "end" ? bounds.r : bounds.l,
 				y: bounds.t,
 				dx: data.dx,
 				dy: data.dy,
-				textAnchor: data.textAnchor,
+				textAnchor: textAnchor,
 				style: data.style,
 				fill: data.fill,
 				stroke: data.stroke,
@@ -327,6 +337,8 @@ var Text = /*#__PURE__*/ (function (_BoundedObject) {
 })(BoundedObject);
 Text.prototype.anchors = "0.5 0.5 0.5 0.5";
 Text.prototype.baseClass = "text";
+Text.prototype.autoTextAnchor = false;
+Text.prototype.autoAnchor = false;
 Widget.alias("svg.text", Text);
 
 var TextualBoundedObject = /*#__PURE__*/ (function (_BoundedObject) {

package/dist/widgets.css

@@ -2083,7 +2083,7 @@ th.cxe-calendar-display {
 
 .cxb-colorpicker {
   line-height: 16px;
-  padding: 5px;
+  padding: 4px;
   border-width: 1px;
   font-size: 11px;
   font-family: "Consolas", monospace;
@@ -2108,7 +2108,7 @@ th.cxe-calendar-display {
 }
 .cxb-colorpicker input {
   box-sizing: border-box;
-  line-height: 12px;
+  line-height: 14px;
   padding: 2px;
   border-width: 1px;
   font-size: 11px;
@@ -2143,10 +2143,9 @@ th.cxe-calendar-display {
 }
 
 .cxe-colorpicker-picker {
-  width: 200px;
-  height: 200px;
-  margin: 5px;
-  float: left;
+  width: 220px;
+  height: 220px;
+  margin: 4px;
   position: relative;
   touch-action: none;
   background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
@@ -2169,10 +2168,10 @@ th.cxe-calendar-display {
 .cxe-colorpicker-hue {
   height: 15px;
   position: relative;
-  background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-  background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
+  background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+  background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+  background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+  background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
   touch-action: none;
 }
 .cxe-colorpicker-hue .cxe-colorpicker-indicator {
@@ -2204,10 +2203,9 @@ th.cxe-calendar-display {
 }
 
 .cxe-colorpicker-details {
-  width: 200px;
+  width: 220px;
   min-height: 170px;
-  float: left;
-  margin: 5px;
+  margin: 4px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -2217,20 +2215,44 @@ th.cxe-calendar-display {
   width: 25%;
   display: inline-block;
   text-align: right;
-  font-size: 12px;
 }
 .cxe-colorpicker-inputs label input {
+  margin-left: 2px;
   width: 60%;
   text-align: center;
 }
 
+.cxe-colorpicker-pixel-picker {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  margin-top: 4px;
+}
+.cxe-colorpicker-pixel-picker svg path {
+  fill: currentColor;
+}
+.cxe-colorpicker-pixel-picker:hover {
+  cursor: pointer;
+}
+.cxe-colorpicker-pixel-picker:hover svg path {
+  fill: currentColor;
+  opacity: 0.5;
+}
+
+.cxe-colorpicker-preview {
+  display: flex;
+}
+
 .cxe-colorpicker-color {
   background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%);
   background-size: 8px 8px;
   background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
-  height: 68px;
-  width: 68px;
-  float: right;
+  height: 64px;
+  width: 64px;
+  border-radius: 4px;
+  align-self: flex-end;
 }
 .cxe-colorpicker-color > div {
   width: 100%;
@@ -2238,16 +2260,15 @@ th.cxe-calendar-display {
 }
 
 .cxe-colorpicker-values {
-  float: left;
-  width: 100px;
-  margin-right: 5px;
+  flex-grow: 1;
+  margin: 0 8px;
 }
 .cxe-colorpicker-values input {
-  width: 120px;
+  width: 100%;
   display: block;
 }
 .cxe-colorpicker-values input:not(:last-child) {
-  margin: 0 0 8px 0;
+  margin: 0 0 4px 0;
 }
 
 .cxb-colorfield {

package/dist/widgets.js

@@ -11338,6 +11338,27 @@ function floor5(x) {
 	return Math.floor(x / 5) * 5;
 }
 
+var PixelPickerIcon = registerIcon(
+	"pixel-picker",
+	function (props) {
+		return /*#__PURE__*/ jsx(
+			"svg",
+			_objectSpread2(
+				_objectSpread2({}, props),
+				{},
+				{
+					viewBox: "0 0 30 30",
+					children: /*#__PURE__*/ jsx("path", {
+						d: "M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z",
+						fill: "currentColor",
+					}),
+				}
+			)
+		);
+	},
+	true
+);
+
 var ColorPicker = /*#__PURE__*/ (function (_Field) {
 	_inheritsLoose(ColorPicker, _Field);
 	function ColorPicker() {
@@ -11496,6 +11517,7 @@ var ColorPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var hsla = "hsla(" + h.toFixed(0) + "," + s.toFixed(0) + "%," + l.toFixed(0) + "%," + a + ")";
 		var rgba = "rgba(" + r.toFixed(0) + "," + g.toFixed(0) + "," + b.toFixed(0) + "," + a + ")";
 		var hex = rgbToHex(r, g, b);
+		var pixelPicker;
 		var alphaGradient =
 			getVendorPrefix("css") +
 			"linear-gradient(left, hsla(" +
@@ -11511,6 +11533,21 @@ var ColorPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			"%," +
 			l +
 			"%,1) 100%)";
+		if (window.EyeDropper) {
+			pixelPicker = /*#__PURE__*/ jsx("div", {
+				className: CSS.element(baseClass, "pixel-picker"),
+				onClick: function onClick(e) {
+					var eyeDropper = new EyeDropper();
+					eyeDropper
+						.open()
+						.then(function (result) {
+							instance.set("value", result.sRGBHex);
+						})
+						["catch"](function (e) {});
+				},
+				children: /*#__PURE__*/ jsx(PixelPickerIcon, {}),
+			});
+		}
 		return /*#__PURE__*/ jsxs("div", {
 			className: data.classNames,
 			style: data.style,
@@ -11698,6 +11735,23 @@ var ColorPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						/*#__PURE__*/ jsxs("div", {
 							className: CSS.element(baseClass, "preview"),
 							children: [
+								/*#__PURE__*/ jsx("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+									},
+									children: /*#__PURE__*/ jsx("div", {
+										className: CSS.element(baseClass, "color"),
+										onClick: function onClick(e) {
+											_this2.onColorClick(e);
+										},
+										children: /*#__PURE__*/ jsx("div", {
+											style: {
+												backgroundColor: hsla,
+											},
+										}),
+									}),
+								}),
 								/*#__PURE__*/ jsxs("div", {
 									className: CSS.element(baseClass, "values"),
 									children: [
@@ -11715,17 +11769,7 @@ var ColorPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 										}),
 									],
 								}),
-								/*#__PURE__*/ jsx("div", {
-									className: CSS.element(baseClass, "color"),
-									onClick: function onClick(e) {
-										_this2.onColorClick(e);
-									},
-									children: /*#__PURE__*/ jsx("div", {
-										style: {
-											backgroundColor: hsla,
-										},
-									}),
-								}),
+								pixelPicker,
 							],
 						}),
 					],
@@ -15503,6 +15547,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 		row.hasSortableColumns = false;
 		row.hasResizableColumns = false;
 		var aggregates = {};
+		var showFooter = false;
 		var lines = [];
 		for (var i = 0; i < 10; i++) {
 			var l = row["line" + i];
@@ -15546,12 +15591,14 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								  },
 						type: c.aggregate,
 					};
+				} else if (c.footer && !showFooter) {
+					showFooter = true;
 				}
 			});
 		});
 
 		//add default footer if some columns have aggregates and grouping is not defined
-		if (!groupingData && (Object.keys(aggregates).length > 0 || this.fixedFooter))
+		if (!groupingData && (Object.keys(aggregates).length > 0 || this.fixedFooter || showFooter))
 			groupingData = [
 				{
 					key: {},

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.9.0",
+   "version": "23.11.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/charts/PieLabel.js

@@ -31,9 +31,16 @@ export class PieLabel extends BoundedObject {
       super.prepare(context, instance);
       if (!context.registerPieLabel)
          throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
+      console.log(instance.actualBounds, instance.originalBounds, instance.parentRect);
+      let right = instance.parentRect.r > instance.parentRect.l;
+      context.push("textDirection", right ? "right" : "left");
       context.registerPieLabel(instance);
    }
 
+   prepareCleanup(context, instance) {
+      context.pop("textDirection");
+   }
+
    render(context, instance, key) {
       let { originalBounds, actualBounds, data } = instance;
 

package/src/svg/Text.d.ts

@@ -1,39 +1,40 @@
-import * as Cx from '../core';
-import {BoundedObject, BoundedObjectProps} from './BoundedObject';
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "./BoundedObject";
 
 interface TextProps extends BoundedObjectProps {
-   
    /** Text to be displayed. */
-   value?: Cx.StringProp,
+   value?: Cx.StringProp;
 
-   bind?: string,
-   tpl?: string,
-   expr?: string,
+   bind?: string;
+   tpl?: string;
+   expr?: string;
 
    /** Offset along the x-axis. */
-   dx?: Cx.Prop<string | number>,
+   dx?: Cx.Prop<string | number>;
 
-   /** 
-    * Offset along the y-axis. This property is commonly used for vertical text alignment. 
-    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically. 
+   /**
+    * Offset along the y-axis. This property is commonly used for vertical text alignment.
+    * Set dy="0.8em" to align the text with the top and dy="0.4em" to center it vertically.
     */
-   dy?: Cx.Prop<string | number>,
+   dy?: Cx.Prop<string | number>;
 
    /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   textAnchor?: Cx.StringProp,
+   textAnchor?: Cx.StringProp;
 
    /** Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`. */
-   ta?: Cx.StringProp,
+   ta?: Cx.StringProp;
 
    /** Sets text-body color. */
-   fill?: Cx.StringProp,
+   fill?: Cx.StringProp;
 
    /** Sets text-outline color. */
-   stroke?: Cx.StringProp,
+   stroke?: Cx.StringProp;
 
    /** Base CSS class to be applied to the element. Defaults to `text`. */
-   baseClass?: string
-   
+   baseClass?: string;
+
+   /** Set to true for the text to set the text anchor based on the direction of the parent element. See PieLabels example.  */
+   autoTextAnchor?: boolean;
 }
 
-export class Text extends Cx.Widget<TextProps> {}
+export class Text extends Cx.Widget<TextProps> {}

package/src/svg/Text.js

@@ -1,8 +1,7 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {BoundedObject} from './BoundedObject';
+import { Widget, VDOM } from "../ui/Widget";
+import { BoundedObject } from "./BoundedObject";
 
 export class Text extends BoundedObject {
-
    declareData() {
       return super.declareData(...arguments, {
          value: undefined,
@@ -10,53 +9,70 @@ export class Text extends BoundedObject {
          dy: undefined,
          textAnchor: undefined,
          fill: undefined,
-         stroke: undefined
-      })
+         stroke: undefined,
+      });
    }
 
    init() {
-
-      if (this.ta)
-         this.textAnchor = this.ta;
+      if (this.ta) this.textAnchor = this.ta;
 
       if (this.bind) {
          this.value = {
-            bind: this.bind
+            bind: this.bind,
          };
       } else if (this.tpl) {
          this.value = {
-            tpl: this.tpl
-         }
-      }
-      else if (this.expr) {
+            tpl: this.tpl,
+         };
+      } else if (this.expr) {
          this.value = {
-            expr: this.expr
-         }
+            expr: this.expr,
+         };
       }
 
       super.init();
    }
 
+   prepare(context, instance) {
+      if (this.autoTextAnchor) {
+         instance.textAnchor =
+            context.textDirection == "right" ? "start" : context.textDirection == "left" ? "end" : this.textAnchor;
+         let changed = instance.cache("textAnchor", instance.textAnchor);
+         if (changed) instance.markShouldUpdate(context);
+      }
+
+      super.prepare(context, instance);
+   }
+
    render(context, instance, key) {
-      var {data} = instance;
-      var {bounds} = data;
-      return <text key={key}
-                   className={data.classNames}
-                   x={bounds.l}
-                   y={bounds.t}
-                   dx={data.dx}
-                   dy={data.dy}
-                   textAnchor={data.textAnchor}
-                   style={data.style}
-                   fill={data.fill}
-                   stroke={data.stroke}>
-         {data.value}
-         {this.renderChildren(context, instance)}
-      </text>
+      var { data } = instance;
+      var { bounds } = data;
+
+      let textAnchor = this.autoTextAnchor ? instance.textAnchor : data.textAnchor;
+
+      return (
+         <text
+            key={key}
+            className={data.classNames}
+            x={this.autoTextAnchor && textAnchor == "end" ? bounds.r : bounds.l}
+            y={bounds.t}
+            dx={data.dx}
+            dy={data.dy}
+            textAnchor={textAnchor}
+            style={data.style}
+            fill={data.fill}
+            stroke={data.stroke}
+         >
+            {data.value}
+            {this.renderChildren(context, instance)}
+         </text>
+      );
    }
 }
 
-Text.prototype.anchors = '0.5 0.5 0.5 0.5';
-Text.prototype.baseClass = 'text';
+Text.prototype.anchors = "0.5 0.5 0.5 0.5";
+Text.prototype.baseClass = "text";
+Text.prototype.autoTextAnchor = false;
+Text.prototype.autoAnchor = false;
 
-Widget.alias('svg.text', Text);
+Widget.alias("svg.text", Text);

package/src/ui/Repeater.d.ts

@@ -1,61 +1,60 @@
-import {
-   RecordsProp,
-   RecordAlias,
-   StringProp,
-   SortersProp,
-   StructuredProp,
-   CollatorOptions,
-   Widget,
-   PureContainerProps,
-   Record,
-   Prop,
-   SortDirection,
-} from "../core";
-import { Instance } from "./Instance";
-
-interface RepeaterProps extends PureContainerProps {
-   records: RecordsProp;
-   recordName?: RecordAlias;
-   recordAlias?: RecordAlias;
-   indexName?: RecordAlias;
-   indexAlias?: RecordAlias;
-   cached?: boolean;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that record stores should not be mutated. */
-   sealed?: boolean;
-
-   sorters?: SortersProp;
-
-   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
-   sortField?: StringProp;
-
-   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
-   sortDirection?: Prop<SortDirection>;
-
-   /** Parameters that affect filtering */
-   filterParams?: StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: Record) => boolean;
-
-   /**
-    * Callback function to track and retrieve displayed records.
-    * Accepts new records as a first argument.
-    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
-    */
-   onTrackMappedRecords?: string | ((records: Record[], instance: Instance) => void);
-
-   /** 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;
-
-   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
-   dataAdapter?: any;
-}
-
-export class Repeater extends Widget<RepeaterProps> {}
+import {
+   RecordsProp,
+   RecordAlias,
+   StringProp,
+   SortersProp,
+   StructuredProp,
+   CollatorOptions,
+   Widget,
+   PureContainerProps,
+   Prop,
+   SortDirection,
+} from "../core";
+import { Instance } from "./Instance";
+
+interface RepeaterProps<T = unknown> extends PureContainerProps {
+   records: Prop<T[]>;
+   recordName?: RecordAlias;
+   recordAlias?: RecordAlias;
+   indexName?: RecordAlias;
+   indexAlias?: RecordAlias;
+   cached?: boolean;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that record stores should not be mutated. */
+   sealed?: boolean;
+
+   sorters?: SortersProp;
+
+   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
+   sortField?: StringProp;
+
+   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+   sortDirection?: Prop<SortDirection>;
+
+   /** Parameters that affect filtering */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
+
+   /**
+    * Callback function to track and retrieve displayed records.
+    * Accepts new records as a first argument.
+    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
+    */
+   onTrackMappedRecords?: string | ((records: T[], instance: Instance) => void);
+
+   /** 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;
+
+   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
+   dataAdapter?: any;
+}
+
+export class Repeater<T = unknown> extends Widget<RepeaterProps<T>> {}

package/src/widgets/List.d.ts

@@ -4,9 +4,8 @@ import {
    ClassProp,
    CollatorOptions,
    Config,
-   Record,
+   Prop,
    RecordAlias,
-   RecordsProp,
    SortersProp,
    StringProp,
    StructuredProp,
@@ -20,9 +19,9 @@ type KeyDownPipe = (event: KeyboardEvent) => void;
 
 type PipeKeyDownCallback = (pipe: KeyDownPipe) => void;
 
-interface ListProps extends StyledContainerProps {
+interface ListProps<T = unknown> extends StyledContainerProps {
    /** An array of records to be displayed in the list. */
-   records?: RecordsProp;
+   records?: Prop<T[]>;
 
    /** Used for sorting the list. */
    sorters?: SortersProp;
@@ -65,7 +64,7 @@ interface ListProps extends StyledContainerProps {
    filterParams?: StructuredProp;
 
    /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: Record) => boolean;
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
 
    /** Scrolls selection into the view. Default value is false. */
    scrollSelectionIntoView?: boolean;
@@ -92,4 +91,4 @@ interface ListProps extends StyledContainerProps {
    keyField?: string;
 }
 
-export class List extends Widget<ListProps> {}
+export class List<T = unknown> extends Widget<ListProps<T>> {}