@oscarpalmer/oui 0.17.0 → 0.18.0

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

@@ -0,0 +1,351 @@
+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);
+
+export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };

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

@@ -1,150 +1,150 @@
-import { clamp } from "@oscarpalmer/atoms/number";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
-class FocusTrap {
-  constructor(element) {
-    this.element = element;
-    element.setAttribute("aria-modal", "true");
-    element.setAttribute("tabindex", "-1");
-  }
-  active = true;
-  destroy() {
-    this.element = void 0;
-  }
-  disable() {
-    if (this.active && !this.element.hasAttribute(`${selector}-noescape`)) {
-      setDisabled(this, true);
-    }
-  }
-  enable() {
-    if (!this.active) {
-      setDisabled(this, false);
-    }
-  }
-}
-function createFocusTrap(element) {
-  let focusTrap = focusTraps.get(element);
-  if (focusTrap == null) {
-    focusTrap = new FocusTrap(element);
-    focusTraps.set(element, focusTrap);
-  }
-  return focusTrap;
+var FocusTrap = class {
+	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 = void 0;
+	}
+	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) {
-  focusTraps.get(
-    findAncestor(event.target, `[${selector}]`)
-  )?.disable();
+	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) {
-  lastTarget = findAncestor(event.target, `[${selector}]`) == null ? void 0 : event.target;
+	lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event.target, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
 }
 function onKeydown(event) {
-  switch (event.key) {
-    case "Escape":
-      onEscape(event);
-      break;
-    case "Tab":
-      onTab(event);
-      break;
-    default:
-      return;
-  }
+	switch (event.key) {
+		case "Escape":
+			onEscape(event);
+			break;
+		case "Tab":
+			onTab(event);
+			break;
+		default: return;
+	}
 }
 function onPointerdown(event) {
-  const lastFocusTrap = findAncestor(
-    lastTarget,
-    `[${selector}]`
-  );
-  const nextFocusTrap = findAncestor(
-    event.target,
-    `[${selector}]`
-  );
-  if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
-    event.preventDefault();
-    lastTarget?.focus();
-  }
-  if (disabled.size === 0) {
-    return;
-  }
-  for (const focusTrap of disabled) {
-    if (focusTrap.element !== nextFocusTrap) {
-      focusTrap.enable();
-      return;
-    }
-  }
+	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,
-    `[${selector}]`
-  );
-  const focusTrap = focusTraps.get(element);
-  if (focusTrap == null) {
-    return;
-  }
-  if (focusTrap.active) {
-    event.preventDefault();
-  }
-  const elements = getFocusable(element);
-  const index = elements.indexOf(event.target);
-  if (index === -1 || elements.length === 0) {
-    tabToTrap(focusTrap, elements, element);
-  } else {
-    tabToElement(event, focusTrap, elements, index);
-  }
+	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.element.setAttribute("aria-modal", String(!value));
-  focusTrap.active = !value;
-  if (value) {
-    disabled.add(focusTrap);
-  } else {
-    disabled.delete(focusTrap);
-  }
+	focusTrap.disabled = value;
+	if (value) FOCUSTRAPS_DISABLED.add(focusTrap);
+	else FOCUSTRAPS_DISABLED.delete(focusTrap);
 }
-function tabToElement(event, focusTrap, elements, index) {
-  const next = clamp(
-    index + (event.shiftKey ? -1 : 1),
-    0,
-    elements.length - 1,
-    true
-  );
-  if (!focusTrap.active) {
-    if (index === length - 1 && next === 0 || index === 0 && next === length - 1) {
-      lastTarget = void 0;
-      focusTrap.enable();
-    }
-    return;
-  }
-  elements[next].focus();
-  lastTarget = elements[next];
+function tabToElement(focusTrap, elements, index, modifier) {
+	const { length } = elements;
+	const next = clamp(index + modifier, 0, length - 1, true);
+	if (focusTrap.disabled) {
+		if (index === length - 1 && next === 0 || index === 0 && next === length - 1) {
+			lastTarget = void 0;
+			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) {
-  if (focusTrap.active) {
-    const next = length === 0 ? element : elements[0];
-    next.focus();
-    lastTarget = next;
-  } else {
-    lastTarget = void 0;
-    focusTrap.enable();
-  }
+function tabToTrap(focusTrap, elements, element, index) {
+	if (focusTrap.disabled) {
+		lastTarget = void 0;
+		focusTrap.enable();
+	} else {
+		const next = elements.length === 0 ? element : elements.at(index ?? 0);
+		next.focus();
+		lastTarget = next;
+	}
 }
-const disabled = /* @__PURE__ */ new Set();
-const eventOptions = {
-  capture: true,
-  passive: false
-};
-const focusTraps = /* @__PURE__ */ new WeakMap();
-let lastTarget;
-const selector = "oui-focus-trap";
-on(document, "focusin", onFocusIn, eventOptions);
-on(document, "keydown", onKeydown, eventOptions);
-on(document, "mousedown", onPointerdown, eventOptions);
-on(document, "touchstart", onPointerdown, eventOptions);
-export {
-  FocusTrap,
-  createFocusTrap,
-  focusTraps,
-  selector
+const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
+var ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
+var 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 = /* @__PURE__ */ new WeakMap();
+var FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
+var 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);
+export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };