@vimeo/iris/components/Tabs/Tabs.esm.js

Vimeo Design System

import { b as __rest, _ as __read, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useState, useLayoutEffect, cloneElement } from 'react';
import { Nav, Indicator } from './Tabs.style.esm.js';
import { Panel } from './Tabs.minors.esm.js';
import { NavItem } from './NavItem.esm.js';
import { withIris } from '../../utils/HOCs/withIris.esm.js';
import 'styled-components';
import 'polished';
import '../../color/colors.esm.js';
import '../Button/Button.esm.js';
import '../Button/Button.style.esm.js';
import '../Button/Button.config.esm.js';
import '../Button/FeaturedIcon.esm.js';
import '../../themes/index.esm.js';
import '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';
import '../LoaderCircular/LoaderCircular.esm.js';
import '../LoaderCircular/LoaderCircular.style.esm.js';
import '../../utils/hooks/useDeprecate.esm.js';
import '../../utils/general/mergeReactRefs.esm.js';
import '../../utils/css.esm.js';

var Tabs = withIris(TabsComponent);
Tabs.Panel = Panel;
function TabsComponent(_a) {
    var children = _a.children, forwardRef = _a.forwardRef, _b = _a.format, format = _b === void 0 ? 'soft' : _b, _c = _a.variant, variant = _c === void 0 ? 'minimalTransparent' : _c, _d = _a.pill, pill = _d === void 0 ? false : _d, props = __rest(_a, ["children", "forwardRef", "format", "variant", "pill"]);
    var _e = __read(useState(-1), 2), activeTab = _e[0], activeTabSet = _e[1];
    useLayoutEffect(function () {
        var active = children
            .map(function (_a, i) {
            var active = _a.props.active;
            return active && i;
        })
            .filter(function (i) { return typeof i === 'number' && i >= 0; });
        if (active.length === 0)
            return activeTabSet(0);
        if (active.length === 1)
            return activeTabSet(active[0]);
        var lastActive = active[active.length - 1];
        errorMessage(active, lastActive);
        activeTabSet(lastActive);
    }, [children]);
    function onKeyUp(_a) {
        var key = _a.key;
        var length = children.length;
        var next = activeTab === length - 1 ? 0 : activeTab + 1;
        var prev = activeTab === 0 ? length - 1 : activeTab - 1;
        if (key === 'ArrowRight')
            activeTabSet(next);
        if (key === 'ArrowLeft')
            activeTabSet(prev);
    }
    var childrenNavItems = children.map(function (_a, i) {
        var props = _a.props;
        return (React__default.createElement("li", { key: i, onClick: function () { return activeTabSet(i); }, "data-id": props.dataId, style: { flex: '1 0 0' } },
            React__default.createElement(NavItem, { onKeyUp: onKeyUp, format: format, index: i, label: props.label, selected: activeTab === i, variant: variant, pill: pill })));
    });
    var childrenPanels = children.map(function (child, i) {
        return activeTab === i &&
            cloneElement(child, { id: "#tab-".concat(i), key: i });
    });
    return (React__default.createElement("div", __assign({ ref: forwardRef }, props),
        React__default.createElement(Nav, { variant: variant, pill: pill }, childrenNavItems),
        variant !== 'inlay' && (React__default.createElement(Indicator, { width: children.length, position: activeTab })),
        childrenPanels));
}
var irisError = function (message) {
    return console.error("@vimeo/iris:", message, "\n\n");
};
var errorMessage = function (active, lastActive) {
    return irisError("Multiple tabs were specified as the intial active tab! Tabs: [".concat(active.toString(), "]. Using last 'active' tab: ").concat(lastActive, "."));
};

export { Tabs };