1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
"use client";
import { forwardRef, useCallback } from "react";
import { useSelectionContext } from "@/selection/context";
import { SELECTABLE_ITEM_ATTRIBUTE } from "@/selection/attributes";
import type { SelectableItemProps } from "@/selection/types";
import { cn } from "@/utils/ui";
function setForwardedRef<T>({
ref,
value,
}: {
ref: React.ForwardedRef<T>;
value: T | null;
}) {
if (typeof ref === "function") {
ref(value);
return;
}
if (ref) {
ref.current = value;
}
}
export const SelectableItem = forwardRef<HTMLDivElement, SelectableItemProps>(
function SelectableItem(
{
id,
children,
className,
onClick,
onKeyDown,
onMouseDown,
onContextMenu,
tabIndex,
...rest
}: SelectableItemProps,
forwardedRef,
) {
const {
highlightedId,
isBoxSelecting,
isSelected,
handleItemClick,
handleItemMouseDown,
registerItem,
} = useSelectionContext();
const isItemSelected = isSelected(id);
const isItemHighlighted = highlightedId === id;
const stateClassName = cn(
"relative",
isBoxSelecting && "pointer-events-none",
isItemSelected && "ring-1 ring-primary rounded-sm bg-primary/10",
isItemHighlighted &&
(isItemSelected
? "rounded-sm shadow-[0_0_0_1px_hsl(var(--primary))]"
: "ring-1 ring-primary/60 rounded-sm bg-primary/5"),
);
const handleRef = useCallback(
(element: HTMLDivElement | null) => {
registerItem(id, element);
setForwardedRef({ ref: forwardedRef, value: element });
},
[forwardedRef, id, registerItem],
);
return (
<div
ref={handleRef}
className={cn(stateClassName, className)}
{...{ [SELECTABLE_ITEM_ATTRIBUTE]: "true" }}
role="option"
aria-selected={isItemSelected}
tabIndex={tabIndex ?? 0}
onClick={(event) => {
onClick?.(event);
if (event.defaultPrevented) {
return;
}
handleItemClick({ event, id });
}}
onMouseDown={(event) => {
onMouseDown?.(event);
if (event.defaultPrevented) {
return;
}
handleItemMouseDown({ event, id });
}}
onKeyDown={(event) => {
onKeyDown?.(event);
if (event.defaultPrevented || event.target !== event.currentTarget) {
return;
}
if (event.key !== "Enter" && event.key !== " ") {
return;
}
event.preventDefault();
handleItemClick({ event, id });
}}
onContextMenu={onContextMenu}
{...rest}
>
{children}
</div>
);
},
);
|
