cx 26.4.0 → 26.4.2

package/src/widgets/List.tsx

@@ -1,792 +1,792 @@
-/**@jsxImportSource react */
-import { Instance } from "../ui/Instance";
-import type { RenderingContext } from "../ui/RenderingContext";
-import { getAccessor } from "../data/getAccessor";
-import { GroupAdapter, GroupingConfig } from "../ui/adapter/GroupAdapter";
-import { batchUpdates } from "../ui/batchUpdates";
-import { Container, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
-import { FocusManager, offFocusOut, oneFocusOut, preventFocusOnTouch } from "../ui/FocusManager";
-import { Selection } from "../ui/selection/Selection";
-import { VDOM, Widget, getContent } from "../ui/Widget";
-import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
-import { isArray } from "../util/isArray";
-import { isString } from "../util/isString";
-import { KeyCode } from "../util/KeyCode";
-import { scrollElementIntoView } from "../util/scrollElementIntoView";
-import {
-   BooleanProp,
-   ClassProp,
-   CollatorOptions,
-   Prop,
-   RecordAlias,
-   StringProp,
-   StructuredProp,
-   StyleProp,
-} from "../ui/Prop";
-import { Create } from "../util/Component";
-
-export interface ListConfig<T = any> extends StyledContainerConfig {
-   /** An array of records to be displayed in the list. */
-   records?: Prop<T[]>;
-
-   /** Record alias. Default is `$record`. */
-   recordName?: RecordAlias;
-
-   /** Record alias. Alias for `recordName`. Default is `$record`. */
-   recordAlias?: RecordAlias;
-
-   /** Index alias. Default is `$index`. */
-   indexName?: RecordAlias;
-
-   /** Index alias. Alias for `indexName`. Default is `$index`. */
-   indexAlias?: RecordAlias;
-
-   /** Style to be applied to each list item. */
-   itemStyle?: StyleProp;
-
-   /** CSS class to be applied to each list item. */
-   itemClass?: ClassProp;
-
-   /** CSS class to be applied to each list item. */
-   itemClassName?: ClassProp;
-
-   /** Text to be displayed when the list is empty. */
-   emptyText?: StringProp;
-
-   /** A grouping definition, field name, or an array of grouping level definitions. */
-   grouping?: string | GroupingConfig | (string | GroupingConfig)[];
-
-   /** Base CSS class to be applied to the element. Default is 'list'. */
-   baseClass?: string;
-
-   /** Set to `true` to allow focus on the list. */
-   focusable?: BooleanProp;
-
-   /** Boolean for focus state. */
-   focused?: BooleanProp;
-
-   /** Boolean for item padding. */
-   itemPad?: BooleanProp;
-
-   /** Set to `true` to enable row caching. */
-   cached?: BooleanProp;
-
-   /** Selection configuration. */
-   selection?: StructuredProp;
-
-   /** Parameters that affect filtering. */
-   filterParams?: StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
-
-   /** Scroll selection into the view. Default value is false. */
-   scrollSelectionIntoView?: BooleanProp;
-
-   /** Options for data sorting. */
-   sortOptions?: CollatorOptions;
-
-   /** Parameter for disabling specific items. */
-   itemDisabled?: BooleanProp;
-
-   /** Automatic selection without cursor navigation. */
-   selectMode?: BooleanProp;
-
-   /** Tab key selects item under cursor. */
-   selectOnTab?: BooleanProp;
-
-   /** Callback invoked during scrolling. */
-   onScroll?: string | ((event: Event, instance: Instance) => void);
-
-   /** Callback for item click. */
-   onItemClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
-
-   /** Callback for item double click. */
-   onItemDoubleClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
-
-   /** Callback for keyboard down events. */
-   pipeKeyDown?: string | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
-
-   /** A field used to get the unique identifier of the record. */
-   keyField?: string;
-
-   /** Data adapter used to convert data in list of records. Used to enable grouping and tree operations. */
-   dataAdapter?: Create<typeof GroupAdapter>;
-}
-
-/*
- - renders list of items
- - focusable (keyboard navigation)
- - selection
- - fake focus - list appears focused and receives keyboard inputs redirected from other control (dropdown scenario)
- */
-
-export class List extends StyledContainerBase<ListConfig> {
-   constructor(config?: ListConfig) {
-      super(config);
-   }
-
-   declare public recordAlias?: string;
-   declare public recordName: string;
-   declare public indexAlias?: string;
-   declare public indexName: string;
-   declare public adapter: GroupAdapter;
-   declare public child: ListItem;
-   declare public selection: Selection;
-   declare public itemClass?: string;
-   declare public itemClassName?: string;
-   declare public itemStyle?: string;
-   declare public itemDisabled?: boolean;
-   declare public item?: Widget;
-   declare public layout?: any;
-   declare public keyField?: string;
-   declare public records?: any[];
-   declare public sortOptions?: any;
-   declare public grouping?: string | GroupingConfig | (string | GroupingConfig)[];
-   declare public focusable?: boolean;
-   declare public focused?: boolean;
-   declare public itemPad?: boolean;
-   declare public cached?: boolean;
-   declare public scrollSelectionIntoView?: boolean;
-   declare public selectMode?: boolean;
-   declare public selectOnTab?: boolean;
-   declare public pipeKeyDown?:
-      | string
-      | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
-   declare public autoFocus?: boolean;
-   declare public baseClass: string;
-   declare public filter?: (item: unknown, filterParams: Record<string, unknown>) => boolean;
-   declare public onCreateFilter?: (
-      filterParams: Record<string, unknown>,
-      instance: Instance,
-   ) => (record: unknown) => boolean;
-   declare public onItemClick?: (e: React.MouseEvent, instance: Instance) => void;
-   declare public onItemDoubleClick?: (e: React.MouseEvent, instance: Instance) => void;
-   declare public onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => void;
-   declare public onScroll?: (event: Event, instance: Instance) => void;
-   declare public onFocus?: (event: FocusEvent, instance: Instance) => void;
-   declare public onBlur?: (event: FocusEvent, instance: Instance) => void;
-   declare public onMouseLeave?: (event: React.MouseEvent, instance: Instance) => void;
-   declare public onMouseEnter?: (event: React.MouseEvent, instance: Instance) => void;
-   declare public onMouseMove?: (event: React.MouseEvent, instance: Instance) => void;
-   declare public onMouseUp?: (event: React.MouseEvent, instance: Instance) => void;
-   declare public onMouseDown?: (event: React.MouseEvent, instance: Instance) => void;
-   declare public onMouseOver?: (event: React.MouseEvent, instance: Instance) => void;
-   declare public onMouseOut?: (event: React.MouseEvent, instance: Instance) => void;
-
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.indexAlias) this.indexName = this.indexAlias;
-
-      this.adapter = GroupAdapter.create(this.adapter || GroupAdapter, {
-         recordName: this.recordName,
-         indexName: this.indexName,
-         recordsAccessor: getAccessor(this.records),
-         keyField: this.keyField,
-         sortOptions: this.sortOptions,
-      });
-
-      this.child = ListItem.create({
-         layout: this.layout,
-         items: this.items,
-         children: this.children,
-         styled: true,
-         class: this.itemClass,
-         className: this.itemClassName,
-         style: this.itemStyle,
-         disabled: this.itemDisabled,
-         ...this.item,
-      }) as ListItem;
-
-      delete this.children;
-
-      this.selection = Selection.create(this.selection, {
-         records: this.records,
-      });
-
-      super.init();
-
-      if (this.grouping) {
-         this.groupBy(this.grouping);
-      }
-   }
-
-   initInstance(context: RenderingContext, instance: Instance) {
-      this.adapter.initInstance(context, instance);
-   }
-
-   declareData() {
-      let selection = this.selection.configureWidget(this);
-
-      super.declareData(
-         selection,
-         {
-            records: undefined,
-            sorters: undefined,
-            sortField: undefined,
-            sortDirection: undefined,
-            filterParams: {
-               structured: true,
-            },
-            itemStyle: {
-               structured: true,
-            },
-            emptyText: undefined,
-            tabIndex: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: Instance) {
-      let { data } = instance;
-
-      if (data.sortField)
-         data.sorters = [
-            {
-               field: data.sortField,
-               direction: data.sortDirection || "ASC",
-            },
-         ];
-      this.adapter.sort(data.sorters);
-
-      let filter = null;
-      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
-      else if (this.filter) filter = (item: unknown) => this.filter!(item, data.filterParams);
-      this.adapter.setFilter(filter);
-      instance.mappedRecords = this.adapter.getRecords(context, instance, data.records, instance.store);
-
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         selectable: !this.selection.isDummy || this.onItemClick,
-         empty: instance.mappedRecords.length == 0,
-      });
-
-      super.prepareData(context, instance);
-   }
-
-   applyParentStore(instance: Instance) {
-      super.applyParentStore(instance);
-
-      // force prepareData to execute again and propagate the store change to the records
-      if (instance.cached) delete instance.cached.rawData;
-   }
-
-   explore(context: RenderingContext, instance: Instance): void {
-      let instances: Instance[] = [];
-      let isSelected = this.selection.getIsSelectedDelegate(instance.store);
-      instance.mappedRecords!.forEach((record) => {
-         if (record.type == "data") {
-            let itemInstance = instance.getChild(context, this.child, record.key, record.store);
-            itemInstance.record = record;
-            itemInstance.selected = isSelected(record.data, record.index);
-
-            let changed = false;
-            if (itemInstance.cache("recordData", record.data)) changed = true;
-            if (itemInstance.cache("selected", itemInstance.selected)) changed = true;
-
-            if (this.cached && !changed && itemInstance.visible && !itemInstance.childStateDirty) {
-               instances.push(itemInstance);
-               itemInstance.shouldUpdate = false;
-            } else if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
-         } else if (record.type == "group-header" && record.grouping.header) {
-            let itemInstance = instance.getChild(context, record.grouping.header, record.key, record.store);
-            itemInstance.record = record;
-            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
-         } else if (record.type == "group-footer" && record.grouping.footer) {
-            let itemInstance = instance.getChild(context, record.grouping.footer, record.key, record.store);
-            itemInstance.record = record;
-            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
-         }
-      });
-      instance.instances = instances;
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
-      let items = instance.instances!.map((x) => ({
-         instance: x,
-         key: x.record.key,
-         type: x.record.type,
-         content: getContent(x.render(context)),
-      }));
-      return (
-         <ListComponent
-            key={key}
-            instance={instance}
-            items={items}
-            selectable={(!this.selection.isDummy || !!this.onItemClick) as boolean}
-         />
-      );
-   }
-
-   groupBy(grouping: string | GroupingConfig | (string | GroupingConfig)[]): void {
-      if (!isArray(grouping)) {
-         if (isString(grouping) || typeof grouping == "object") return this.groupBy([grouping]);
-         throw new Error("DynamicGrouping should be an array of grouping objects");
-      }
-
-      let normalized = grouping.map((g) => {
-         if (isString(g)) {
-            return {
-               key: {
-                  [g]: {
-                     bind: this.recordName + "." + g,
-                  },
-               },
-            } as GroupingConfig;
-         }
-         // Clone to avoid mutating the original config
-         return {
-            ...g,
-            header: g.header ? Widget.create(g.header) : undefined,
-            footer: g.footer ? Widget.create(g.footer) : undefined,
-         };
-      });
-
-      this.adapter.groupBy(normalized);
-      this.update();
-   }
-}
-
-List.prototype.recordName = "$record";
-List.prototype.indexName = "$index";
-List.prototype.baseClass = "list";
-List.prototype.focusable = true;
-List.prototype.focused = false;
-List.prototype.itemPad = true;
-List.prototype.cached = false;
-List.prototype.styled = true;
-List.prototype.scrollSelectionIntoView = false;
-List.prototype.selectMode = false;
-List.prototype.selectOnTab = false;
-
-Widget.alias("list", List);
-
-interface ListItemData {
-   instance: Instance;
-   key: string;
-   type: string;
-   content: React.ReactNode;
-}
-
-interface ListComponentProps {
-   instance: Instance;
-   items: ListItemData[];
-   selectable: boolean | ((e: MouseEvent, instance: Instance) => void);
-}
-
-interface ListComponentState {
-   cursor: number;
-   focused: boolean;
-   selectionStart?: number;
-}
-
-class ListComponent extends VDOM.Component<ListComponentProps, ListComponentState> {
-   declare el?: HTMLUListElement;
-   cursorChildIndex: number[] = [];
-   declare selectedEl?: Element | null;
-   unsubscribeScroll?: () => void;
-   onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => boolean | void;
-
-   constructor(props: ListComponentProps) {
-      super(props);
-      let { widget } = props.instance;
-      let { focused } = widget as unknown as { focused: boolean };
-      this.state = {
-         cursor: focused && props.selectable ? 0 : -1,
-         focused: focused,
-      };
-
-      this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
-      this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);
-      this.handleItemClick = this.handleItemClick.bind(this);
-   }
-
-   shouldComponentUpdate(props: ListComponentProps, state: ListComponentState): boolean {
-      return props.instance.shouldUpdate || state != this.state;
-   }
-
-   componentDidMount(): void {
-      let { instance } = this.props;
-      let { widget } = instance as unknown as { widget: List };
-      if (widget.pipeKeyDown) {
-         instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
-         this.showCursor();
-      }
-
-      if (widget.autoFocus && this.el) FocusManager.focus(this.el);
-
-      if (widget.onScroll && this.el) {
-         this.unsubscribeScroll = addEventListenerWithOptions(
-            this.el,
-            "scroll",
-            (event) => {
-               instance.invoke("onScroll", event, instance);
-            },
-            { passive: true },
-         );
-      }
-
-      this.componentDidUpdate();
-   }
-
-   UNSAFE_componentWillReceiveProps(props: ListComponentProps): void {
-      if (this.state.focused && (props.instance.widget as List).selectMode) this.showCursor(true, props.items);
-      else if (this.state.cursor >= props.items.length) this.moveCursor(props.items.length - 1);
-      else if (this.state.focused && this.state.cursor < 0) this.moveCursor(0);
-   }
-
-   componentWillUnmount(): void {
-      let { instance } = this.props;
-      let { widget } = instance as unknown as { widget: List };
-      offFocusOut(this);
-      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", null, instance);
-   }
-
-   handleItemMouseDown(e: React.MouseEvent<HTMLLIElement>): void {
-      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
-      this.moveCursor(index);
-      if (e.shiftKey) e.preventDefault();
-
-      this.moveCursor(index, {
-         select: true,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         selectRange: e.shiftKey,
-      });
-   }
-
-   handleItemClick(e: React.MouseEvent<HTMLLIElement>): void {
-      let { instance, items } = this.props;
-      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
-      let item = items[this.cursorChildIndex[index]];
-      if (instance.invoke("onItemClick", e, item.instance) === false) return;
-
-      this.moveCursor(index, {
-         select: true,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         selectRange: e.shiftKey,
-      });
-   }
-
-   handleItemDoubleClick(e: React.MouseEvent<HTMLLIElement>): void {
-      let { instance, items } = this.props;
-      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
-      let item = items[this.cursorChildIndex[index]];
-      instance.invoke("onItemDoubleClick", e, item.instance);
-   }
-
-   render(): React.ReactNode {
-      let { instance, items, selectable } = this.props;
-      let { data, widget } = instance as unknown as { data: Record<string, any>; widget: List };
-      let { CSS, baseClass } = widget;
-      let itemStyle = CSS.parseStyle(data.itemStyle);
-      this.cursorChildIndex = [];
-      let cursorIndex = 0;
-
-      let onDblClick: ((e: React.MouseEvent<HTMLLIElement>) => void) | undefined;
-      let onClick: ((e: React.MouseEvent<HTMLLIElement>) => void) | undefined;
-
-      if (widget.onItemClick) onClick = this.handleItemClick;
-
-      if (widget.onItemDoubleClick) onDblClick = this.handleItemDoubleClick;
-
-      let children: React.ReactNode =
-         items.length > 0 &&
-         items.map((x, i) => {
-            let { data, selected } = x.instance as { data: any; selected?: boolean };
-            let className;
-
-            if (x.type == "data") {
-               let ind = cursorIndex++;
-
-               this.cursorChildIndex.push(i);
-               className = CSS.element(baseClass, "item", {
-                  selected: selected,
-                  cursor: ind == this.state.cursor,
-                  pad: widget.itemPad,
-                  disabled: data.disabled,
-               });
-
-               return (
-                  <li
-                     key={x.key}
-                     className={CSS.expand(className, data.classNames)}
-                     style={itemStyle}
-                     data-record-index={ind}
-                     onMouseDown={this.handleItemMouseDown}
-                     onClick={onClick}
-                     onDoubleClick={onDblClick}
-                  >
-                     {x.content}
-                  </li>
-               );
-            } else {
-               return (
-                  <li key={x.key} className={CSS.element(baseClass, x.type)}>
-                     {x.content}
-                  </li>
-               );
-            }
-         });
-
-      if (!children && data.emptyText) {
-         children = <li className={CSS.element(baseClass, "empty-text")}>{data.emptyText}</li>;
-      }
-
-      return (
-         <ul
-            ref={(el) => {
-               this.el = el as HTMLUListElement;
-            }}
-            className={CSS.expand(data.classNames, CSS.state({ focused: this.state.focused }))}
-            style={data.style}
-            tabIndex={widget.focusable && selectable && items.length > 0 ? data.tabIndex || 0 : undefined}
-            onMouseDown={preventFocusOnTouch}
-            onKeyDown={this.handleKeyDown.bind(this)}
-            onMouseLeave={this.handleMouseLeave.bind(this)}
-            onFocus={this.onFocus.bind(this)}
-            onBlur={this.onBlur.bind(this)}
-         >
-            {children}
-         </ul>
-      );
-   }
-
-   componentDidUpdate(): void {
-      let { widget } = this.props.instance as unknown as { widget: List };
-      if (widget.scrollSelectionIntoView) {
-         //The timeout is reqired for use-cases when parent needs to do some measuring that affect scrollbars, i.e. LookupField.
-         setTimeout(() => this.scrollElementIntoView(), 0);
-      }
-   }
-
-   scrollElementIntoView(): void {
-      if (!this.el) return; //unmount
-      let { widget } = this.props.instance as unknown as { widget: List };
-      let { CSS, baseClass } = widget;
-      let selectedRowSelector = `.${CSS.element(baseClass, "item")}.${CSS.state("selected")}`;
-      let firstSelectedRow = this.el.querySelector(selectedRowSelector);
-      if (firstSelectedRow != this.selectedEl) {
-         if (firstSelectedRow) scrollElementIntoView(firstSelectedRow, true, false, 0, this.el);
-         this.selectedEl = firstSelectedRow;
-      }
-   }
-
-   moveCursor(
-      index: number,
-      {
-         focused,
-         hover,
-         scrollIntoView,
-         select,
-         selectRange,
-         selectOptions,
-      }: {
-         focused?: boolean;
-         hover?: boolean;
-         scrollIntoView?: boolean;
-         select?: boolean;
-         selectRange?: boolean;
-         selectOptions?: { toggle?: boolean; add?: boolean };
-      } = {},
-   ): void {
-      let { instance, selectable } = this.props;
-      if (!selectable) return;
-
-      let { widget } = instance as unknown as { widget: List };
-      let newState: Partial<ListComponentState> = {};
-      if (widget.focused) focused = true;
-
-      if (focused != null && this.state.focused != focused) newState.focused = focused;
-
-      //ignore mouse enter/leave events (support with a flag if a feature request comes)
-      if (!hover) newState.cursor = index;
-
-      //batch updates to avoid flickering between selection and cursor changes
-      batchUpdates(() => {
-         if (select || widget.selectMode) {
-            let start: number | undefined =
-               selectRange && this.state.selectionStart !== undefined && this.state.selectionStart >= 0
-                  ? this.state.selectionStart
-                  : index;
-            if (start < 0) start = index;
-            this.selectRange(start, index, selectOptions);
-            if (!selectRange) newState.selectionStart = index;
-         }
-         if (Object.keys(newState).length > 0) {
-            this.setState(newState as ListComponentState, () => {
-               if (scrollIntoView && this.el) {
-                  let item = this.el.children[this.cursorChildIndex[index]];
-                  if (item) scrollElementIntoView(item);
-               }
-            });
-         }
-      });
-   }
-
-   selectRange(from: number, to: number, options?: { toggle?: boolean; add?: boolean }): void {
-      let { instance, items } = this.props;
-      let { widget } = instance as unknown as { widget: List };
-
-      if (from > to) {
-         let tmp = from;
-         from = to;
-         to = tmp;
-      }
-
-      let selection: any[] = [],
-         indexes: number[] = [];
-
-      for (let cursor = from; cursor <= to; cursor++) {
-         let item = items[this.cursorChildIndex[cursor]];
-         if (item) {
-            let { record, data } = item.instance as { record: any; data: any };
-            if (data.disabled) continue;
-            selection.push(record.data);
-            indexes.push(record.index);
-         }
-      }
-
-      widget.selection.selectMultiple(instance.store, selection, indexes, options);
-   }
-
-   showCursor(force?: boolean, newItems?: ListItemData[]): void {
-      if (!force && this.state.cursor >= 0) return;
-
-      let items = newItems || this.props.items;
-      let index = -1,
-         firstSelected = -1,
-         firstValid = -1;
-      for (let i = 0; i < items.length; i++) {
-         let item = items[i];
-         if (isDataItem(item)) {
-            index++;
-
-            if (!isItemDisabled(item) && firstValid == -1) firstValid = index;
-            if ((item.instance as any).selected) {
-               firstSelected = index;
-               break;
-            }
-         }
-      }
-      this.moveCursor(firstSelected != -1 ? firstSelected : firstValid, {
-         focused: true,
-      });
-   }
-
-   onFocus(): void {
-      let { widget } = this.props.instance as unknown as { widget: List };
-
-      FocusManager.nudge();
-      this.showCursor(widget.selectMode);
-
-      if (!widget.focused && this.el)
-         oneFocusOut(this, this.el, () => {
-            this.moveCursor(-1, { focused: false });
-         });
-
-      this.setState({
-         focused: true,
-      });
-   }
-
-   onBlur(): void {
-      FocusManager.nudge();
-   }
-
-   handleMouseLeave(): void {
-      let { widget } = this.props.instance as unknown as { widget: List };
-      if (!widget.focused) this.moveCursor(-1, { hover: true });
-   }
-
-   handleKeyDown(e: React.KeyboardEvent): void {
-      let { instance, items } = this.props;
-      let { widget } = instance as unknown as { widget: List };
-
-      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.tab:
-         case KeyCode.enter:
-            if (!widget.selectOnTab && e.keyCode == KeyCode.tab) break;
-            let item = items[this.cursorChildIndex[this.state.cursor]];
-            if (item && widget.onItemClick && instance.invoke("onItemClick", e, item.instance) === false) return;
-            this.moveCursor(this.state.cursor, {
-               select: true,
-               selectOptions: {
-                  toggle: e.ctrlKey && !e.shiftKey,
-                  add: e.ctrlKey && e.shiftKey,
-               },
-               selectRange: e.shiftKey,
-            });
-            break;
-
-         case KeyCode.down:
-            for (let index = this.state.cursor + 1; index < this.cursorChildIndex.length; index++) {
-               let item = items[this.cursorChildIndex[index]];
-               if (!isItemSelectable(item)) continue;
-               this.moveCursor(index, {
-                  focused: true,
-                  scrollIntoView: true,
-                  select: e.shiftKey,
-                  selectRange: e.shiftKey,
-               });
-               e.stopPropagation();
-               e.preventDefault();
-               break;
-            }
-            break;
-
-         case KeyCode.up:
-            for (let index = this.state.cursor - 1; index >= 0; index--) {
-               let item = items[this.cursorChildIndex[index]];
-               if (!isItemSelectable(item)) continue;
-               this.moveCursor(index, {
-                  focused: true,
-                  scrollIntoView: true,
-                  select: e.shiftKey,
-                  selectRange: e.shiftKey,
-               });
-               e.stopPropagation();
-               e.preventDefault();
-               break;
-            }
-            break;
-
-         case KeyCode.a:
-            if (!e.ctrlKey || !widget.selection.multiple) return;
-
-            this.selectRange(0, this.cursorChildIndex.length);
-
-            e.stopPropagation();
-            e.preventDefault();
-            break;
-      }
-   }
-}
-
-class ListItem extends Container {
-   declareData(...args: Record<string, unknown>[]) {
-      super.declareData(...args, {
-         disabled: undefined,
-      });
-   }
-}
-
-function isItemSelectable(item: any) {
-   return isDataItem(item) && !isItemDisabled(item);
-}
-
-function isDataItem(item: any) {
-   return item?.type == "data";
-}
-
-function isItemDisabled(item: any) {
-   return item?.instance.data.disabled;
-}
+/**@jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { getAccessor } from "../data/getAccessor";
+import { GroupAdapter, GroupingConfig } from "../ui/adapter/GroupAdapter";
+import { batchUpdates } from "../ui/batchUpdates";
+import { Container, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import { FocusManager, offFocusOut, oneFocusOut, preventFocusOnTouch } from "../ui/FocusManager";
+import { Selection } from "../ui/selection/Selection";
+import { VDOM, Widget, getContent } from "../ui/Widget";
+import { addEventListenerWithOptions } from "../util/addEventListenerWithOptions";
+import { isArray } from "../util/isArray";
+import { isString } from "../util/isString";
+import { KeyCode } from "../util/KeyCode";
+import { scrollElementIntoView } from "../util/scrollElementIntoView";
+import {
+   BooleanProp,
+   ClassProp,
+   CollatorOptions,
+   Prop,
+   RecordAlias,
+   StringProp,
+   StructuredProp,
+   StyleProp,
+} from "../ui/Prop";
+import { Create } from "../util/Component";
+
+export interface ListConfig<T = any> extends StyledContainerConfig {
+   /** An array of records to be displayed in the list. */
+   records?: Prop<T[]>;
+
+   /** Record alias. Default is `$record`. */
+   recordName?: RecordAlias;
+
+   /** Record alias. Alias for `recordName`. Default is `$record`. */
+   recordAlias?: RecordAlias;
+
+   /** Index alias. Default is `$index`. */
+   indexName?: RecordAlias;
+
+   /** Index alias. Alias for `indexName`. Default is `$index`. */
+   indexAlias?: RecordAlias;
+
+   /** Style to be applied to each list item. */
+   itemStyle?: StyleProp;
+
+   /** CSS class to be applied to each list item. */
+   itemClass?: ClassProp;
+
+   /** CSS class to be applied to each list item. */
+   itemClassName?: ClassProp;
+
+   /** Text to be displayed when the list is empty. */
+   emptyText?: StringProp;
+
+   /** A grouping definition, field name, or an array of grouping level definitions. */
+   grouping?: string | GroupingConfig | (string | GroupingConfig)[];
+
+   /** Base CSS class to be applied to the element. Default is 'list'. */
+   baseClass?: string;
+
+   /** Set to `true` to allow focus on the list. */
+   focusable?: BooleanProp;
+
+   /** Boolean for focus state. */
+   focused?: BooleanProp;
+
+   /** Boolean for item padding. */
+   itemPad?: BooleanProp;
+
+   /** Set to `true` to enable row caching. */
+   cached?: BooleanProp;
+
+   /** Selection configuration. */
+   selection?: StructuredProp;
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
+
+   /** Scroll selection into the view. Default value is false. */
+   scrollSelectionIntoView?: BooleanProp;
+
+   /** Options for data sorting. */
+   sortOptions?: CollatorOptions;
+
+   /** Parameter for disabling specific items. */
+   itemDisabled?: BooleanProp;
+
+   /** Automatic selection without cursor navigation. */
+   selectMode?: BooleanProp;
+
+   /** Tab key selects item under cursor. */
+   selectOnTab?: BooleanProp;
+
+   /** Callback invoked during scrolling. */
+   onScroll?: string | ((event: Event, instance: Instance) => void);
+
+   /** Callback for item click. */
+   onItemClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
+
+   /** Callback for item double click. */
+   onItemDoubleClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
+
+   /** Callback for keyboard down events. */
+   pipeKeyDown?: string | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
+
+   /** A field used to get the unique identifier of the record. */
+   keyField?: string;
+
+   /** Data adapter used to convert data in list of records. Used to enable grouping and tree operations. */
+   dataAdapter?: Create<typeof GroupAdapter>;
+}
+
+/*
+ - renders list of items
+ - focusable (keyboard navigation)
+ - selection
+ - fake focus - list appears focused and receives keyboard inputs redirected from other control (dropdown scenario)
+ */
+
+export class List extends StyledContainerBase<ListConfig> {
+   constructor(config?: ListConfig) {
+      super(config);
+   }
+
+   declare public recordAlias?: string;
+   declare public recordName: string;
+   declare public indexAlias?: string;
+   declare public indexName: string;
+   declare public adapter: GroupAdapter;
+   declare public child: ListItem;
+   declare public selection: Selection;
+   declare public itemClass?: string;
+   declare public itemClassName?: string;
+   declare public itemStyle?: string;
+   declare public itemDisabled?: boolean;
+   declare public item?: Widget;
+   declare public layout?: any;
+   declare public keyField?: string;
+   declare public records?: any[];
+   declare public sortOptions?: any;
+   declare public grouping?: string | GroupingConfig | (string | GroupingConfig)[];
+   declare public focusable?: boolean;
+   declare public focused?: boolean;
+   declare public itemPad?: boolean;
+   declare public cached?: boolean;
+   declare public scrollSelectionIntoView?: boolean;
+   declare public selectMode?: boolean;
+   declare public selectOnTab?: boolean;
+   declare public pipeKeyDown?:
+      | string
+      | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
+   declare public autoFocus?: boolean;
+   declare public baseClass: string;
+   declare public filter?: (item: unknown, filterParams: Record<string, unknown>) => boolean;
+   declare public onCreateFilter?: (
+      filterParams: Record<string, unknown>,
+      instance: Instance,
+   ) => (record: unknown) => boolean;
+   declare public onItemClick?: (e: React.MouseEvent, instance: Instance) => void;
+   declare public onItemDoubleClick?: (e: React.MouseEvent, instance: Instance) => void;
+   declare public onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => void;
+   declare public onScroll?: (event: Event, instance: Instance) => void;
+   declare public onFocus?: (event: FocusEvent, instance: Instance) => void;
+   declare public onBlur?: (event: FocusEvent, instance: Instance) => void;
+   declare public onMouseLeave?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseEnter?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseMove?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseUp?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseDown?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseOver?: (event: React.MouseEvent, instance: Instance) => void;
+   declare public onMouseOut?: (event: React.MouseEvent, instance: Instance) => void;
+
+   init() {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.indexAlias) this.indexName = this.indexAlias;
+
+      this.adapter = GroupAdapter.create(this.adapter || GroupAdapter, {
+         recordName: this.recordName,
+         indexName: this.indexName,
+         recordsAccessor: getAccessor(this.records),
+         keyField: this.keyField,
+         sortOptions: this.sortOptions,
+      });
+
+      this.child = ListItem.create({
+         layout: this.layout,
+         items: this.items,
+         children: this.children,
+         styled: true,
+         class: this.itemClass,
+         className: this.itemClassName,
+         style: this.itemStyle,
+         disabled: this.itemDisabled,
+         ...this.item,
+      }) as ListItem;
+
+      delete this.children;
+
+      this.selection = Selection.create(this.selection, {
+         records: this.records,
+      });
+
+      super.init();
+
+      if (this.grouping) {
+         this.groupBy(this.grouping);
+      }
+   }
+
+   initInstance(context: RenderingContext, instance: Instance) {
+      this.adapter.initInstance(context, instance);
+   }
+
+   declareData() {
+      let selection = this.selection.configureWidget(this);
+
+      super.declareData(
+         selection,
+         {
+            records: undefined,
+            sorters: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            filterParams: {
+               structured: true,
+            },
+            itemStyle: {
+               structured: true,
+            },
+            emptyText: undefined,
+            tabIndex: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: Instance) {
+      let { data } = instance;
+
+      if (data.sortField)
+         data.sorters = [
+            {
+               field: data.sortField,
+               direction: data.sortDirection || "ASC",
+            },
+         ];
+      this.adapter.sort(data.sorters);
+
+      let filter = null;
+      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+      else if (this.filter) filter = (item: unknown) => this.filter!(item, data.filterParams);
+      this.adapter.setFilter(filter);
+      instance.mappedRecords = this.adapter.getRecords(context, instance, data.records, instance.store);
+
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         selectable: !this.selection.isDummy || this.onItemClick,
+         empty: instance.mappedRecords.length == 0,
+      });
+
+      super.prepareData(context, instance);
+   }
+
+   applyParentStore(instance: Instance) {
+      super.applyParentStore(instance);
+
+      // force prepareData to execute again and propagate the store change to the records
+      if (instance.cached) delete instance.cached.rawData;
+   }
+
+   explore(context: RenderingContext, instance: Instance): void {
+      let instances: Instance[] = [];
+      let isSelected = this.selection.getIsSelectedDelegate(instance.store);
+      instance.mappedRecords!.forEach((record) => {
+         if (record.type == "data") {
+            let itemInstance = instance.getChild(context, this.child, record.key, record.store);
+            itemInstance.record = record;
+            itemInstance.selected = isSelected(record.data, record.index);
+
+            let changed = false;
+            if (itemInstance.cache("recordData", record.data)) changed = true;
+            if (itemInstance.cache("selected", itemInstance.selected)) changed = true;
+
+            if (this.cached && !changed && itemInstance.visible && !itemInstance.childStateDirty) {
+               instances.push(itemInstance);
+               itemInstance.shouldUpdate = false;
+            } else if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
+         } else if (record.type == "group-header" && record.grouping.header) {
+            let itemInstance = instance.getChild(context, record.grouping.header, record.key, record.store);
+            itemInstance.record = record;
+            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
+         } else if (record.type == "group-footer" && record.grouping.footer) {
+            let itemInstance = instance.getChild(context, record.grouping.footer, record.key, record.store);
+            itemInstance.record = record;
+            if (itemInstance.scheduleExploreIfVisible(context)) instances.push(itemInstance);
+         }
+      });
+      instance.instances = instances;
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let items = instance.instances!.map((x) => ({
+         instance: x,
+         key: x.record.key,
+         type: x.record.type,
+         content: getContent(x.render(context)),
+      }));
+      return (
+         <ListComponent
+            key={key}
+            instance={instance}
+            items={items}
+            selectable={(!this.selection.isDummy || !!this.onItemClick) as boolean}
+         />
+      );
+   }
+
+   groupBy(grouping: string | GroupingConfig | (string | GroupingConfig)[]): void {
+      if (!isArray(grouping)) {
+         if (isString(grouping) || typeof grouping == "object") return this.groupBy([grouping]);
+         throw new Error("DynamicGrouping should be an array of grouping objects");
+      }
+
+      let normalized = grouping.map((g) => {
+         if (isString(g)) {
+            return {
+               key: {
+                  [g]: {
+                     bind: this.recordName + "." + g,
+                  },
+               },
+            } as GroupingConfig;
+         }
+         // Clone to avoid mutating the original config
+         return {
+            ...g,
+            header: g.header ? Widget.create(g.header) : undefined,
+            footer: g.footer ? Widget.create(g.footer) : undefined,
+         };
+      });
+
+      this.adapter.groupBy(normalized);
+      this.update();
+   }
+}
+
+List.prototype.recordName = "$record";
+List.prototype.indexName = "$index";
+List.prototype.baseClass = "list";
+List.prototype.focusable = true;
+List.prototype.focused = false;
+List.prototype.itemPad = true;
+List.prototype.cached = false;
+List.prototype.styled = true;
+List.prototype.scrollSelectionIntoView = false;
+List.prototype.selectMode = false;
+List.prototype.selectOnTab = false;
+
+Widget.alias("list", List);
+
+interface ListItemData {
+   instance: Instance;
+   key: string;
+   type: string;
+   content: React.ReactNode;
+}
+
+interface ListComponentProps {
+   instance: Instance;
+   items: ListItemData[];
+   selectable: boolean | ((e: MouseEvent, instance: Instance) => void);
+}
+
+interface ListComponentState {
+   cursor: number;
+   focused: boolean;
+   selectionStart?: number;
+}
+
+class ListComponent extends VDOM.Component<ListComponentProps, ListComponentState> {
+   declare el?: HTMLUListElement;
+   cursorChildIndex: number[] = [];
+   declare selectedEl?: Element | null;
+   unsubscribeScroll?: () => void;
+   onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => boolean | void;
+
+   constructor(props: ListComponentProps) {
+      super(props);
+      let { widget } = props.instance;
+      let { focused } = widget as unknown as { focused: boolean };
+      this.state = {
+         cursor: focused && props.selectable ? 0 : -1,
+         focused: focused,
+      };
+
+      this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
+      this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);
+      this.handleItemClick = this.handleItemClick.bind(this);
+   }
+
+   shouldComponentUpdate(props: ListComponentProps, state: ListComponentState): boolean {
+      return props.instance.shouldUpdate || state != this.state;
+   }
+
+   componentDidMount(): void {
+      let { instance } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+      if (widget.pipeKeyDown) {
+         instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
+         this.showCursor();
+      }
+
+      if (widget.autoFocus && this.el) FocusManager.focus(this.el);
+
+      if (widget.onScroll && this.el) {
+         this.unsubscribeScroll = addEventListenerWithOptions(
+            this.el,
+            "scroll",
+            (event) => {
+               instance.invoke("onScroll", event, instance);
+            },
+            { passive: true },
+         );
+      }
+
+      this.componentDidUpdate();
+   }
+
+   UNSAFE_componentWillReceiveProps(props: ListComponentProps): void {
+      if (this.state.focused && (props.instance.widget as List).selectMode) this.showCursor(true, props.items);
+      else if (this.state.cursor >= props.items.length) this.moveCursor(props.items.length - 1);
+      else if (this.state.focused && this.state.cursor < 0) this.moveCursor(0);
+   }
+
+   componentWillUnmount(): void {
+      let { instance } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+      offFocusOut(this);
+      if (widget.pipeKeyDown) instance.invoke("pipeKeyDown", null, instance);
+   }
+
+   handleItemMouseDown(e: React.MouseEvent<HTMLLIElement>): void {
+      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
+      this.moveCursor(index);
+      if (e.shiftKey) e.preventDefault();
+
+      this.moveCursor(index, {
+         select: true,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         selectRange: e.shiftKey,
+      });
+   }
+
+   handleItemClick(e: React.MouseEvent<HTMLLIElement>): void {
+      let { instance, items } = this.props;
+      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
+      let item = items[this.cursorChildIndex[index]];
+      if (instance.invoke("onItemClick", e, item.instance) === false) return;
+
+      this.moveCursor(index, {
+         select: true,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         selectRange: e.shiftKey,
+      });
+   }
+
+   handleItemDoubleClick(e: React.MouseEvent<HTMLLIElement>): void {
+      let { instance, items } = this.props;
+      let index = Number((e.currentTarget as HTMLElement).dataset.recordIndex);
+      let item = items[this.cursorChildIndex[index]];
+      instance.invoke("onItemDoubleClick", e, item.instance);
+   }
+
+   render(): React.ReactNode {
+      let { instance, items, selectable } = this.props;
+      let { data, widget } = instance as unknown as { data: Record<string, any>; widget: List };
+      let { CSS, baseClass } = widget;
+      let itemStyle = CSS.parseStyle(data.itemStyle);
+      this.cursorChildIndex = [];
+      let cursorIndex = 0;
+
+      let onDblClick: ((e: React.MouseEvent<HTMLLIElement>) => void) | undefined;
+      let onClick: ((e: React.MouseEvent<HTMLLIElement>) => void) | undefined;
+
+      if (widget.onItemClick) onClick = this.handleItemClick;
+
+      if (widget.onItemDoubleClick) onDblClick = this.handleItemDoubleClick;
+
+      let children: React.ReactNode =
+         items.length > 0 &&
+         items.map((x, i) => {
+            let { data, selected } = x.instance as { data: any; selected?: boolean };
+            let className;
+
+            if (x.type == "data") {
+               let ind = cursorIndex++;
+
+               this.cursorChildIndex.push(i);
+               className = CSS.element(baseClass, "item", {
+                  selected: selected,
+                  cursor: ind == this.state.cursor,
+                  pad: widget.itemPad,
+                  disabled: data.disabled,
+               });
+
+               return (
+                  <li
+                     key={x.key}
+                     className={CSS.expand(className, data.classNames)}
+                     style={itemStyle}
+                     data-record-index={ind}
+                     onMouseDown={this.handleItemMouseDown}
+                     onClick={onClick}
+                     onDoubleClick={onDblClick}
+                  >
+                     {x.content}
+                  </li>
+               );
+            } else {
+               return (
+                  <li key={x.key} className={CSS.element(baseClass, x.type)}>
+                     {x.content}
+                  </li>
+               );
+            }
+         });
+
+      if (!children && data.emptyText) {
+         children = <li className={CSS.element(baseClass, "empty-text")}>{data.emptyText}</li>;
+      }
+
+      return (
+         <ul
+            ref={(el) => {
+               this.el = el as HTMLUListElement;
+            }}
+            className={CSS.expand(data.classNames, CSS.state({ focused: this.state.focused }))}
+            style={data.style}
+            tabIndex={widget.focusable && selectable && items.length > 0 ? data.tabIndex || 0 : undefined}
+            onMouseDown={preventFocusOnTouch}
+            onKeyDown={this.handleKeyDown.bind(this)}
+            onMouseLeave={this.handleMouseLeave.bind(this)}
+            onFocus={this.onFocus.bind(this)}
+            onBlur={this.onBlur.bind(this)}
+         >
+            {children}
+         </ul>
+      );
+   }
+
+   componentDidUpdate(): void {
+      let { widget } = this.props.instance as unknown as { widget: List };
+      if (widget.scrollSelectionIntoView) {
+         //The timeout is reqired for use-cases when parent needs to do some measuring that affect scrollbars, i.e. LookupField.
+         setTimeout(() => this.scrollElementIntoView(), 0);
+      }
+   }
+
+   scrollElementIntoView(): void {
+      if (!this.el) return; //unmount
+      let { widget } = this.props.instance as unknown as { widget: List };
+      let { CSS, baseClass } = widget;
+      let selectedRowSelector = `.${CSS.element(baseClass, "item")}.${CSS.state("selected")}`;
+      let firstSelectedRow = this.el.querySelector(selectedRowSelector);
+      if (firstSelectedRow != this.selectedEl) {
+         if (firstSelectedRow) scrollElementIntoView(firstSelectedRow, true, false, 0, this.el);
+         this.selectedEl = firstSelectedRow;
+      }
+   }
+
+   moveCursor(
+      index: number,
+      {
+         focused,
+         hover,
+         scrollIntoView,
+         select,
+         selectRange,
+         selectOptions,
+      }: {
+         focused?: boolean;
+         hover?: boolean;
+         scrollIntoView?: boolean;
+         select?: boolean;
+         selectRange?: boolean;
+         selectOptions?: { toggle?: boolean; add?: boolean };
+      } = {},
+   ): void {
+      let { instance, selectable } = this.props;
+      if (!selectable) return;
+
+      let { widget } = instance as unknown as { widget: List };
+      let newState: Partial<ListComponentState> = {};
+      if (widget.focused) focused = true;
+
+      if (focused != null && this.state.focused != focused) newState.focused = focused;
+
+      //ignore mouse enter/leave events (support with a flag if a feature request comes)
+      if (!hover) newState.cursor = index;
+
+      //batch updates to avoid flickering between selection and cursor changes
+      batchUpdates(() => {
+         if (select || widget.selectMode) {
+            let start: number | undefined =
+               selectRange && this.state.selectionStart !== undefined && this.state.selectionStart >= 0
+                  ? this.state.selectionStart
+                  : index;
+            if (start < 0) start = index;
+            this.selectRange(start, index, selectOptions);
+            if (!selectRange) newState.selectionStart = index;
+         }
+         if (Object.keys(newState).length > 0) {
+            this.setState(newState as ListComponentState, () => {
+               if (scrollIntoView && this.el) {
+                  let item = this.el.children[this.cursorChildIndex[index]];
+                  if (item) scrollElementIntoView(item);
+               }
+            });
+         }
+      });
+   }
+
+   selectRange(from: number, to: number, options?: { toggle?: boolean; add?: boolean }): void {
+      let { instance, items } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+
+      if (from > to) {
+         let tmp = from;
+         from = to;
+         to = tmp;
+      }
+
+      let selection: any[] = [],
+         indexes: number[] = [];
+
+      for (let cursor = from; cursor <= to; cursor++) {
+         let item = items[this.cursorChildIndex[cursor]];
+         if (item) {
+            let { record, data } = item.instance as { record: any; data: any };
+            if (data.disabled) continue;
+            selection.push(record.data);
+            indexes.push(record.index);
+         }
+      }
+
+      widget.selection.selectMultiple(instance.store, selection, indexes, options);
+   }
+
+   showCursor(force?: boolean, newItems?: ListItemData[]): void {
+      if (!force && this.state.cursor >= 0) return;
+
+      let items = newItems || this.props.items;
+      let index = -1,
+         firstSelected = -1,
+         firstValid = -1;
+      for (let i = 0; i < items.length; i++) {
+         let item = items[i];
+         if (isDataItem(item)) {
+            index++;
+
+            if (!isItemDisabled(item) && firstValid == -1) firstValid = index;
+            if ((item.instance as any).selected) {
+               firstSelected = index;
+               break;
+            }
+         }
+      }
+      this.moveCursor(firstSelected != -1 ? firstSelected : firstValid, {
+         focused: true,
+      });
+   }
+
+   onFocus(): void {
+      let { widget } = this.props.instance as unknown as { widget: List };
+
+      FocusManager.nudge();
+      this.showCursor(widget.selectMode);
+
+      if (!widget.focused && this.el)
+         oneFocusOut(this, this.el, () => {
+            this.moveCursor(-1, { focused: false });
+         });
+
+      this.setState({
+         focused: true,
+      });
+   }
+
+   onBlur(): void {
+      FocusManager.nudge();
+   }
+
+   handleMouseLeave(): void {
+      let { widget } = this.props.instance as unknown as { widget: List };
+      if (!widget.focused) this.moveCursor(-1, { hover: true });
+   }
+
+   handleKeyDown(e: React.KeyboardEvent): void {
+      let { instance, items } = this.props;
+      let { widget } = instance as unknown as { widget: List };
+
+      if (this.onKeyDown && instance.invoke("onKeyDown", e, instance) === false) return;
+
+      switch (e.keyCode) {
+         case KeyCode.tab:
+         case KeyCode.enter:
+            if (!widget.selectOnTab && e.keyCode == KeyCode.tab) break;
+            let item = items[this.cursorChildIndex[this.state.cursor]];
+            if (item && widget.onItemClick && instance.invoke("onItemClick", e, item.instance) === false) return;
+            this.moveCursor(this.state.cursor, {
+               select: true,
+               selectOptions: {
+                  toggle: e.ctrlKey && !e.shiftKey,
+                  add: e.ctrlKey && e.shiftKey,
+               },
+               selectRange: e.shiftKey,
+            });
+            break;
+
+         case KeyCode.down:
+            for (let index = this.state.cursor + 1; index < this.cursorChildIndex.length; index++) {
+               let item = items[this.cursorChildIndex[index]];
+               if (!isItemSelectable(item)) continue;
+               this.moveCursor(index, {
+                  focused: true,
+                  scrollIntoView: true,
+                  select: e.shiftKey,
+                  selectRange: e.shiftKey,
+               });
+               e.stopPropagation();
+               e.preventDefault();
+               break;
+            }
+            break;
+
+         case KeyCode.up:
+            for (let index = this.state.cursor - 1; index >= 0; index--) {
+               let item = items[this.cursorChildIndex[index]];
+               if (!isItemSelectable(item)) continue;
+               this.moveCursor(index, {
+                  focused: true,
+                  scrollIntoView: true,
+                  select: e.shiftKey,
+                  selectRange: e.shiftKey,
+               });
+               e.stopPropagation();
+               e.preventDefault();
+               break;
+            }
+            break;
+
+         case KeyCode.a:
+            if (!e.ctrlKey || !widget.selection.multiple) return;
+
+            this.selectRange(0, this.cursorChildIndex.length);
+
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+      }
+   }
+}
+
+class ListItem extends Container {
+   declareData(...args: Record<string, unknown>[]) {
+      super.declareData(...args, {
+         disabled: undefined,
+      });
+   }
+}
+
+function isItemSelectable(item: any) {
+   return isDataItem(item) && !isItemDisabled(item);
+}
+
+function isDataItem(item: any) {
+   return item?.type == "data";
+}
+
+function isItemDisabled(item: any) {
+   return item?.instance.data.disabled;
+}