lightning-base-components 1.27.5-alpha → 1.28.4-alpha

package/src/lightning/tabBar/tabBar.ts

@@ -1,635 +0,0 @@
-import labelOverflowMore from '@salesforce/label/LightningTabs.overflowMore';
-import labelOverflowMoreAlternativeText from '@salesforce/label/LightningTabs.overflowMoreAlternativeText';
-import labelOverflowMoreTitle from '@salesforce/label/LightningTabs.overflowMoreTitle';
-import labelErrorStateAlternativeText from '@salesforce/label/LightningTabs.errorStateAlternativeText';
-
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import { classSet } from 'lightning/utils';
-import { reflectAttribute } from 'lightning/utilsPrivate';
-import { calculateOverflow } from 'lightning/overflowLibrary';
-import { LightningResizeObserver } from 'lightning/resizeObserver';
-import { handleKeyDownOnTabList } from './keyboard';
-import AriaObserver from 'lightning/ariaObserver';
-
-// TODO: Use common type from the input file once it is merged to dev
-interface I18nLabels {
-    more: string;
-    moreAlternativeText: string;
-    moreTitle: string;
-    errorStateAlternativeText: string;
-}
-
-interface TabHeaderInput {
-    label: string;
-    title?: string;
-    value: string | number;
-    node?: HTMLElement;
-    domId?: string;
-    iconName?: string;
-    iconAlternativeText?: string;
-    endIconName?: string;
-    endIconAlternativeText?: string;
-    showErrorIndicator?: boolean;
-}
-
-interface TabData {
-    label: string;
-    title: string;
-    linkId: string;
-    node?: HTMLElement;
-    domId?: string;
-    value: string;
-    class: string;
-    linkClass: string;
-    tabIndex: number;
-    ariaSelected: string | boolean;
-    contentId: string;
-    visible: boolean;
-    iconName?: string;
-    iconAlternativeText?: string;
-    endIconName?: string;
-    endIconAlternativeText?: string;
-    showErrorIndicator?: boolean;
-    targetSelectionName: string;
-    width?: number;
-    hasFocus?: boolean;
-}
-
-interface TabClassOptions {
-    selected?: boolean;
-    hasFocus?: boolean;
-}
-
-interface SelectEventDetail {
-    value: string;
-    label: string;
-}
-
-interface SelectTabOptions {
-    hasFocus?: boolean;
-}
-
-const i18n: I18nLabels = {
-    more: labelOverflowMore,
-    moreAlternativeText: labelOverflowMoreAlternativeText,
-    moreTitle: labelOverflowMoreTitle,
-    errorStateAlternativeText: labelErrorStateAlternativeText,
-};
-
-const RECOMPUTE_OVERFLOW_THRESHOLD_PX = 30;
-const TARGET_SELECTION_NAME_SUFFIX = 'Tab';
-
-export default class LightningTabBar extends LightningShadowBaseClass {
-    @api disableOverflow: boolean = false;
-
-    @api ariaLabel: string;
-
-    @track _allTabs: TabData[] = [];
-    @track _hasOverflow: boolean = false;
-
-    @track _variant: string;
-
-    @track _queueSynchronizeA11: boolean = false;
-
-    @track _tabHeaders: TabHeaderInput[] = [];
-
-    @track _selectedTab: TabData | undefined;
-    _connected: boolean;
-    _resizeObserver: LightningResizeObserver | undefined;
-    _containerWidthWhenLastResized: number | undefined;
-    _ariaLabelledBy: string;
-    ariaObserver: AriaObserver | undefined;
-
-    connectedCallback(): void {
-        super.connectedCallback();
-        this._connected = true;
-        if (this.overflowSupported) {
-            this._queueOverflow();
-        }
-        if (!import.meta.env.SSR) {
-            this.ariaObserver = new AriaObserver(this);
-        }
-    }
-
-    renderedCallback(): void {
-        if (this.overflowSupported && !this._resizeObserver) {
-            this._resizeObserver = this._setupResizeObserver();
-        }
-
-        if (this._queueSynchronizeA11) {
-            this._synchronizeA11y();
-            this._queueSynchronizeA11 = false;
-        }
-
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
-
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            new CustomEvent('privatetablinkregister', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-                detail: {
-                    tabLinks: this.tabLinks,
-                },
-            })
-        );
-    }
-
-    get tabLinks(): NodeListOf<HTMLAnchorElement> | null {
-        return !import.meta.env.SSR
-            ? this.template.querySelectorAll(`a[role="tab"]`)
-            : null;
-    }
-
-    disconnectedCallback(): void {
-        this._connected = false;
-        if (this._resizeObserver) {
-            this._resizeObserver.disconnect();
-        }
-
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
-    }
-
-    overflowFocused: boolean = false;
-
-    reflectOverflowFocusState(e: FocusEvent): void {
-        this.overflowFocused = e.type === 'focus';
-    }
-
-    @api
-    get variant(): string {
-        return this._variant;
-    }
-
-    set variant(value: string) {
-        if (this._connected && value === 'vertical') {
-            if (this._resizeObserver) {
-                this._resizeObserver.disconnect();
-                // If a resize observer exists, there was an overflow previously,
-                // so make all tabs visible
-                this._allTabs.forEach((tab) => {
-                    tab.visible = true;
-                });
-            }
-        }
-        this._variant = value;
-        reflectAttribute(this, 'variant', this._variant);
-    }
-
-    @api
-    get tabHeaders(): TabHeaderInput[] {
-        return this._tabHeaders;
-    }
-
-    // @ts-expect-error: TODO: fix this -> A 'set' accessor parameter cannot have an initializer
-    set tabHeaders(tabHeaders: TabHeaderInput[] = []) {
-        this._tabHeaders = tabHeaders;
-        const allTabs: TabData[] = tabHeaders.map((tab) => {
-            const classNames = this._tabClass({});
-            const linkClassNames = this.computedLinkClass;
-            return {
-                label: tab.label,
-                title: tab.title || tab.label,
-                linkId: tab.value + '__item',
-                node: tab.node,
-                domId: tab.domId,
-                value: String(tab.value),
-                class: classNames,
-                linkClass: linkClassNames,
-                tabIndex: -1,
-                ariaSelected: false,
-                contentId: '',
-                visible: true,
-                iconName: tab.iconName,
-                iconAlternativeText: tab.iconAlternativeText,
-                endIconName: tab.endIconName,
-                endIconAlternativeText: tab.endIconAlternativeText,
-                showErrorIndicator: tab.showErrorIndicator,
-                targetSelectionName: tab.value
-                    ? encodeURIComponent(tab.value) +
-                      TARGET_SELECTION_NAME_SUFFIX
-                    : '',
-            };
-        });
-
-        let selectedTab = allTabs[0];
-        if (this._selectedTab) {
-            selectedTab = allTabs.find(
-                (tab) => tab.value === this._selectedTab.value
-            );
-            if (!selectedTab) {
-                selectedTab = allTabs[0];
-            }
-        }
-        if (selectedTab) {
-            this._selectedTab = selectedTab;
-            selectedTab.class = this._tabClass({ selected: true });
-            selectedTab.ariaSelected = 'true';
-            selectedTab.tabIndex = 0;
-        }
-        this._allTabs = allTabs;
-
-        this._queueSynchronizeA11 = true;
-
-        if (!import.meta.env.SSR && this._connected && this.overflowSupported) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            requestAnimationFrame(this._queueOverflow.bind(this));
-        }
-    }
-
-    @api
-    selectTabByValue(tabValue: string): void {
-        this._selectTab(tabValue);
-    }
-
-    @api
-    focus(): void {
-        if (!this._selectedTab) {
-            return;
-        }
-        const tab = this.template.querySelector(
-            `a[data-tab-value="${this._selectedTab.value}"]`
-        ) as HTMLAnchorElement;
-        if (tab) {
-            tab.focus();
-        }
-    }
-
-    connectAriaLabelledBy(): void {
-        if (this.ariaObserver) {
-            this.ariaObserver.connect({
-                targetSelector: 'ul',
-                attribute: 'aria-labelledby',
-                relatedNodeIds: this._ariaLabelledBy,
-            });
-        }
-    }
-
-    @api
-    get ariaLabelledBy(): string {
-        return this._ariaLabelledBy;
-    }
-
-    set ariaLabelledBy(references: string) {
-        this._ariaLabelledBy = references;
-        this.connectAriaLabelledBy();
-    }
-
-    get overflowSupported(): boolean {
-        return this._variant !== 'vertical' && !this.disableOverflow;
-    }
-
-    get isVerticalVariant(): boolean {
-        return this._variant === 'vertical';
-    }
-
-    get computedLinkClass(): string {
-        const isScopedVariant = this._variant === 'scoped';
-        const isVerticalVariant = this.isVerticalVariant;
-
-        return classSet()
-            .add({
-                'slds-tabs_default__link':
-                    !isScopedVariant && !isVerticalVariant,
-                'slds-tabs_scoped__link': isScopedVariant,
-                'slds-vertical-tabs__link': isVerticalVariant,
-            })
-            .toString();
-    }
-
-    get computedOverflowVisibility(): string {
-        return this._hasOverflow ? '' : 'visibility: hidden;';
-    }
-
-    get i18n(): I18nLabels {
-        return i18n;
-    }
-
-    get _visibleTabs(): TabData[] {
-        return this._allTabs.filter((tab) => tab.visible);
-    }
-
-    get computedAriaOrientation(): string | null {
-        return this.isVerticalVariant ? 'vertical' : null;
-    }
-
-    get computedListClass(): string {
-        const isScoped = this._variant === 'scoped';
-        const isVertical = this.isVerticalVariant;
-        return classSet()
-            .add({
-                'slds-tabs_scoped__nav': isScoped,
-                'slds-vertical-tabs__nav': isVertical,
-                'slds-tabs_default__nav': !isScoped && !isVertical,
-            })
-            .toString();
-    }
-
-    get computedLeftIconClass(): string {
-        return this.isVerticalVariant
-            ? 'slds-vertical-tabs__left-icon'
-            : 'slds-tabs__left-icon';
-    }
-
-    get computedRightIconClass(): string {
-        return this.isVerticalVariant
-            ? 'slds-vertical-tabs__right-icon'
-            : 'slds-tabs__right-icon';
-    }
-
-    get computedOverflowClass(): string {
-        const tabStyle = this._variant === 'scoped' ? 'scoped' : 'default';
-        return `slds-tabs_${tabStyle}__item slds-tabs_${tabStyle}__overflow-button`;
-    }
-
-    handleOverflowSelect(event: CustomEvent<{ value: string }>): void {
-        event.stopPropagation();
-        this._selectTabAndFireSelectEvent(event.detail.value);
-
-        if (this._hasOverflow) {
-            this._recomputeOverflow();
-        }
-    }
-
-    handleTabClick(event: MouseEvent): void {
-        // Don't navigate to href. Since href is set to "javascript:void(0)", if event default action is not prevented
-        // the browser attempts to navigate to the url provided, thus raising a CSP violation that doesn't allow
-        // javascript: in urls.
-        event.preventDefault();
-
-        const clickedTabValue = (event.target as HTMLElement).getAttribute(
-            'data-tab-value'
-        );
-        this._selectTabAndFireSelectEvent(clickedTabValue, { hasFocus: true });
-    }
-
-    _findTabByValue(tabValue: string): TabData | undefined {
-        return this._allTabs.find((tab) => tab.value === tabValue);
-    }
-
-    _selectTabAndFireSelectEvent(
-        tabValue: string,
-        options?: SelectTabOptions
-    ): void {
-        this._selectTab(tabValue, options);
-
-        const tab = this._findTabByValue(tabValue);
-
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            new CustomEvent<SelectEventDetail>('select', {
-                detail: {
-                    value: tab.value,
-                    label: tab.label,
-                },
-            })
-        );
-    }
-
-    _selectTab(tabValue: string, options: SelectTabOptions = {}): void {
-        const tab = this._findTabByValue(tabValue);
-
-        if (!tab) {
-            return;
-        }
-
-        if (this._selectedTab) {
-            if (this._selectedTab.value === tabValue) {
-                // already selected, do nothing
-                return;
-            }
-
-            this._selectedTab.hasFocus = false;
-            this._selectedTab.ariaSelected = 'false';
-            this._selectedTab.class = this._tabClass({});
-            this._selectedTab.tabIndex = -1;
-        }
-        tab.hasFocus = true;
-        tab.ariaSelected = 'true';
-        tab.class = this._tabClass({
-            selected: true,
-            hasFocus: options.hasFocus,
-        });
-        tab.tabIndex = 0;
-
-        this._selectedTab = tab;
-        if (this._hasOverflow) {
-            this._queueOverflow();
-        }
-    }
-
-    handleBlur(event: FocusEvent): void {
-        const tabValue = (event.target as HTMLElement).getAttribute(
-            'data-tab-value'
-        );
-        const tab = this._findTabByValue(tabValue);
-        if (tab) {
-            tab.class = this._tabClass({
-                selected: this._selectedTab.value === tab.value,
-                hasFocus: false,
-            });
-        }
-    }
-
-    handleFocus(event: FocusEvent): void {
-        const tabValue = (event.target as HTMLElement).getAttribute(
-            'data-tab-value'
-        );
-        const tab = this._findTabByValue(tabValue);
-
-        tab.class = this._tabClass({
-            selected: this._selectedTab.value === tab.value,
-            hasFocus: true,
-        });
-    }
-
-    handleKeyDown(event: KeyboardEvent): void {
-        let currentFocusedIndex = 0;
-
-        if (this._hasOverflow && this.overflowFocused) {
-            currentFocusedIndex = this._visibleTabs.length;
-        } else {
-            currentFocusedIndex = this._visibleTabs.findIndex(
-                (tab) => tab.value === this._selectedTab?.value
-            );
-        }
-        handleKeyDownOnTabList(event, currentFocusedIndex, {
-            isVerticalOrientation: () => this.isVerticalVariant,
-            // add + 1 to account for the "more" tab
-            totalTabs: () =>
-                this._visibleTabs.length + (this._hasOverflow ? 1 : 0),
-            selectTabIndex: (index) => {
-                const tab = this._visibleTabs[index];
-                // TODO: Use type from buttonMenu once it is migrated to typescript
-                if (index === this._visibleTabs.length) {
-                    (
-                        this.template.querySelector(
-                            'lightning-button-menu'
-                        ) as HTMLElement
-                    ).focus();
-                } else {
-                    this._selectTabAndFireSelectEvent(tab.value, {
-                        hasFocus: true,
-                    });
-                    (
-                        this.template.querySelector(
-                            `a[data-tab-value="${tab.value}"]`
-                        ) as HTMLAnchorElement
-                    ).focus();
-                }
-            },
-        });
-    }
-
-    _tabClass({ selected = false, hasFocus = false }: TabClassOptions): string {
-        const isScopedVariant = this._variant === 'scoped';
-        const isVertical = this.isVerticalVariant;
-        return classSet()
-            .add({
-                'slds-tabs_default__item': !isScopedVariant && !isVertical,
-                'slds-tabs_scoped__item': isScopedVariant,
-                'slds-vertical-tabs__nav-item': isVertical,
-                'slds-is-active': selected,
-                'slds-has-focus': hasFocus,
-            })
-            .toString();
-    }
-
-    _synchronizeA11y(): void {
-        const tabLinks = this.template.querySelectorAll('a[role="tab"]');
-
-        tabLinks.forEach((tabLink) => {
-            const tabData = this._allTabs.find(
-                (tab) => tabLink.getAttribute('data-tab-value') === tab.value
-            );
-
-            tabLink.setAttribute('id', tabData.linkId);
-            const ariaObserverConfig = {
-                targetNode: tabLink,
-                attribute: 'aria-controls',
-            } as {
-                targetNode: HTMLElement;
-                attribute: string;
-                relatedNodes?: HTMLElement;
-                relatedNodeIds?: string;
-            };
-            if (tabData.node) {
-                ariaObserverConfig.relatedNodes = tabData.node;
-            } else {
-                ariaObserverConfig.relatedNodeIds = tabData.domId;
-            }
-            this.ariaObserver.connect(ariaObserverConfig);
-        });
-
-        this.connectAriaLabelledBy();
-    }
-
-    _setupResizeObserver(): LightningResizeObserver {
-        const resizeObserver = new LightningResizeObserver(() => {
-            if (this._connected) {
-                // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-                const newWidth = this.getBoundingClientRect().width;
-
-                // dont do anything if the resize is within a threshold of containerwidth +/- 30 possibly because of scroller appearance etc
-                if (
-                    this._containerWidthWhenLastResized &&
-                    newWidth <
-                        this._containerWidthWhenLastResized +
-                            RECOMPUTE_OVERFLOW_THRESHOLD_PX &&
-                    newWidth >
-                        this._containerWidthWhenLastResized -
-                            RECOMPUTE_OVERFLOW_THRESHOLD_PX
-                ) {
-                    return;
-                }
-                // set the containerWidthWhenLastResized to the newWidth only when resize happens
-                // so that next time it is compared against this accumulated value and resize happens
-                this._containerWidthWhenLastResized = newWidth;
-                this._queueOverflow();
-            }
-        });
-        resizeObserver.observe(this.template.querySelector('[role="tablist"]'));
-        return resizeObserver;
-    }
-
-    _queueOverflow(): void {
-        this._allTabs.forEach((tab) => {
-            tab.visible = true;
-        });
-        if (!import.meta.env.SSR) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            requestAnimationFrame(this._recomputeOverflow.bind(this));
-        }
-    }
-
-    _recomputeOverflow(): void {
-        if (!this._connected) {
-            return;
-        }
-
-        // keep buffer = RECOMPUTE_OVERFLOW_THRESHOLD_PX so that we dont run into edge cases where recompute doesnt happen in the window
-        const containerWidth =
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-            this.getBoundingClientRect().width -
-            RECOMPUTE_OVERFLOW_THRESHOLD_PX;
-
-        const tabHeaderElements = this.template.querySelectorAll('[data-tab]');
-        for (let i = 0; i < tabHeaderElements.length; i++) {
-            const tabHeaderElement = tabHeaderElements[i];
-            const tabValue = tabHeaderElement.getAttribute('data-tab-value');
-
-            const tab = this._findTabByValue(tabValue);
-            let tabWidth = tabHeaderElement.getBoundingClientRect().width;
-
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-            const computedStyle = getComputedStyle(tabHeaderElement);
-            if (computedStyle) {
-                tabWidth +=
-                    parseFloat(computedStyle.marginLeft) +
-                    parseFloat(computedStyle.marginRight);
-            }
-            tab.width = tabWidth;
-        }
-        const overflowElement = this.template.querySelector('[data-overflow]');
-
-        const overflowData = calculateOverflow({
-            items: this._allTabs,
-            activeItem: this._selectedTab,
-            containerWidth,
-            overflowWidth: overflowElement.getBoundingClientRect().width,
-        });
-
-        overflowData.overflowItems.forEach((overflowItem) => {
-            if (overflowItem.visible) {
-                overflowItem.visible = false;
-            }
-        });
-        this._hasOverflow =
-            overflowData.overflowItems && overflowData.overflowItems.length > 0;
-
-        overflowData.visibleItems.forEach((overflowItem) => {
-            if (!overflowItem.visible) {
-                overflowItem.visible = true;
-            }
-        });
-
-        this._queueSynchronizeA11 = true;
-    }
-
-    get targetReveals(): string {
-        const hiddenTargets: string[] = [];
-        this._allTabs.forEach((tab) => {
-            if (!tab.visible && tab.targetSelectionName) {
-                hiddenTargets.push(tab.targetSelectionName);
-            }
-        });
-        return hiddenTargets.join(',');
-    }
-}