native-document 1.0.168 → 1.0.172

package/src/components/list/types/List.d.ts

@@ -1,43 +1,56 @@
-import type { ValidChild } from '../../../../types/elements';
-import type { ObservableItem } from '../../../../types/observable';
-import type { BaseComponent } from '../../BaseComponent';
-import type { ListItemInterface } from './ListItem';
+import type { ValidChild }      from '../../../../types/elements';
+import type { ObservableItem, ObservableArray } from '../../../../types/observable';
 import type { GlobalAttributes } from '../../../../types/globals';
+import type { ListItemInterface } from './ListItem';
+import type { ListGroupInterface } from './ListGroup';
+import type { ListDividerInterface } from './ListDivider';
 
 export type ListDescription = {
-        selectable: boolean;
-        multiSelect: boolean;
-        selectedValues: ObservableItem<unknown[]> | null;
-        inset: boolean;
-        divider: boolean;
-        data: unknown | null;
-        render: ((desc: ListDescription, instance: ListInterface) => ValidChild) | null;
-        selectByCheckbox: boolean;
-        selectByClick: boolean;
-        loopOnKeyboard: boolean;
-        props: GlobalAttributes;
-    };
-
-export interface ListInterface extends BaseComponent {
-    selectable(selectable?: boolean): this;
-    selectByClick(): void;
-    selectByCheckbox(): void;
-    multiSelect(multi?: boolean): this;
-    selectedValuesModel(observable: ObservableItem<unknown[]>): this;
-    inset(inset?: boolean): this;
+    selectable:       ObservableItem<boolean>;
+    multiSelect:      ObservableItem<boolean>;
+    selectedValues:   ObservableArray<unknown>;
+    inset:            ObservableItem<number>;
+    divider:          boolean;
+    items:            ObservableArray<unknown>;
+    render:           ((desc: ListDescription, instance: ListInterface) => ValidChild) | null;
+    selectByCheckbox: ObservableItem<boolean>;
+    selectByClick:    ObservableItem<boolean>;
+    loopOnKeyboard:   ObservableItem<boolean>;
+    props:            GlobalAttributes;
+};
+
+export interface ListInterface {
+    $description: ListDescription;
+
+    // HasListItem
+    selectable(selectable?: boolean | ObservableItem<boolean>): this;
+    selectByClick(): this;
+    selectByCheckbox(): this;
+    multiSelect(multi?: boolean | ObservableItem<boolean>): this;
+    selectInto(list: ObservableArray<unknown> | unknown[]): this;
+    selectedValuesModel(observable: ObservableArray<unknown> | ObservableItem<unknown[]>): this;
+    loopOnKeyboard(loopOnKeyboard: boolean): this;
+    add(item: ListItemInterface | ListGroupInterface | ListDividerInterface): this;
+    item(label: ValidChild, iconOrBuilder?: ValidChild | ((item: ListItemInterface) => void), builder?: (item: ListItemInterface) => void): this;
+    group(label: ValidChild, iconOrBuilder?: ValidChild | ((group: ListGroupInterface) => void), builder?: (group: ListGroupInterface) => void): this;
+    divider(): this;
+    from(source: ObservableArray<unknown> | unknown[], builder: (item: unknown) => ListItemInterface | ListGroupInterface): this;
+
+    // Own methods
+    inset(inset?: number): this;
     withDivider(divider?: boolean): this;
     data(data: unknown): this;
     onItemClick(handler: (item: ListItemInterface, event: MouseEvent) => void): this;
     onItemSelect(handler: (item: ListItemInterface) => void): this;
-    render(template: (description: ListDescription, instance: ListInterface) => ValidChild): this;
-}
 
+    // HasEventEmitter
+    on(event: string, handler: (...args: unknown[]) => void): this;
+    emit(event: string, ...args: unknown[]): void;
+    hasListeners(event: string): boolean;
+}
 
