@oscarpalmer/oui 0.14.0 → 0.16.0

package/src/js/splitter.ts

@@ -0,0 +1,317 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {getPosition, on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'oui-splitter': OuiSplitterElement;
+	}
+}
+
+type Flex = {
+	previous: number;
+	value: number;
+};
+
+export class OuiSplitterElement extends HTMLElement {
+	#splitter: Splitter;
+
+	constructor() {
+		super();
+
+		const panels = [...this.children].filter(
+			child => child instanceof HTMLElement,
+		);
+
+		if (panels.length !== 2) {
+			throw new Error('oui-splitter must have exactly two panels.');
+		}
+
+		this.#splitter = new Splitter(this, panels);
+	}
+
+	connectedCallback(): void {
+		if (this.#splitter.types.auto) {
+			observer.observe(this);
+		}
+	}
+
+	disconnectedCallback(): void {
+		if (this.#splitter.types.auto) {
+			observer.unobserve(this);
+		}
+	}
+}
+
+class Splitter {
+	flex: Flex = {
+		previous: 0.5,
+		value: 0.5,
+	};
+
+	handle: HTMLSpanElement;
+
+	rectangle: DOMRect;
+
+	separator: HTMLDivElement;
+
+	types: Types;
+
+	constructor(
+		public element: OuiSplitterElement,
+		public panels: HTMLElement[],
+	) {
+		this.handle = createHandle();
+		this.rectangle = element.getBoundingClientRect();
+		this.separator = createSeparator();
+
+		this.separator.append(this.handle);
+
+		panels[0].insertAdjacentElement('afterend', this.separator);
+
+		mapped.set(element, this);
+		mapped.set(this.handle, this);
+
+		setSize(this, this.flex.value);
+
+		this.types = getTypes(this);
+
+		if (this.types.horizontal) {
+			this.element.setAttribute('oui-splitter-horizontal', '');
+		}
+	}
+}
+
+type Types = {
+	auto: boolean;
+	horizontal: boolean;
+};
+
+//
+
+function createHandle(): HTMLSpanElement {
+	const handle = document.createElement('span');
+
+	handle.tabIndex = 0;
+
+	handle.setAttribute('aria-label', 'Resize panels');
+	handle.setAttribute('oui-splitter-handle', '');
+
+	return handle;
+}
+
+function createSeparator(): HTMLDivElement {
+	const separator = document.createElement('div');
+
+	separator.setAttribute('oui-splitter-separator', '');
+
+	return separator;
+}
+
+function getFlex(splitter: Splitter, value: number): number {
+	const {height, left, top, width} = splitter.rectangle;
+
+	const offset = value - (splitter.types.horizontal ? top : left);
+
+	const fraction = offset / (splitter.types.horizontal ? height : width);
+
+	return clamp(fraction, 0.1, 0.9);
+}
+
+function getTypes(splitter: Splitter, width?: number, height?: number): Types {
+	const type = splitter.element.getAttribute('type')?.trim() ?? '';
+
+	if (type === 'horizontal') {
+		return {
+			auto: false,
+			horizontal: true,
+		};
+	}
+
+	if (type === 'auto') {
+		return {
+			auto: true,
+			horizontal:
+				(height ?? splitter.rectangle.height) >
+				(width ?? splitter.rectangle.width),
+		};
+	}
+
+	return {
+		auto: false,
+		horizontal: false,
+	};
+}
+
+function onEnd(reset: boolean): void {
+	if (splitter != null) {
+		splitter.handle.removeAttribute('oui-splitter-active');
+		splitter.separator.removeAttribute('oui-splitter-active');
+
+		if (reset) {
+			setSize(splitter, splitter.flex.previous);
+		} else {
+			splitter.flex.previous = splitter.flex.value;
+		}
+	}
+
+	splitter = undefined;
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	switch (true) {
+		case allKeys.has(event.key):
+			onNavigate(event);
+			break;
+
+		case event.key === 'Escape':
+			onEnd(true);
+			break;
+
+		default:
+			break;
+	}
+}
+
+function onMousedown(event: Event): void {
+	splitter = mapped.get(
+		findAncestor(
+			event.target as never,
+			'[oui-splitter-handle]',
+		) as HTMLSpanElement,
+	);
+
+	if (splitter == null) {
+		return;
+	}
+
+	splitter.handle.setAttribute('oui-splitter-active', '');
+	splitter.separator.setAttribute('oui-splitter-active', '');
+
+	splitter.rectangle = splitter.element.getBoundingClientRect();
+}
+
+function onMousemove(event: MouseEvent): void {
+	if (splitter == null) {
+		return;
+	}
+
+	const position = getPosition(event);
+
+	if (position != null) {
+		splitter.flex.value = getFlex(
+			splitter,
+			splitter.types.horizontal ? position.y : position.x,
+		);
+
+		setSize(splitter, splitter.flex.value);
+	}
+}
+
+function onMouseup(): void {
+	if (splitter != null) {
+		onEnd(false);
+	}
+}
+
+function onNavigate(event: KeyboardEvent): void {
+	const splitter = mapped.get(
+		findAncestor(
+			event.target as never,
+			'[oui-splitter-handle]',
+		) as HTMLSpanElement,
+	);
+
+	if (splitter == null) {
+		return;
+	}
+
+	if (absoluteKeys.has(event.key)) {
+		setSize(splitter, event.key === 'End' ? 0.9 : 0.1, true);
+
+		return;
+	}
+
+	if (
+		(splitter.types.horizontal && !horizontalKeys.has(event.key)) ||
+		(!splitter.types.horizontal && !verticalKeys.has(event.key))
+	) {
+		return;
+	}
+
+	const modifier = negativeKeys.has(event.key) ? -1 : 1;
+
+	setSize(splitter, splitter.flex.value + modifier * 0.05, true);
+}
+
+function onObservation(entries: ResizeObserverEntry[]): void {
+	if (frame != null) {
+		cancelAnimationFrame(frame);
+	}
+
+	frame = requestAnimationFrame(() => {
+		for (const entry of entries) {
+			const splitter = mapped.get(entry.target as HTMLElement);
+
+			if (splitter == null) {
+				return;
+			}
+
+			splitter.types = getTypes(
+				splitter,
+				entry.contentRect.width,
+				entry.contentRect.height,
+			);
+
+			if (splitter.types.horizontal) {
+				splitter.element.setAttribute('oui-splitter-horizontal', '');
+			} else {
+				splitter.element.removeAttribute('oui-splitter-horizontal');
+			}
+		}
+
+		frame = undefined;
+	});
+}
+
+function setSize(splitter: Splitter, size: number, previous?: boolean): void {
+	splitter.flex.value = size;
+
+	if (previous) {
+		splitter.flex.previous = size;
+	}
+
+	splitter.element.style.setProperty('--oui-splitter-size', `${size}`);
+}
+
+//
+
+const absoluteKeys = new Set(['End', 'Home']);
+
+const horizontalKeys = new Set(['ArrowDown', 'ArrowUp']);
+
+const mapped = new WeakMap<HTMLElement, Splitter>();
+
+const observer = new ResizeObserver(onObservation);
+
+const negativeKeys = new Set(['ArrowLeft', 'ArrowUp']);
+
+const verticalKeys = new Set(['ArrowLeft', 'ArrowRight']);
+
+const allKeys = new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+
+let frame: DOMHighResTimeStamp | undefined;
+
+let splitter: Splitter | undefined;
+
+//
+
+customElements.define('oui-splitter', OuiSplitterElement);
+
+on(document, 'keydown', onKeydown);
+
+on(document, 'mousedown', onMousedown);
+
+on(document, 'mousemove', onMousemove);
+
+on(document, 'mouseup', onMouseup);

