@oscarpalmer/oui 0.17.0 → 0.18.0

package/dist/js/focus-trap/standalone.full.js

@@ -0,0 +1,402 @@
+function attributable(attribute, add, remove) {
+    const observer = new MutationObserver(entries => {
+        const { length } = entries;
+        for (let index = 0; index < length; index += 1) {
+            const entry = entries[index];
+            if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+                if (entry.target.hasAttribute(attribute)) {
+                    handleAdded(attribute, [entry.target], add);
+                }
+                else {
+                    handleRemoved([entry.target], remove);
+                }
+            }
+            else if (entry.type === 'childList') {
+                handleAdded(attribute, entry.addedNodes, add);
+                handleRemoved(entry.removedNodes, remove);
+            }
+        }
+    });
+    observer.observe(document, {
+        attributeFilter: [attribute],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    requestAnimationFrame(() => {
+        handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+    });
+}
+function handleAdded(attribute, nodes, add) {
+    const elements = [...nodes].filter(node => node instanceof HTMLElement);
+    const { length } = elements;
+    for (let index = 0; index < length; index += 1) {
+        const element = elements[index];
+        if (element.hasAttribute(attribute)) {
+            add(element);
+        }
+    }
+}
+function handleRemoved(nodes, remove) {
+    const elements = [...nodes].filter(node => node instanceof HTMLElement);
+    const { length } = elements;
+    for (let index = 0; index < length; index += 1) {
+        remove(elements[index]);
+    }
+}
+
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+
+function clamp(value, minimum, maximum, loop) {
+	if (![
+		value,
+		minimum,
+		maximum
+	].every(isNumber)) return NaN;
+	if (value < minimum) return maximum ;
+	return value > maximum ? minimum  : value;
+}
+
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+
+function calculate() {
+	return new Promise((resolve) => {
+		const values = [];
+		let last;
+		function step(now) {
+			if (last != null) values.push(now - last);
+			last = now;
+			if (values.length >= CALCULATION_TOTAL) {
+				const median = values.sort().slice(2, -2).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM);
+				resolve(median);
+			} else requestAnimationFrame(step);
+		}
+		requestAnimationFrame(step);
+	});
+}
+function noop() {}
+var CALCULATION_TOTAL = 10;
+var CALCULATION_TRIM = 4;
+calculate().then((value) => {
+});
+
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal
+	};
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	target.addEventListener(type, listener, extended);
+	return () => {
+		target.removeEventListener(type, listener, extended);
+	};
+}
+
+function findAncestor(origin, selector) {
+	if (!(origin instanceof Element) || selector == null) return null;
+	if (typeof selector === "string") {
+		if (origin.matches?.(selector)) return origin;
+		return origin.closest(selector);
+	}
+	if (typeof selector !== "function") return null;
+	if (selector(origin)) return origin;
+	let parent = origin.parentElement;
+	while (parent != null && !selector(parent)) {
+		if (parent === document.body) return null;
+		parent = parent.parentElement;
+	}
+	return parent;
+}
+
+function getFocusable(parent) {
+	return getValidElements(parent, FILTERS_FOCUSABLE);
+}
+function getItem(element, tabbable) {
+	return {
+		element,
+		tabIndex: TABINDEX_DEFAULT
+	};
+}
+function getValidElements(parent, filters, tabbable) {
+	if (!(parent instanceof Element)) return [];
+	const elements = [...parent.querySelectorAll(SELECTOR_FULL)];
+	const items = [];
+	let { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const item = getItem(elements[index]);
+		if (!filters.some((filter) => filter(item))) items.push(item);
+	}
+	return items.map((item) => item.element);
+}
+function isDisabled(item) {
+	if (EXPRESSION_DISABLEABLE.test(item.element.tagName) && isDisabledFromFieldset(item.element)) return true;
+	return item.element.disabled ?? false;
+}
+function isDisabledFromFieldset(element) {
+	let parent = element.parentElement;
+	while (parent != null) {
+		if (parent instanceof HTMLFieldSetElement && parent.disabled) {
+			const children = Array.from(parent.children);
+			const { length } = children;
+			for (let index = 0; index < length; index += 1) {
+				const child = children[index];
+				if (child instanceof HTMLLegendElement) return parent.matches(SELECTOR_FIELDSET_DISABLED) || !child.contains(element);
+			}
+			return true;
+		}
+		parent = parent.parentElement;
+	}
+	return false;
+}
+function isHidden(item) {
+	if ((item.element.hidden ?? false) || item.element instanceof HTMLInputElement && item.element.type === STYLE_HIDDEN) return true;
+	if ((item.element.matches(SELECTOR_SUMMARY_FIRST) ? item.element.parentElement : item.element)?.matches(SELECTOR_DETAILS_CLOSED_CHILDREN) ?? false) return true;
+	const style = getComputedStyle(item.element);
+	if (style.display === STYLE_NONE || style.visibility === STYLE_HIDDEN) return true;
+	const { height, width } = item.element.getBoundingClientRect();
+	return height === 0 && width === 0;
+}
+function isInert(item) {
+	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
+		element: item.element.parentElement});
+}
+function isSummarised(item) {
+	return item.element instanceof HTMLDetailsElement && [...item.element.children].some((child) => EXPRESSION_SUMMARY.test(child.tagName));
+}
+var ATTRIBUTE_INERT = "inert";
+var EXPRESSION_DISABLEABLE = /^(button|input|select|textarea)$/i;
+var EXPRESSION_SUMMARY = /^summary$/i;
+var EXPRESSION_TRUEISH = /^(|true)$/i;
+var FILTERS_FOCUSABLE = [
+	isDisabled,
+	isInert,
+	isHidden,
+	isSummarised
+];
+var SELECTOR_DETAILS_CLOSED_CHILDREN = "details:not([open]) *";
+var SELECTOR_FIELDSET_DISABLED = "fieldset[disabled] *";
+var SELECTOR_SUMMARY_FIRST = "details > summary:first-of-type";
+var SELECTOR_FULL = [
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not(slot)",
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"details",
+	SELECTOR_SUMMARY_FIRST,
+	"input",
+	"select",
+	"textarea",
+	"video[controls]"
+].map((selector) => `${selector}:not([inert])`).join(",");
+var STYLE_HIDDEN = "hidden";
+var STYLE_NONE = "none";
+var TABINDEX_DEFAULT = -1;
+
+class FocusTrap {
+    disabled = false;
+    connected = true;
+    element;
+    embedded;
+    get contain() {
+        return this.element.hasAttribute(FOCUS_TRAP_CONTAIN);
+    }
+    get noescape() {
+        return this.element.hasAttribute(FOCUS_TRAP_NOESCAPE);
+    }
+    constructor(element, options) {
+        this.element = element;
+        this.embedded = options != null;
+        element.setAttribute('tabindex', '-1');
+        if (options != null) {
+            element.setAttribute(FOCUS_TRAP_SELECTOR, '');
+        }
+        if (options?.noescape) {
+            element.setAttribute(FOCUS_TRAP_NOESCAPE, '');
+        }
+    }
+    connect() {
+        setConnected(this, true);
+    }
+    destroy() {
+        this.element = undefined;
+    }
+    disable() {
+        if (!(this.disabled || this.noescape)) {
+            setDisabled(this, true);
+        }
+    }
+    disconnect() {
+        setConnected(this, false);
+    }
+    enable() {
+        if (this.disabled) {
+            setDisabled(this, false);
+        }
+    }
+    focus(last) {
+        tabToTrap(this, getFocusable(this.element), this.element, last ? -1 : 0);
+    }
+}
+//
+function createFocusTrap(element, options) {
+    let focusTrap = FOCUSTRAPS_ALL.get(element);
+    if (focusTrap == null) {
+        focusTrap = new FocusTrap(element, options);
+        FOCUSTRAPS_ALL.set(element, focusTrap);
+    }
+    return focusTrap;
+}
+function onEscape(event) {
+    let element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+    let focusTrap = FOCUSTRAPS_ALL.get(element);
+    if (element == null || focusTrap == null) {
+        return;
+    }
+    while (focusTrap.disabled) {
+        element = findAncestor(focusTrap.element.parentElement, ATTRIBUTE_SELECTOR);
+        focusTrap = FOCUSTRAPS_ALL.get(element);
+        if (element == null || focusTrap == null) {
+            return;
+        }
+        if (!focusTrap.disabled) {
+            break;
+        }
+    }
+    focusTrap?.disable();
+}
+function onFocusIn(event) {
+    const focusTrap = FOCUSTRAPS_ALL.get(findAncestor(event.target, ATTRIBUTE_SELECTOR));
+    lastTarget = focusTrap == null ? undefined : event.target;
+}
+function onKeydown(event) {
+    switch (event.key) {
+        case 'Escape':
+            onEscape(event);
+            break;
+        case 'Tab':
+            onTab(event);
+            break;
+        default:
+            return;
+    }
+}
+function onPointerdown(event) {
+    const lastFocusTrap = findAncestor(lastTarget, ATTRIBUTE_SELECTOR);
+    const nextFocusTrap = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+    if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+        if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
+            event.preventDefault();
+            lastTarget?.focus();
+        }
+    }
+    if (FOCUSTRAPS_DISABLED.size === 0) {
+        return;
+    }
+    for (const focusTrap of FOCUSTRAPS_DISABLED) {
+        if (focusTrap.element !== nextFocusTrap) {
+            focusTrap.enable();
+        }
+    }
+}
+function onTab(event) {
+    const element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+    const focusTrap = FOCUSTRAPS_ALL.get(element);
+    if (focusTrap == null) {
+        return;
+    }
+    if (!focusTrap.disabled) {
+        event.preventDefault();
+    }
+    const elements = getFocusable(element);
+    const index = elements.indexOf(event.target);
+    if (index === -1 || elements.length === 0) {
+        tabToTrap(focusTrap, elements, element);
+    }
+    else {
+        tabToElement(focusTrap, elements, index, event.shiftKey ? -1 : 1);
+    }
+}
+function setConnected(focusTrap, value) {
+    if (!focusTrap.embedded || focusTrap.connected === value) {
+        return;
+    }
+    focusTrap.connected = value;
+}
+function setDisabled(focusTrap, value) {
+    focusTrap.disabled = value;
+    if (value) {
+        FOCUSTRAPS_DISABLED.add(focusTrap);
+    }
+    else {
+        FOCUSTRAPS_DISABLED.delete(focusTrap);
+    }
+}
+function tabToElement(focusTrap, elements, index, modifier) {
+    const { length } = elements;
+    const next = clamp(index + modifier, 0, length - 1);
+    if (focusTrap.disabled) {
+        if ((index === length - 1 && next === 0) ||
+            (index === 0 && next === length - 1)) {
+            lastTarget = undefined;
+            focusTrap.enable();
+        }
+        return;
+    }
+    const element = elements[next];
+    const elementFocusTrap = FOCUSTRAPS_ALL.get(element);
+    if (elementFocusTrap != null) {
+        elementFocusTrap.focus(modifier === -1);
+    }
+    else {
+        elements[next].focus();
+        lastTarget = elements[next];
+    }
+}
+function tabToTrap(focusTrap, elements, element, index) {
+    if (focusTrap.disabled) {
+        lastTarget = undefined;
+        focusTrap.enable();
+    }
+    else {
+        const next = elements.length === 0 ? element : elements.at(index ?? 0);
+        next.focus();
+        lastTarget = next;
+    }
+}
+//
+const FOCUS_TRAP_SELECTOR = 'oui-focus-trap';
+const ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
+const EVENT_OPTIONS = {
+    capture: true,
+    passive: false,
+};
+const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
+const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
+const FOCUSTRAPS_ALL = new WeakMap();
+const FOCUSTRAPS_DISABLED = new Set();
+let lastTarget;
+//
+on(document, 'focusin', onFocusIn, EVENT_OPTIONS);
+on(document, 'keydown', onKeydown, EVENT_OPTIONS);
+on(document, 'mousedown', onPointerdown, EVENT_OPTIONS);
+on(document, 'touchstart', onPointerdown, EVENT_OPTIONS);
+
+function removeFocusTraps(element) {
+    FOCUSTRAPS_ALL.get(element)?.destroy();
+    FOCUSTRAPS_ALL.delete(element);
+}
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);

package/dist/js/focus-trap/standalone.js

@@ -1,7 +1,7 @@
 import { attributable } from "../attributable.js";
-import { createFocusTrap, selector, focusTraps } from "./embedded.js";
+import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.js";
 function removeFocusTraps(element) {
-  focusTraps.get(element)?.destroy();
-  focusTraps.delete(element);
+	FOCUSTRAPS_ALL.get(element)?.destroy();
+	FOCUSTRAPS_ALL.delete(element);
 }
-attributable(selector, createFocusTrap, removeFocusTraps);
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);

package/dist/js/index.js

@@ -1,6 +1,5 @@
-import "./focus-trap/standalone.js";
+import { setDelay } from "./tooltip.js";
+import { OuiSplitterElement } from "./splitter.js";
 import { OuiPopoverElement } from "./popover.js";
-import "./tooltip.js";
-export {
-  OuiPopoverElement
-};
+import "./focus-trap/standalone.js";
+export { OuiPopoverElement, OuiSplitterElement, setDelay };