-export declare function List(config?: Record<string, unknown>): ListInterface;
+export declare function List(props?: GlobalAttributes): ListInterface;
 export declare namespace List {
-
-
     function use(template: (description: ListDescription, instance: ListInterface) => ValidChild): void;
-
-
-}
+    let defaultTemplate: ((description: ListDescription, instance: ListInterface) => ValidChild) | null;
+}

package/src/components/list/types/ListDivider.ts

@@ -0,0 +1,16 @@
+import type { ValidChild }      from '../../../../types/elements';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ListDividerDescription = {
+    props: GlobalAttributes;
+};
+
+export interface ListDividerInterface {
+    $description: ListDividerDescription;
+}
+
+export declare function ListDivider(props?: GlobalAttributes): ListDividerInterface;
+export declare namespace ListDivider {
+    function use(template: (description: ListDividerDescription, instance: ListDividerInterface) => ValidChild): void;
+    let defaultTemplate: ((description: ListDividerDescription, instance: ListDividerInterface) => ValidChild) | null;
+}

package/src/components/list/types/ListGroup.d.ts

@@ -1,37 +1,59 @@
-import type { ValidChild } from '../../../../types/elements';
-import type { ObservableItem } from '../../../../types/observable';
-import type { BaseComponent } from '../../BaseComponent';
+import type { ValidChild }      from '../../../../types/elements';
+import type { ObservableItem, ObservableArray } from '../../../../types/observable';
 import type { GlobalAttributes } from '../../../../types/globals';
