@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/js/popover.ts

@@ -1,229 +0,0 @@
-import {getAria, setAria} from '@oscarpalmer/toretto/aria';
-import {setAttribute} from '@oscarpalmer/toretto/attribute';
-import {on} from '@oscarpalmer/toretto/event';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {
-	ATTRIBUTE_FLOATABLE,
-	createEmbeddedFloatable,
-	getOnBeforeToggleListener,
-	type OuiFloatable,
-	type OuiFloatableOptions,
-} from './floatable/floatable.embedded';
-import {createFocusTrap, type OuiFocusTrap} from './focus-trap/focus-trap.embedded';
-import {attributable} from './internal/attributable';
-
-// #region Types
-
-class OuiPopover {
-	readonly #state: OuiPopoverState;
-
-	/**
-	 * Is the popover open?
-	 */
-	get open(): boolean {
-		return this.#state.content.checkVisibility();
-	}
-
-	set open(value: boolean) {
-		if (value === true) {
-			this.show();
-		} else if (value === false) {
-			this.hide();
-		}
-	}
-
-	constructor(state: OuiPopoverState) {
-		this.#state = state;
-
-		initialize(state);
-
-		this.#state.floatable.update();
-	}
-
-	/**
-	 * Closes the popover
-	 */
-	hide(): void {
-		this.#state.floatable.hide();
-	}
-
-	/**
-	 * Opens the popover
-	 */
-	show(): void {
-		this.#state.floatable.show();
-	}
-}
-
-type OuiPopoverState = {
-	anchor: HTMLElement;
-	content: HTMLElement;
-	floatable: OuiFloatable;
-	focusTrap?: OuiFocusTrap;
-	listeners: RemovableEventListener[];
-	popover: OuiPopover;
-};
-
-// #endregion
-
-// #region Functions
-
-function addPopover(element: HTMLElement): void {
-	if (states.has(element) || element.hasAttribute(ATTRIBUTE_FLOATABLE)) {
-		return;
-	}
-
-	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
-
-	if (isHTMLOrSVGElement(anchor)) {
-		states.set(element, getState(anchor, element));
-	}
-}
-
-function destroyPopover(state: OuiPopoverState): void {
-	state.floatable.destroy();
-	state.focusTrap?.destroy();
-
-	for (const listener of state.listeners) {
-		listener();
-	}
-
-	state.anchor = undefined as never;
-	state.content = undefined as never;
-	state.floatable = undefined as never;
-	state.focusTrap = undefined as never;
-	state.listeners = undefined as never;
-	state.popover = undefined as never;
-}
-
-function getId(element: HTMLElement, value?: string): string {
-	let {id} = element;
-
-	if (id == null || id.trim().length === 0) {
-		id = value == null ? `oui_popover_${++index}` : `${value}_toggle`;
-
-		element.id = id;
-	}
-
-	return id;
-}
-
-/**
- * Get the _OuiPopover_ for an element
- *
- * @param element Element to get _OuiPopover_ for
- * @returns _OuiPopover_ instance
- */
-function getPopover(element: HTMLElement): OuiPopover | undefined {
-	return states.get(element)?.popover;
-}
-
-function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
-	const state: OuiPopoverState = {
-		anchor,
-		content,
-		floatable: createEmbeddedFloatable(anchor, content, options),
-		focusTrap:
-			getAria(content, 'modal') === true
-				? createFocusTrap(content, {
-						noescape: true,
-					})
-				: undefined,
-		listeners: [
-			getOnBeforeToggleListener(content),
-			on(content, 'toggle', event => {
-				const expanded = event.newState === 'open';
-
-				if (expanded) {
-					ignoreFocus = false;
-
-					state.floatable?.update();
-
-					content.focus();
-				} else {
-					if (!ignoreFocus) {
-						anchor?.focus();
-					}
-				}
-
-				setAria(anchor, 'expanded', expanded);
-				setAttribute(content, ATTRIBUTE_OPEN, expanded ? '' : undefined);
-			}),
-		],
-		popover: undefined as never,
-	};
-
-	state.popover = new OuiPopover(state);
-
-	return state;
-}
-
-function initialize(state: OuiPopoverState): void {
-	const id = getId(state.content);
-
-	setAria(state.anchor, {
-		controls: id,
-		expanded: 'false',
-	});
-
-	const label = getAria(state.content, 'label') ?? getAria(state.content, 'labelledby');
-
-	if (label == null) {
-		setAria(state.content, 'labelledby', getId(state.anchor, id));
-	}
-}
-
-function onPointerdown(): void {
-	ignoreFocus = true;
-}
-
-function removePopover(element: HTMLElement): void {
-	const state = states.get(element);
-
-	if (state == null) {
-		return;
-	}
-
-	destroyPopover(state);
-
-	states.delete(element);
-}
-
-// #endregion
-
-// #region Variables
-
-const ATTRIBUTE = 'oui-popover';
-
-const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
-
-const options: OuiFloatableOptions = {
-	attribute: `${ATTRIBUTE}-position`,
-	position: 'below-start',
-	reusable: false,
-};
-
-const states = new WeakMap<HTMLElement, OuiPopoverState>();
-
-let ignoreFocus = false;
-
-let index = 0;
-
-// #endregion
-
-// #region Initialization
-
-on(document, 'pointerdown', onPointerdown, {
-	capture: true,
-});
-
-attributable(ATTRIBUTE, addPopover, removePopover);
-
-// #endregion
-
-// #region Exports
-
-export {getPopover, type OuiPopover};
-
-// #endregion

