cx 25.11.1 → 26.0.2

package/build/widgets/Icon.js

@@ -0,0 +1,39 @@
+import { Widget } from "../ui/Widget";
+import { registerIcon, registerIconFactory, clearIcons, unregisterIcon, renderIcon, restoreDefaultIcons, } from "./icons/registry";
+import "./icons/index";
+export class Icon extends Widget {
+    declareData(...args) {
+        super.declareData(...args, {
+            name: undefined,
+        });
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        return renderIcon(data.name, {
+            key: key,
+            className: data.classNames,
+            style: data.style,
+        });
+    }
+    static register(name, icon, defaultIcon = false) {
+        return registerIcon(name, icon, defaultIcon);
+    }
+    static unregister(...args) {
+        return unregisterIcon(...args);
+    }
+    static render(name, props) {
+        return renderIcon(name, props);
+    }
+    static clear() {
+        return clearIcons();
+    }
+    static registerFactory(factory) {
+        return registerIconFactory(factory);
+    }
+    static restoreDefaultIcons() {
+        restoreDefaultIcons();
+    }
+}
+Icon.prototype.baseClass = "icon";
+Icon.prototype.styled = true;
+Widget.alias('icon', Icon);

package/build/widgets/List.d.ts

@@ -0,0 +1,122 @@
+/**@jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { GroupAdapter, GroupingConfig } from "../ui/adapter/GroupAdapter";
+import { Container, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import { Selection } from "../ui/selection/Selection";
+import { Widget } from "../ui/Widget";
+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;
+    /** Index alias. Default is `$index`. */
+    indexName?: 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>;
+}
+export declare class List extends StyledContainerBase<ListConfig> {
+    constructor(config?: ListConfig);
+    recordAlias?: string;
+    recordName: string;
+    indexAlias?: string;
+    indexName: string;
+    adapter: GroupAdapter;
+    child: ListItem;
+    selection: Selection;
+    itemClass?: string;
+    itemClassName?: string;
+    itemStyle?: string;
+    itemDisabled?: boolean;
+    item?: Widget;
+    layout?: any;
+    keyField?: string;
+    records?: any[];
+    sortOptions?: any;
+    grouping?: string | GroupingConfig | (string | GroupingConfig)[];
+    focusable?: boolean;
+    focused?: boolean;
+    itemPad?: boolean;
+    cached?: boolean;
+    scrollSelectionIntoView?: boolean;
+    selectMode?: boolean;
+    selectOnTab?: boolean;
+    pipeKeyDown?: string | ((handler: ((e: React.KeyboardEvent) => void) | null, instance: Instance) => void);
+    autoFocus?: boolean;
+    baseClass: string;
+    filter?: (item: unknown, filterParams: Record<string, unknown>) => boolean;
+    onCreateFilter?: (filterParams: Record<string, unknown>, instance: Instance) => (record: unknown) => boolean;
+    onItemClick?: (e: React.MouseEvent, instance: Instance) => void;
+    onItemDoubleClick?: (e: React.MouseEvent, instance: Instance) => void;
+    onKeyDown?: (e: React.KeyboardEvent, instance: Instance) => void;
+    onScroll?: (event: Event, instance: Instance) => void;
+    onFocus?: (event: FocusEvent, instance: Instance) => void;
+    onBlur?: (event: FocusEvent, instance: Instance) => void;
+    onMouseLeave?: (event: React.MouseEvent, instance: Instance) => void;
+    onMouseEnter?: (event: React.MouseEvent, instance: Instance) => void;
+    onMouseMove?: (event: React.MouseEvent, instance: Instance) => void;
+    onMouseUp?: (event: React.MouseEvent, instance: Instance) => void;
+    onMouseDown?: (event: React.MouseEvent, instance: Instance) => void;
+    onMouseOver?: (event: React.MouseEvent, instance: Instance) => void;
+    onMouseOut?: (event: React.MouseEvent, instance: Instance) => void;
+    init(): void;
+    initInstance(context: RenderingContext, instance: Instance): void;
+    declareData(): void;
+    prepareData(context: RenderingContext, instance: Instance): void;
+    applyParentStore(instance: Instance): void;
+    explore(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): React.ReactNode;
+    groupBy(grouping: string | GroupingConfig | (string | GroupingConfig)[]): void;
+}
+declare class ListItem extends Container {
+    declareData(...args: Record<string, unknown>[]): void;
+}
+export {};

package/build/widgets/List.js