+import type { ListItemInterface } from './ListItem';
+import type { ListDividerInterface } from './ListDivider';
 
 export type ListGroupDescription = {
-        header: ValidChild | null;
-        footer: ValidChild | null;
-        items: unknown[];
-        inset: boolean;
-        data: unknown | null;
-        renderHeader: ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
-        renderFooter: ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
-        render: ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
-        props: GlobalAttributes;
-    };
-
-export interface ListGroupInterface extends BaseComponent {
-    header(header: ValidChild): this;
-    title(title: ValidChild): this;
-    footer(footer: ValidChild): this;
-    inset(inset?: boolean): this;
+    label:                  ValidChild;
+    icon:                   ValidChild | null;
+    items:                  ObservableArray<unknown>;
+    render:                 ((desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
+    collapsable:            boolean;
+    collapsed:              ObservableItem<boolean> | null;
+    collapsableOpenedIcon:  ValidChild | null;
+    collapsableClosedIcon:  ValidChild | null;
+    visibility:             ObservableItem<boolean>;
+    selectable:             ObservableItem<boolean>;
+    multiSelect:            ObservableItem<boolean>;
+    selectedValues:         ObservableArray<unknown>;
+    selectByCheckbox:       ObservableItem<boolean>;
+    selectByClick:          ObservableItem<boolean>;
+    loopOnKeyboard:         ObservableItem<boolean>;
+    props:                  GlobalAttributes;
+};
+
+export interface ListGroupInterface {
+    $description: ListGroupDescription;
+
+    // Own methods
+    icon(icon: ValidChild): this;
+    collapsable(mode?: boolean, openedIcon?: ValidChild, closedIcon?: ValidChild): this;
+    collapsed(mode?: boolean): this;
+    visibility(mode: boolean | ObservableItem<boolean>): this;
     data(data: unknown): this;
-    renderHeader(renderFn: (desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild): this;
-    renderFooter(renderFn: (desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild): this;
-    render(renderFn: (desc: ListGroupDescription, instance: ListGroupInterface) => ValidChild): this;
-}
 
+    // HasListItem
+    selectable(selectable?: boolean | ObservableItem<boolean>): this;
+    selectByClick(): this;
+    selectByCheckbox(): this;
+    multiSelect(multi?: boolean | ObservableItem<boolean>): this;
+    selectInto(list: ObservableArray<unknown> | unknown[]): this;
+    loopOnKeyboard(loopOnKeyboard: boolean): this;
+    add(item: ListItemInterface | ListGroupInterface | ListDividerInterface): this;
+    item(label: ValidChild, iconOrBuilder?: ValidChild | ((item: ListItemInterface) => void), builder?: (item: ListItemInterface) => void): this;
+    group(label: ValidChild, iconOrBuilder?: ValidChild | ((group: ListGroupInterface) => void), builder?: (group: ListGroupInterface) => void): this;
+    divider(): this;
+    from(source: ObservableArray<unknown> | unknown[], builder: (item: unknown) => ListItemInterface | ListGroupInterface): this;
+
+    // HasEventEmitter
+    on(event: string, handler: (...args: unknown[]) => void): this;
+    emit(event: string, ...args: unknown[]): void;
+    hasListeners(event: string): boolean;
+}
 
-export declare function ListGroup(label?: ValidChild, config?: Record<string, unknown>): ListGroupInterface;
+export declare function ListGroup(label: ValidChild, props?: GlobalAttributes): ListGroupInterface;
 export declare namespace ListGroup {
-
-
     function use(template: (description: ListGroupDescription, instance: ListGroupInterface) => ValidChild): void;
-
-
-}
+    let defaultTemplate: ((description: ListGroupDescription, instance: ListGroupInterface) => ValidChild) | null;
+}

package/src/components/list/types/ListItem.d.ts

@@ -1,8 +1,8 @@
-import { GlobalAttributes, Observable } from '../../../../types/globals';
-import { ValidChild } from '../../../../types/elements';
-import { ObservableArray } from '../../../../types/observable';
+import type { ValidChild }      from '../../../../types/elements';
+import type { ObservableItem }  from '../../../../types/observable';
+import type { GlobalAttributes } from '../../../../types/globals';
 
-export interface ListItemDescription {
+export type ListItemDescription = {
     label:          ValidChild | null;
     subtitle:       ValidChild | null;
     icon:           ValidChild | null;
@@ -10,24 +10,19 @@ export interface ListItemDescription {
     value:          unknown;
     data:           unknown | null;
     key:            string | null;
-    disabled:       Observable<boolean> | null;
-    selected:       Observable<boolean> | null;
-    visibility:     Observable<boolean> | null;
+    disabled:       ObservableItem<boolean> | null;
+    selected:       ObservableItem<boolean> | null;
+    visibility:     ObservableItem<boolean> | null;
     isSelectedIcon: ValidChild | null;
     swipeLeading:   ValidChild[];
     swipeTrailing:  ValidChild[];
-    render:         ((desc: ListItemDescription, instance: ListItem) => ValidChild) | null;
+    render:         ((desc: ListItemDescription, instance: ListItemInterface) => ValidChild) | null;
     props:          GlobalAttributes;
-}
+};
 
-export declare class ListItem {
+export interface ListItemInterface {
     $description: ListItemDescription;
-    $parent: unknown;
-
-    constructor(props?: GlobalAttributes);
-
-    static use(template: (description: ListItemDescription, instance: ListItem) => ValidChild): void;
-    static defaultTemplate: ((description: ListItemDescription, instance: ListItem) => ValidChild) | null;
+    $parent:      unknown;
 
     label(label: ValidChild): this;
     subtitle(subtitle: ValidChild): this;
@@ -36,13 +31,13 @@ export declare class ListItem {
     value(value: unknown): this;
     data(data: unknown): this;
     key(key: string): this;
-    disabled(disabled?: boolean | Observable<boolean>): this;
-    selected(selected?: boolean | Observable<boolean>): this;
-    visibility(mode: boolean | Observable<boolean>): this;
+    disabled(disabled?: boolean | ObservableItem<boolean>): this;
+    selected(selected?: boolean | ObservableItem<boolean>): this;
+    visibility(mode: boolean | ObservableItem<boolean>): this;
     isSelectedIcon(icon: ValidChild): this;
     swipeLeading(actions: ValidChild | ValidChild[]): this;
     swipeTrailing(actions: ValidChild | ValidChild[]): this;
-    onClick(handler: (item: ListItem, event: MouseEvent) => void): this;
+    onClick(handler: (item: ListItemInterface, event: MouseEvent) => void): this;
 
     // HasEventEmitter
     on(event: string, handler: (...args: unknown[]) => void): this;
@@ -50,4 +45,8 @@ export declare class ListItem {
     hasListeners(event: string): boolean;
 }
 
-export declare function ListItem(props?: GlobalAttributes): ListItem;
+export declare function ListItem(props?: GlobalAttributes): ListItemInterface;
+export declare namespace ListItem {
+    function use(template: (description: ListItemDescription, instance: ListItemInterface) => ValidChild): void;
+    let defaultTemplate: ((description: ListItemDescription, instance: ListItemInterface) => ValidChild) | null;
+}

package/src/components/menu/Menu.js

@@ -53,6 +53,9 @@ export default function Menu(props = {}) {
         props,
     };
 
+
+    this.aria = { 'role': 'menu' };
+
 }
 
 BaseComponent.extends(Menu);

package/src/components/menu/MenuDivider.js

@@ -19,6 +19,7 @@ export default function MenuDivider(props = {}) {
     this.$description = {
         props,
     };
+    this.aria = { 'role': 'separator' };
 }
 
 BaseComponent.extends(MenuDivider);

package/src/components/menu/MenuGroup.js

@@ -39,6 +39,7 @@ export default function MenuGroup(label, props = {}) {
         collapsableClosedIcon: null,
         props,
     };
+    this.aria = { 'role': 'group' };
 }
 
 HasMenuItem.components.MenuGroup = MenuGroup;

package/src/components/menu/MenuItem.js

@@ -51,6 +51,7 @@ export default function MenuItem(props = {}) {
         visibility: null,
         props,
     };
+    this.aria = { 'role': 'menuitem', 'tabindex': '-1' };
 
 }
 

package/src/components/menu/MenuLink.js

@@ -21,6 +21,7 @@ export default function MenuLink(props = {}) {
         return new MenuLink(props);
     }
     MenuItem.call(this, props);
+    this.aria = { 'role': 'menuitem' };
 }
 
 MenuLink.prototype = Object.create(MenuItem.prototype);

package/src/components/modal/Modal.js

@@ -67,6 +67,10 @@ export default function Modal(content, props = {}) {
         variant: null,
         props,
     };
+    this.aria = {
+        'role': 'dialog',
+        'aria-modal': 'true'
+    };
 }
 
 BaseComponent.extends(Modal);

package/src/components/pagination/Pagination.js

@@ -50,6 +50,7 @@ export default function Pagination(props = {}) {
         render: null,
         props,
     };
+    this.aria = { 'role': 'navigation', 'aria-label': 'Pagination' };
 
     this.$element = null;
 }

