import React from 'react';
import TabItem from '../TabItem';
import withItemMaxWidth from '../WithMaxWidth';
import { st, classes } from '../../Tabs.st.css.js';
import { useTabNavigation } from '../../../common/useTabNavigation';
const TabItems = ({ activeId, type, width, onClick, itemMaxWidth, alignment, size, items, minWidth, scrollOnOverflow, }) => {
    const tabNavigationRef = useTabNavigation();
    return (React.createElement("div", { role: "tablist", "data-type": type, className: st(classes.itemsContainer, type && classes[type]), style: { minWidth }, ref: tabNavigationRef }, items.map((item) => (React.createElement(TabItem, { key: item.id, dataHook: item.dataHook, item: item, itemMaxWidth: itemMaxWidth, alignment: alignment, isActive: activeId === item.id, type: type, width: width, onItemClick: onClick, size: size, scrollOnOverflow: scrollOnOverflow })))));
};
export default withItemMaxWidth(TabItems);
//# sourceMappingURL=TabItems.js.map