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
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import React, {
createContext,
useContext,
useState,
useCallback,
useMemo,
} from 'react';
interface OverflowState {
overflowingIds: ReadonlySet<string>;
}
interface OverflowActions {
addOverflowingId: (id: string) => void;
removeOverflowingId: (id: string) => void;
}
const OverflowStateContext = createContext<OverflowState | undefined>(
undefined,
);
const OverflowActionsContext = createContext<OverflowActions | undefined>(
undefined,
);
export const useOverflowState = (): OverflowState | undefined =>
useContext(OverflowStateContext);
export const useOverflowActions = (): OverflowActions | undefined =>
useContext(OverflowActionsContext);
export const OverflowProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const [overflowingIds, setOverflowingIds] = useState(new Set<string>());
const addOverflowingId = useCallback((id: string) => {
setOverflowingIds((prevIds) => {
if (prevIds.has(id)) {
return prevIds;
}
const newIds = new Set(prevIds);
newIds.add(id);
return newIds;
});
}, []);
const removeOverflowingId = useCallback((id: string) => {
setOverflowingIds((prevIds) => {
if (!prevIds.has(id)) {
return prevIds;
}
const newIds = new Set(prevIds);
newIds.delete(id);
return newIds;
});
}, []);
const stateValue = useMemo(
() => ({
overflowingIds,
}),
[overflowingIds],
);
const actionsValue = useMemo(
() => ({
addOverflowingId,
removeOverflowingId,
}),
[addOverflowingId, removeOverflowingId],
);
return (
<OverflowStateContext.Provider value={stateValue}>
<OverflowActionsContext.Provider value={actionsValue}>
{children}
</OverflowActionsContext.Provider>
</OverflowStateContext.Provider>
);
};
|