package/src/components/popover/Popover.js

@@ -64,6 +64,7 @@ export default function Popover(content, props = {}) {
         includeTriggerIntoGhost: true,
         props,
     };
+    this.aria = { 'role': 'tooltip' };
 
     this.$element = null;
 

package/src/components/popover/PopoverFooter.js

@@ -24,6 +24,7 @@ export default function PopoverFooter(content, config = {}) {
         render: null,
         ...config,
     };
+    this.aria = {  };
 }
 
 BaseComponent.extends(PopoverFooter);

package/src/components/popover/PopoverHeader.js

@@ -25,6 +25,7 @@ export default function PopoverHeader(content, config = {}) {
         render: null,
         ...config,
     };
+    this.aria = { 'role': 'heading' };
 }
 
 BaseComponent.extends(PopoverHeader);

package/src/components/progress/Progress.js

@@ -50,6 +50,11 @@ export default function Progress(props = {}) {
         borderRadiusType: null,
         props,
     };
+    this.aria = {
+        'role': 'progressbar',
+        'aria-valuemin': '0',
+        'aria-valuemax': '100'
+    };
 }
 
 BaseComponent.extends(Progress);

package/src/components/skeleton/Skeleton.js

@@ -42,6 +42,10 @@ export default function Skeleton(props = {}) {
         repeat: null,
         props,
     };