package/src/js/tooltip.ts

@@ -162,7 +162,7 @@ function initialize(tooltip: Tooltip): void {
 				element,
 				event,
 				() => {
-					activate(floatable, active, 250);
+					activate(floatable, active, undefined, 250);
 				},
 				{
 					signal: abortController.signal,
@@ -175,7 +175,7 @@ function initialize(tooltip: Tooltip): void {
 				element,
 				event,
 				() => {
-					deactivate(floatable, active, 250);
+					deactivate(floatable, active, undefined, 250);
 				},
 				{
 					signal: abortController.signal,
@@ -191,8 +191,6 @@ function removeTooltip(element: HTMLElement): void {
 }
 
 function reset(anchor: HTMLElement, attributes: Attributes): void {
-	console.log('reset', anchor, attributes);
-
 	if (attributes.ariaDescribedby == null) {
 		anchor.removeAttribute('aria-describedby');
 	} else {

package/types/floatable.d.cts

@@ -10,7 +10,7 @@ export declare class Floatable {
 	constructor(anchor: HTMLElement, content: HTMLElement);
 	destroy(): void;
 }
-export declare function activate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
-export declare function deactivate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
+export declare function activate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
+export declare function deactivate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
 
 export {};

package/types/floatable.d.ts

@@ -8,5 +8,5 @@ export declare class Floatable {
     constructor(anchor: HTMLElement, content: HTMLElement);
     destroy(): void;
 }
-export declare function activate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
-export declare function deactivate(floatable: Floatable, active: Set<Floatable>, time?: number): void;
+export declare function activate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;
+export declare function deactivate(floatable: Floatable, active: Set<Floatable>, order?: Floatable[], time?: number): void;

package/types/focus-trap/embedded.d.cts

@@ -0,0 +1,15 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class FocusTrap {
+	element: HTMLElement;
+	active: boolean;
+	constructor(element: HTMLElement);
+	destroy(): void;
+	disable(): void;
+	enable(): void;
+}
+export declare function createFocusTrap(element: HTMLElement): FocusTrap;
+export declare const focusTraps: WeakMap<HTMLElement, FocusTrap>;
+export declare const selector = "oui-focus-trap";
+
+export {};

package/types/focus-trap/embedded.d.ts

@@ -0,0 +1,11 @@
+export declare class FocusTrap {
+    element: HTMLElement;
+    active: boolean;
+    constructor(element: HTMLElement);
+    destroy(): void;
+    disable(): void;
+    enable(): void;
+}
+export declare function createFocusTrap(element: HTMLElement): FocusTrap;
+export declare const focusTraps: WeakMap<HTMLElement, FocusTrap>;
+export declare const selector = "oui-focus-trap";

package/types/index.d.cts

@@ -1,3 +1,14 @@
 // Generated by dts-bundle-generator v9.5.1
 
+export declare class OuiPopoverElement extends HTMLElement {
+	#private;
+	constructor();
+	close(): void;
+	hidePopover(): void;
+	open(): void;
+	showPopover(): void;
+	toggle(): void;
+	togglePopover(options?: boolean): boolean;
+}
+
 export {};

package/types/index.d.ts

@@ -1 +1,3 @@
-export * from './focus-trap';
+export * from './focus-trap/standalone';
+export * from './popover';
+export * from './tooltip';

package/types/popover.d.cts

@@ -0,0 +1,14 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class OuiPopoverElement extends HTMLElement {
+	#private;
+	constructor();
+	close(): void;
+	hidePopover(): void;
+	open(): void;
+	showPopover(): void;
+	toggle(): void;
+	togglePopover(options?: boolean): boolean;
+}
+
+export {};

package/types/popover.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'oui-popover': OuiPopoverElement;
+    }
+}
+export declare class OuiPopoverElement extends HTMLElement {
+    #private;
+    constructor();
+    close(): void;
+    hidePopover(): void;
+    open(): void;
+    showPopover(): void;
+    toggle(): void;
+    togglePopover(options?: boolean): boolean;
+}

package/types/splitter.d.cts

@@ -0,0 +1,10 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class OuiSplitterElement extends HTMLElement {
+	#private;
+	constructor();
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+}
+
+export {};

package/types/splitter.d.ts

@@ -0,0 +1,11 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'oui-splitter': OuiSplitterElement;
+    }
+}
+export declare class OuiSplitterElement extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/js/focus-trap.cjs

@@ -1,104 +0,0 @@
-"use strict";
-const number = require("@oscarpalmer/atoms/number");
-const event = require("@oscarpalmer/toretto/event");
-const find = require("@oscarpalmer/toretto/find");
-const focusable = require("@oscarpalmer/toretto/focusable");
-const attributable = require("./attributable.cjs");
-class FocusTrap {
-  constructor(element) {
-    this.element = element;
-    element.setAttribute("aria-modal", "true");
-    element.setAttribute("tabindex", "-1");
-  }
-  active = true;
-  activate() {
-    this.element.setAttribute("aria-modal", "true");
-    this.active = true;
-  }
-  destroy() {
-    this.active = false;
-    this.element = void 0;
-  }
-  inactivate() {
-    this.element.setAttribute("aria-modal", "false");
-    this.active = false;
-    inactive.add(this);
-  }
-}
-function addFocusTrap(element) {
-  if (!focusTraps.has(element)) {
-    focusTraps.set(element, new FocusTrap(element));
-  }
-}
-function onEscape(event2) {
-  if (event2.key !== "Escape") {
-    return;
-  }
-  const element = find.findAncestor(
-    document.activeElement,
-    `[${selector}]`
-  );
-  focusTraps.get(element)?.inactivate();
-}
-function onFocusOut() {
-  if (inactive.size === 0) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    const element = find.findAncestor(
-      document.activeElement,
-      `[${selector}]`
-    );
-    if (!focusTraps.has(element)) {
-      for (const focusTrap of inactive) {
-        focusTrap.activate();
-      }
-    }
-  });
-}
-function onTab(event2) {
-  if (event2.key !== "Tab") {
-    return;
-  }
-  const element = find.findAncestor(
-    event2.target,
-    `[${selector}]`
-  );
-  if (!(focusTraps.get(element)?.active ?? false)) {
-    return;
-  }
-  event2.preventDefault();
-  const elements = focusable.getFocusable(element);
-  const { length } = elements;
-  const index = elements.indexOf(event2.target);
-  if (index === -1 || length === 0) {
-    if (length === 0) {
-      element.focus();
-    } else {
-      elements[0].focus();
-    }
-    return;
-  }
-  const next = number.clamp(index + (event2.shiftKey ? -1 : 1), 0, length - 1, true);
-  if (next !== index) {
-    elements[next].focus();
-  }
-}
-function removeFocusTraps(element) {
-  focusTraps.get(element)?.destroy();
-  focusTraps.delete(element);
-}
-const focusTraps = /* @__PURE__ */ new WeakMap();
-const inactive = /* @__PURE__ */ new Set();
-const selector = "oui-focus-trap";
-attributable.attributable(selector, addFocusTrap, removeFocusTraps);
-event.on(document, "focusout", onFocusOut, {
-  capture: true
-});
-event.on(document, "keydown", onTab, {
-  capture: true,
-  passive: false
-});
-event.on(document, "keydown", onEscape, {
-  passive: false
-});

