@oscarpalmer/oui 0.26.0 → 0.27.0

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
+import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
 
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
@@ -7,6 +7,10 @@ declare class OuiTooltip {
    * Is the tooltip open?
    */
   get open(): boolean;
+  /**
+   * Open or close the tooltip
+   */
+  set open(value: boolean);
   constructor(state: OuiTooltipState);
   /**
    * Closes the tooltip
@@ -19,11 +23,17 @@ declare class OuiTooltip {
 }
 type OuiTooltipState = {
   anchor: HTMLElement;
-  content: HTMLElement;
+  elements: HTMLElement[];
   floatable: OuiFloatable;
   timer?: number;
   tooltip: OuiTooltip;
 };
+/**
+ * Get the _OuiTooltip_ for an element
+ *
+ * @param element Element to get _OuiTooltip_ for
+ * @returns _OuiTooltip_ instance
+ */
 declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
 /**
  * Set the delay before showing the tooltip, in milliseconds

package/dist/js/tooltip.mjs

@@ -1,4 +1,4 @@
-import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -12,7 +12,14 @@ var OuiTooltip = class {
 	* Is the tooltip open?
 	*/
 	get open() {
-		return this.#state.content.checkVisibility();
+		return this === activeTooltip && content.checkVisibility();
+	}
+	/**
+	* Open or close the tooltip
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
 	}
 	constructor(state) {
 		this.#state = state;
@@ -32,52 +39,50 @@ var OuiTooltip = class {
 	}
 };
 function activate(event, focus) {
-	const anchor = findAncestor(event, SELECTOR);
-	const content = findAncestor(event, SELECTOR_CONTENT);
-	if (anchor == null && content == null) {
+	const targetAnchor = findAncestor(event, SELECTOR);
+	const targetContent = findAncestor(event, SELECTOR_CONTENT);
+	if (targetAnchor == null && targetContent == null) {
 		if (!focused) {
-			closeTooltip(activeState);
+			closeTooltip(true, activeState);
 			activeState = void 0;
 			activeTooltip = void 0;
 		}
 		return;
 	}
-	const state = states.get(anchor ?? content);
+	const state = states.get(targetAnchor ?? targetContent);
 	if (state == null || state.tooltip === activeTooltip) return;
 	const shouldDelay = activeTooltip == null;
-	closeTooltip(activeState);
+	closeTooltip(false, activeState);
 	activeState = state;
 	activeTooltip = state.tooltip;
 	focused = focus;
 	state.timer = setTimeout(() => {
-		state.content.showPopover({ source: state.anchor });
+		content.innerHTML = "";
+		content.append(...state.elements);
+		state.floatable.show();
 		setTimeout(() => {
 			state.floatable.update();
-			state.content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
 		});
 	}, shouldDelay ? delay : 0);
 }
 function addTooltip(element) {
 	if (!states.has(element)) createTooltip(element);
 }
-function closeTooltip(state) {
+function closeTooltip(clear, state) {
 	if (state == null) return;
 	if (state.timer != null) clearTimeout(state.timer);
-	state.content?.hidePopover();
-	state.content?.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	if (clear) content?.hidePopover();
 }
 function createTooltip(anchor) {
-	const content = getContent(anchor);
-	if (content == null) return;
-	anchor.insertAdjacentElement("afterend", content);
-	states.set(anchor, getState(anchor, content));
+	const elements = getElements(anchor);
+	if (elements == null) return;
+	states.set(anchor, getState(anchor, elements));
 }
 function destroyTooltip(state) {
 	clearTimeout(state.timer);
-	state.content.remove();
 	state.floatable.destroy();
 	state.anchor = void 0;
-	state.content = void 0;
+	state.elements = void 0;
 	state.floatable = void 0;
 	state.tooltip = void 0;
 }
@@ -95,40 +100,43 @@ function findElements(attribute) {
 	}
 	return elements;
 }
-function getContent(anchor) {
-	const elements = getElements(anchor);
-	if (elements == null) return;
+function getContent() {
 	const content = createElement(CONTENT_TAGNAME, {
 		popover: "hint",
 		role: "tooltip",
 		tabIndex: -1
 	});
 	content.setAttribute(ATTRIBUTE_CONTENT, "");
-	content.append(...elements);
 	return content;
 }
 function getElements(anchor) {
 	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	if (elements.length > 0) return elements;
 	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
-	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
-	let content = anchor.getAttribute(ARIA_LABEL);
-	if (isNullableOrWhitespace(content)) content = anchor.getAttribute(ARIA_DESCRIPTION);
-	if (isNullableOrWhitespace(content)) return;
+	if (elements.length > 0) return elements;
+	let text = anchor.getAttribute(ARIA_LABEL);
+	if (isNullableOrWhitespace(text)) text = anchor.getAttribute(ARIA_DESCRIPTION);
+	if (isNullableOrWhitespace(text)) return;
 	const paragraph = document.createElement("p");
-	paragraph.textContent = content;
+	paragraph.textContent = text;
 	return [paragraph];
 }
-function getState(anchor, content) {
+function getState(anchor, elements) {
 	const state = {
 		anchor,
-		content,
+		elements,
 		floatable: createEmbeddedFloatable(anchor, content, options),
 		tooltip: null
 	};
 	state.tooltip = new OuiTooltip(state);
 	return state;
 }
+/**
+* Get the _OuiTooltip_ for an element
+*
+* @param element Element to get _OuiTooltip_ for
+* @returns _OuiTooltip_ instance
+*/
 function getTooltip(element) {
 	return states.get(element)?.tooltip;
 }
@@ -140,7 +148,7 @@ function onFocusout() {
 	if (focusTimer != null) clearTimeout(focusTimer);
 	focusTimer = setTimeout(() => {
 		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
-		closeTooltip(activeState);
+		closeTooltip(true, activeState);
 		activeState = void 0;
 		activeTooltip = void 0;
 	});
@@ -148,6 +156,10 @@ function onFocusout() {
 function onPointermove(event) {
 	activate(event, false);
 }
+function onToggle(event) {
+	if (event.newState === "open") content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
+	else content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+}
 function removeTooltip(element) {
 	const state = states.get(element);
 	if (state == null) return;
@@ -174,16 +186,20 @@ const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
 const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const content = getContent();
 const states = /* @__PURE__ */ new WeakMap();
 const options = {
 	attribute: `${ATTRIBUTE}-position`,
-	position: "above"
+	position: "above",
+	reusable: true
 };
 let delay = 500;
 let focused = false;
 let activeState;
 let activeTooltip;
 let focusTimer;
+document.body.append(content);
+on(content, "toggle", onToggle);
 on(document, "focusin", onFocusin);
 on(document, "focusout", onFocusout);
 on(document, "pointermove", onPointermove);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.26.0",
+	"version": "0.27.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -38,24 +38,24 @@
 			"default": "./dist/js/dialog.mjs"
 		},
 		"./floatable": {
-			"types": "./dist/js/floatable/standalone.d.mts",
-			"default": "./dist/js/floatable/standalone.mjs"
+			"types": "./dist/js/floatable/floatable.standalone.d.mts",
+			"default": "./dist/js/floatable/floatable.standalone.mjs"
 		},
 		"./focus-trap": {
-			"types": "./dist/js/focus-trap/standalone.d.mts",
-			"default": "./dist/js/focus-trap/standalone.mjs"
+			"types": "./dist/js/focus-trap/focus-trap.standalone.d.mts",
+			"default": "./dist/js/focus-trap/focus-trap.standalone.mjs"
 		},
 		"./movable": {
-			"types": "./dist/js/movable.d.mts",
-			"default": "./dist/js/movable.mjs"
+			"types": "./dist/js/movable/movable.standalone.d.mts",
+			"default": "./dist/js/movable/movable.standalone.mjs"
 		},
 		"./popover": {
 			"types": "./dist/js/popover.d.mts",
 			"default": "./dist/js/popover.mjs"
 		},
 		"./sortable": {
-			"types": "./dist/js/sortable.d.mts",
-			"default": "./dist/js/sortable.mjs"
+			"types": "./dist/js/sortable/sortable.standalone.d.mts",
+			"default": "./dist/js/sortable/sortable.standalone.mjs"
 		},
 		"./splitter": {
 			"types": "./dist/js/splitter.d.mts",
@@ -86,7 +86,7 @@
 		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.70",
+		"@oxlint/plugins": "^1.72",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",
@@ -95,7 +95,7 @@
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.101",
-		"stylelint": "^17.13",
+		"stylelint": "^17.14",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",
 		"typescript": "^6",

package/src/css/floatable.scss

@@ -77,8 +77,6 @@
 :where([oui-tooltip-content]) {
 	max-width: 48ch;
 	padding: 0.75em 1em;
-	overflow: visible;
-	opacity: 0;
 	background-color: var(--oui-absolute);
 	border-radius: 0.25rem;
 	font-size: 0.875rem;

package/src/css/message.scss

@@ -24,6 +24,7 @@
 	}
 
 	:where(& h2, & h3, & h4, & h5, & h6) {
+		color: var(--oui-foreground, var(--oui-gray-10));
 		font-size: 1em;
 		font-weight: bold;
 	}

package/src/css/reset.scss

@@ -123,6 +123,7 @@
 
 :where(dialog) {
 	display: none !important;
+	overflow: visible;
 	overscroll-behavior: contain;
 	border: none;
 	color: currentcolor;

package/src/js/dialog.ts

@@ -1,7 +1,9 @@
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {getOnBeforeToggleListener} from './floatable/embedded';
+import {getOnBeforeToggleListener} from './floatable/floatable.embedded';
 import {attributable} from './internal/attributable';
+import {ATTRIBUTE_MOVABLE_HANDLE} from './movable/movable.embedded';
+import {createMovable, type OuiMovable} from './movable/movable.standalone';
 
 // #region Types
 
@@ -15,6 +17,17 @@ class OuiDialog {
 		return this.#state.element.open;
 	}
 
+	/**
+	 * Open or close the dialog
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiDialogState) {
 		this.#state = state;
 	}
@@ -68,6 +81,7 @@ type OuiDialogState = {
 	element: HTMLDialogElement;
 	listeners: RemovableEventListener[];
 	modal: boolean;
+	movable?: OuiMovable;
 };
 
 // #endregion
@@ -109,6 +123,22 @@ function getDialog(element: HTMLDialogElement): OuiDialog | undefined {
 	return states.get(element)?.dialog;
 }
 
+function getMovable(element: HTMLDialogElement): OuiMovable | undefined {
+	const handles = element.querySelectorAll(SELECTOR_MOVER);
+
+	if (handles.length === 0) {
+		return;
+	}
+
+	for (const handle of handles) {
+		handle.setAttribute(ATTRIBUTE_MOVABLE_HANDLE, '');
+	}
+
+	return createMovable(element, {
+		container: element.getAttribute(ATTRIBUTE_CONTAINER) ?? undefined,
+	});
+}
+
 function getState(element: HTMLDialogElement): OuiDialogState {
 	const state: OuiDialogState = {
 		element,
@@ -125,9 +155,15 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 
 					element.setAttribute(ARIA_MODAL, String(modal));
 					element.setAttribute(ATTRIBUTE_OPEN, '');
+
+					element.focus();
 				} else {
 					element.removeAttribute(ATTRIBUTE_OPEN);
 					element.setAttribute(ARIA_MODAL, String(state.modal));
+
+					element.style.inset = '';
+					element.style.position = '';
+					element.style.transform = '';
 				}
 			}),
 		],
@@ -135,6 +171,7 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 	};
 
 	state.dialog = new OuiDialog(state);
+	state.movable = getMovable(element);
 
 	return state;
 }
@@ -159,6 +196,8 @@ const ARIA_MODAL = 'aria-modal';
 
 const ATTRIBUTE = 'oui-dialog';
 
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
 const COMMAND_SHOW_MODAL = 'show-modal';
@@ -167,6 +206,8 @@ const EVENT_TOGGLE = 'toggle';
 
 const MESSAGE = 'The element must be an instance of HTMLDialogElement';
 
+const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
+
 const SELECTOR_MODAL = ':modal';
 
 const TRUE = 'true';

package/src/js/floatable/{embedded.ts → floatable.embedded.ts}

@@ -5,13 +5,13 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 
 // #region Types
 
-type CreateOuiFloatableOptions = {
+export type CreateOuiFloatableOptions = {
 	/**
-	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+	 * Open the floatable when created? _(defaults to `true`)_
 	 */
 	open?: boolean;
 	/**
-	 * Position of the _OuiFloatable_ _(defaults to `below`)_
+	 * Position of the floatable _(defaults to `below`)_
 	 */
 	position?: OuiFloatablePosition;
 };
@@ -22,14 +22,14 @@ export class OuiFloatable {
 	readonly #state: OuiFloatableState;
 
 	/**
-	 * Is the _OuiFloatable_ open?
+	 * Is the floatable open?
 	 */
 	get open(): boolean {
 		return this.#state.content.checkVisibility();
 	}
 
 	/**
-	 * Open or close the _OuiFloatable_
+	 * Open or close the floatable
 	 */
 	set open(value: boolean) {
 		if (value === true) {
@@ -50,14 +50,12 @@ export class OuiFloatable {
 			content.popover = 'manual';
 		}
 
-		const anchorName = getAnchorName(anchor);
-
-		anchor.style.anchorName = anchorName;
-		content.style.positionAnchor = anchorName;
+		anchor.style.anchorName = state.name;
+		content.style.positionAnchor = state.name;
 	}
 
 	/**
-	 * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	 * Destroy the floatable, removing it from the DOM and cleaning up references
 	 */
 	destroy(): void {
 		if (this.#destroyed) {
@@ -73,7 +71,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Closes the _OuiFloatable_
+	 * Closes the floatable
 	 */
 	hide(): void {
 		if (!this.#destroyed && this.open) {
@@ -82,7 +80,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Opens the _OuiFloatable_
+	 * Opens the floatable
 	 */
 	show(): void {
 		if (!this.#destroyed && !this.open) {
@@ -91,7 +89,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Update the position of the _OuiFloatable_, with an optional new position
+	 * Update the position of the floatable, with an optional new position
 	 *
 	 * @param position Optional new position
 	 */
@@ -105,6 +103,7 @@ export class OuiFloatable {
 export type OuiFloatableOptions = {
 	attribute?: string;
 	position: OuiFloatablePosition;
+	reusable: boolean;
 };
 
 export type OuiFloatablePosition =
@@ -124,6 +123,7 @@ export type OuiFloatablePosition =
 type OuiFloatableState = {
 	anchor: HTMLElement;
 	content: HTMLElement;
+	name: string;
 	options: OuiFloatableOptions;
 };
 
@@ -171,6 +171,7 @@ export function createFloatable(
 		content,
 		{
 			position,
+			reusable: false,
 		},
 		true,
 	);
@@ -194,12 +195,14 @@ function createInstance(
 		throw new TypeError(MESSAGE);
 	}
 
-	let floatable = instances.get(content);
+	let floatable = options.reusable ? undefined : instances.get(content);
 
 	if (floatable == null) {
 		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
 
-		instances.set(content, floatable);
+		if (!options.reusable) {
+			instances.set(content, floatable);
+		}
 	}
 
 	return floatable;
@@ -212,7 +215,7 @@ export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventL
 		event => {
 			const {newState, source} = event;
 
-			if (newState === STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
+			if (newState === FLOATABLE_STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
 				event.preventDefault();
 			}
 		},
@@ -255,9 +258,12 @@ function getState(
 	content: HTMLElement,
 	options: OuiFloatableOptions,
 ): OuiFloatableState {
+	const name = getAnchorName(anchor);
+
 	const state: OuiFloatableState = {
 		anchor,
 		content,
+		name,
 		options,
 	};
 
@@ -266,6 +272,7 @@ function getState(
 
 export function removeFloatable(content: HTMLElement): void {
 	instances.get(content)?.destroy();
+
 	instances.delete(content);
 }
 
@@ -274,6 +281,7 @@ function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition):
 
 	const area = AREAS[position];
 
+	state.content.style.positionAnchor = state.name;
 	state.content.style.positionArea = area;
 
 	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
@@ -306,14 +314,14 @@ const ATTRIBUTE_POSITION = 'oui-position';
 
 const EVENT_BEFORE = 'beforetoggle';
 
+export const FLOATABLE_STATE_OPEN = 'open';
+
 const MESSAGE = 'Anchor and content must be an HTMLElement or SVGElement';
 
 const POSITIONS = Object.fromEntries(
 	Object.entries(AREAS).map(([position, area]) => [area, position]),
 ) as Record<string, OuiFloatablePosition>;
 
-const STATE_OPEN = 'open';
-
 const TRUE = 'true';
 
 const instances = new WeakMap<HTMLElement, OuiFloatable>();

package/src/js/floatable/floatable.standalone.ts

@@ -0,0 +1,6 @@
+export {
+	createFloatable,
+	type CreateOuiFloatableOptions,
+	type OuiFloatable,
+	type OuiFloatablePosition,
+} from './floatable.embedded';