@oscarpalmer/oui 0.18.0 → 0.20.0

package/src/js/splitter.ts

@@ -7,7 +7,6 @@ import {type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 
 declare global {
-	// biome-ignore lint/nursery/useConsistentTypeDefinitions: Extending builtins to allow custom element type help
 	interface HTMLElementTagNameMap {
 		[SELECTOR]: OuiSplitterElement;
 	}
@@ -57,9 +56,7 @@ export class OuiSplitterElement extends HTMLElement {
 	constructor() {
 		super();
 
-		const panels = [...this.children].filter(
-			child => child instanceof HTMLElement,
-		);
+		const panels = [...this.children].filter(child => child instanceof HTMLElement);
 
 		if (panels.length !== 2) {
 			throw new Error(`${SELECTOR} must have exactly two panels.`);
@@ -242,9 +239,7 @@ function getTypes(splitter: Splitter, width?: number, height?: number): Types {
 	if (type === 'auto') {
 		return {
 			auto: true,
-			horizontal:
-				(height ?? splitter.rectangle.height) >
-				(width ?? splitter.rectangle.width),
+			horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width),
 		};
 	}
 
@@ -254,11 +249,7 @@ function getTypes(splitter: Splitter, width?: number, height?: number): Types {
 	};
 }
 
-function getValue(
-	element: HTMLElement,
-	name: string,
-	defaultValue: number,
-): number {
+function getValue(element: HTMLElement, name: string, defaultValue: number): number {
 	const value = element.getAttribute(name);
 
 	if (isNullableOrWhitespace(value)) {
@@ -288,11 +279,7 @@ function getValues(element: OuiSplitterElement): Values {
 		},
 	};
 
-	const value = getContained(
-		values.min,
-		getValue(element, 'size', values.now.current),
-		values.max,
-	);
+	const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
 
 	values.now.current = value;
 	values.now.previous = value;
@@ -336,10 +323,7 @@ function onKeydown(event: KeyboardEvent): void {
 
 function onNavigate(event: KeyboardEvent): void {
 	const splitter = MAPPED_ELEMENTS.get(
-		findAncestor(
-			event.target as never,
-			'[oui-splitter-separator]',
-		) as HTMLSpanElement,
+		findAncestor(event, '[oui-splitter-separator]') as HTMLSpanElement,
 	);
 
 	if (splitter == null) {
@@ -365,11 +349,7 @@ function onNavigate(event: KeyboardEvent): void {
 
 	setSize(
 		splitter,
-		getContained(
-			values.min,
-			values.now.current + offset * NAVIGATION_MODIFIER,
-			values.max,
-		),
+		getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max),
 		true,
 	);
 }
@@ -387,11 +367,7 @@ function onObservation(entries: ResizeObserverEntry[]): void {
 				return;
 			}
 
-			splitter.types = getTypes(
-				splitter,
-				entry.contentRect.width,
-				entry.contentRect.height,
-			);
+			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
 
 			if (splitter.types.horizontal) {
 				splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
@@ -414,9 +390,7 @@ function onPointerdown(event: Event): void {
 		return;
 	}
 
-	splitter = MAPPED_ELEMENTS.get(
-		findAncestor(event.target as never, SELECTOR_HANDLE) as HTMLSpanElement,
-	);
+	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE) as HTMLSpanElement);
 
 	if (splitter == null) {
 		return;
@@ -468,10 +442,7 @@ function setAriaValue(splitter: Splitter): void {
 	splitter.separator.setAttribute('aria-valuemax', String(splitter.values.max));
 	splitter.separator.setAttribute('aria-valuemin', String(splitter.values.min));
 
-	splitter.separator.setAttribute(
-		'aria-valuenow',
-		String(splitter.values.now.current),
-	);
+	splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
 }
 
 function setSize(splitter: Splitter, size: number, previous?: boolean): void {
@@ -506,11 +477,7 @@ const KEYS_NEGATIVE: Set<string> = new Set(['ArrowLeft', 'ArrowUp']);
 
 const KEYS_VERTICAL: Set<string> = new Set(['ArrowLeft', 'ArrowRight']);
 
-const KEYS_ALL: Set<string> = new Set([
-	...KEYS_ABSOLUTE,
-	...KEYS_HORIZONTAL,
-	...KEYS_VERTICAL,
-]);
+const KEYS_ALL: Set<string> = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
 
 const MAPPED_ELEMENTS: WeakMap<HTMLElement, Splitter> = new WeakMap();
 

package/src/js/tooltip.ts

@@ -79,14 +79,12 @@ function closeTooltips(next: Tooltip | undefined): void {
 			clearTimeout(active.timer);
 		}
 
-		active.floatable.options.content.removeAttribute(
-			'oui-tooltip-content-active',
-		);
+		active.floatable?.options.content.removeAttribute('oui-tooltip-content-active');
 
 		requestAnimationFrame(() => {
 			active.timer = setTimeout(() => {
 				TOOLTIPS_ACTIVE.delete(active);
-				active.floatable.toggle(false);
+				active.floatable?.toggle(false);
 			}, delay) as never;
 		});
 	}
@@ -194,7 +192,7 @@ function onActivate(event: Event): void {
 }
 
 function onClick(event: Event): void {
-	if (findAncestor(event.target as HTMLElement, SELECTOR_CONTENT) != null) {
+	if (findAncestor(event, SELECTOR_CONTENT) != null) {
 		event.stopPropagation();
 	}
 }
@@ -211,10 +209,7 @@ function onToggle(event: Event, activate: boolean): void {
 	toggle = requestAnimationFrame(() => {
 		toggle = undefined;
 
-		const element = findAncestor(
-			event.target as HTMLElement,
-			SELECTOR_FULL,
-		) as HTMLElement;
+		const element = findAncestor(event, SELECTOR_FULL) as HTMLElement;
 
 		const tooltip = TOOLTIPS_ALL.get(element);
 
@@ -224,9 +219,7 @@ function onToggle(event: Event, activate: boolean): void {
 
 		if (
 			tooltip == null ||
-			tooltip.floatable.options.content.hasAttribute(
-				'oui-tooltip-content-active',
-			) === activate
+			tooltip.floatable.options.content.hasAttribute('oui-tooltip-content-active') === activate
 		) {
 			return;
 		}
@@ -240,18 +233,13 @@ function onToggle(event: Event, activate: boolean): void {
 			tooltip.floatable.toggle(true);
 
 			requestAnimationFrame(() => {
-				tooltip.floatable.options.content.setAttribute(
-					'oui-tooltip-content-active',
-					'',
-				);
+				tooltip.floatable.options.content.setAttribute('oui-tooltip-content-active', '');
 			});
 
 			return;
 		}
 
-		tooltip.floatable.options.content.removeAttribute(
-			'oui-tooltip-content-active',
-		);
+		tooltip.floatable.options.content.removeAttribute('oui-tooltip-content-active');
 
 		tooltip.timer ??= setTimeout(() => {
 			TOOLTIPS_ACTIVE.delete(tooltip);
@@ -298,7 +286,7 @@ const TOOLTIPS_ACTIVE: Set<Tooltip> = new Set();
 
 const TOOLTIPS_ALL: WeakMap<HTMLElement, Tooltip> = new WeakMap();
 
-let delay = 250;
+let delay = 500;
 
 let index = 0;
 

package/dist/css/value.css

@@ -1 +0,0 @@
-

package/dist/js/attributable.full.js

@@ -1,48 +0,0 @@
-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]);
-    }
-}
-
-export { attributable };

package/dist/js/floatable.full.js

@@ -1,413 +0,0 @@
-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 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(),
-		once: getBoolean(),
-		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;
-}
-
-class Floatable {
-    options;
-    active = false;
-    disabled = false;
-    frame;
-    ignoreFocus = false;
-    constructor(options) {
-        this.options = options;
-        initialize(this);
-    }
-    destroy() {
-        stop(this);
-        const state = getState();
-        state?.active.delete(this);
-        state?.mapped.delete(this.options.anchor);
-        state?.mapped.delete(this.options.content);
-        this.options.anchor = undefined;
-        this.options.content = undefined;
-    }
-    disable() {
-        if (this.disabled) {
-            return;
-        }
-        this.disabled = true;
-        stop(this);
-        getState()?.active.delete(this);
-    }
-    enable() {
-        if (!this.disabled) {
-            return;
-        }
-        this.disabled = false;
-        initialize(this);
-    }
-    toggle(active, ignoreFocus) {
-        if (this.disabled || this.active === active) {
-            return;
-        }
-        const state = getState();
-        if (state == null) {
-            return;
-        }
-        this.ignoreFocus = !active && (ignoreFocus ?? false);
-        stop(this);
-        if (active) {
-            state.active.add(this);
-        }
-        else {
-            state.active.delete(this);
-        }
-        if (this.options.interactive) {
-            if (active) {
-                state.order.push(this);
-            }
-            else {
-                const index = state.order.indexOf(this);
-                if (index > -1) {
-                    state.order.splice(index, 1);
-                }
-            }
-        }
-        if (active) {
-            activate(this);
-        }
-        else {
-            deactivate(this);
-        }
-    }
-}
-//
-function activate(floatable) {
-    floatable.active = true;
-    document.body.append(floatable.options.content);
-    floatable.options.content.hidden = false;
-    updatePosition(floatable);
-}
-function closeAbove(element) {
-    const state = getState();
-    if (state == null) {
-        return;
-    }
-    const index = state.order.findIndex(floatable => floatable.options.anchor === element ||
-        floatable.options.content === element);
-    if (index === -1 || index === state.order.length - 1) {
-        return;
-    }
-    while (index < state.order.length - 1) {
-        void state.order.pop()?.toggle(false, true);
-    }
-}
-function closeAll() {
-    const state = getState();
-    const floatables = [...(state?.active ?? [])];
-    state?.active.clear();
-    for (const floatable of floatables) {
-        void floatable.toggle(false, true);
-    }
-}
-function closeNonInteractive(state) {
-    for (const floatable of state.active) {
-        if (!floatable.options.interactive) {
-            void floatable.toggle(false);
-        }
-    }
-}
-function deactivate(floatable) {
-    floatable.active = false;
-    floatable.options.content.hidden = true;
-    floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
-    floatable.options.onAfter?.(false);
-}
-function getState() {
-    return window._oscarpalmer_oui_floatable;
-}
-function getX(anchor, content, position) {
-    if (position.endsWith(POSITION_SUFFIX_END)) {
-        const end = anchor.right - content.width;
-        return end < 0 ? 0 : end;
-    }
-    if (position.endsWith(POSITION_SUFFIX_START)) {
-        const start = anchor.left;
-        return start + content.width > window.innerWidth
-            ? window.innerWidth - content.width
-            : start;
-    }
-    if (position.startsWith(POSITION_END)) {
-        return anchor.right;
-    }
-    if (position.startsWith(POSITION_START)) {
-        return anchor.left - content.width;
-    }
-    if (position.startsWith(POSITION_HORIZONTAL)) {
-        if (anchor.right + content.width <= window.innerWidth) {
-            return anchor.right;
-        }
-        return anchor.left - content.width;
-    }
-    const left = anchor.left + (anchor.width - content.width) / 2;
-    return left < 0 ? 0 : left;
-}
-function getY(anchor, content, position, preferAbove) {
-    if (position.startsWith(POSITION_ABOVE)) {
-        return anchor.top - content.height;
-    }
-    if (position.startsWith(POSITION_BELOW)) {
-        return anchor.bottom;
-    }
-    if (position.endsWith(POSITION_BOTTOM)) {
-        const bottom = anchor.bottom - content.height;
-        return bottom < 0 ? 0 : bottom;
-    }
-    if (position.endsWith(POSITION_TOP)) {
-        const top = anchor.top;
-        return top + content.height > window.innerHeight
-            ? window.innerHeight - content.height
-            : top;
-    }
-    if (position.startsWith(POSITION_VERTICAL)) {
-        if (preferAbove && anchor.top - content.height >= 0) {
-            return anchor.top - content.height;
-        }
-        if (anchor.bottom + content.height <= document.body.clientHeight) {
-            return anchor.bottom;
-        }
-        return anchor.top - content.height;
-    }
-    return anchor.top + (anchor.height - content.height) / 2;
-}
-function initialize(floatable) {
-    const { anchor, content, interactive } = floatable.options;
-    if (interactive) {
-        anchor.setAttribute(ATTRIBUTE_ANCHOR, '');
-        content.setAttribute(ATTRIBUTE_CONTENT, '');
-    }
-    content.style.position = 'fixed';
-    content.style.inset = '0 auto auto 0';
-    content.style.zIndex = '10';
-    const state = getState();
-    state?.mapped.set(anchor, floatable);
-    state?.mapped.set(content, floatable);
-}
-function isDisabled(element) {
-    return (element.disabled ||
-        element.readOnly ||
-        element.getAttribute('aria-disabled') === 'true');
-}
-function onClick(event) {
-    const related = findAncestor(event.target, SELECTOR_ALL);
-    if (!(related instanceof HTMLElement)) {
-        closeAll();
-    }
-    else if (related.hasAttribute(ATTRIBUTE_CONTENT)) {
-        closeAbove(related);
-    }
-    else if (!isDisabled(related)) {
-        toggle(related);
-    }
-}
-function onKeyDown(event) {
-    if (event.key !== 'Escape') {
-        return;
-    }
-    const state = getState();
-    if (state == null || state.active.size === 0) {
-        return;
-    }
-    closeNonInteractive(state);
-    const related = findAncestor(event.target, SELECTOR_CONTENT);
-    if (!(related instanceof HTMLElement)) {
-        return;
-    }
-    closeAbove(related);
-    const floatable = state.mapped.get(related);
-    if (floatable != null) {
-        void floatable.toggle(false);
-    }
-}
-function stop(floatable) {
-    if (floatable.frame != null) {
-        cancelAnimationFrame(floatable.frame);
-    }
-    floatable.frame = undefined;
-}
-function toggle(anchor) {
-    const floatable = getState()?.mapped.get(anchor);
-    if (floatable == null) {
-        closeAll();
-        return;
-    }
-    const active = Boolean(floatable.active);
-    const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
-    if (content == null) {
-        closeAll();
-    }
-    else {
-        closeAbove(content);
-    }
-    void floatable.toggle(!active);
-}
-function updatePosition(floatable) {
-    let position = floatable.options.anchor
-        .getAttribute(floatable.options.positionAttribute)
-        ?.trim() ?? floatable.options.defaultPosition;
-    if (!POSITIONS.has(position)) {
-        position = floatable.options.defaultPosition;
-    }
-    let previousAnchor;
-    let previousContent;
-    let calculated = false;
-    let runOnAfter = false;
-    function run() {
-        const anchor = floatable.options.anchor.getBoundingClientRect();
-        const content = floatable.options.content.getBoundingClientRect();
-        if (calculated) {
-            if (previousAnchor != null && previousContent != null) {
-                if (PROPERTIES.every(property => anchor[property] === previousAnchor[property]) &&
-                    PROPERTIES.every(property => content[property] === previousContent[property])) {
-                    floatable.frame = requestAnimationFrame(run);
-                    return;
-                }
-            }
-        }
-        else {
-            calculated = true;
-        }
-        update(anchor, content);
-    }
-    function update(anchor, content) {
-        previousAnchor = anchor;
-        previousContent = content;
-        const left = getX(anchor, content, position);
-        const top = getY(anchor, content, position, floatable.options.preferAbove);
-        if (top + content.height > window.innerHeight) {
-            floatable.options.content.style.height = `${window.innerHeight - top}px`;
-        }
-        else {
-            floatable.options.content.style.height = '';
-        }
-        if (left + content.width > window.innerWidth) {
-            floatable.options.content.style.width = `${window.innerWidth - left}px`;
-        }
-        else {
-            floatable.options.content.style.width = '';
-        }
-        // floatable.options.content.style.inset = `${top}px auto auto ${left}px`;
-        floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-        floatable.frame = requestAnimationFrame(run);
-        if (!runOnAfter) {
-            runOnAfter = true;
-            floatable.options.onAfter?.(true);
-        }
-    }
-    floatable.frame = requestAnimationFrame(run);
-}
-//
-const ATTRIBUTE_ANCHOR = 'oui-floatable-anchor';
-const ATTRIBUTE_CONTENT = 'oui-floatable-content';
-const INSERT_AFTEREND = 'afterend';
-const POSITION_ABOVE = 'above';
-const POSITION_BELOW = 'below';
-const POSITION_BOTTOM = 'bottom';
-const POSITION_END = 'end';
-const POSITION_HORIZONTAL = 'horizontal';
-const POSITION_START = 'start';
-const POSITION_SUFFIX_END = '-end';
-const POSITION_SUFFIX_START = '-start';
-const POSITION_TOP = 'top';
-const POSITION_VERTICAL = 'vertical';
-const POSITIONS = new Set([
-    'above',
-    'above-end',
-    'above-start',
-    'below',
-    'below-end',
-    'below-start',
-    'end',
-    'end-bottom',
-    'end-top',
-    'horizontal',
-    'horizontal-bottom',
-    'horizontal-top',
-    'start',
-    'start-bottom',
-    'start-top',
-    'vertical',
-    'vertical-end',
-    'vertical-start',
-]);
-const PROPERTIES = ['bottom', 'left', 'right', 'top'];
-const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-//
-if (window._oscarpalmer_oui_floatable == null) {
-    Object.defineProperty(window, '_oscarpalmer_oui_floatable', {
-        enumerable: false,
-        value: {
-            active: new Set(),
-            mapped: new Map(),
-            order: [],
-        },
-        writable: false,
-    });
-    on(document, 'keydown', event => {
-        onKeyDown(event);
-    });
-    on(document, 'click', event => {
-        onClick(event);
-    });
-}
-
-export { Floatable, deactivate };