+    this.aria = {
+        'aria-busy': 'true',
+        'aria-live': 'polite'
+    };
 }
 
 BaseComponent.extends(Skeleton);

package/src/components/slider/Slider.js

@@ -61,6 +61,7 @@ export default function Slider(name, props = {}) {
         renderThumb:   null,
         props,
     };
+    this.aria = { 'role': 'slider', 'tabindex': '0' };
 }
 
 Slider.prototype = Object.create(Field.prototype);

package/src/components/spacer/Spacer.js

@@ -9,6 +9,7 @@ export default function Spacer(props = {}) {
         type: 'spacer',
         props,
     };
+    this.aria = { 'aria-hidden': 'true' };
 }
 BaseComponent.extends(Spacer);
 

package/src/components/spinner/Spinner.js

@@ -42,6 +42,7 @@ export default function Spinner(props = {}) {
         fullScreenOverlay: null,
         props,
     };
+    this.aria = { 'role': 'status', 'aria-label': 'Loading' };
 }
 
 Spinner.defaultTemplate = null;

package/src/components/splitter/Splitter.js

@@ -33,6 +33,7 @@ export default function Splitter(props = {}) {
         render: null,
         props,
     };
+    this.aria = { 'role': 'group' };
 
     this.$element = null;
 }

package/src/components/splitter/SplitterGutter.js

@@ -33,6 +33,10 @@ export default function SplitterGutter(leftPanel, rightPanel, props = {}) {
         isDragging: $(false),
         props,
     };
+    this.aria = {
+        'role': 'separator',
+        'aria-orientation': 'horizontal',
+    };
 }
 
 BaseComponent.extends(SplitterGutter);
@@ -62,6 +66,7 @@ SplitterGutter.use = function(template) {
 SplitterGutter.prototype.vertical = function() {
     this.$description.orientation = 'vertical';
     this.$description.cursor = 'row-resize';
+    this.aria['aria-orientation'] = 'vertical';
     return this;
 };
 
@@ -71,6 +76,7 @@ SplitterGutter.prototype.vertical = function() {
 SplitterGutter.prototype.horizontal = function() {
     this.$description.orientation = 'horizontal';
     this.$description.cursor = 'col-resize';
+    this.aria['aria-orientation'] = 'horizontal';
     return this;
 };
 

package/src/components/splitter/SplitterPanel.js

@@ -37,6 +37,7 @@ export default function SplitterPanel(content, props = {}) {
         render: null,
         props,
     };
+    this.aria = { 'role': 'region' };
 }
 
 BaseComponent.extends(SplitterPanel);

package/src/components/stacks/AbsoluteStack.js

@@ -15,6 +15,7 @@ export default function AbsoluteStack(content, props = {}) {
     }
     PositionStack.call(this, content, props);
     this.$description.position = 'absolute';
+    this.aria = {};
 }
 
 BaseComponent.extends(AbsoluteStack, PositionStack);

package/src/components/stacks/FixedStack.js

@@ -15,6 +15,7 @@ export default function FixedStack(content, props = {}) {
     }
     PositionStack.call(this, content, props);
     this.$description.position = 'fixed';
+    this.aria = {};
 }
 
 BaseComponent.extends(FixedStack, PositionStack);

package/src/components/stacks/HStack.js

@@ -16,6 +16,7 @@ export default function HStack(content, props = {}) {
 
     Stack.call(this, content, props);
     this.$description.orientation = 'horizontal';
+    this.aria = {};
 }
 
 BaseComponent.extends(HStack,  Stack);

