File size: 3,297 Bytes
9332ccf | 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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | /**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import type React from 'react';
import {
createContext,
useContext,
useState,
useCallback,
useMemo,
useRef,
useEffect,
} from 'react';
export interface OverflowState {
overflowingIds: ReadonlySet<string>;
}
export interface OverflowActions {
addOverflowingId: (id: string) => void;
removeOverflowingId: (id: string) => void;
reset: () => 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>());
/**
* We use a ref to track the current set of overflowing IDs and a timeout to
* batch updates to the next tick. This prevents infinite render loops (layout
* oscillation) where showing an overflow hint causes a layout shift that
* hides the hint, which then restores the layout and shows the hint again.
*/
const idsRef = useRef(new Set<string>());
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const syncState = useCallback(() => {
if (timeoutRef.current) return;
// Use a microtask to batch updates and break synchronous recursive loops.
// This prevents "Maximum update depth exceeded" errors during layout shifts.
timeoutRef.current = setTimeout(() => {
timeoutRef.current = null;
setOverflowingIds((prevIds) => {
// Optimization: only update state if the set has actually changed
if (
prevIds.size === idsRef.current.size &&
[...prevIds].every((id) => idsRef.current.has(id))
) {
return prevIds;
}
return new Set(idsRef.current);
});
}, 0);
}, []);
useEffect(
() => () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
},
[],
);
const addOverflowingId = useCallback(
(id: string) => {
if (!idsRef.current.has(id)) {
idsRef.current.add(id);
syncState();
}
},
[syncState],
);
const removeOverflowingId = useCallback(
(id: string) => {
if (idsRef.current.has(id)) {
idsRef.current.delete(id);
syncState();
}
},
[syncState],
);
const reset = useCallback(() => {
if (idsRef.current.size > 0) {
idsRef.current.clear();
syncState();
}
}, [syncState]);
const stateValue = useMemo(
() => ({
overflowingIds,
}),
[overflowingIds],
);
const actionsValue = useMemo(
() => ({
addOverflowingId,
removeOverflowingId,
reset,
}),
[addOverflowingId, removeOverflowingId, reset],
);
return (
<OverflowStateContext.Provider value={stateValue}>
<OverflowActionsContext.Provider value={actionsValue}>
{children}
</OverflowActionsContext.Provider>
</OverflowStateContext.Provider>
);
};
|