package/src/js/resizable/resizable.embedded.ts

@@ -1,413 +0,0 @@
-import {isPlainObject} from '@oscarpalmer/atoms/is';
-import type {EventPosition} from '@oscarpalmer/atoms/models';
-import {getNumber} from '@oscarpalmer/atoms/number';
-import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import {dispatch, getEventPosition, on} from '@oscarpalmer/toretto/event';
-import {findAncestor} from '@oscarpalmer/toretto/find';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
-import supportsTouch from '@oscarpalmer/toretto/touch';
-import {attributable} from '../internal/attributable';
-
-// #region Types
-
-export type CreateOuiResizableOptions = {
-	maximumHeight?: number;
-	maximumWidth?: number;
-	minimumHeight?: number;
-	minimumWidth?: number;
-};
-
-export class OuiResizable {
-	readonly #state: OuiResizableState;
-
-	constructor(state: OuiResizableState) {
-		this.#state = state;
-	}
-
-	destroy(): void {
-		destroyResizable(this.#state);
-	}
-
-	set(): void {
-		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
-
-		this.#state.width = width;
-		this.#state.height = height;
-	}
-
-	reset(): void {
-		setStyles(this.#state.element, {
-			height: '',
-			width: '',
-		});
-	}
-}
-
-type OuiResizableItem = {
-	instance: OuiResizable;
-	state: OuiResizableState;
-};
-
-type OuiResizableState = {
-	element: HTMLElement;
-	handle: HTMLElement;
-	height: number;
-	options: Required<CreateOuiResizableOptions>;
-	styles: StyleToggler;
-	width: number;
-};
-
-// #endregion
-
-// #region Functions
-
-function addResizable(
-	element: HTMLElement,
-	options?: CreateOuiResizableOptions,
-): OuiResizable | undefined {
-	let item = items.get(element);
-
-	if (item == null) {
-		const handle = element.querySelector(SELECTOR_HANDLE_SCOPED);
-
-		if (!isHTMLOrSVGElement(handle)) {
-			return;
-		}
-
-		const state = getState(element, handle, options);
-		const instance = new OuiResizable(state);
-
-		item = {
-			instance,
-			state,
-		};
-
-		items.set(element, item);
-	}
-
-	return item?.instance;
-}
-
-function cancelResize(item?: OuiResizableItem): void {
-	if (item == null) {
-		return;
-	}
-
-	setStyles(item.state.element, {
-		height: `${item.state.height}px`,
-		width: `${item.state.width}px`,
-	});
-
-	resetResizable();
-
-	dispatch(item.state.element, 'oui:resizable:cancel');
-}
-
-/**
- * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
- *
- * @param element Element to make resizable
- * @returns _OuiResizable_ instance
- */
-export function createResizable(
-	element: HTMLElement,
-	options?: CreateOuiResizableOptions,
-): OuiResizable {
-	if (!isHTMLOrSVGElement(element)) {
-		throw new TypeError(MESSAGE_ELEMENT);
-	}
-
-	if (!isHTMLOrSVGElement(element.querySelector(SELECTOR_HANDLE_SCOPED))) {
-		throw new Error(MESSAGE_HANDLE);
-	}
-
-	return addResizable(element, options ?? {})!;
-}
-
-function destroyResizable(state: OuiResizableState): void {
-	state.element = undefined as never;
-	state.handle = undefined as never;
-}
-
-function getAndSetDimensions(
-	element: HTMLElement,
-	options: Required<CreateOuiResizableOptions>,
-	input?: Pick<DOMRect, 'height' | 'width'>,
-): [number, number] {
-	let {height, width} = input ?? element.getBoundingClientRect();
-
-	if (options.maximumWidth > -1 && width > options.maximumWidth) {
-		width = options.maximumWidth;
-	} else if (options.minimumWidth > -1 && width < options.minimumWidth) {
-		width = options.minimumWidth;
-	}
-
-	if (options.maximumHeight > -1 && height > options.maximumHeight) {
-		height = options.maximumHeight;
-	} else if (options.minimumHeight > -1 && height < options.minimumHeight) {
-		height = options.minimumHeight;
-	}
-
-	if (element.checkVisibility()) {
-		setStyles(element, {
-			height: `${height}px`,
-			width: `${width}px`,
-		});
-	}
-
-	return [width, height];
-}
-
-function getProperties(
-	element: HTMLElement,
-	widthProperty: 'maxWidth' | 'minWidth',
-	heightProperty: 'maxHeight' | 'minHeight',
-): [string, string] {
-	const computed = getComputedStyle(element);
-
-	return [computed[widthProperty], computed[heightProperty]];
-}
-
-function getRestrictions(
-	maximum: string | [unknown, unknown],
-	minimum: string | [unknown, unknown],
-): Required<CreateOuiResizableOptions> {
-	const [maximumWidth, maximumHeight] = getXAndY.apply(
-		null,
-		typeof maximum === 'string' ? [maximum] : maximum,
-	);
-
-	const [minimumWidth, minimumHeight] = getXAndY.apply(
-		null,
-		typeof minimum === 'string' ? [minimum] : minimum,
-	);
-
-	if (maximumWidth > -1 && minimumWidth > -1 && maximumWidth <= minimumWidth) {
-		throw new Error(MESSAGE_WIDTH);
-	}
-
-	if (maximumHeight > -1 && minimumHeight > -1 && maximumHeight <= minimumHeight) {
-		throw new Error(MESSAGE_HEIGHT);
-	}
-
-	return {
-		maximumHeight,
-		maximumWidth,
-		minimumHeight,
-		minimumWidth,
-	};
-}
-
-function getState(
-	element: HTMLElement,
-	handle: HTMLElement,
-	input?: CreateOuiResizableOptions,
-): OuiResizableState {
-	setAttribute(element, RESIZABLE_ATTRIBUTE, '');
-
-	const options = getValidOptions(element, input);
-
-	const [width, height] = getAndSetDimensions(element, options);
-
-	return {
-		element,
-		handle,
-		height,
-		options,
-		width,
-		styles: toggleStyles(element, styles),
-	};
-}
-
-function getValidOptions(
-	element: HTMLElement,
-	input?: CreateOuiResizableOptions,
-): Required<CreateOuiResizableOptions> {
-	const original = isPlainObject(input) ? input : {};
-
-	return {
-		...getRestrictions(
-			input == null
-				? (getAttribute(element, ATTRIBUTE_MAXIMUM) ??
-						getProperties(element, 'maxWidth', 'maxHeight'))
-				: [original.maximumWidth, original.maximumHeight],
-			input == null
-				? (getAttribute(element, ATTRIBUTE_MINIMUM) ??
-						getProperties(element, 'minWidth', 'minHeight'))
-				: [original.minimumWidth, original.minimumHeight],
-		),
-	};
-}
-
-function getXAndY(first: unknown, second?: unknown): [number, number] {
-	const [x, y] = typeof first === 'string' && second == null ? first.split(',') : [first, second];
-
-	let xAsNumber = typeof x === 'string' ? Number.parseFloat(x) : getNumber(x);
-	let yAsNumber = typeof y === 'string' ? Number.parseFloat(y) : getNumber(y);
-
-	if (Number.isNaN(xAsNumber) || xAsNumber <= 0) {
-		xAsNumber = -1;
-	}
-
-	if (Number.isNaN(yAsNumber) || yAsNumber <= 0) {
-		yAsNumber = -1;
-	}
-
-	return [xAsNumber, yAsNumber];
-}
-
-function onKeydown(event: KeyboardEvent): void {
-	if (current != null && event.key === 'Escape') {
-		cancelResize(current);
-	}
-}
-
-function onPointerdown(event: MouseEvent | TouchEvent): void {
-	if (
-		event.altKey ||
-		event.ctrlKey ||
-		event.metaKey ||
-		event.shiftKey ||
-		(supportsTouch.value
-			? event.type === 'mousedown'
-			: event.type === 'touchstart' || (event as MouseEvent).button !== 0)
-	) {
-		return;
-	}
-
-	const handle = findAncestor(event, SELECTOR_HANDLE);
-	const element = handle && findAncestor(handle, SELECTOR);
-	const stored = element && items.get(element as HTMLElement);
-	const position = getEventPosition(event);
-
-	if (stored == null || position == null) {
-		return;
-	}
-
-	if (supportsTouch.value) {
-		event.preventDefault();
-	}
-
-	if (dispatch(element!, 'oui:resizable:begin').defaultPrevented) {
-		return;
-	}
-
-	current = stored;
-	start = position;
-
-	current.state.styles.set();
-	styleToggler.set();
-}
-
-function onPointermove(event: MouseEvent | TouchEvent): void {
-	if (current == null) {
-		return;
-	}
-
-	const {x, y} = getEventPosition(event) ?? {};
-
-	if (x == null || y == null) {
-		return;
-	}
-
-	const width = current.state.width + (x - (start?.x ?? 0));
-	const height = current.state.height + (y - (start?.y ?? 0));
-
-	getAndSetDimensions(current.state.element, current.state.options, {height, width});
-
-	if (
-		dispatch(current.state.element, 'oui:resizable:resize', {
-			detail: {
-				height,
-				width,
-			},
-		}).defaultPrevented
-	) {
-		cancelResize(current);
-	}
-}
-
-function onPointerup(): void {
-	if (current == null || dispatch(current.state.element, 'oui:resizable:end').defaultPrevented) {
-		cancelResize(current);
-
-		return;
-	}
-
-	const {height, width} = current.state.element.getBoundingClientRect();
-
-	current.state.height = height;
-	current.state.width = width;
-
-	resetResizable();
-}
-
-function removeResizable(element: HTMLElement): void {
-	items.get(element)?.instance.destroy();
-
-	items.delete(element);
-}
-
-function resetResizable(): void {
-	current?.state.styles.remove();
-	styleToggler.remove();
-
-	current = undefined;
-	start = undefined;
-}
-
-// #endregion
-
-// #region Variables
-
-export const RESIZABLE_ATTRIBUTE = 'oui-resizable';
-
-export const RESIZABLE_ATTRIBUTE_HANDLE = `${RESIZABLE_ATTRIBUTE}-handle`;
-
-const ATTRIBUTE_MAXIMUM = `${RESIZABLE_ATTRIBUTE}-maximum`;
-
-const ATTRIBUTE_MINIMUM = `${RESIZABLE_ATTRIBUTE}-minimum`;
-
-const MESSAGE_ELEMENT = 'The element must be an instance of HTMLElement or SVGElement';
-
-const MESSAGE_HEIGHT = 'The maximum height must be greater than the minimum height';
-
-const MESSAGE_HANDLE = `The element must contain a child with the attribute "${RESIZABLE_ATTRIBUTE_HANDLE}"`;
-
-const MESSAGE_WIDTH = 'The maximum width must be greater than the minimum width';
-
-const SELECTOR = `[${RESIZABLE_ATTRIBUTE}]`;
-
-const SELECTOR_HANDLE = `[${RESIZABLE_ATTRIBUTE_HANDLE}]`;
-
-const SELECTOR_HANDLE_SCOPED = `:scope > ${SELECTOR_HANDLE}`;
-
-const items = new WeakMap<HTMLElement, OuiResizableItem>();
-
-const styles = {
-	touchAction: 'none',
-	userSelect: 'none',
-	webkitUserSelect: 'none',
-};
-
-const styleToggler = toggleStyles(document.body, styles);
-
-let current: OuiResizableItem | undefined;
-
-let start: EventPosition | undefined;
-
-// #endregion
-
-// #region Initialization
-
-on(document, 'keydown', onKeydown);
-on(document, 'mousedown', onPointerdown);
-on(document, 'pointermove', onPointermove);
-on(document, 'pointerup', onPointerup);
-on(document, 'touchcancel', onPointerup);
-on(document, 'touchstart', onPointerdown, {passive: false});
-
-attributable(RESIZABLE_ATTRIBUTE, addResizable, removeResizable);
-
-// #endregion

package/src/js/resizable/resizable.standalone.ts

@@ -1,5 +0,0 @@
-export {
-	createResizable as createOuiResizable,
-	type CreateOuiResizableOptions,
-	type OuiResizable,
-} from './resizable.embedded';