@oscarpalmer/oui 0.17.0 → 0.18.0

package/src/js/tooltip.ts

@@ -1,7 +1,8 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
 import {attributable} from './attributable';
-import {activate, deactivate, Floatable} from './floatable';
+import {Floatable} from './floatable';
 
 type Attributes = {
 	ariaDescribedby: string | null;
@@ -14,47 +15,80 @@ type Content = {
 };
 
 class Tooltip {
-	abortController = new AbortController();
 	attributes: Attributes;
+
 	floatable: Floatable;
 
+	timer: number | undefined;
+
 	constructor(anchor: HTMLElement, content: Content) {
 		this.attributes = content.attributes;
 
-		this.floatable = new Floatable(
+		this.floatable = new Floatable({
 			anchor,
-			content.element,
-			`${selector}-position`,
-			'vertical',
-			true,
-		);
+			content: content.element,
+			defaultPosition: 'vertical',
+			interactive: false,
+			preferAbove: true,
+			positionAttribute: ATTRIBUTE_POSITION,
+		});
+
+		anchor.insertAdjacentElement('afterend', content.element);
 
-		initialize(this);
+		TOOLTIPS_ALL.set(content.element, this);
 	}
 
 	destroy(): void {
-		deactivate(this.floatable, active);
-		reset(this.floatable.anchor, this.attributes);
+		const {attributes, floatable} = this;
 
-		this.abortController.abort();
-		this.floatable.content.remove();
-		this.floatable.destroy();
+		TOOLTIPS_ACTIVE.delete(this);
+		TOOLTIPS_ALL.delete(floatable.options.anchor);
+		TOOLTIPS_ALL.delete(floatable.options.content);
+
+		reset(floatable.options.anchor, attributes);
+
+		floatable.options.content.remove();
+		floatable.destroy();
 
-		this.abortController = undefined as never;
 		this.attributes = undefined as never;
 		this.floatable = undefined as never;
 	}
 }
 
 function addTooltip(anchor: HTMLElement): void {
-	if (tooltips.has(anchor)) {
+	if (TOOLTIPS_ALL.has(anchor)) {
 		return;
 	}
 
 	const content = getContent(anchor);
 
 	if (content != null) {
-		tooltips.set(anchor, new Tooltip(anchor, content));
+		TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
+	}
+}
+
+function closeTooltips(next: Tooltip | undefined): void {
+	const tooltips = [...TOOLTIPS_ACTIVE];
+
+	for (const active of tooltips) {
+		if (active === next) {
+			continue;
+		}
+
+		if (active.timer != null) {
+			clearTimeout(active.timer);
+		}
+
+		active.floatable.options.content.removeAttribute(
+			'oui-tooltip-content-active',
+		);
+
+		requestAnimationFrame(() => {
+			active.timer = setTimeout(() => {
+				TOOLTIPS_ACTIVE.delete(active);
+				active.floatable.toggle(false);
+			}, delay) as never;
+		});
 	}
 }
 
@@ -119,7 +153,7 @@ function getContent(anchor: HTMLElement): Content | undefined {
 }
 
 function getElements(attribute: string | null): HTMLElement[] {
-	const ids = attribute?.split(/\s+/) ?? [];
+	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
 	const elements: HTMLElement[] = [];
 
 	for (const id of ids) {
@@ -144,57 +178,92 @@ function getElements(attribute: string | null): HTMLElement[] {
 function getWrapper(anchor: HTMLElement): HTMLElement {
 	const wrapper = document.createElement('div');
 
-	wrapper.setAttribute(`${selector}-content`, '');
+	wrapper.setAttribute(ATTRIBUTE_CONTENT, '');
 
-	wrapper.className = anchor.getAttribute(`${selector}-class`) ?? '';
+	wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? '';
 	wrapper.hidden = true;
-	wrapper.id = `${selector}-${++index}`;
+	wrapper.id = `${SELECTOR}-${++index}`;
 	wrapper.role = 'tooltip';
 	wrapper.tabIndex = -1;
 
 	return wrapper;
 }
 
-function initialize(tooltip: Tooltip): void {
-	const {abortController, floatable} = tooltip;
-	const {anchor, content} = floatable;
-
-	anchor.insertAdjacentElement('afterend', content);
-
-	const elements = [anchor, content];
-
-	for (const element of elements) {
-		for (const event of activateEvents) {
-			on(
-				element,
-				event,
-				() => {
-					activate(floatable, active, undefined, 250);
-				},
-				{
-					signal: abortController.signal,
-				},
-			);
+function onActivate(event: Event): void {
+	onToggle(event, true);
+}
+
+function onClick(event: Event): void {
+	if (findAncestor(event.target as HTMLElement, SELECTOR_CONTENT) != null) {
+		event.stopPropagation();
+	}
+}
+
+function onDeactivate(event: Event): void {
+	onToggle(event, false);
+}
+
+function onToggle(event: Event, activate: boolean): void {
+	if (toggle != null) {
+		cancelAnimationFrame(toggle);
+	}
+
+	toggle = requestAnimationFrame(() => {
+		toggle = undefined;
+
+		const element = findAncestor(
+			event.target as HTMLElement,
+			SELECTOR_FULL,
+		) as HTMLElement;
+
+		const tooltip = TOOLTIPS_ALL.get(element);
+
+		if (TOOLTIPS_ACTIVE.size > 0) {
+			closeTooltips(tooltip);
 		}
 
-		for (const event of deactivateEvents) {
-			on(
-				element,
-				event,
-				() => {
-					deactivate(floatable, active, undefined, 250);
-				},
-				{
-					signal: abortController.signal,
-				},
-			);
+		if (
+			tooltip == null ||
+			tooltip.floatable.options.content.hasAttribute(
+				'oui-tooltip-content-active',
+			) === activate
+		) {
+			return;
 		}
-	}
+
+		if (activate) {
+			if (tooltip.timer != null) {
+				clearTimeout(tooltip.timer);
+			}
+
+			TOOLTIPS_ACTIVE.add(tooltip);
+			tooltip.floatable.toggle(true);
+
+			requestAnimationFrame(() => {
+				tooltip.floatable.options.content.setAttribute(
+					'oui-tooltip-content-active',
+					'',
+				);
+			});
+
+			return;
+		}
+
+		tooltip.floatable.options.content.removeAttribute(
+			'oui-tooltip-content-active',
+		);
+
+		tooltip.timer ??= setTimeout(() => {
+			TOOLTIPS_ACTIVE.delete(tooltip);
+			tooltip.floatable.toggle(false);
+		}, delay) as never;
+	});
 }
 
 function removeTooltip(element: HTMLElement): void {
-	tooltips.get(element)?.destroy();
-	tooltips.delete(element);
+	if (!element.hasAttribute(ATTRIBUTE_CONTENT)) {
+		TOOLTIPS_ALL.get(element)?.destroy();
+	}
 }
 
 function reset(anchor: HTMLElement, attributes: Attributes): void {
@@ -205,28 +274,46 @@ function reset(anchor: HTMLElement, attributes: Attributes): void {
 	}
 }
 
+function setDelay(value: number): void {
+	delay = typeof value === 'number' && value >= 0 ? value : delay;
+}
+
 //
 
-const active = new Set<Floatable>();
+const SELECTOR = 'oui-tooltip';
+
+const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+
+const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+
+const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+
+const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
 
-const activateEvents = ['focus', 'mouseenter', 'touchstart'];
+const EXPRESSION_WHITESPACE = /\s+/;
 
-const deactivateEvents = ['blur', 'mouseleave'];
+const TOOLTIPS_ACTIVE: Set<Tooltip> = new Set();
 
-const selector = 'oui-tooltip';
+const TOOLTIPS_ALL: WeakMap<HTMLElement, Tooltip> = new WeakMap();
 
-const tooltips = new WeakMap<HTMLElement, Tooltip>();
+let delay = 250;
 
 let index = 0;
 
+let toggle: DOMHighResTimeStamp | undefined;
+
 //
 
-attributable(selector, addTooltip, removeTooltip);
+attributable(SELECTOR, addTooltip, removeTooltip);
 
-on(document, 'keydown', event => {
-	if (event.key === 'Escape') {
-		for (const floatable of active) {
-			deactivate(floatable, active);
-		}
-	}
-});
+on(document, 'click', onClick, {capture: true});
+on(document, 'focusin', onActivate);
+on(document, 'focusout', onDeactivate);
+on(document, 'mousemove', onActivate);
+on(document, 'touchstart', onActivate);
+
+//
+
+export {setDelay};

package/types/floatable.d.ts

@@ -1,17 +1,24 @@
 export declare class Floatable {
-    anchor: HTMLElement;
-    content: HTMLElement;
-    readonly attribute: string;
-    readonly position: Position;
-    readonly preferAbove: boolean;
-    activate: number | undefined;
+    readonly options: Options;
     active: boolean;
-    deactivate: number | undefined;
+    disabled: boolean;
     frame: DOMHighResTimeStamp | undefined;
-    constructor(anchor: HTMLElement, content: HTMLElement, attribute: string, position: Position, preferAbove: boolean);
+    ignoreFocus: boolean;
+    constructor(options: Options);
     destroy(): void;
+    disable(): void;
+    enable(): void;
+    toggle(active: boolean, ignoreFocus?: boolean): void;
 }
+type Options = {
+    anchor: HTMLElement;
+    content: HTMLElement;
+    defaultPosition: Position;
+    interactive: boolean;
+    positionAttribute: string;
+    preferAbove: boolean;
+    onAfter?: (active: boolean) => void;
+};
 type Position = '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';
-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 declare function deactivate(floatable: Floatable): void;
 export {};

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

@@ -1,11 +1,24 @@
 export declare class FocusTrap {
+    disabled: boolean;
+    connected: boolean;
     element: HTMLElement;
-    active: boolean;
-    constructor(element: HTMLElement);
+    embedded: boolean;
+    get contain(): boolean;
+    get noescape(): boolean;
+    constructor(element: HTMLElement, options?: Options);
+    connect(): void;
     destroy(): void;
     disable(): void;
+    disconnect(): void;
     enable(): void;
+    focus(last: boolean): void;
 }
-export declare function createFocusTrap(element: HTMLElement): FocusTrap;
-export declare const focusTraps: WeakMap<HTMLElement, FocusTrap>;
-export declare const selector = "oui-focus-trap";
+type Options = {
+    noescape: boolean;
+};
+export declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
+export declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
+export declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
+export declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
+export declare const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap>;
+export {};

package/types/index.d.ts

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

package/types/popover.d.ts

@@ -7,6 +7,8 @@ export declare class OuiPopoverElement extends HTMLElement {
     #private;
     constructor();
     close(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     hidePopover(): void;
     open(): void;
     showPopover(): void;

package/types/splitter.d.ts

@@ -1,11 +1,23 @@
 declare global {
     interface HTMLElementTagNameMap {
-        'oui-splitter': OuiSplitterElement;
+        [SELECTOR]: OuiSplitterElement;
     }
 }
 export declare class OuiSplitterElement extends HTMLElement {
     #private;
+    static readonly observedAttributes: string[];
+    get max(): number;
+    set max(value: number);
+    get min(): number;
+    set min(value: number);
+    get size(): number;
+    set size(value: number);
+    get type(): string;
+    set type(value: string);
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
 }
+declare const SELECTOR = "oui-splitter";
+export {};

package/types/tooltip.d.ts

@@ -1 +1,2 @@
-export {};
+declare function setDelay(value: number): void;
+export { setDelay };

package/dist/js/attributable.cjs

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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]);
-  }
-}
-exports.attributable = attributable;

package/dist/js/floatable.cjs

@@ -1,176 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-class Floatable {
-  constructor(anchor, content, attribute, position, preferAbove) {
-    this.anchor = anchor;
-    this.content = content;
-    this.attribute = attribute;
-    this.position = position;
-    this.preferAbove = preferAbove;
-    setStyles(content);
-  }
-  activate;
-  active = false;
-  deactivate;
-  frame;
-  destroy() {
-    this.activate = void 0;
-    this.deactivate = void 0;
-    this.frame = void 0;
-    this.anchor = void 0;
-    this.content = void 0;
-  }
-}
-function activate(floatable, active, order, time) {
-  stop(floatable);
-  if (floatable.active) {
-    return;
-  }
-  if (time == null || time === 0) {
-    onActivate(floatable, active, order);
-  } else {
-    floatable.activate = +setTimeout(() => {
-      onActivate(floatable, active, order);
-    }, time);
-  }
-}
-function deactivate(floatable, active, order, time) {
-  stop(floatable);
-  if (!floatable.active) {
-    return;
-  }
-  if (time == null || time === 0) {
-    onDeactivate(floatable, active, order);
-  } else {
-    floatable.deactivate = +setTimeout(() => {
-      onDeactivate(floatable, active, order);
-    }, time);
-  }
-}
-function getX(anchor, content, position) {
-  if (position.endsWith("-end")) {
-    const end = anchor.right - content.width;
-    return end - margin < 0 ? margin : end;
-  }
-  if (position.endsWith("-start")) {
-    const start = anchor.left;
-    return start + content.width + margin > window.innerWidth ? window.innerWidth - content.width - margin : start;
-  }
-  if (position.startsWith("end")) {
-    return anchor.right + margin;
-  }
-  if (position.startsWith("start")) {
-    return anchor.left - content.width - margin;
-  }
-  if (position.startsWith("horizontal")) {
-    if (anchor.right + content.width + margin <= window.innerWidth) {
-      return anchor.right + margin;
-    }
-    return anchor.left - content.width - margin;
-  }
-  return anchor.left + (anchor.width - content.width) / 2;
-}
-function getY(anchor, content, position, preferAbove) {
-  if (position.startsWith("above")) {
-    return anchor.top - content.height - margin;
-  }
-  if (position.startsWith("below")) {
-    return anchor.bottom + margin;
-  }
-  if (position.endsWith("bottom")) {
-    const bottom = anchor.bottom - content.height;
-    return bottom + margin < 0 ? margin : bottom;
-  }
-  if (position.endsWith("top")) {
-    const top = anchor.top;
-    return top + content.height + margin > window.innerHeight ? window.innerHeight - content.height - margin : top;
-  }
-  if (position.startsWith("vertical")) {
-    if (preferAbove && anchor.top - content.height - margin >= 0) {
-      return anchor.top - content.height - margin;
-    }
-    if (anchor.bottom + content.height + margin <= document.body.clientHeight) {
-      return anchor.bottom + margin;
-    }
-    return anchor.top - content.height - margin;
-  }
-  return anchor.top + (anchor.height - content.height) / 2;
-}
-function onActivate(floatable, active, order) {
-  floatable.active = true;
-  active.add(floatable);
-  if (order != null) {
-    order.push(floatable);
-  }
-  document.body.append(floatable.content);
-  floatable.content.hidden = false;
-  update(floatable);
-}
-function onDeactivate(floatable, active, order) {
-  floatable.active = false;
-  active.delete(floatable);
-  const index = order?.indexOf(floatable) ?? -1;
-  if (index > -1) {
-    order?.splice(index, 1);
-  }
-  floatable.content.hidden = true;
-  floatable.anchor.insertAdjacentElement("afterend", floatable.content);
-}
-function update(floatable) {
-  let position = floatable.anchor.getAttribute(floatable.attribute)?.trim() ?? floatable.position;
-  if (!positions.has(position)) {
-    position = floatable.position;
-  }
-  function run() {
-    const anchor = floatable.anchor.getBoundingClientRect();
-    const content = floatable.content.getBoundingClientRect();
-    const left = getX(anchor, content, position);
-    const top = getY(anchor, content, position, floatable.preferAbove);
-    floatable.content.style.inset = `${top}px auto auto ${left}px`;
-    floatable.frame = requestAnimationFrame(run);
-  }
-  floatable.frame = requestAnimationFrame(run);
-}
-function setStyles(content) {
-  content.style.position = "fixed";
-  content.style.inset = "0 auto auto 0";
-  content.style.zIndex = "10";
-}
-function stop(floatable) {
-  if (floatable.frame != null) {
-    cancelAnimationFrame(floatable.frame);
-  }
-  if (floatable.activate != null) {
-    clearTimeout(floatable.activate);
-  }
-  if (floatable.deactivate != null) {
-    clearTimeout(floatable.deactivate);
-  }
-  floatable.activate = void 0;
-  floatable.deactivate = void 0;
-  floatable.frame = void 0;
-}
-const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
-const positions = /* @__PURE__ */ 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"
-]);
-exports.Floatable = Floatable;
-exports.activate = activate;
-exports.deactivate = deactivate;