@coreui/react/dist/cjs/components/tabs/CTabList.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');
var getNextActiveElement = require('../../utils/getNextActiveElement.js');

var CTabList = React.forwardRef(function (_a, ref) {
    var _b;
    var children = _a.children, className = _a.className, layout = _a.layout, variant = _a.variant, rest = tslib_es6.__rest(_a, ["children", "className", "layout", "variant"]);
    var tabListRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, tabListRef);
    var handleKeydown = function (event) {
        if (tabListRef.current !== null &&
            (event.key === 'ArrowDown' ||
                event.key === 'ArrowUp' ||
                event.key === 'ArrowLeft' ||
                event.key === 'ArrowRight' ||
                event.key === 'Home' ||
                event.key === 'End')) {
            event.preventDefault();
            var target = event.target;
            // eslint-disable-next-line unicorn/prefer-spread
            var items = Array.from(tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'));
            var nextActiveElement = void 0;
            if (event.key === 'Home' || event.key === 'End') {
                nextActiveElement = event.key === 'End' ? items.at(-1) : items[0];
            }
            else {
                nextActiveElement = getNextActiveElement.default(items, target, event.key === 'ArrowDown' || event.key === 'ArrowRight', true);
            }
            if (nextActiveElement) {
                nextActiveElement.focus({ preventScroll: true });
            }
        }
    };
    return (React.createElement("div", tslib_es6.__assign({ className: index.default('nav', variant === 'enclosed-pills' && 'nav-enclosed', (_b = {},
            _b["nav-".concat(layout)] = layout,
            _b["nav-".concat(variant)] = variant,
            _b), className), role: "tablist", onKeyDown: handleKeydown, ref: forkedRef }, rest), children));
});
CTabList.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    layout: PropTypes.oneOf(['fill', 'justified']),
    variant: PropTypes.oneOf([
        'enclosed',
        'enclosed-pills',
        'pills',
        'tabs',
        'underline',
        'underline-border',
    ]),
};
CTabList.displayName = 'CTabList';

exports.CTabList = CTabList;
//# sourceMappingURL=CTabList.js.map