@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
63 lines (62 loc) • 2.28 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { html } from "lit-html";
import { safeClassMap } from "@arcgis/lumina";
function interceptedClick() {
const { disabled } = this;
if (!disabled) {
HTMLElement.prototype.click.call(this);
}
}
function onPointerDown(event) {
const interactiveElement = event.target;
if (interactiveElement.disabled) {
event.preventDefault();
}
}
const nonBubblingWhenDisabledMouseEvents = ["mousedown", "mouseup", "click"];
function onNonBubblingWhenDisabledMouseEvent(event) {
const interactiveElement = event.target;
if (interactiveElement.disabled) {
event.stopImmediatePropagation();
event.preventDefault();
}
}
const captureOnlyOptions = { capture: true };
function updateHostInteraction(component) {
if (component.disabled) {
component.el.setAttribute("aria-disabled", "true");
if (component.el.contains(document.activeElement)) {
document.activeElement.blur();
}
blockInteraction(component);
return;
}
restoreInteraction(component);
component.el.removeAttribute("aria-disabled");
}
function blockInteraction(component) {
component.el.click = interceptedClick;
addInteractionListeners(component.el);
}
function addInteractionListeners(element) {
element.addEventListener("pointerdown", onPointerDown, captureOnlyOptions);
nonBubblingWhenDisabledMouseEvents.forEach((event) => element.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
}
function restoreInteraction(component) {
delete component.el.click;
removeInteractionListeners(component.el);
}
function removeInteractionListeners(element) {
element.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions);
nonBubblingWhenDisabledMouseEvents.forEach((event) => element.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
}
const CSS = {
container: "interaction-container"
};
const InteractiveContainer = ({ children, disabled }) => html`<div class=${safeClassMap(CSS.container)} .inert=${disabled}>${children}</div>`;
export {
InteractiveContainer as I,
updateHostInteraction as u
};