lecom-ui 5.3.70 → 5.3.72
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.
|
@@ -67,11 +67,17 @@ const comboboxItemVariants = cva(
|
|
|
67
67
|
disabled: {
|
|
68
68
|
true: "text-grey-400 pointer-events-none",
|
|
69
69
|
false: ""
|
|
70
|
+
},
|
|
71
|
+
// nova variante para destacar o item selecionado
|
|
72
|
+
selected: {
|
|
73
|
+
true: "bg-grey-100 font-medium text-grey-900",
|
|
74
|
+
false: ""
|
|
70
75
|
}
|
|
71
76
|
},
|
|
72
77
|
defaultVariants: {
|
|
73
78
|
size: "medium",
|
|
74
|
-
disabled: false
|
|
79
|
+
disabled: false,
|
|
80
|
+
selected: false
|
|
75
81
|
}
|
|
76
82
|
}
|
|
77
83
|
);
|
|
@@ -92,20 +98,32 @@ const ComboboxItemContent = ({
|
|
|
92
98
|
const checkIconSize = CHECK_ICON_SIZES[size];
|
|
93
99
|
const isDisabled = option.disabled || false;
|
|
94
100
|
const textColor = isDisabled ? "text-grey-400" : "text-grey-800";
|
|
101
|
+
const isSelected = option.value === value;
|
|
95
102
|
return /* @__PURE__ */ React.createElement(
|
|
96
103
|
CommandItem,
|
|
97
104
|
{
|
|
98
105
|
key: option.value,
|
|
99
106
|
onSelect: handleSelect,
|
|
107
|
+
"data-combobox-value": option.value,
|
|
108
|
+
tabIndex: isSelected ? 0 : -1,
|
|
100
109
|
className: cn(
|
|
101
110
|
comboboxItemVariants({
|
|
102
111
|
size,
|
|
103
|
-
disabled: isDisabled
|
|
112
|
+
disabled: isDisabled,
|
|
113
|
+
selected: isSelected
|
|
104
114
|
}),
|
|
105
115
|
itemsClassName
|
|
106
|
-
)
|
|
116
|
+
),
|
|
117
|
+
"aria-current": isSelected ? "true" : void 0
|
|
107
118
|
},
|
|
108
|
-
/* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center shrink-0 py-1" }, option.value === value && /* @__PURE__ */ React.createElement(
|
|
119
|
+
/* @__PURE__ */ React.createElement(Typography, { className: "w-4 h-4 flex items-center justify-center shrink-0 py-1" }, option.value === value && /* @__PURE__ */ React.createElement(
|
|
120
|
+
Check,
|
|
121
|
+
{
|
|
122
|
+
className: cn(textColor, isSelected ? "text-primary-600" : ""),
|
|
123
|
+
size: checkIconSize,
|
|
124
|
+
strokeWidth: isSelected ? 2.5 : 2
|
|
125
|
+
}
|
|
126
|
+
)),
|
|
109
127
|
option.prefix && /* @__PURE__ */ React.createElement(
|
|
110
128
|
Typography,
|
|
111
129
|
{
|
|
@@ -260,6 +278,7 @@ function Combobox({
|
|
|
260
278
|
}) {
|
|
261
279
|
const [open, setOpen] = React.useState(false);
|
|
262
280
|
const [search, setSearch] = React.useState("");
|
|
281
|
+
const commandListRef = React.useRef(null);
|
|
263
282
|
const filteredOptions = React.useMemo(
|
|
264
283
|
() => !search ? options : filterComboboxOptions(options, search),
|
|
265
284
|
[options, search]
|
|
@@ -273,6 +292,19 @@ function Combobox({
|
|
|
273
292
|
const handleClose = React.useCallback(() => {
|
|
274
293
|
setOpen(false);
|
|
275
294
|
}, []);
|
|
295
|
+
React.useEffect(() => {
|
|
296
|
+
if (!open) return;
|
|
297
|
+
if (!value) return;
|
|
298
|
+
requestAnimationFrame(() => {
|
|
299
|
+
const el = commandListRef.current?.querySelector(
|
|
300
|
+
`[data-combobox-value="${value}"]`
|
|
301
|
+
);
|
|
302
|
+
if (el) {
|
|
303
|
+
el.focus();
|
|
304
|
+
el.scrollIntoView({ block: "nearest" });
|
|
305
|
+
}
|
|
306
|
+
});
|
|
307
|
+
}, [open, value]);
|
|
276
308
|
React.useEffect(() => {
|
|
277
309
|
if (!open) {
|
|
278
310
|
setSearch("");
|
|
@@ -310,6 +342,7 @@ function Combobox({
|
|
|
310
342
|
), /* @__PURE__ */ React.createElement(
|
|
311
343
|
CommandList,
|
|
312
344
|
{
|
|
345
|
+
ref: commandListRef,
|
|
313
346
|
key: search,
|
|
314
347
|
className: cn(
|
|
315
348
|
"max-h-44 overflow-y-auto overflow-x-hidden",
|
package/dist/index.d.ts
CHANGED
|
@@ -961,7 +961,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
|
|
|
961
961
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
962
962
|
|
|
963
963
|
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
|
|
964
|
-
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement |
|
|
964
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLLIElement | HTMLOListElement | HTMLAnchorElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
|
|
965
965
|
className?: string;
|
|
966
966
|
collapsedSize?: number | undefined;
|
|
967
967
|
collapsible?: boolean | undefined;
|