@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
42 lines • 1.63 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { nodeBelongs } from './utils/node-belongs';
export default class FocusTracker {
constructor(node, { onFocusEnter, onFocusLeave }) {
this.node = node;
this.currentlyFocused = false;
this.focusInListener = (event) => {
const focusIsInside = nodeBelongs(this.node, event.target);
if (!this.currentlyFocused && focusIsInside) {
this.triggerFocus();
}
};
this.focusOutListener = (event) => {
const nextFocused = event.relatedTarget;
const isNextFocusedInParent = !nodeBelongs(this.node, nextFocused);
if (this.currentlyFocused && (nextFocused === null || isNextFocusedInParent)) {
this.triggerBlur();
}
};
this.onFocusEnter = onFocusEnter;
this.onFocusLeave = onFocusLeave;
this.controller = new AbortController();
}
initialize() {
this.currentlyFocused = nodeBelongs(this.node, document.activeElement);
document.addEventListener('focusin', this.focusInListener, { signal: this.controller.signal });
document.addEventListener('focusout', this.focusOutListener, { signal: this.controller.signal });
}
destroy() {
this.controller.abort();
}
triggerBlur() {
this.currentlyFocused = false;
this.onFocusLeave();
}
triggerFocus() {
this.currentlyFocused = true;
this.onFocusEnter();
}
}
//# sourceMappingURL=focus-tracker.js.map