lecom-ui 5.2.50 → 5.2.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Combobox/Combobox.js +127 -0
- package/dist/index.d.ts +20 -2
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Button } from '../Button/Button.js';
|
|
3
|
+
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
|
|
4
|
+
import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
|
|
5
|
+
import { cn } from '../../lib/utils.js';
|
|
6
|
+
import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
|
|
7
|
+
|
|
8
|
+
function Combobox({
|
|
9
|
+
options,
|
|
10
|
+
value,
|
|
11
|
+
onChange,
|
|
12
|
+
placeholder = "Selecione...",
|
|
13
|
+
disabled = false
|
|
14
|
+
}) {
|
|
15
|
+
const [open, setOpen] = React.useState(false);
|
|
16
|
+
const [search, setSearch] = React.useState("");
|
|
17
|
+
const filterOptions = React.useCallback(
|
|
18
|
+
(opts) => {
|
|
19
|
+
const searchLower = search.toLowerCase();
|
|
20
|
+
return opts.map((item) => {
|
|
21
|
+
if ("options" in item) {
|
|
22
|
+
const filtered = item.options.filter(
|
|
23
|
+
(opt) => opt.label.toLowerCase().includes(searchLower) || opt.value.toLowerCase().includes(searchLower)
|
|
24
|
+
);
|
|
25
|
+
if (filtered.length === 0) return null;
|
|
26
|
+
return { ...item, options: filtered };
|
|
27
|
+
} else {
|
|
28
|
+
if (item.label.toLowerCase().includes(searchLower) || item.value.toLowerCase().includes(searchLower)) {
|
|
29
|
+
return item;
|
|
30
|
+
}
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
}).filter(Boolean);
|
|
34
|
+
},
|
|
35
|
+
[search]
|
|
36
|
+
);
|
|
37
|
+
const filteredOptions = React.useMemo(() => {
|
|
38
|
+
if (!search) return options;
|
|
39
|
+
return filterOptions(options);
|
|
40
|
+
}, [options, search, filterOptions]);
|
|
41
|
+
return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
42
|
+
Button,
|
|
43
|
+
{
|
|
44
|
+
type: "button",
|
|
45
|
+
role: "combobox",
|
|
46
|
+
"aria-expanded": open,
|
|
47
|
+
className: cn(
|
|
48
|
+
"w-full h-10 bg-white border border-gray-300 rounded-md px-3 text-left shadow-sm flex items-center justify-between transition",
|
|
49
|
+
"text-black",
|
|
50
|
+
!value && "text-gray-400",
|
|
51
|
+
"hover:bg-gray-50",
|
|
52
|
+
disabled && "opacity-50 pointer-events-none",
|
|
53
|
+
"justify-between",
|
|
54
|
+
"focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-0",
|
|
55
|
+
"focus:bg-white active:bg-white focus-visible:bg-white",
|
|
56
|
+
"focus:text-black active:text-black focus-visible:text-black"
|
|
57
|
+
),
|
|
58
|
+
disabled
|
|
59
|
+
},
|
|
60
|
+
/* @__PURE__ */ React.createElement(
|
|
61
|
+
"span",
|
|
62
|
+
{
|
|
63
|
+
className: cn(
|
|
64
|
+
value ? "text-black" : "text-gray-400",
|
|
65
|
+
"font-normal"
|
|
66
|
+
)
|
|
67
|
+
},
|
|
68
|
+
value ? value.label : placeholder
|
|
69
|
+
),
|
|
70
|
+
open ? /* @__PURE__ */ React.createElement(ChevronUpIcon, { className: "ml-2 h-4 w-4 shrink-0 text-gray-400" }) : /* @__PURE__ */ React.createElement(ChevronDownIcon, { className: "ml-2 h-4 w-4 shrink-0 text-gray-400" })
|
|
71
|
+
)), /* @__PURE__ */ React.createElement(
|
|
72
|
+
PopoverContent,
|
|
73
|
+
{
|
|
74
|
+
className: cn(
|
|
75
|
+
"min-w-[var(--radix-popover-trigger-width)] max-w-[400px] p-0"
|
|
76
|
+
)
|
|
77
|
+
},
|
|
78
|
+
/* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
|
|
79
|
+
CommandInput,
|
|
80
|
+
{
|
|
81
|
+
placeholder: "Buscar...",
|
|
82
|
+
value: search,
|
|
83
|
+
onValueChange: setSearch
|
|
84
|
+
}
|
|
85
|
+
), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, "Nenhuma op\xE7\xE3o encontrada."), filteredOptions.map(
|
|
86
|
+
(item, idx) => "options" in item ? /* @__PURE__ */ React.createElement(CommandGroup, { key: item.label + idx, heading: item.label }, item.options.map((opt) => /* @__PURE__ */ React.createElement(
|
|
87
|
+
CommandItem,
|
|
88
|
+
{
|
|
89
|
+
key: opt.value,
|
|
90
|
+
value: opt.label + " " + opt.value,
|
|
91
|
+
onSelect: () => {
|
|
92
|
+
if (opt.disabled) return;
|
|
93
|
+
onChange(opt.value === value?.value ? null : opt);
|
|
94
|
+
setOpen(false);
|
|
95
|
+
},
|
|
96
|
+
className: cn(
|
|
97
|
+
value?.value === opt.value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
|
|
98
|
+
opt.disabled && "opacity-50 pointer-events-none",
|
|
99
|
+
"transition-colors"
|
|
100
|
+
),
|
|
101
|
+
"aria-disabled": opt.disabled
|
|
102
|
+
},
|
|
103
|
+
opt.label
|
|
104
|
+
))) : /* @__PURE__ */ React.createElement(
|
|
105
|
+
CommandItem,
|
|
106
|
+
{
|
|
107
|
+
key: item.value,
|
|
108
|
+
value: item.label + " " + item.value,
|
|
109
|
+
onSelect: () => {
|
|
110
|
+
if (item.disabled) return;
|
|
111
|
+
onChange(item.value === value?.value ? null : item);
|
|
112
|
+
setOpen(false);
|
|
113
|
+
},
|
|
114
|
+
className: cn(
|
|
115
|
+
value?.value === item.value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
|
|
116
|
+
item.disabled && "opacity-50 pointer-events-none",
|
|
117
|
+
"transition-colors"
|
|
118
|
+
),
|
|
119
|
+
"aria-disabled": item.disabled
|
|
120
|
+
},
|
|
121
|
+
item.label
|
|
122
|
+
)
|
|
123
|
+
)))
|
|
124
|
+
));
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export { Combobox };
|
package/dist/index.d.ts
CHANGED
|
@@ -1098,5 +1098,23 @@ declare const SheetFooter: {
|
|
|
1098
1098
|
declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1099
1099
|
declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1100
1100
|
|
|
1101
|
-
|
|
1102
|
-
|
|
1101
|
+
type ComboboxOption = {
|
|
1102
|
+
label: string;
|
|
1103
|
+
value: string;
|
|
1104
|
+
disabled?: boolean;
|
|
1105
|
+
};
|
|
1106
|
+
type ComboboxGroup = {
|
|
1107
|
+
label: string;
|
|
1108
|
+
options: ComboboxOption[];
|
|
1109
|
+
};
|
|
1110
|
+
type ComboboxProps = {
|
|
1111
|
+
options: (ComboboxOption | ComboboxGroup)[];
|
|
1112
|
+
value: ComboboxOption | null;
|
|
1113
|
+
onChange: (option: ComboboxOption | null) => void;
|
|
1114
|
+
placeholder?: string;
|
|
1115
|
+
disabled?: boolean;
|
|
1116
|
+
};
|
|
1117
|
+
declare function Combobox({ options, value, onChange, placeholder, disabled, }: ComboboxProps): React$1.JSX.Element;
|
|
1118
|
+
|
|
1119
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Combobox, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Spin, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
|
|
1120
|
+
export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxGroup, ComboboxOption, CustomStyles$1 as CustomStyles, DataTableProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, TableProps, TagItem, TagProps, TextColor, TextareaProps, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
|
package/dist/index.js
CHANGED
|
@@ -45,6 +45,7 @@ export { Textarea, textareaVariants } from './components/Textarea/Textarea.js';
|
|
|
45
45
|
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './components/Drawer/Drawer.js';
|
|
46
46
|
export { TagInput } from './components/TagInput/TagInput.js';
|
|
47
47
|
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from './components/Sheet/Sheet.js';
|
|
48
|
+
export { Combobox } from './components/Combobox/Combobox.js';
|
|
48
49
|
export { Bar, BarChart, CartesianGrid, Label, LabelList, XAxis, YAxis } from 'recharts';
|
|
49
50
|
export { z as zod } from 'zod';
|
|
50
51
|
export { zodResolver } from '@hookform/resolvers/zod';
|