@awsui/components-react/tabs/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React, { useState } from 'react';
import { getBaseProps } from '../internal/base-component';
import { fireNonCancelableEvent } from '../internal/events';
import Container from '../container';
import clsx from 'clsx';
import styles from './styles.css.js';
import { TabHeaderBar } from './tab-header-bar';
import { useControllable } from '../internal/hooks/use-controllable';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var lastGeneratedId = 0;
export var nextGeneratedId = function () { return "awsui-tabs-" + lastGeneratedId++ + "-" + Math.round(Math.random() * 10000); };
function firstEnabledTab(tabs) {
    var enabledTabs = tabs.filter(function (tab) { return !tab.disabled; });
    if (enabledTabs.length > 0) {
        return enabledTabs[0];
    }
    return null;
}
export default function Tabs(_a) {
    var _b, _c;
    var tabs = _a.tabs, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, onChange = _a.onChange, controlledTabId = _a.activeTabId, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby"]);
    useTelemetry('Tabs');
    var idNamespace = useState(function () { return nextGeneratedId(); })[0];
    var _e = useControllable(controlledTabId, onChange, (_c = (_b = firstEnabledTab(tabs)) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : '', {
        componentName: 'Tabs',
        controlledProp: 'activeTabId',
        changeHandler: 'onChange'
    }), activeTabId = _e[0], setActiveTabId = _e[1];
    var baseProps = getBaseProps(rest);
    var content = function () {
        var selectedTab = tabs.filter(function (tab) { return tab.id === activeTabId; })[0];
        var renderContent = function (tab) {
            var _a;
            var isContentActive = tab === selectedTab && !selectedTab.disabled && selectedTab.content;
            var classes = clsx((_a = {},
                _a[styles['tabs-content']] = true,
                _a[styles['tabs-content-active']] = isContentActive,
                _a[styles['tabs-content-inactive']] = !isContentActive,
                _a[styles['tabs-content--variant-default']] = variant === 'container',
                _a));
            var contentAttributes = {
                className: classes,
                role: 'tabpanel',
                id: idNamespace + "-" + tab.id + "-panel",
                key: idNamespace + "-" + tab.id + "-panel"
            };
            return React.createElement("div", __assign({}, contentAttributes), isContentActive && selectedTab.content);
        };
        return variant === 'container' ? (tabs.map(renderContent)) : (React.createElement("div", { className: styles['tabs-content-wrapper'] }, tabs.map(renderContent)));
    };
    var header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, onChange: function (changeDetail) {
            setActiveTabId(changeDetail.activeTabId);
            fireNonCancelableEvent(onChange, changeDetail);
        } }));
    if (variant === 'container') {
        return (React.createElement(Container, __assign({ header: header, disableHeaderPaddings: true }, baseProps), content()));
    }
    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.tabs) }),
        header,
        content()));
}