@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/js/combobox/state.combobox.ts

@@ -1,246 +0,0 @@
-import {noop} from '@oscarpalmer/atoms/function';
-import {setAria} from '@oscarpalmer/toretto/aria';
-import {setAttributes} from '@oscarpalmer/toretto/attribute';
-import {getData} from '@oscarpalmer/toretto/data';
-import {on} from '@oscarpalmer/toretto/event';
-import {createEmbeddedFloatable} from '../floatable/floatable.embedded';
-import {LISTBOX_TYPES} from '../internal/listbox/listbox.constants';
-import {generateListboxIds} from '../internal/listbox/listbox.misc';
-import type {
-	OuiListboxCallbacks,
-	OuiListboxLocalizations,
-	OuiListboxStates,
-} from '../internal/listbox/listbox.model';
-import {initializeListboxState} from '../internal/listbox/listbox.state';
-import {getAttributeValue, getBooleanAriaValue} from '../internal/misc';
-import {getLocalizations} from '../l10n';
-import {COMBOBOX_ATTRIBUTES, COMBOBOX_MESSAGES} from './constants.combobox';
-import {createComboboxAnchor, createComboboxContent} from './dom.combobox';
-import {
-	onComboboxActivation,
-	onComboboxApply,
-	onComboboxEnter,
-	onComboboxEscape,
-	onComboboxFilter,
-	onComboboxNavigation,
-	onComboboxPreview,
-	onComboboxSelection,
-	onComboboxTab,
-	onComboboxToggle,
-	preventComboboxActivation,
-	skipComboboxNavigation,
-} from './event.combobox';
-import type {OuiComboboxElement} from './index';
-import {getComboboxAutoComplete, getComboboxId} from './misc.combobox';
-import type {OuiComboboxState} from './models.combobox';
-
-// #region Functions
-
-export function createComboboxState(
-	element: OuiComboboxElement,
-	internals: ElementInternals,
-): OuiComboboxState {
-	const select = element.querySelector('select');
-
-	if (select == null || select.id === '') {
-		throw new Error(COMBOBOX_MESSAGES.select);
-	}
-
-	const label = element.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
-
-	if (label == null) {
-		throw new Error(COMBOBOX_MESSAGES.label);
-	}
-
-	element.id = select.id;
-
-	const disabled = getBooleanAriaValue(element, 'disabled') || select.disabled;
-	const multiple = element.multiple || select.multiple;
-	const readonly = getBooleanAriaValue(element, 'readonly');
-	const required = getBooleanAriaValue(element, 'required') || select.required;
-
-	const id = getComboboxId();
-	const type = multiple ? 'select' : getAttributeValue(element, 'type', LISTBOX_TYPES, 'select');
-
-	const autocomplete = getComboboxAutoComplete(element, type === 'select');
-
-	setAttributes(element, {
-		autocomplete: autocomplete.value,
-		name: select.name === '' ? select.id : select.name,
-	});
-
-	const labelId = label.id;
-
-	label.htmlFor = id;
-	label.id = `${id}_label`;
-
-	generateListboxIds(id, select);
-
-	const parameters = {
-		autocomplete,
-		element,
-		id,
-		label,
-		multiple,
-		select,
-		type,
-		attributes: COMBOBOX_ATTRIBUTES,
-		listbox: false,
-	};
-
-	const anchor = createComboboxAnchor(parameters);
-	const content = createComboboxContent(parameters);
-
-	const {selected} = content.list.options;
-
-	const values =
-		selected.length === 0 ? [''] : selected.map(option => getData(option, 'value', false) ?? '');
-
-	const state: OuiComboboxState = {
-		autocomplete,
-		disabled,
-		id,
-		internals,
-		multiple,
-		readonly,
-		required,
-		select,
-		type,
-		active: selected[0],
-		anchor: {
-			container: anchor.container,
-			element: anchor.element,
-		},
-		attributes: COMBOBOX_ATTRIBUTES,
-		callbacks: comboboxCallbacks as OuiComboboxState['callbacks'],
-		content: content.element,
-		elements: [element, anchor.element, content.filter?.element],
-		filter: {
-			element: content.filter?.element ?? (anchor.element as HTMLInputElement),
-			value: '',
-		},
-		floatable: undefined as never,
-		groups: content.list.groups,
-		host: element,
-		label: {
-			element: label,
-			id: labelId,
-		},
-		list: content.list.element,
-		listbox: false,
-		listeners: [],
-		localizations: {
-			component: {},
-			global: comboboxLocalizations,
-		},
-		message: content.message,
-		name: element.name,
-		options: {
-			selected,
-			all: content.list.options.all,
-		},
-		selection: anchor.selection,
-		values: {
-			current: values.slice(),
-			initial: values.slice(),
-			label: content.value,
-		},
-	};
-
-	return initializeListboxState(state, comboboxStates, onAttachCombobox);
-}
-
-export function onAttachCombobox(state: OuiComboboxState): void {
-	const {anchor, content, filter, select} = state;
-
-	select.hidden = true;
-
-	select.insertAdjacentElement('afterend', anchor.container ?? anchor.element);
-	(anchor.container ?? anchor.element).insertAdjacentElement('afterend', content);
-
-	select.remove();
-
-	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
-		position: 'below-start',
-		reusable: false,
-	});
-
-	state.floatable.update();
-
-	state.listeners.push(
-		on(content, 'toggle', () => {
-			setAria(anchor.element, 'expanded', state.floatable.open);
-
-			setAria(
-				filter.element,
-				'activedescendant',
-				state.floatable.open ? state.active?.id : undefined,
-			);
-
-			if (state.floatable.open) {
-				filter.element.focus();
-			}
-		}),
-	);
-}
-
-export function onDetachCombobox(state: OuiComboboxState): void {
-	const {content, floatable, label, select} = state;
-
-	floatable.destroy();
-
-	const anchor = state.anchor.container ?? state.anchor.element;
-
-	anchor.insertAdjacentElement('beforebegin', select);
-
-	anchor.remove();
-	content.remove();
-
-	label.element.htmlFor = select.id;
-	label.element.id = state.label.id;
-
-	select.hidden = false;
-}
-
-// #endregion
-
-// #region Variables
-
-const comboboxCallbacks: OuiListboxCallbacks<OuiComboboxState> = {
-	data: {
-		onApply: onComboboxApply,
-		onFilter: onComboboxFilter,
-		onForm: noop,
-		onPreview: onComboboxPreview,
-		onToggle: onComboboxToggle,
-	},
-	keydown: {
-		onActivation: onComboboxActivation,
-		onEnter: onComboboxEnter,
-		onEscape: onComboboxEscape,
-		onNavigation: onComboboxNavigation,
-		onSelection: onComboboxSelection,
-		onTab: onComboboxTab,
-		onToggle: onComboboxToggle,
-		preventActivation: preventComboboxActivation,
-		skipNavigation: skipComboboxNavigation,
-	},
-};
-
-export const comboboxLocalizations = getLocalizations<OuiListboxLocalizations>({
-	empty: 'No results found',
-	input: 'Please enter a value',
-	invalid: 'Please select an option from the list',
-	max: max => `Please select fewer options (maximum is ${max})`,
-	min: min => `Please select more options (minimum is ${min})`,
-	remove: label => `Remove ${label}`,
-	results: amount => `${amount} results available`,
-	selected: amount => `${amount} selected`,
-});
-
-export const comboboxStates: OuiListboxStates<OuiComboboxState> = {
-	map: new WeakMap(),
-	set: new Set(),
-};
-
-// #endregion

