@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
77 lines • 3.16 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { findUpUntil } from '@awsui/component-toolkit/dom';
export function isContainingBlock(element) {
var _a;
const computedStyle = getComputedStyle(element);
return ((!!computedStyle.transform && computedStyle.transform !== 'none') ||
(!!computedStyle.perspective && computedStyle.perspective !== 'none') ||
((_a = computedStyle.contain) === null || _a === void 0 ? void 0 : _a.split(' ').some(s => ['layout', 'paint', 'strict', 'content'].includes(s))));
}
/**
* Returns an element that is used to position the given element.
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
*/
export function getContainingBlock(startElement) {
if (!startElement.parentElement) {
return null;
}
return findUpUntil(startElement.parentElement, isContainingBlock);
}
/*
* Allows to find multiple elements in the page each according to a specific test function,
* but traversing the DOM only once.
*/
export function findUpUntilMultiple({ startElement, tests, }) {
const keys = Object.keys(tests);
const elements = {};
let current = startElement;
while (current && Object.keys(elements).length < keys.length) {
current = current.parentElement;
// If a component is used within an svg (i.e. as foreignObject), then it will
// have some ancestor nodes that are SVGElement. We want to skip those,
// as they have very different properties to HTMLElements.
while (current && !isHTMLElement(current)) {
current = current.parentElement;
}
for (const key of keys) {
if (!elements[key] && current && tests[key](current)) {
elements[key] = current;
}
}
}
return elements;
}
// The instanceof Node/HTMLElement/SVGElement checks can fail if the target element
// belongs to a different window than the respective type.
export function isNode(target) {
return (target instanceof Node ||
(target !== null &&
typeof target === 'object' &&
'nodeType' in target &&
typeof target.nodeType === 'number' &&
'nodeName' in target &&
typeof target.nodeName === 'string' &&
'parentNode' in target &&
typeof target.parentNode === 'object'));
}
export function isHTMLElement(target) {
return (target instanceof HTMLElement ||
(isNode(target) &&
target.nodeType === Node.ELEMENT_NODE &&
'style' in target &&
typeof target.style === 'object' &&
typeof target.ownerDocument === 'object' &&
!isSVGElement(target)));
}
export function isSVGElement(target) {
return (target instanceof SVGElement ||
(isNode(target) &&
target.nodeType === Node.ELEMENT_NODE &&
'ownerSVGElement' in target &&
typeof target.ownerSVGElement === 'object'));
}
export function isElement(target) {
return isHTMLElement(target) || isSVGElement(target);
}
//# sourceMappingURL=dom.js.map