@@ -0,0 +1,510 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getAccessor } from "../data/getAccessor";
+import { GroupAdapter } from "../ui/adapter/GroupAdapter";
+import { batchUpdates } from "../ui/batchUpdates";
+import { Container, StyledContainerBase } 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";
+/*
+ - 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 {
+    constructor(config) {
+        super(config);
+    }
+    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,
+        });
+        delete this.children;
+        this.selection = Selection.create(this.selection, {
+            records: this.records,
+        });
+        super.init();
+        if (this.grouping) {
+            this.groupBy(this.grouping);
+        }
+    }
+    initInstance(context, 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, 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) => 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) {
+        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, instance) {
+        let instances = [];
+        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, instance, key) {
+        let items = instance.instances.map((x) => ({
+            instance: x,
+            key: x.record.key,
+            type: x.record.type,
+            content: getContent(x.render(context)),
+        }));
+        return (_jsx(ListComponent, { instance: instance, items: items, selectable: (!this.selection.isDummy || !!this.onItemClick) }, key));
+    }
+    groupBy(grouping) {
+        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,
+                        },
+                    },
+                };
+            }
+            return g;
+        });
+        normalized.forEach((g) => {
+            if (g.header)
+                g.header = Widget.create(g.header);
+            if (g.footer)
+                g.footer = Widget.create(g.footer);
+        });
+        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);
+class ListComponent extends VDOM.Component {
+    cursorChildIndex = [];
+    unsubscribeScroll;
+    onKeyDown;
+    constructor(props) {
+        super(props);
+        let { widget } = props.instance;
+        let { focused } = widget;
+        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, state) {
+        return props.instance.shouldUpdate || state != this.state;
+    }
+    componentDidMount() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        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) {
+        if (this.state.focused && props.instance.widget.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() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        offFocusOut(this);
+        if (widget.pipeKeyDown)
+            instance.invoke("pipeKeyDown", null, instance);
+    }
+    handleItemMouseDown(e) {
+        let index = Number(e.currentTarget.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) {
+        let { instance, items } = this.props;
+        let index = Number(e.currentTarget.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) {
+        let { instance, items } = this.props;
+        let index = Number(e.currentTarget.dataset.recordIndex);
+        let item = items[this.cursorChildIndex[index]];
+        instance.invoke("onItemDoubleClick", e, item.instance);
+    }
+    render() {
+        let { instance, items, selectable } = this.props;
+        let { data, widget } = instance;
+        let { CSS, baseClass } = widget;
+        let itemStyle = CSS.parseStyle(data.itemStyle);
+        this.cursorChildIndex = [];
+        let cursorIndex = 0;
+        let onDblClick;
+        let onClick;
+        if (widget.onItemClick)
+            onClick = this.handleItemClick;
+        if (widget.onItemDoubleClick)
+            onDblClick = this.handleItemDoubleClick;
+        let children = items.length > 0 &&
+            items.map((x, i) => {
+                let { data, selected } = x.instance;
+                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 (_jsx("li", { className: CSS.expand(className, data.classNames), style: itemStyle, "data-record-index": ind, onMouseDown: this.handleItemMouseDown, onClick: onClick, onDoubleClick: onDblClick, children: x.content }, x.key));
+                }
+                else {
+                    return (_jsx("li", { className: CSS.element(baseClass, x.type), children: x.content }, x.key));
+                }
+            });
+        if (!children && data.emptyText) {
+            children = _jsx("li", { className: CSS.element(baseClass, "empty-text"), children: data.emptyText });
+        }
+        return (_jsx("ul", { ref: (el) => {
+                this.el = el;
+            }, 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: children }));
+    }
+    componentDidUpdate() {
+        let { widget } = this.props.instance;
+        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() {
+        if (!this.el)
+            return; //unmount
+        let { widget } = this.props.instance;
+        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, { focused, hover, scrollIntoView, select, selectRange, selectOptions, } = {}) {
+        let { instance, selectable } = this.props;
+        if (!selectable)
+            return;
+        let { widget } = instance;
+        let newState = {};
+        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 = 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, () => {
+                    if (scrollIntoView && this.el) {
+                        let item = this.el.children[this.cursorChildIndex[index]];
+                        if (item)
+                            scrollElementIntoView(item);
+                    }
+                });
+            }
+        });
+    }
+    selectRange(from, to, options) {
+        let { instance, items } = this.props;
+        let { widget } = instance;
+        if (from > to) {
+            let tmp = from;
+            from = to;
+            to = tmp;
+        }
+        let selection = [], indexes = [];
+        for (let cursor = from; cursor <= to; cursor++) {
+            let item = items[this.cursorChildIndex[cursor]];
+            if (item) {
+                let { record, data } = item.instance;
+                if (data.disabled)
+                    continue;
+                selection.push(record.data);
+                indexes.push(record.index);
+            }
+        }
+        widget.selection.selectMultiple(instance.store, selection, indexes, options);
+    }
+    showCursor(force, newItems) {
+        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.selected) {
+                    firstSelected = index;
+                    break;
+                }
+            }
+        }
+        this.moveCursor(firstSelected != -1 ? firstSelected : firstValid, {
+            focused: true,
+        });
+    }
+    onFocus() {
+        let { widget } = this.props.instance;
+        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() {
+        FocusManager.nudge();
+    }
+    handleMouseLeave() {
+        let { widget } = this.props.instance;
+        if (!widget.focused)
+            this.moveCursor(-1, { hover: true });
+    }
+    handleKeyDown(e) {
+        let { instance, items } = this.props;
+        let { widget } = instance;
+        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) {
+        super.declareData(...args, {
+            disabled: undefined,
+        });
+    }
+}
+function isItemSelectable(item) {
+    return isDataItem(item) && !isItemDisabled(item);
+}
+function isDataItem(item) {
+    return item?.type == "data";
+}
+function isItemDisabled(item) {
+    return item?.instance.data.disabled;
+}

package/build/widgets/ProgressBar.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource react */
+import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+export interface ProgressBarConfig extends WidgetConfig, WidgetStyleConfig {
+    /** Progress value, a number between `0` and `1`. Default value is `0`. */
+    value?: NumberProp;
+    /** Defaults to `false`. Set to `true` to make it look disabled. */
+    disabled?: BooleanProp;
+    /** Progress bar annotation. */
+    text?: StringProp;
+}
+export declare class ProgressBar extends Widget<ProgressBarConfig> {
+    baseClass: string;
+    disabled?: BooleanProp;
+    constructor(config?: ProgressBarConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    render(context: RenderingContext, instance: Instance, key: string): React.ReactNode;
+}