@oscarpalmer/oui 0.26.1 → 0.27.0

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
 
@@ -79,6 +81,7 @@ type OuiDialogState = {
 	element: HTMLDialogElement;
 	listeners: RemovableEventListener[];
 	modal: boolean;
+	movable?: OuiMovable;
 };
 
 // #endregion
@@ -120,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,
@@ -136,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 = '';
 				}
 			}),
 		],
@@ -146,6 +171,7 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 	};
 
 	state.dialog = new OuiDialog(state);
+	state.movable = getMovable(element);
 
 	return state;
 }
@@ -170,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';
@@ -178,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,7 +5,7 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 
 // #region Types
 
-type CreateOuiFloatableOptions = {
+export type CreateOuiFloatableOptions = {
 	/**
 	 * Open the floatable when created? _(defaults to `true`)_
 	 */
@@ -50,10 +50,8 @@ 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;
 	}
 
 	/**
@@ -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';

package/src/js/focus-trap/{embedded.ts → focus-trap.embedded.ts}

@@ -4,6 +4,7 @@ import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {attributable} from '../internal/attributable';
 
 // #region Types
 
@@ -14,14 +15,14 @@ export class OuiFocusTrap {
 	readonly #state: OuiFocusTrapState;
 
 	/**
-	 * Is focused maintained within the _FocusTrap_ when clicking outside of it?
+	 * Is focused maintained within the _focus trap_ when clicking outside of it?
 	 */
 	get contain(): boolean {
 		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
 	}
 
 	/**
-	 * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+	 * Should focus be maintained within the _focus trap_ when clicking outside of it?
 	 */
 	set contain(value: boolean) {
 		if (value === true) {
@@ -32,14 +33,14 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Is the _FocusTrap_ disabled?
+	 * Is the _focus trap_ disabled?
 	 */
 	get disabled(): boolean {
 		return this.#state.disabled;
 	}
 
 	/**
-	 * Should the _FocusTrap_ be disabled?
+	 * Should the _focus trap_ be disabled?
 	 */
 	set disabled(value: boolean) {
 		if (value === true) {
@@ -50,14 +51,14 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Is focus allowed to escape when pressing _Escape_ within the _FocusTrap_?
+	 * Is focus allowed to escape when pressing _Escape_ within the _focus trap_?
 	 */
 	get noescape(): boolean {
 		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
 	}
 
 	/**
-	 * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+	 * Should the _focus trap_ allow focus to escape when pressing _Escape_?
 	 */
 	set noescape(value: boolean) {
 		if (value === true) {
@@ -82,7 +83,7 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Destroys the _FocusTrap_
+	 * Destroys the _focus trap_
 	 */
 	destroy(): void {
 		if (this.#destroyed) {
@@ -105,7 +106,7 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Disables the _FocusTrap_
+	 * Disables the _focus trap_
 	 */
 	disable(): void {
 		if (!this.#destroyed && !(this.disabled || this.#state.options.noescape)) {
@@ -114,7 +115,7 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Enables the _FocusTrap_
+	 * Enables the _focus trap_
 	 */
 	enable(): void {
 		if (!this.#destroyed && this.disabled) {
@@ -123,9 +124,9 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Focuses the _FocusTrap_
+	 * Focuses the _focus trap_
 	 *
-	 * @param last When `true`, focuses the last focusable element within the _FocusTrap_ instead of the first
+	 * @param last When `true`, focuses the last focusable element within the _focus trap_ instead of the first
 	 */
 	focus(last: boolean): void {
 		if (!this.#destroyed && !this.disabled) {
@@ -134,13 +135,13 @@ export class OuiFocusTrap {
 	}
 }
 
-type OuiFocusTrapOptions = {
+export type OuiFocusTrapOptions = {
 	/**
-	 * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+	 * Should focus be maintained within the _focus trap_ when clicking outside of it?
 	 */
 	contain?: boolean;
 	/**
-	 * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+	 * Should the _focus trap_ allow focus to escape when pressing _Escape_?
 	 */
 	noescape?: boolean;
 };
@@ -156,11 +157,11 @@ type OuiFocusTrapState = {
 // #region Functions
 
 /**
- * Creates _(or retrieves)_ a _FocusTrap_ for an element
+ * Creates _(or retrieves)_ a _focus trap_ for an element
  *
  * @param element Element to trap focus within
- * @param options _FocusTrap_ options
- * @returns _FocusTrap_ instance
+ * @param options _Focus trap_ options
+ * @returns _Focus trap_ instance
  */
 export function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap {
 	if (!isHTMLOrSVGElement(element)) {
@@ -399,6 +400,8 @@ let lastTarget: HTMLElement | undefined;
 
 // #region Initialization
 
+attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
+
 on(document, 'focusin', onFocusIn, EVENT_OPTIONS);
 on(document, 'keydown', onKeydown, EVENT_OPTIONS);
 on(document, 'mousedown', onPointerdown, EVENT_OPTIONS);

package/src/js/focus-trap/focus-trap.standalone.ts

@@ -0,0 +1 @@
+export {createFocusTrap, type OuiFocusTrap, type OuiFocusTrapOptions} from './focus-trap.embedded';

package/src/js/index.ts

@@ -1,10 +1,10 @@
-import './movable';
-import './sortable';
+import './sortable/sortable.embedded';
 import './toolbar';
 
 export * from './dialog';
-export * from './floatable/standalone';
-export * from './focus-trap/standalone';
+export * from './floatable/floatable.standalone';
+export * from './focus-trap/focus-trap.standalone';
+export * from './movable/movable.standalone';
 export * from './popover';
 export * from './splitter';
 export * from './tooltip';