@fluentui/web-components 3.0.0-rc.15 → 3.0.0-rc.16

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

@@ -1,10 +1,8 @@
 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 { uniqueId } from '@microsoft/fast-web-utilities';
 import { isTab } from '../tab/tab.options.js';
 import { swapStates, toggleState } from '../utils/element-internals.js';
-import { isFocusableElement } from '../utils/focusable-element.js';
-import { getDirection } from '../utils/index.js';
 import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { TablistOrientation } from './tablist.options.js';
 /**
@@ -12,20 +10,13 @@ import { TablistOrientation } from './tablist.options.js';
  * @public
  */
 export class BaseTablist extends FASTElement {
-    /**
-     * Handles disabled changes
-     * @param prev - previous value
-     * @param next - next value
-     *
-     * @internal
-     */
+    /** @internal */
     disabledChanged(prev, next) {
-        toggleState(this.elementInternals, 'disabled', next);
-        this.setTabs();
+        if (this.elementInternals) {
+            toggleState(this.elementInternals, 'disabled', next);
+        }
+        this.setTabs({ forceDisabled: true });
     }
-    /**
-     * @internal
-     */
     orientationChanged(prev, next) {
         if (this.elementInternals) {
             this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
@@ -33,54 +24,53 @@ export class BaseTablist extends FASTElement {
         }
         this.setTabs();
     }
-    /**
-     * @internal
-     */
+    /** @internal */
     activeidChanged(oldValue, newValue) {
         if (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();
-            }
+            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(prev, next) {
-        if (prev?.length) {
-            prev.forEach((tab) => {
-                tab.removeEventListener('click', this.handleTabClick);
-                tab.removeEventListener('keydown', this.handleTabKeyDown);
-            });
+    setTabs({ connectToPanel = false, forceDisabled = false } = {}) {
+        if (!this.tabs) {
+            return;
         }
-        if (this.tabs.length > 0) {
-            this.tabIds = this.getTabIds();
-            this.setTabs();
-            for (const tab of this.tabs) {
+        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';
@@ -89,87 +79,44 @@ 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];
-                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;
         }
-    }
-    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();
+        this.activetab = nextTab;
+        this.change();
     }
     constructor() {
         super();
@@ -193,67 +140,12 @@ export class BaseTablist extends FASTElement {
          * HTML Attribute: orientation
          */
         this.orientation = TablistOrientation.horizontal;
-        this.prevActiveTabIndex = 0;
-        this.activeTabIndex = 0;
+        /** @internal */
+        this.tabs = [];
         this.tabPanelMap = new WeakMap();
         this.change = () => {
             this.$emit('change', this.activetab);
         };
-        this.handleTabClick = (event) => {
-            const selectedTab = event.currentTarget;
-            if (selectedTab.disabled || this.disabled) {
-                return;
-            }
-            if (selectedTab.nodeType === Node.ELEMENT_NODE && isFocusableElement(selectedTab)) {
-                this.prevActiveTabIndex = this.activeTabIndex;
-                this.activeTabIndex = this.tabs.indexOf(selectedTab);
-                this.setComponent();
-            }
-        };
-        this.handleTabKeyDown = (event) => {
-            if (this.disabled) {
-                return;
-            }
-            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;
-            }
-        };
         this.elementInternals.role = 'tablist';
         this.elementInternals.ariaOrientation = this.orientation ?? TablistOrientation.horizontal;
     }
@@ -263,7 +155,6 @@ export class BaseTablist extends FASTElement {
     connectedCallback() {
         super.connectedCallback();
         waitForConnectedDescendants(this, () => {
-            this.tabIds = this.getTabIds();
             this.setTabs();
         }, { shallow: true });
     }

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,34 +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.
@@ -40,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.
-     */
+    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"}

package/dist/esm/tablist/tablist.js

@@ -1,9 +1,11 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseTablist } from './tablist.base.js';
-import { TablistAppearance, TablistOrientation } from './tablist.options.js';
+import { TablistAppearance } from './tablist.options.js';
 /**
- * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * A Tablist component.
  *
  * @tag fluent-tablist
  *
@@ -12,143 +14,31 @@ import { TablistAppearance, TablistOrientation } from './tablist.options.js';
 export class Tablist extends BaseTablist {
     constructor() {
         super(...arguments);
-        /**
-         * activeTabData
-         * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-         */
-        this.activeTabData = { x: 0, y: 0, height: 0, width: 0 };
-        /**
-         * previousActiveTabData
-         * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-         */
-        this.previousActiveTabData = { x: 0, y: 0, height: 0, width: 0 };
-        /**
-         * activeTabOffset
-         * Used to position the active indicator for animations of the active indicator on active tab changes.
-         */
-        this.activeTabOffset = 0;
-        /**
-         * activeTabScale
-         * Used to scale the tab active indicator up or down as animations of the active indicator occur.
-         */
-        this.activeTabScale = 1;
         /**
          * appearance
          * There are two modes of appearance: transparent and subtle.
          */
         this.appearance = TablistAppearance.transparent;
     }
-    /**
-     * calculateAnimationProperties
-     *
-     * Recalculates the active tab offset and scale.
-     * These values will be applied to css variables that control the tab active indicator position animations
-     */
-    calculateAnimationProperties(tab) {
-        this.activeTabOffset = this.getTabPosition(tab);
-        this.activeTabScale = this.getTabScale(tab);
-    }
-    /**
-     * getSelectedTabPosition - gets the x or y coordinates of the tab
-     */
-    getTabPosition(tab) {
-        if (this.orientation === TablistOrientation.horizontal) {
-            return this.previousActiveTabData.x - (tab.getBoundingClientRect().x - this.getBoundingClientRect().x);
-        }
-        else
-            return this.previousActiveTabData.y - (tab.getBoundingClientRect().y - this.getBoundingClientRect().y);
-    }
-    /**
-     * getSelectedTabScale - gets the scale of the tab
-     */
-    getTabScale(tab) {
-        if (this.orientation === TablistOrientation.horizontal) {
-            return this.previousActiveTabData.width / tab.getBoundingClientRect().width;
-        }
-        else
-            return this.previousActiveTabData.height / tab.getBoundingClientRect().height;
-    }
-    /**
-     * Calculates and applies updated values to CSS variables.
-     *
-     * @param tab - the tab element to apply the updated values to
-     * @internal
-     */
-    applyUpdatedCSSValues(tab) {
-        this.calculateAnimationProperties(tab);
-        this.setAnimationVars();
-    }
-    /**
-     * 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
-     */
-    animationLoop(tab) {
-        // remove the animated class so nothing animates yet
-        tab.setAttribute('data-animate', 'false');
-        // animation start - this applyUpdatedCSSValues sets the active indicator to the location of the previously selected tab
-        this.applyUpdatedCSSValues(tab);
-        // changing the previously active tab allows the applyUpdatedCSSValues method to calculate the correct end to the animation.
-        this.previousActiveTabData = this.activeTabData;
-        // calculate and apply updated css values for animation.
-        this.applyUpdatedCSSValues(tab);
-        // add the css class and active indicator will animate from the previous tab location to its tab location
-        tab.setAttribute('data-animate', 'true');
-    }
-    /**
-     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-     * tab indicator.
-     *
-     * @internal
-     */
-    setTabData() {
-        if (this.tabs && this.tabs.length > 0) {
-            const tabs = this.tabs;
-            const activeTab = this.activetab || tabs[0];
-            const activeRect = activeTab?.getBoundingClientRect();
-            const parentRect = this.getBoundingClientRect();
-            this.activeTabData = {
-                x: activeRect.x - parentRect.x,
-                y: activeRect.y - parentRect.y,
-                height: activeRect.height,
-                width: activeRect.width,
-            };
-            if (this.previousActiveTabData?.x !== this.activeTabData?.x &&
-                this.previousActiveTabData?.y !== this.activeTabData?.y) {
-                this.previousActiveTabData = this.activeTabData;
-            }
-        }
-    }
-    /**
-     * Sets the css variables for the active tab indicator.
-     * @internal
-     */
-    setAnimationVars() {
-        this.style.setProperty('--tabIndicatorOffset', `${this.activeTabOffset}px`);
-        this.style.setProperty('--tabIndicatorScale', `${this.activeTabScale}`);
+    disconnectedCallback() {
+        this.fg?.disconnect();
+        super.disconnectedCallback();
     }
-    /**
-     * Initiates the active tab indicator animation loop when activeid changes.
-     * @param oldValue - the previous tabId
-     * @param newValue - the new tabId
-     */
-    activeidChanged(oldValue, newValue) {
-        super.activeidChanged(oldValue, newValue);
-        this.setTabData();
-        if (this.activetab) {
-            this.animationLoop(this.activetab);
-        }
-    }
-    /**
-     * Initiates the active tab indicator animation loop when tabs change.
-     */
     tabsChanged(prev, next) {
         super.tabsChanged(prev, next);
-        this.setTabData();
-        if (this.activetab) {
-            this.animationLoop(this.activetab);
+        this.fgItems ??= new ArrayItemCollection(() => this.tabs?.filter(t => (t.getAttribute('aria-selected') === 'true' || !t.disabled) && !t.hidden) ?? [], () => this.activetab ?? null);
+        if (!this.fg) {
+            this.fg = new FocusGroup(this, this.fgItems, {
+                definition: {
+                    behavior: 'tablist',
+                    axis: undefined,
+                    memory: false,
+                    wrap: true,
+                },
+            });
+        }
+        else {
+            this.fg.update();
         }
     }
 }