@vectara/vectara-ui/lib/components/form/itemsInput/ItemsInput.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BiX } from "react-icons/bi";
import classNames from "classnames";
import { VuiIconButton } from "../../button/IconButton";
import { VuiFlexContainer } from "../../flex/FlexContainer";
import { VuiFlexItem } from "../../flex/FlexItem";
import { VuiIcon } from "../../icon/Icon";
import { forwardRef } from "react";
const VuiItemsInputComponent = (_a, ref) => {
    var { items, renderItem, onClearAll, className, onKeyDown, onClick, fullWidth } = _a, rest = __rest(_a, ["items", "renderItem", "onClearAll", "className", "onKeyDown", "onClick", "fullWidth"]);
    const classes = classNames("vuiItemsInput", {
        "vuiItemsInput--fullWidth": fullWidth
    }, className);
    return (_jsx("div", Object.assign({ className: classes, tabIndex: 0, onKeyDown: onKeyDown, onClick: onClick, ref: ref }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ className: "vuiTextArea", justifyContent: "spaceBetween", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs", wrap: true }, { children: items.map((item, ix) => (_jsx(VuiFlexItem, { children: renderItem(item) }, ix))) })) })), onClearAll && items.length > 0 && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove all", size: "xs", color: "neutral", onClick: (e) => {
                            e.stopPropagation();
                            onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
                        }, icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiX, {}) })) }) }))] })) })));
};
export const VuiItemsInput = forwardRef(VuiItemsInputComponent);