import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import Text from '../Text';
import Flex from '../Flex';
import { useTestIds } from '../../hooks';
import { withTestIds } from '../../utils';
import { getMetaListTestIds } from './MetaList.test-ids';
export const StyledMetaList = styled.ul(({ wrapItems }) => {
    return css `
    list-style: none;
    overflow: hidden;

    ${!wrapItems &&
        css `
      white-space: nowrap;
    `}
  `;
});
export const StyledMetaListItem = styled.li(({ wrapItems }) => {
    return css `
    min-width: 0;
    display: inline-block;

    ${wrapItems
        ? css `
          overflow-wrap: break-word;
        `
        : css `
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        `}

    &[role='separator'] {
      -webkit-user-select: none;
      user-select: none;
    }
  `;
});
const MetaList = forwardRef(function MetaList({ testId, items, wrapItems = true, ...restProps }, ref) {
    const testIds = useTestIds(testId, getMetaListTestIds);
    const roleAttrValue = items.length <= 1 ? 'none' : undefined;
    return (_jsx(Flex, { "data-testid": testIds.root, ...restProps, as: StyledMetaList, role: roleAttrValue, container: { colGap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }, wrapItems: wrapItems, ref: ref, children: items.flatMap((item, i, arr) => item
            ? [
                _jsx(Text, { as: StyledMetaListItem, variant: 'secondary', role: roleAttrValue, wrapItems: wrapItems, children: item }, `${i + 0}`)
            ].concat(i !== arr.length - 1
                ? [
                    _jsx(Text, { as: StyledMetaListItem, "aria-hidden": true, variant: 'secondary', children: "\u2022" }, `${i + 0}-sep`)
                ]
                : [])
            : []) }));
});
export default withTestIds(MetaList, getMetaListTestIds);
//# sourceMappingURL=MetaList.js.map