ivt/dist/chunks/ComboboxField-C8LG3Dfr.mjs

Ivt Components Library

import React__default from 'react';
import { c as cn } from './utils-05LlW3Cl.mjs';
import { C as ChevronsUpDown } from './chevrons-up-down-BFiJwHit.mjs';
import { C as Check } from './check-BBGTedl-.mjs';
import { X } from './x-BOMmTgZd.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from './popover-CsYW0nDm.mjs';
import { B as Button } from './button-Co_1yLv6.mjs';
import { C as Command, b as CommandInput, d as CommandEmpty, c as CommandList, e as CommandGroup, f as CommandItem } from './command-IckfUQsK.mjs';
import { B as Badge } from './badge-rV4HbE_R.mjs';

const ComboboxField = ({ items, value, onChange, placeholder, className, classNamePopover })=>{
    const [open, setOpen] = React__default.useState(false);
    const toggleValue = (item)=>{
        if (value.includes(item)) {
            onChange(value.filter((v)=>v !== item));
        } else {
            onChange([
                ...value,
                item
            ]);
        }
    };
    const uniqueItems = Array.from(new Set(items));
    return /*#__PURE__*/ React__default.createElement("div", {
        className: "flex flex-col gap-2"
    }, /*#__PURE__*/ React__default.createElement(Popover, {
        open: open,
        onOpenChange: setOpen
    }, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
        asChild: true
    }, /*#__PURE__*/ React__default.createElement(Button, {
        variant: "outline",
        "aria-expanded": open,
        className: cn("justify-between font-normal", className)
    }, value.length > 0 ? `${value.length} selecionado(s)` : placeholder ?? "Selecione", /*#__PURE__*/ React__default.createElement(ChevronsUpDown, {
        className: "ml-2 h-4 w-4 shrink-0 opacity-50"
    }))), /*#__PURE__*/ React__default.createElement(PopoverContent, {
        className: cn("p-0", classNamePopover)
    }, /*#__PURE__*/ React__default.createElement(Command, null, /*#__PURE__*/ React__default.createElement(CommandInput, {
        placeholder: "Filtrar..."
    }), /*#__PURE__*/ React__default.createElement(CommandEmpty, null, "Nenhuma opção encontrada."), /*#__PURE__*/ React__default.createElement(CommandList, {
        className: "max-h-60 overflow-y-auto"
    }, /*#__PURE__*/ React__default.createElement(CommandGroup, null, uniqueItems.map((item)=>/*#__PURE__*/ React__default.createElement(CommandItem, {
            key: item,
            value: item,
            onSelect: ()=>toggleValue(item),
            className: "cursor-pointer"
        }, /*#__PURE__*/ React__default.createElement(Check, {
            className: cn("mr-2 h-4 w-4", value.includes(item) ? "opacity-100" : "opacity-0")
        }), item))))))), value.length > 0 && /*#__PURE__*/ React__default.createElement("div", {
        className: "flex max-h-32 flex-wrap gap-2 overflow-auto"
    }, value.map((val)=>/*#__PURE__*/ React__default.createElement(Badge, {
            key: val,
            variant: "secondary",
            className: "flex h-6 w-fit items-center gap-1 px-2 py-1"
        }, val, /*#__PURE__*/ React__default.createElement(Button, {
            variant: "ghost",
            size: "sm",
            onClick: ()=>toggleValue(val),
            className: "h-5 w-5 p-0"
        }, /*#__PURE__*/ React__default.createElement(X, {
            className: "size-3"
        }))))));
};

export { ComboboxField as C };
//# sourceMappingURL=ComboboxField-C8LG3Dfr.mjs.map