@elastic/charts
Version:
Elastic-Charts data visualization library
172 lines • 6.88 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionFocusProvider = ActionFocusProvider;
exports.useActionFocusManagement = useActionFocusManagement;
const react_1 = __importStar(require("react"));
const FOCUS_IGNORE_WINDOW_MS = 250;
const ActionFocusContext = (0, react_1.createContext)(null);
function ActionFocusProvider({ children, enabled }) {
const activeEntryRef = (0, react_1.useRef)(null);
const lastDeactivatedElementRef = (0, react_1.useRef)(null);
const ignoreFocusUntilRef = (0, react_1.useRef)(0);
const focusIgnoreTimeoutIdRef = (0, react_1.useRef)(null);
const [hasActive, setHasActive] = (0, react_1.useState)(false);
const [focusIgnoreActive, setFocusIgnoreActive] = (0, react_1.useState)(false);
const clearFocusIgnoreWindow = (0, react_1.useCallback)(() => {
ignoreFocusUntilRef.current = 0;
lastDeactivatedElementRef.current = null;
setFocusIgnoreActive(false);
if (focusIgnoreTimeoutIdRef.current !== null) {
window.clearTimeout(focusIgnoreTimeoutIdRef.current);
focusIgnoreTimeoutIdRef.current = null;
}
}, []);
const startFocusIgnoreWindow = (0, react_1.useCallback)(() => {
ignoreFocusUntilRef.current = Date.now() + FOCUS_IGNORE_WINDOW_MS;
setFocusIgnoreActive(true);
if (focusIgnoreTimeoutIdRef.current !== null) {
window.clearTimeout(focusIgnoreTimeoutIdRef.current);
}
focusIgnoreTimeoutIdRef.current = window.setTimeout(() => {
clearFocusIgnoreWindow();
}, FOCUS_IGNORE_WINDOW_MS);
}, [clearFocusIgnoreWindow]);
const registerActive = (0, react_1.useCallback)((entry) => {
const current = activeEntryRef.current;
if (current && current.ref !== entry.ref) {
current.deactivate();
}
activeEntryRef.current = entry;
setHasActive(true);
clearFocusIgnoreWindow();
}, [clearFocusIgnoreWindow]);
const unregisterActive = (0, react_1.useCallback)((ref) => {
if (activeEntryRef.current?.ref === ref) {
activeEntryRef.current = null;
setHasActive(false);
}
}, []);
(0, react_1.useEffect)(() => {
if (!enabled) {
if (activeEntryRef.current) {
activeEntryRef.current.deactivate();
activeEntryRef.current = null;
}
setHasActive(false);
clearFocusIgnoreWindow();
return;
}
}, [clearFocusIgnoreWindow, enabled]);
(0, react_1.useEffect)(() => {
if (!enabled || !hasActive)
return;
const onPointerDown = (e) => {
const entry = activeEntryRef.current;
if (!entry)
return;
const actionElement = entry.ref.current;
if (!actionElement?.contains(e.target)) {
entry.deactivate();
lastDeactivatedElementRef.current = actionElement;
activeEntryRef.current = null;
setHasActive(false);
startFocusIgnoreWindow();
}
else {
clearFocusIgnoreWindow();
}
};
document.addEventListener('pointerdown', onPointerDown, true);
return () => {
document.removeEventListener('pointerdown', onPointerDown, true);
};
}, [clearFocusIgnoreWindow, enabled, hasActive, startFocusIgnoreWindow]);
(0, react_1.useEffect)(() => {
if (!enabled || !focusIgnoreActive)
return;
const onFocusIn = (e) => {
if (ignoreFocusUntilRef.current === 0)
return;
if (Date.now() > ignoreFocusUntilRef.current) {
clearFocusIgnoreWindow();
return;
}
const lastDeactivated = lastDeactivatedElementRef.current;
if (!lastDeactivated)
return;
const target = e.target;
if (target && lastDeactivated.contains(target)) {
target.blur();
}
};
document.addEventListener('focusin', onFocusIn, true);
return () => {
document.removeEventListener('focusin', onFocusIn, true);
};
}, [clearFocusIgnoreWindow, enabled, focusIgnoreActive]);
const value = (0, react_1.useMemo)(() => ({ registerActive, unregisterActive }), [registerActive, unregisterActive]);
return react_1.default.createElement(ActionFocusContext.Provider, { value: enabled ? value : null }, children);
}
function useActionFocusManagement() {
const [isActive, setIsActive] = (0, react_1.useState)(false);
const actionRef = (0, react_1.useRef)(null);
const ctx = (0, react_1.useContext)(ActionFocusContext);
const ctxRef = (0, react_1.useRef)(ctx);
ctxRef.current = ctx;
const activate = (0, react_1.useCallback)(() => {
if (!ctx)
return;
setIsActive(true);
ctx.registerActive({
ref: actionRef,
deactivate: () => setIsActive(false),
});
}, [ctx]);
(0, react_1.useEffect)(() => {
return () => {
ctxRef.current?.unregisterActive(actionRef);
};
}, []);
const handlePointerDown = (0, react_1.useCallback)(() => {
activate();
}, [activate]);
const handleKeyDown = (0, react_1.useCallback)((e) => {
if (e.key === 'Enter' || e.key === ' ') {
activate();
}
else if (e.currentTarget.contains(e.target)) {
setIsActive(false);
ctx?.unregisterActive(actionRef);
}
}, [activate, ctx]);
return {
isActive,
actionRef,
handlePointerDown,
handleKeyDown,
};
}
//# sourceMappingURL=use_action_focus_management.js.map