ivt/dist/combobox/index.mjs

Ivt Components Library

import * as React from 'react';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import { C as ChevronsUpDown } from '../chunks/chevrons-up-down-BFiJwHit.mjs';
import { C as Check } from '../chunks/check-BBGTedl-.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-CsYW0nDm.mjs';
import { B as Button } from '../chunks/button-Co_1yLv6.mjs';
import { C as Command, b as CommandInput, c as CommandList, d as CommandEmpty, e as CommandGroup, f as CommandItem } from '../chunks/command-IckfUQsK.mjs';
import '../chunks/bundle-mjs-BYcyWisL.mjs';
import '../chunks/createLucideIcon-DLrNgMqk.mjs';
import '../chunks/index-Bl-WJHvp.mjs';
import '../chunks/index-1tQVI0Jh.mjs';
import '../chunks/index-DT8WgpCS.mjs';
import 'react/jsx-runtime';
import '../chunks/index-DUpRrJTH.mjs';
import '../chunks/index-DgKlJYZP.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import '../chunks/index-Cbm3--wc.mjs';
import '../chunks/index-DvCZGX3H.mjs';
import '../chunks/tslib.es6-DXUeYCTx.mjs';
import '../chunks/index-tkRL9Tft.mjs';
import '../chunks/index-DKOlG3mh.mjs';
import '../chunks/index-aLIsJMgt.mjs';
import '../chunks/index-DmY774z-.mjs';
import '../chunks/index-BTe1rv5Z.mjs';
import '../chunks/index-C6s8KI_8.mjs';
import '../chunks/index-D4FMFHi9.mjs';
import 'class-variance-authority';
import '../chunks/index-BRYGnp2Q.mjs';
import '../chunks/dialog-BkF50Tmo.mjs';
import '../chunks/x-BOMmTgZd.mjs';

const specialCharacterMap = [
    [
        "á",
        "a"
    ],
    [
        "à",
        "a"
    ],
    [
        "ã",
        "a"
    ],
    [
        "â",
        "a"
    ],
    [
        "é",
        "e"
    ],
    [
        "ê",
        "e"
    ],
    [
        "í",
        "i"
    ],
    [
        "ì",
        "i"
    ],
    [
        "ó",
        "o"
    ],
    [
        "ô",
        "o"
    ],
    [
        "õ",
        "o"
    ],
    [
        "ú",
        "u"
    ],
    [
        "ù",
        "u"
    ],
    [
        "ç",
        "c"
    ]
];
/**
 * Remove acentos e caracteres especiais, mantendo letras equivalentes.
 */ function removeSpecialCharacters(value) {
    let result = `${value}`.trim();
    for (const [char, replacement] of specialCharacterMap){
        result = result.split(char).join(replacement);
        result = result.split(char.toUpperCase()).join(replacement.toUpperCase());
    }
    return result;
}

function Combobox({ items, value, onValueChange, placeholder = "Selecione um item...", searchPlaceholder = "Busque um item...", emptyMessage = "Nenhum item encontrado.", widthClassName = "w-fit", className, groupHeading, normalizeSearch = true, disabled = false }) {
    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 handleSelect = (currentValue)=>{
        onValueChange(currentValue === value ? "" : currentValue);
        setTimeout(()=>setSearch(""), 150);
        setOpen(false);
    };
    return /*#__PURE__*/ React.createElement(Popover, {
        open: open,
        onOpenChange: setOpen
    }, /*#__PURE__*/ React.createElement(PopoverTrigger, {
        asChild: true
    }, /*#__PURE__*/ React.createElement(Button, {
        variant: "outline",
        role: "combobox",
        "aria-expanded": open,
        disabled: disabled,
        className: cn(widthClassName, "justify-between", className)
    }, value ? items.find((item)=>item.value === value)?.label ?? emptyMessage : placeholder, /*#__PURE__*/ React.createElement(ChevronsUpDown, {
        className: "ml-2 h-4 w-4 shrink-0 opacity-50"
    }))), /*#__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,
        className: "h-9",
        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 };
//# sourceMappingURL=index.mjs.map