@fluentui/web-components 3.0.0-rc.2 → 3.0.0-rc.20

package/dist/esm/tablist/tablist.base.d.ts

@@ -19,13 +19,7 @@ export declare class BaseTablist extends FASTElement {
      * HTML Attribute: disabled.
      */
     disabled: boolean;
-    /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
-     *
-     * @internal
-     */
+    /** @internal */
     protected disabledChanged(prev: boolean, next: boolean): void;
     /**
      * The orientation
@@ -34,9 +28,6 @@ export declare class BaseTablist extends FASTElement {
      * HTML Attribute: orientation
      */
     orientation: TablistOrientation;
-    /**
-     * @internal
-     */
     protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
     /**
      * The id of the active tab
@@ -46,59 +37,37 @@ export declare class BaseTablist extends FASTElement {
      * HTML Attribute: activeid
      */
     activeid: string;
-    /**
-     * @internal
-     */
+    /** @internal */
     protected activeidChanged(oldValue: string, newValue: string): void;
     /**
      * Content slotted in the tab slot.
      * @internal
      */
     slottedTabs: Node[];
-    /**
-     * Updates the tabs property when content in the tabs slot changes.
-     * @internal
-     */
-    slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
-    /**
-     * @internal
-     */
+    /** @internal */
+    protected slottedTabsChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /** @internal */
     tabs: Tab[];
-    /**
-     * @internal
-     */
-    protected tabsChanged(): void;
+    /** @internal */
+    protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
     /**
      * A reference to the active tab
      * @public
      */
     activetab: Tab;
-    private prevActiveTabIndex;
-    private activeTabIndex;
-    private tabIds;
     private tabPanelMap;
     private change;
-    private getActiveIndex;
     /**
      * Function that is invoked whenever the selected tab or the tab collection changes.
-     *
-     * @public
-     */
-    protected setTabs(): void;
-    private getTabIds;
-    private setComponent;
-    private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
-    /**
-     * The adjust method for FASTTabs
-     * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
      */
-    adjust(adjustment: number): void;
-    private activateTabByIndex;
-    private focusTab;
+    protected setTabs({ connectToPanel, forceDisabled }?: {
+        connectToPanel?: boolean | undefined;
+        forceDisabled?: boolean | undefined;
+    }): void;
+    /** @internal */
+    handleFocusIn(event: FocusEvent): void;
+    private changeTab;
+    constructor();
     /**
      * @internal
      */

package/dist/esm/tablist/tablist.base.js

@@ -1,159 +1,76 @@
 import { __decorate } from "tslib";
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyHome, uniqueId, wrapInBounds, } from '@microsoft/fast-web-utilities';
-import { getDirection } from '../utils/index.js';
-import { swapStates, toggleState } from '../utils/element-internals.js';
-import { isFocusableElement } from '../utils/focusable-element.js';
+import { uniqueId } from '../utils/unique-id.js';
 import { isTab } from '../tab/tab.options.js';
+import { swapStates, toggleState } from '../utils/element-internals.js';
+import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { TablistOrientation } from './tablist.options.js';
 /**
  * A Tablist element that wraps a collection of tab elements
  * @public
  */
 export class BaseTablist extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-         *