package/src/js/dialog.ts

@@ -1,255 +0,0 @@
-import {getAria, setAria} from '@oscarpalmer/toretto/aria';
-import {on} from '@oscarpalmer/toretto/event';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-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';
-import {createResizable, RESIZABLE_ATTRIBUTE_HANDLE} from './resizable/resizable.embedded';
-import type {OuiResizable} from './resizable/resizable.standalone';
-import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
-import {setStyles} from '@oscarpalmer/toretto/style';
-
-// #region Types
-
-class OuiDialog {
-	readonly #state: OuiDialogState;
-
-	/**
-	 * Is the dialog open?
-	 */
-	get open(): boolean {
-		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;
-	}
-
-	/**
-	 * Closes the dialog by request
-	 */
-	hide(request: true, value?: string): void;
-
-	/**
-	 * Closes the dialog
-	 */
-	hide(value?: string): void;
-
-	hide(first?: string | boolean, second?: string): void {
-		if (!this.#state.element.open) {
-			return;
-		}
-
-		if (first === true) {
-			this.#state.element.requestClose(typeof second === 'string' ? second : undefined);
-		} else {
-			this.#state.element.close(typeof first === 'string' ? first : undefined);
-		}
-	}
-
-	/**
-	 * Opens the dialog
-	 */
-	show(modal?: boolean): void {
-		const {element} = this.#state;
-
-		if (element == null || element.open) {
-			return;
-		}
-
-		const isModal = modal !== false;
-
-		setAria(element, 'modal', isModal);
-
-		if (isModal) {
-			element.showModal();
-		} else {
-			element.show();
-		}
-	}
-}
-
-type OuiDialogState = {
-	dialog: OuiDialog;
-	element: HTMLDialogElement;
-	listeners: RemovableEventListener[];
-	modal: boolean;
-	movable?: OuiMovable;
-	resizable?: OuiResizable;
-};
-
-// #endregion
-
-// #region Functions
-
-function addDialog(element: HTMLElement): void {
-	if (!(element instanceof HTMLDialogElement)) {
-		throw new TypeError(MESSAGE);
-	}
-
-	if (!states.has(element)) {
-		states.set(element, getState(element));
-	}
-}
-
-function destroyDialog(state: OuiDialogState): void {
-	state.element.close();
-
-	setAria(state.element, 'modal', state.modal);
-
-	state.element.removeAttribute(ATTRIBUTE_OPEN);
-
-	for (const listener of state.listeners) {
-		listener();
-	}
-
-	state.movable?.destroy();
-	state.resizable?.destroy();
-
-	state.dialog = undefined as never;
-	state.element = undefined as never;
-	state.listeners = undefined as never;
-	state.movable = undefined;
-	state.resizable = undefined;
-}
-
-/**
- * Get the _OuiDialog_ for an element
- *
- * @param element Element to get _OuiDialog_ for
- * @returns _OuiDialog_ instance
- */
-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) {
-		setAttribute(handle, ATTRIBUTE_MOVABLE_HANDLE, '');
-	}
-
-	return createMovable(element, {
-		container: getAttribute(element, ATTRIBUTE_CONTAINER),
-	});
-}
-
-function getResizable(element: HTMLDialogElement): OuiResizable | undefined {
-	const handle = element.querySelector(SELECTOR_RESIZER);
-
-	if (handle == null) {
-		return;
-	}
-
-	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, '');
-
-	return createResizable(element);
-}
-
-function getState(element: HTMLDialogElement): OuiDialogState {
-	const state: OuiDialogState = {
-		element,
-		dialog: undefined as never,
-		listeners: [
-			getOnBeforeToggleListener(element),
-			on(element, 'toggle', event => {
-				const {source} = event;
-
-				if (element.open) {
-					const modal =
-						(source instanceof HTMLButtonElement && source.command === 'show-modal') ||
-						element.matches(':modal');
-
-					setAria(element, 'modal', modal);
-					setAttribute(element, ATTRIBUTE_OPEN, '');
-
-					element.focus();
-
-					setTimeout(() => {
-						state.resizable?.set();
-					}, 500);
-				} else {
-					setAttribute(element, ATTRIBUTE_OPEN);
-					setAria(element, 'modal', state.modal);
-
-					setStyles(element, {
-						inset: '',
-						position: '',
-						transform: '',
-					});
-
-					state.resizable?.reset();
-				}
-			}),
-		],
-		modal: getAria(element, 'modal') === true || element.matches(':modal'),
-	};
-
-	state.dialog = new OuiDialog(state);
-
-	state.movable = getMovable(element);
-	state.resizable = getResizable(element);
-
-	return state;
-}
-
-function removeDialog(element: HTMLElement): void {
-	const state = states.get(element);
-
-	if (state == null) {
-		return;
-	}
-
-	destroyDialog(state);
-
-	states.delete(element);
-}
-
-// #endregion
-
-// #region Variables
-
-const ATTRIBUTE = 'oui-dialog';
-
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
-
-const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
-
-const MESSAGE = 'The element must be an instance of HTMLDialogElement';
-
-const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
-
-const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
-
-const states = new WeakMap<HTMLElement, OuiDialogState>();
-
-// #endregion
-
-// #region Initialization
-
-attributable(ATTRIBUTE, addDialog, removeDialog);
-
-// #endregion
-
-// #region Exports
-
-export {getDialog, type OuiDialog};
-
-// #endregion