@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
61 lines • 2.5 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef, useState } from 'react';
import { isModifierKey } from '@awsui/component-toolkit/internal';
import styles from './styles.css.js';
function useFocusVisibleState() {
const [focusVisible, setFocusVisible] = useState(false);
useEffect(() => {
function handleMousedown() {
return setFocusVisible(false);
}
function handleKeydown(event) {
// we do not want to highlight focused element
// when special keys are pressed
if (!isModifierKey(event)) {
setFocusVisible(true);
}
}
const controller = new AbortController();
document.addEventListener('mousedown', handleMousedown, { signal: controller.signal });
document.addEventListener('keydown', handleKeydown, { signal: controller.signal });
return () => {
controller.abort();
};
});
return focusVisible;
}
export default function FocusOutline({ elementKey, elementRef, offset = 0 }) {
const ref = useRef(null);
const focusVisible = useFocusVisibleState();
useEffect(() => {
if (!ref.current) {
return;
}
if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {
const element = elementRef.current.getBBox();
showOutline(ref.current, element, offset);
}
else {
hideOutline(ref.current);
}
}, [focusVisible, elementKey, elementRef, offset]);
return React.createElement("rect", { ref: ref, "aria-hidden": "true", className: styles['focus-outline'], rx: "2" });
}
function showOutline(el, position, offset) {
const offsetX = typeof offset === 'number' ? offset : offset.x;
const offsetY = typeof offset === 'number' ? offset : offset.y;
el.setAttribute('x', (position.x - offsetX).toString());
el.setAttribute('y', (position.y - offsetY).toString());
el.setAttribute('width', (position.width + 2 * offsetX).toString());
el.setAttribute('height', (position.height + 2 * offsetY).toString());
el.style.visibility = 'visible';
}
function hideOutline(el) {
el.style.visibility = 'hidden';
el.removeAttribute('x');
el.removeAttribute('y');
el.removeAttribute('width');
el.removeAttribute('height');
}
//# sourceMappingURL=focus-outline.js.map