-         * @internal
-         */
-        this.elementInternals = this.attachInternals();
-        /**
-         * Used for disabling all click and keyboard events for the tabs, child tab elements.
-         * @public
-         * @remarks
-         * HTML Attribute: disabled.
-         */
-        this.disabled = false;
-        /**
-         * The orientation
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = TablistOrientation.horizontal;
-        this.prevActiveTabIndex = 0;
-        this.activeTabIndex = 0;
-        this.tabPanelMap = new WeakMap();
-        this.change = () => {
-            this.$emit('change', this.activetab);
-        };
-        this.handleTabClick = (event) => {
-            const selectedTab = event.currentTarget;
-            if (selectedTab.nodeType === Node.ELEMENT_NODE && isFocusableElement(selectedTab)) {
-                this.prevActiveTabIndex = this.activeTabIndex;
-                this.activeTabIndex = this.tabs.indexOf(selectedTab);
-                this.setComponent();
-            }
-        };
-        this.handleTabKeyDown = (event) => {
-            const dir = getDirection(this);
-            switch (event.key) {
-                case keyArrowLeft:
-                    if (!this.isHorizontal()) {
-                        return;
-                    }
-                    event.preventDefault();
-                    this.adjust(dir === 'ltr' ? -1 : 1);
-                    break;
-                case keyArrowRight:
-                    if (!this.isHorizontal()) {
-                        return;
-                    }
-                    event.preventDefault();
-                    this.adjust(dir === 'ltr' ? 1 : -1);
-                    break;
-                case keyArrowUp:
-                    if (this.isHorizontal()) {
-                        return;
-                    }
-                    event.preventDefault();
-                    this.adjust(-1);
-                    break;
-                case keyArrowDown:
-                    if (this.isHorizontal()) {
-                        return;
-                    }
-                    event.preventDefault();
-                    this.adjust(1);
-                    break;
-                case keyHome:
-                    event.preventDefault();
-                    this.adjust(-this.activeTabIndex);
-                    break;
-                case keyEnd:
-                    event.preventDefault();
-                    this.adjust(this.tabs.filter(t => isFocusableElement(t)).length - this.activeTabIndex - 1);
-                    break;
-            }
-        };
-    }
-    /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
-     *
-     * @internal
-     */
+    /** @internal */
     disabledChanged(prev, next) {
-        toggleState(this.elementInternals, 'disabled', next);
-        if (this.$fastController.isConnected) {
-            this.setTabs();
+        if (this.elementInternals) {
+            toggleState(this.elementInternals, 'disabled', next);
         }
+        this.setTabs({ forceDisabled: true });
     }
-    /**
-     * @internal
-     */
     orientationChanged(prev, next) {
-        this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
-        swapStates(this.elementInternals, prev, next, TablistOrientation);
-        if (this.$fastController.isConnected) {
-            this.setTabs();
+        if (this.elementInternals) {
+            this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
+            swapStates(this.elementInternals, prev, next, TablistOrientation);
         }
+        this.setTabs();
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     activeidChanged(oldValue, newValue) {
-        if (this.$fastController.isConnected && this.tabs.length > 0) {
-            this.prevActiveTabIndex = this.tabs.findIndex((item) => item.id === oldValue);
-            this.setTabs();
-            if (oldValue) {
-                const prevActiveTab = this.tabs[this.prevActiveTabIndex];
-                const prevActivePanel = this.tabPanelMap.get(prevActiveTab);
-                if (prevActivePanel) {
-                    prevActivePanel.hidden = true;
-                }
-            }
-            if (newValue && this.activetab) {
-                const activePanel = this.tabPanelMap.get(this.activetab);
-                if (activePanel) {
-                    activePanel.hidden = false;
-                }
-            }
-            if (oldValue !== newValue) {
-                this.change();
-            }
+        if (this.tabs?.length > 0) {
+            this.changeTab(oldValue, newValue);
         }
     }
-    /**
-     * Updates the tabs property when content in the tabs slot changes.
-     * @internal
-     */
+    /** @internal */
     slottedTabsChanged(prev, next) {
         this.tabs = next?.filter(tab => isTab(tab)) ?? [];
     }
+    /** @internal */
+    tabsChanged(prev, next) {
+        if (this.tabs?.length > 0) {
+            this.setTabs({ connectToPanel: true });
+        }
+    }
     /**
-     * @internal
+     * Function that is invoked whenever the selected tab or the tab collection changes.
      */
-    tabsChanged() {
-        if (this.$fastController.isConnected && this.tabs.length > 0) {
-            this.tabIds = this.getTabIds();
-            this.setTabs();
-            for (const tab of this.tabs) {
+    setTabs({ connectToPanel = false, forceDisabled = false } = {}) {
+        if (!this.tabs) {
+            return;
+        }
+        const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
+        const rootNode = this.getRootNode();
+        let firstEnabledTabId = '';
+        for (const tab of this.tabs) {
+            if (tab.slot !== 'tab') {
+                continue;
+            }
+            tab.id ||= uniqueId('tab-');
+            if (forceDisabled) {
+                tab.disabled = this.disabled;
+            }
+            else {
+                tab.disabled = tab.disabled || this.disabled;
+            }
+            if (!firstEnabledTabId && !tab.disabled) {
+                firstEnabledTabId = tab.id;
+            }
+            const isSelected = this.activeid === tab.id;
+            tab.toggleAttribute('focusgroupstart', isSelected);
+            tab.setAttribute('aria-selected', isSelected.toString());
+            // Only set the data-hasIndent attribute if the tab has a start slot and the orientation is vertical
+            tab.toggleAttribute('data-hasIndent', hasStartSlot && this.orientation === TablistOrientation.vertical);
+            if (connectToPanel) {
                 const ariaControls = tab.getAttribute('aria-controls') ?? '';
-                const rootNode = this.getRootNode();
                 const panel = rootNode.getElementById(ariaControls);
                 if (ariaControls && panel) {
                     panel.role ??= 'tabpanel';
@@ -162,96 +79,84 @@ export class BaseTablist extends FASTElement {
                 }
             }
         }
-    }
-    getActiveIndex() {
-        const id = this.activeid;
-        if (id !== undefined) {
-            return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
+        if (!this.disabled) {
+            if (this.activeid) {
+                this.changeTab(undefined, this.activeid);
+            }
+            else if (firstEnabledTabId) {
+                this.activeid = firstEnabledTabId;
+            }
         }
-        else {
-            return 0;
+    }
+    /** @internal */
+    handleFocusIn(event) {
+        const target = event.target;
+        if (!isTab(target) || target.disabled) {
+            return;
         }
+        this.activeid = target.id;
     }
-    /**
-     * Function that is invoked whenever the selected tab or the tab collection changes.
-     *
-     * @public
-     */
-    setTabs() {
-        this.activeTabIndex = this.getActiveIndex();
-        const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
-        this.tabs.forEach((tab, index) => {
-            if (tab.slot === 'tab') {
-                const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
-                const tabId = this.tabIds[index];
-                console.log('disabled', this.disabled);
-                if (!tab.disabled) {
-                    this.disabled ? tab.setAttribute('aria-disabled', 'true') : tab.removeAttribute('aria-disabled');
-                }
-                tab.setAttribute('id', tabId);
-                tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
-                tab.addEventListener('click', this.handleTabClick);
-                tab.addEventListener('keydown', this.handleTabKeyDown);
-                tab.setAttribute('tabindex', isActiveTab && !this.disabled ? '0' : '-1');
-                if (isActiveTab) {
-                    this.activetab = tab;
-                    this.activeid = tabId;
-                }
-                // Only set the data-hasIndent attribute if the tab has a start slot and the orientation is vertical
-                if (hasStartSlot && this.orientation === TablistOrientation.vertical) {
-                    tab.setAttribute('data-hasIndent', '');
-                }
+    changeTab(oldId, newId) {
+        const rootNode = this.getRootNode();
+        const prevTab = oldId ? rootNode.getElementById(oldId) : null;
+        const nextTab = rootNode.getElementById(newId);
+        if (!isTab(nextTab) || !this.contains(nextTab)) {
+            return;
+        }
+        if (prevTab) {
+            prevTab.setAttribute('aria-selected', 'false');
+            const prevPanel = this.tabPanelMap.get(prevTab);
+            if (prevPanel) {
+                prevPanel.hidden = true;
             }
-        });
-    }
-    getTabIds() {
-        return this.tabs.map((tab) => {
-            return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
-        });
-    }
-    setComponent() {
-        if (this.activeTabIndex !== this.prevActiveTabIndex) {
-            this.activeid = this.tabIds[this.activeTabIndex];
-            this.focusTab();
         }
-    }
-    isHorizontal() {
-        return this.orientation === TablistOrientation.horizontal;
-    }
-    /**
-     * The adjust method for FASTTabs
-     * @public
-     * @remarks
-     * This method allows the active index to be adjusted by numerical increments
-     */
-    adjust(adjustment) {
-        const focusableTabs = this.tabs.filter(t => isFocusableElement(t));
-        const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-        const nextTabIndex = wrapInBounds(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
-        // the index of the next focusable tab within the context of all available tabs
-        const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
-        if (nextIndex > -1) {
-            this.activateTabByIndex(this.tabs, nextIndex);
+        nextTab.setAttribute('aria-selected', 'true');
+        const nextPanel = this.tabPanelMap.get(nextTab);
+        if (nextPanel) {
+            nextPanel.hidden = false;
         }
+        this.activetab = nextTab;
+        this.change();
     }
-    activateTabByIndex(group, index) {
-        const tab = group[index];
-        this.activetab = tab;
-        this.prevActiveTabIndex = this.activeTabIndex;
-        this.activeTabIndex = index;
-        tab.focus();
-        this.setComponent();
-    }
-    focusTab() {
-        this.tabs[this.activeTabIndex].focus();
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * Used for disabling all click and keyboard events for the tabs, child tab elements.
+         * @public
+         * @remarks
+         * HTML Attribute: disabled.
+         */
+        this.disabled = false;
+        /**
+         * The orientation
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = TablistOrientation.horizontal;
+        /** @internal */
+        this.tabs = [];
+        this.tabPanelMap = new WeakMap();
+        this.change = () => {
+            this.$emit('change', this.activetab);
+        };
+        this.elementInternals.role = 'tablist';
+        this.elementInternals.ariaOrientation = this.orientation ?? TablistOrientation.horizontal;
     }
     /**
      * @internal
      */
     connectedCallback() {
         super.connectedCallback();
-        this.tabIds = this.getTabIds();
-        this.activeTabIndex = this.getActiveIndex();
+        waitForConnectedDescendants(this, () => {
+            this.setTabs();
+        }, { shallow: true });
     }
 }
 __decorate([

package/dist/esm/tablist/tablist.base.js.map

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

package/dist/esm/tablist/tablist.d.ts

@@ -1,33 +1,14 @@
+import type { Tab } from '../tab/tab.js';
 import { BaseTablist } from './tablist.base.js';
-import { TablistAppearance, TablistSize } from './tablist.options.js';
+import { TablistAppearance, type TablistSize } from './tablist.options.js';
 /**
- * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * A Tablist component.
  *
  * @tag fluent-tablist
  *
  * @public
  */
 export declare class Tablist extends BaseTablist {
-    /**
-     * activeTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    private activeTabData;
-    /**
-     * previousActiveTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    private previousActiveTabData;
-    /**
-     * activeTabOffset
-     * Used to position the active indicator for animations of the active indicator on active tab changes.
-     */
-    private activeTabOffset;
-    /**
-     * activeTabScale
-     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
-     */
-    private activeTabScale;
     /**
      * appearance
      * There are two modes of appearance: transparent and subtle.
@@ -39,56 +20,8 @@ export declare class Tablist extends BaseTablist {
      * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
      */
     size?: TablistSize;
-    /**
-     * calculateAnimationProperties
-     *
-     * Recalculates the active tab offset and scale.
-     * These values will be applied to css variables that control the tab active indicator position animations
-     */
-    private calculateAnimationProperties;
-    /**
-     * getSelectedTabPosition - gets the x or y coordinates of the tab
-     */
-    private getTabPosition;
-    /**
-     * getSelectedTabScale - gets the scale of the tab
-     */
-    private getTabScale;
-    /**
-     * Calculates and applies updated values to CSS variables.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private applyUpdatedCSSValues;
-    /**
-     * Runs through all the operations required for setting the tab active indicator to its starting location, ending
-     * location, and applying the animated css class to the tab.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    private animationLoop;
-    /**
-     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-     * tab indicator.
-     *
-     * @internal
-     */
-    private setTabData;
-    /**
-     * Sets the css variables for the active tab indicator.
-     * @internal
-     */
-    private setAnimationVars;
-    /**
-     * Initiates the active tab indicator animation loop when activeid changes.
-     * @param oldValue - the previous tabId
-     * @param newValue - the new tabId
-     */
-    activeidChanged(oldValue: string, newValue: string): void;
-    /**
-     * Initiates the active tab indicator animation loop when tabs change.
-     */
-    tabsChanged(): void;
+    private fg?;
+    private fgItems?;
+    disconnectedCallback(): void;
+    tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
 }

package/dist/esm/tablist/tablist.definition.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './tablist.options.js';
 import { Tablist } from './tablist.js';
 import { template } from './tablist.template.js';
 import { styles } from './tablist.styles.js';
@@ -8,7 +8,7 @@ import { styles } from './tablist.styles.js';
  * HTML Element: \<fluent-tablist\>
  */
 export const definition = Tablist.compose({
-    name: `${FluentDesignSystem.prefix}-tablist`,
+    name: tagName,
     template,
     styles,
 });

package/dist/esm/tablist/tablist.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"tablist.definition.js","sourceRoot":"","sources":["../../../src/tablist/tablist.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"tablist.definition.js","sourceRoot":"","sources":["../../../src/tablist/tablist.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,OAAO;IACb,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}