@fluentui/web-components 3.0.0-beta.85 → 3.0.0-beta.86

package/dist/esm/tree/tree.js

@@ -1,28 +1,10 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { isHTMLElement, keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyEnter, keyHome, keySpace, } from '@microsoft/fast-web-utilities';
-import { TreeItem } from '../tree-item/index.js';
-import { isTreeItem, TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options';
-export class Tree extends FASTElement {
+import { attr } from '@microsoft/fast-element';
+import { TreeItemAppearance, TreeItemSize } from '../tree-item/tree-item.options';
+import { BaseTree } from './tree.base';
+export class Tree extends BaseTree {
     constructor() {
-        super();
-        /**
-         * The currently selected tree item
-         * @public
-         */
-        this.currentSelected = null;
-        /**
-         * The tree item that is designated to be in the tab queue.
-         *
-         * @internal
-         */
-        this.currentFocused = null;
-        /**
-         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-         *
-         * @internal
-         */
-        this.elementInternals = this.attachInternals();
+        super(...arguments);
         /**
          * The size of the tree item element
          * @public
@@ -35,8 +17,6 @@ export class Tree extends FASTElement {
          * HTML Attribute: appearance
          */
         this.appearance = TreeItemAppearance.subtle;
-        this.childTreeItems = [];
-        this.elementInternals.role = 'tree';
     }
     sizeChanged() {
         this.updateSizeAndAppearance();
@@ -44,9 +24,13 @@ export class Tree extends FASTElement {
     appearanceChanged() {
         this.updateSizeAndAppearance();
     }
+    /**
+     * child tree items supered change event
+     * @internal
+     */
     childTreeItemsChanged() {
+        super.childTreeItemsChanged();
         this.updateSizeAndAppearance();
-        this.updateCurrentSelected();
     }
     /**
      * 1. Update the child items' size based on the tree's size
@@ -57,218 +41,15 @@ export class Tree extends FASTElement {
             return;
         }
         this.childTreeItems.forEach(item => {
-            if (!isTreeItem(item)) {
-                return;
-            }
             item.size = this.size;
             item.appearance = this.appearance;
         });
     }
-    /**
-     * Updates current selected when slottedTreeItems changes
-     */
-    updateCurrentSelected() {
-        // force single selection
-        // defaults to first one found
-        const selectedItem = this.querySelector(`[aria-selected='true']`);
-        this.currentSelected = selectedItem;
-        // invalidate the current focused item if it is no longer valid
-        if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-            this.currentFocused = this.getValidFocusableItem();
-        }
-    }
-    /**
-     * KeyDown handler
-     *
-     *  @internal
-     */
-    keydownHandler(e) {
-        if (e.defaultPrevented) {
-            return;
-        }
-        const item = e.target;
-        if (!isTreeItem(item) || this.childTreeItems.length < 1) {
-            return true;
-        }
-        const elements = this.getVisibleNodes();
-        switch (e.key) {
-            case keyHome: {
-                if (elements.length) {
-                    elements[0].focus();
-                }
-                return;
-            }
-            case keyEnd: {
-                if (elements.length) {
-                    elements[elements.length - 1].focus();
-                }
-                return;
-            }
-            case keyArrowLeft: {
-                if (item?.childTreeItems?.length && item.expanded) {
-                    item.expanded = false;
-                }
-                else if (isTreeItem(item.parentElement)) {
-                    item.parentElement.focus();
-                }
-                return;
-            }
-            case keyArrowRight: {
-                if (item?.childTreeItems?.length) {
-                    if (!item.expanded) {
-                        item.expanded = true;
-                    }
-                    else {
-                        this.focusNextNode(1, item);
-                    }
-                }
-                return;
-            }
-            case keyArrowDown: {
-                this.focusNextNode(1, item);
-                return;
-            }
-            case keyArrowUp: {
-                this.focusNextNode(-1, item);
-                return;
-            }
-            case keyEnter: {
-                // In single-select trees where selection does not follow focus (see note below),
-                // the default action is typically to select the focused node.
-                this.clickHandler(e);
-                return;
-            }
-            case keySpace: {
-                item.toggleSelection();
-                return;
-            }
-        }
-        // don't prevent default if we took no action
-        return true;
-    }
-    /**
-     * Handle focus events
-     *
-     * @internal
-     */
-    focusHandler(e) {
-        if (this.childTreeItems.length < 1) {
-            // no child items, nothing to do
-            return;
-        }
-        if (e.target === this) {
-            if (this.currentFocused === null) {
-                this.currentFocused = this.getValidFocusableItem();
-            }
-            if (this.currentFocused !== null) {
-                this.currentFocused.focus();
-            }
-            return;
-        }
-        if (this.contains(e.target)) {
-            this.setAttribute('tabindex', '-1');
-            this.currentFocused = e.target;
-        }
-    }
-    /**
-     * Handle blur events
-     *
-     * @internal
-     */
-    blurHandler(e) {
-        if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-            this.setAttribute('tabindex', '0');
-        }
-    }
-    /**
-     * Handles click events bubbling up
-     *
-     *  @internal
-     */
-    clickHandler(e) {
-        if (e.defaultPrevented) {
-            // handled, do nothing
-            return;
-        }
-        if (!isTreeItem(e.target)) {
-            // not a tree item, ignore
-            // return true, do not prevent default
-            return true;
-        }
-        const item = e.target;
-        item.toggleExpansion();
-        item.toggleSelection();
-    }
-    /**
-     * Handles the selected-changed events bubbling up
-     * from child tree items
-     *
-     *  @internal
-     */
-    changeHandler(e) {
-        if (e.defaultPrevented) {
-            return;
-        }
-        if (!isTreeItem(e.target)) {
-            return true;
-        }
-        const item = e.target;
-        if (item.selected) {
-            // Deselect the prevously selected item
-            if (this.currentSelected && this.currentSelected !== item && this.currentSelected instanceof TreeItem) {
-                this.currentSelected.selected = false;
-            }
-            // New selected item
-            this.currentSelected = item;
-        }
-        else if (!item.selected && this.currentSelected === item) {
-            // Selected item deselected
-            this.currentSelected = null;
-        }
-    }
-    /**
-     * checks if there are any nested tree items
-     */
-    getValidFocusableItem() {
-        const elements = this.getVisibleNodes();
-        // default to selected element if there is one
-        let focusIndex = elements.findIndex(el => el.selected);
-        if (focusIndex === -1) {
-            // otherwise first focusable tree item
-            focusIndex = elements.findIndex(el => el instanceof TreeItem);
-        }
-        if (focusIndex !== -1) {
-            return elements[focusIndex];
-        }
-        return null;
-    }
-    getVisibleNodes() {
-        return Array.from(this.querySelectorAll('*')).filter(node => isTreeItem(node) && node.offsetParent !== null);
-    }
-    /**
-     * Move focus to a tree item based on its offset from the provided item
-     */
-    focusNextNode(delta, item) {
-        const visibleNodes = this.getVisibleNodes();
-        if (!visibleNodes.length) {
-            return;
-        }
-        const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-        if (isHTMLElement(focusItem)) {
-            focusItem.focus();
-        }
-    }
 }
-__decorate([
-    observable
-], Tree.prototype, "currentSelected", void 0);
 __decorate([
     attr
 ], Tree.prototype, "size", void 0);
 __decorate([
     attr
 ], Tree.prototype, "appearance", void 0);
-__decorate([
-    observable
-], Tree.prototype, "childTreeItems", void 0);
 //# sourceMappingURL=tree.js.map

package/dist/esm/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/tree/tree.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/tree/tree.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,OAAO,IAAK,SAAQ,QAAQ;IAAlC;;QACE;;;;WAIG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAK/C;;;;WAIG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IA4BpE,CAAC;IAtCS,WAAW;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IASO,iBAAiB;QACvB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,qBAAqB;QAC1B,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,uBAAuB;QAC5B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChC,IAAiB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnC,IAAiB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AAvCQ;IADN,IAAI;kCAC0C;AAWxC;IADN,IAAI;wCAC6D"}

package/dist/esm/tree/tree.template.js

@@ -1,4 +1,5 @@
-import { children, elements, html } from '@microsoft/fast-element';
+import { children, html } from '@microsoft/fast-element';
+import { isTreeItem } from '../tree-item/tree-item.options';
 export const template = html `
   <template
     tabindex="0"
@@ -9,7 +10,7 @@ export const template = html `
     @change="${(x, c) => x.changeHandler(c.event)}"
     ${children({
     property: 'childTreeItems',
-    filter: elements(),
+    filter: node => isTreeItem(node),
 })}
   >
     <slot></slot>

package/dist/esm/tree/tree.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;MAC3C,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;;;CAIL,CAAC"}
+{"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;MAC3C,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;;;;CAIL,CAAC"}

package/dist/esm/tree-item/index.js

@@ -1,3 +1,4 @@
+export { BaseTreeItem } from './tree-item.base.js';
 export { TreeItem } from './tree-item.js';
 export { template as TreeItemTemplate } from './tree-item.template.js';
 export { styles as TreeItemStyles } from './tree-item.styles.js';

package/dist/esm/tree-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/tree-item/tree-item.base.js

@@ -0,0 +1,165 @@
+import { __decorate } from "tslib";
+import { attr, css, FASTElement, observable } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+import { isTreeItem } from './tree-item.options.js';
+export class BaseTreeItem extends FASTElement {
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * When true, the control will be appear expanded by user interaction.
+         * @public
+         * HTML Attribute: `expanded`
+         */
+        this.expanded = false;
+        /**
+         * When true, the control will appear selected by user interaction.
+         * @public
+         * @remarks
+         * HTML Attribute: selected
+         */
+        this.selected = false;
+        /**
+         * When true, the control has no child tree items
+         * @public
+         * HTML Attribute: empty
+         */
+        this.empty = false;
+        this.childTreeItems = [];
+        this.elementInternals.role = 'treeitem';
+    }
+    /**
+     * Handles changes to the expanded attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @public
+     */
+    expandedChanged(prev, next) {
+        toggleState(this.elementInternals, 'expanded', next);
+        if (this.childTreeItems && this.childTreeItems.length > 0) {
+            this.elementInternals.ariaExpanded = next ? 'true' : 'false';
+        }
+    }
+    /**
+     * Handles changes to the selected attribute
+     * @param prev - the previous state
+     * @param next - the next state
+     *
+     * @internal
+     */
+    selectedChanged(prev, next) {
+        this.$emit('change');
+        toggleState(this.elementInternals, 'selected', next);
+        this.elementInternals.ariaSelected = next ? 'true' : 'false';
+    }
+    dataIndentChanged(prev, next) {
+        if (this.styles !== undefined) {
+            this.$fastController.removeStyles(this.styles);
+        }
+        this.styles = css `
+      :host {
+        --indent: ${next};
+      }
+    `;
+        this.$fastController.addStyles(this.styles);
+    }
+    /**
+     * Handles changes to the child tree items
+     *
+     * @public
+     */
+    childTreeItemsChanged() {
+        this.empty = this.childTreeItems?.length === 0;
+        this.updateChildTreeItems();
+    }
+    /**
+     * Updates the childrens indent
+     *
+     * @public
+     */
+    updateChildTreeItems() {
+        if (!this.childTreeItems?.length) {
+            return;
+        }
+        this.childTreeItems.forEach(item => {
+            this.setIndent(item);
+        });
+    }
+    /**
+     * Sets the indent for each item
+     */
+    setIndent(item) {
+        const indent = this.dataIndent ?? 0;
+        item.dataIndent = indent + 1;
+    }
+    /**
+     * Handle focus events
+     *
+     * @public
+     */
+    focusHandler(e) {
+        if (e.target === this ||
+            // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
+            // so users can shift+tab to navigate to the tree-item from its child focusable element.
+            this.contains(e.target)) {
+            this.setAttribute('tabindex', '0');
+        }
+    }
+    /**
+     * Handle blur events
+     *
+     * @public
+     */
+    blurHandler(e) {
+        if (e.target === this) {
+            this.setAttribute('tabindex', '-1');
+        }
+    }
+    /**
+     * Toggle the expansion state of the tree item
+     *
+     * @public
+     */
+    toggleExpansion() {
+        if (this.childTreeItems?.length) {
+            this.expanded = !this.expanded;
+        }
+    }
+    /**
+     * Toggle the single selection state of the tree item
+     *
+     * @public
+     */
+    toggleSelection() {
+        this.selected = !this.selected;
+    }
+    /**
+     * Whether the tree is nested
+     * @internal
+     */
+    get isNestedItem() {
+        return isTreeItem(this.parentElement);
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseTreeItem.prototype, "expanded", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseTreeItem.prototype, "selected", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseTreeItem.prototype, "empty", void 0);
+__decorate([
+    attr({ attribute: 'data-indent' })
+], BaseTreeItem.prototype, "dataIndent", void 0);
+__decorate([
+    observable
+], BaseTreeItem.prototype, "childTreeItems", void 0);
+//# sourceMappingURL=tree-item.base.js.map

package/dist/esm/tree-item/tree-item.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}