package/dist/js/focus-trap.js

@@ -1,103 +0,0 @@
-import { clamp } from "@oscarpalmer/atoms/number";
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { getFocusable } from "@oscarpalmer/toretto/focusable";
-import { attributable } from "./attributable.js";
-class FocusTrap {
-  constructor(element) {
-    this.element = element;
-    element.setAttribute("aria-modal", "true");
-    element.setAttribute("tabindex", "-1");
-  }
-  active = true;
-  activate() {
-    this.element.setAttribute("aria-modal", "true");
-    this.active = true;
-  }
-  destroy() {
-    this.active = false;
-    this.element = void 0;
-  }
-  inactivate() {
-    this.element.setAttribute("aria-modal", "false");
-    this.active = false;
-    inactive.add(this);
-  }
-}
-function addFocusTrap(element) {
-  if (!focusTraps.has(element)) {
-    focusTraps.set(element, new FocusTrap(element));
-  }
-}
-function onEscape(event) {
-  if (event.key !== "Escape") {
-    return;
-  }
-  const element = findAncestor(
-    document.activeElement,
-    `[${selector}]`
-  );
-  focusTraps.get(element)?.inactivate();
-}
-function onFocusOut() {
-  if (inactive.size === 0) {
-    return;
-  }
-  requestAnimationFrame(() => {
-    const element = findAncestor(
-      document.activeElement,
-      `[${selector}]`
-    );
-    if (!focusTraps.has(element)) {
-      for (const focusTrap of inactive) {
-        focusTrap.activate();
-      }
-    }
-  });
-}
-function onTab(event) {
-  if (event.key !== "Tab") {
-    return;
-  }
-  const element = findAncestor(
-    event.target,
-    `[${selector}]`
-  );
-  if (!(focusTraps.get(element)?.active ?? false)) {
-    return;
-  }
-  event.preventDefault();
-  const elements = getFocusable(element);
-  const { length } = elements;
-  const index = elements.indexOf(event.target);
-  if (index === -1 || length === 0) {
-    if (length === 0) {
-      element.focus();
-    } else {
-      elements[0].focus();
-    }
-    return;
-  }
-  const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
-  if (next !== index) {
-    elements[next].focus();
-  }
-}
-function removeFocusTraps(element) {
-  focusTraps.get(element)?.destroy();
-  focusTraps.delete(element);
-}
-const focusTraps = /* @__PURE__ */ new WeakMap();
-const inactive = /* @__PURE__ */ new Set();
-const selector = "oui-focus-trap";
-attributable(selector, addFocusTrap, removeFocusTraps);
-on(document, "focusout", onFocusOut, {
-  capture: true
-});
-on(document, "keydown", onTab, {
-  capture: true,
-  passive: false
-});
-on(document, "keydown", onEscape, {
-  passive: false
-});