ivt/dist/chunks/combobox-D9iqP8Dp.mjs

Ivt Components Library

import * as React from 'react';
import { c as cn } from './utils-BDcRwQMd.mjs';
import { r as removeSpecialCharacters } from './string-DRS4HkY8.mjs';
import { X } from './x-B6hDJA_l.mjs';
import { C as ChevronsUpDown } from './chevrons-up-down-CdBVNy4c.mjs';
import { C as Check } from './check-Ds358kZc.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from './popover-CdZgcLPo.mjs';
import { B as Button } from './button-CZpmCmNo.mjs';
import { c as TooltipProvider, T as Tooltip, a as TooltipTrigger, b as TooltipContent } from './tooltip-njN_ok-r.mjs';
import { S as Separator } from './separator-DYyhdAi6.mjs';
import { C as Command, b as CommandInput, c as CommandList, d as CommandEmpty, e as CommandGroup, f as CommandItem } from './command-o67hOCgH.mjs';

function Combobox({ id, items, value, onValueChange, placeholder = "Selecione um item...", searchPlaceholder = "Busque um item...", emptyMessage = "Nenhum item encontrado.", widthClassName = "w-fit", className, groupHeading, normalizeSearch = true, disabled = false, clearable = true }) {
    const [open, setOpen] = React.useState(false);
    const [search, setSearch] = React.useState("");
    const normalize = React.useCallback((text)=>normalizeSearch ? removeSpecialCharacters(text).toLowerCase() : text.toLowerCase(), [
        normalizeSearch
    ]);
    const filteredItems = React.useMemo(()=>{
        const normalizedSearch = normalize(search);
        const result = items.filter((item)=>{
            const normalizedLabel = normalize(item.label);
            const normalizedValue = normalize(item.value);
            return normalizedLabel.includes(normalizedSearch) || normalizedValue.includes(normalizedSearch);
        });
        return result;
    }, [
        items,
        search,
        normalize
    ]);
    const selectedItem = React.useMemo(()=>{
        return items.find((item)=>item.value === value);
    }, [
        items,
        value
    ]);
    const hasValue = !!selectedItem;
    const handleSelect = (currentValue)=>{
        onValueChange(currentValue === value ? "" : currentValue);
        setTimeout(()=>setSearch(""), 150);
        setOpen(false);
    };
    const handleClear = (e)=>{
        e.stopPropagation();
        onValueChange("");
    };
    return /*#__PURE__*/ React.createElement(Popover, {
        open: open,
        onOpenChange: setOpen
    }, /*#__PURE__*/ React.createElement(PopoverTrigger, {
        asChild: true
    }, /*#__PURE__*/ React.createElement(Button, {
        id: id,
        variant: "outline",
        role: "combobox",
        "aria-expanded": open,
        disabled: disabled,
        className: cn(widthClassName, "flex h-auto min-h-9 items-center justify-between rounded-md border bg-inherit px-3 py-2 hover:bg-inherit [&_svg]:pointer-events-auto gap-0", placeholder && !value && "text-muted-foreground hover:text-muted-foreground", className)
    }, /*#__PURE__*/ React.createElement("span", {
        className: cn("min-w-0 flex-1 truncate text-muted-foreground text-left", hasValue && "text-foreground")
    }, hasValue ? selectedItem.label : placeholder), /*#__PURE__*/ React.createElement("div", {
        className: "flex items-center justify-between"
    }, clearable && hasValue && !disabled ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TooltipProvider, null, /*#__PURE__*/ React.createElement(Tooltip, null, /*#__PURE__*/ React.createElement(TooltipTrigger, {
        asChild: true
    }, /*#__PURE__*/ React.createElement("div", {
        onClick: (event)=>{
            event.stopPropagation();
            handleClear(event);
        },
        className: "cursor-pointer"
    }, /*#__PURE__*/ React.createElement(X, {
        className: "text-muted-foreground h-4"
    }))), /*#__PURE__*/ React.createElement(TooltipContent, null, /*#__PURE__*/ React.createElement("span", {
        className: "text-xs"
    }, "Limpar seleção")))), /*#__PURE__*/ React.createElement(Separator, {
        orientation: "vertical",
        className: "flex h-full min-h-6"
    })) : null), /*#__PURE__*/ React.createElement(ChevronsUpDown, {
        className: "text-muted-foreground h-4 cursor-pointer"
    }))), /*#__PURE__*/ React.createElement(PopoverContent, {
        align: "start",
        className: cn(widthClassName, "p-0"),
        onOpenAutoFocus: (e)=>e.preventDefault()
    }, /*#__PURE__*/ React.createElement(Command, {
        shouldFilter: false
    }, /*#__PURE__*/ React.createElement(CommandInput, {
        placeholder: searchPlaceholder,
        value: search,
        onValueChange: setSearch
    }), /*#__PURE__*/ React.createElement(CommandList, null, filteredItems.length === 0 ? /*#__PURE__*/ React.createElement(CommandEmpty, null, emptyMessage) : /*#__PURE__*/ React.createElement(CommandGroup, {
        heading: groupHeading
    }, filteredItems.map((item)=>/*#__PURE__*/ React.createElement(CommandItem, {
            key: item.value,
            value: item.value,
            onSelect: ()=>handleSelect(item.value)
        }, item.label, /*#__PURE__*/ React.createElement(Check, {
            className: cn("ml-auto h-4 w-4", value === item.value ? "opacity-100" : "opacity-0")
        }))))))));
}

export { Combobox as C };
//# sourceMappingURL=combobox-D9iqP8Dp.mjs.map