package/src/components/stacks/PositionStack.js

@@ -34,6 +34,7 @@ export default function PositionStack(content, props = {}) {
         anchor: null,
         props,
     };
+    this.aria = {};
 }
 
 BaseComponent.extends(PositionStack);

package/src/components/stacks/RelativeStack.js

@@ -15,6 +15,7 @@ export default function RelativeStack(content, props = {}) {
     }
     PositionStack.call(this, content, props);
     this.$description.position = 'relative';
+    this.aria = {};
 }
 
 BaseComponent.extends(RelativeStack, PositionStack);

package/src/components/stacks/Stack.js

@@ -36,6 +36,7 @@ export default function Stack(content, props = {}) {
         reverse: false,
         props,
     };
+    this.aria = {};
 }
 
 BaseComponent.extends(Stack);

package/src/components/stacks/VStack.js

@@ -18,6 +18,7 @@ export default function VStack(content, props = {}) {
 
     this.$description.orientation = 'vertical';
     this.$description.alignment = 'leading';
+    this.aria = {};
 }
 BaseComponent.extends(VStack, Stack);
 

package/src/components/stepper/Stepper.js

@@ -50,6 +50,7 @@ export default function Stepper(props = {}) {
         position: 'bottom',
         props,
     };
+    this.aria = { 'role': 'list' };
 
     this.$element = null;
 }

package/src/components/stepper/StepperStep.js

@@ -47,6 +47,7 @@ export default function StepperStep(label, props = {}) {
         isVisible: $(true),
         props,
     };
+    this.aria = { 'role': 'listitem', 'tabindex': '0' };
 }
 
 BaseComponent.extends(StepperStep);

package/src/components/switch/Switch.js

@@ -43,6 +43,7 @@ export default function Switch(props = {}) {
         innerOnLabel: null,
         innerOffLabel: null,
     };
+    this.aria = { 'role': 'switch' };
 }
 
 BaseComponent.extends(Switch);

package/src/components/table/DataTable.js

@@ -115,6 +115,7 @@ export default function DataTable(props = {}) {
         isExpandedIcon: null,
         isNotExpandedIcon: null,
     };
+    this.aria = { 'role': 'table' };
 }
 
 BaseComponent.extends(DataTable);

package/src/components/table/SimpleTable.js

@@ -28,6 +28,7 @@ export default function SimpleTable(props = {}) {
         headerProps: null,
         props,
     };
+    this.aria = { 'role': 'table' };
 }
 
 BaseComponent.extends(SimpleTable);

package/src/components/tabs/Tabs.js

@@ -47,6 +47,7 @@ export default function Tabs(props = {}) {
         renderPlusButton: null,
         props,
     };
+    this.aria = { 'role': 'tablist' };
 }
 
 BaseComponent.extends(Tabs);

package/src/components/toast/Toast.js

@@ -45,6 +45,7 @@ export default function Toast(content, props = {}) {
         render: null,
         props,
     };
+    this.aria = { 'role': 'status', 'aria-live': 'polite' };
 }
 
 BaseComponent.extends(Toast);

package/src/components/tooltip/Tooltip.js

@@ -47,6 +47,7 @@ export default function Tooltip(content, props = {}) {
         updatePositionOn: null,
         props,
     };
+    this.aria = { 'role': 'tooltip' };
 }
 
 BaseComponent.extends(Tooltip);

package/src/core/data/MemoryManager.js

@@ -23,7 +23,12 @@ const MemoryManager = (function() {
             $observables.delete(id);
         },
         getObservableById(id) {
-            return $observables.get(id)?.deref();
+            const observable = $observables.get(id);
+            if(!observable) {
+                $observables.delete(id);
+                return null;
+            }
+            return observable.deref();
         },
         cleanup() {
             for (const [_, weakObservableRef] of $observables) {