@oscarpalmer/oui 0.40.0 → 0.42.0

package/dist/js/menu/index.mjs

@@ -16,15 +16,19 @@ function OuiMenu(element, navigable) {
 	this.toggle = element.querySelector(MENU_SELECTOR_TOGGLE);
 	this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
 		attribute: MENU_ATTRIBUTE_POSITION,
-		position: findAncestor(element.parentElement, MENU_SELECTOR_CONTENT) == null ? "below-start" : "end-top",
+		position: findAncestor(element.parentElement, "[oui-menu-content]") == null ? "below-start" : "end-top",
 		reusable: false
 	});
 	state.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
 		event.stopPropagation();
-		if (findAncestor(event, MENU_SELECTOR_TOGGLE) != null) return;
+		if (findAncestor(event, "[oui-menu-toggle]") != null) return;
 		const elements = document.querySelectorAll(MENU_SELECTOR_CONTENT);
-		for (const element of elements) menus.get(element)?.floatable.hide();
-		const menu = menus.get(elements[0]);
+		let firstElement;
+		for (const element of elements) {
+			firstElement ??= element;
+			menus.get(element)?.floatable.hide();
+		}
+		const menu = firstElement == null ? void 0 : menus.get(firstElement);
 		if (menu != null && event.pointerId === -1) updateNavigableFocus(menu.navigable, true);
 	}), on(this.content, "toggle", (event) => {
 		const expanded = event.newState === "open";
@@ -116,7 +120,7 @@ function onDeactivate(_, navigable) {
 	const menu = menus.get(navigable[NAVIGABLE_SYMBOL].element);
 	if (menu == null) return;
 	menu.floatable.hide();
-	const element = findAncestor(menu.element.parentElement, MENU_MENUBAR_SELECTORS);
+	const element = menu.element.parentElement == null ? void 0 : findAncestor(menu.element.parentElement, MENU_MENUBAR_SELECTORS);
 	if (element == null) return;
 	const instance = menubars.get(element) ?? menus.get(element);
 	if (instance != null) updateNavigableFocus(instance.navigable, true);
@@ -133,7 +137,7 @@ function onShouldActivate(event, navigable) {
 	if (menubars.has(element)) activate = state.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
 	else if (menus.has(element)) activate = state.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
 	if (activate) {
-		const target = event.target instanceof HTMLElement && event.target.matches(MENU_SELECTOR_TOGGLE) ? event.target : void 0;
+		const target = event.target instanceof HTMLElement && event.target.matches("[oui-menu-toggle]") ? event.target : void 0;
 		if (target == null) activate = false;
 		else target.click();
 	}

package/dist/js/menu/menu.model.d.mts

@@ -1,21 +1,21 @@
 import { c as OuiFloatable } from "../floatable.model-DXsQgoU7.mjs";
-import { d as OuiNavigable, m as OuiNavigableOptions } from "../navigable.model-BPOM8DZk.mjs";
+import { d as OuiNavigable, m as OuiNavigableOptions } from "../navigable.model-BqoR6iBv.mjs";
 //#region src/js/menu/menu.model.d.ts
 export type OuiBasicMenu = {
   destroy(): void;
 };
 export type OuiBasicMenuOptions = Pick<OuiNavigableOptions, "role" | "selector" | "vertical">;
 export type OuiMenu = {
-  content: HTMLElement;
-  element: HTMLElement;
+  content: Element;
+  element: Element;
   floatable: OuiFloatable;
   navigable: OuiNavigable;
-  toggle: HTMLElement;
+  toggle: Element;
   get open(): boolean;
   destroy(): void;
 };
 export type OuiMenubar = {
-  element: HTMLElement;
+  element: Element;
   navigable: OuiNavigable;
   destroy(): void;
 };
@@ -28,6 +28,6 @@ export declare const MENU_SELECTOR_TOGGLE: string;
 export declare const MENUBAR_SELECTOR: string;
 export declare const MENUBAR_SELECTOR_ITEM: string;
 export declare const MENU_MENUBAR_SELECTORS: string;
-export declare const menubars: WeakMap<HTMLElement, OuiMenubar>;
-export declare const menus: WeakMap<HTMLElement, OuiMenu>;
+export declare const menubars: WeakMap<Element, OuiMenubar>;
+export declare const menus: WeakMap<Element, OuiMenu>;
 //#endregion

package/dist/js/movable/movable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { t as createMovable } from "../movable.embedded-DoyXLegc.mjs";
+import { t as createMovable } from "../movable.embedded-C1bDTLGs.mjs";
 export { createMovable };

package/dist/js/movable/movable.embedded.mjs

@@ -1,11 +1,12 @@
 import { attributable } from "../internal/attributable.mjs";
-import { DRAGGABLE_SYMBOL } from "../internal/draggable/draggable.model.mjs";
+import { DRAGGABLE_SYMBOL, draggableGlobals } from "../internal/draggable/draggable.model.mjs";
 import { MOVABLE_ATTRIBUTE, MOVABLE_ATTRIBUTE_CONTAINER, MOVABLE_ATTRIBUTE_DIRECTION, MOVABLE_ATTRIBUTE_MOVING, MOVABLE_CONTAINERS, MOVABLE_MESSAGE, MOVABLE_MOVED, MOVABLE_SELECTOR_HANDLE } from "./movable.model.mjs";
 import { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable } from "../internal/draggable/index.mjs";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
+import { noop } from "@oscarpalmer/atoms/function";
 //#region src/js/movable/movable.embedded.ts
 function OuiMovable(element, options) {
 	const style = getStyles(element, ["inset", "position"]);
@@ -21,10 +22,10 @@ function OuiMovable(element, options) {
 			onAfter: afterDirection
 		},
 		drag: {
-			onBegin,
 			onCancel,
 			onEnd,
-			onMove
+			onMove,
+			onBegin: noop
 		},
 		input: options,
 		position: {
@@ -71,25 +72,26 @@ function destroyMovable() {
 	setStyles(element, style);
 	destroyDraggable(this);
 }
-function getOffsetPosition(globals, _, __, position) {
+function getOffsetPosition(_, __, position) {
+	const { element } = draggableGlobals;
 	return {
-		x: position.x - (globals.element?.rectangle.left ?? 0),
-		y: position.y - (globals.element?.rectangle.top ?? 0)
+		x: position.x - (element?.rectangle.left ?? 0),
+		y: position.y - (element?.rectangle.top ?? 0)
 	};
 }
-function getOriginalPosition(globals) {
+function getOriginalPosition() {
+	const { element } = draggableGlobals;
 	return {
-		x: globals.element?.rectangle.left ?? 0,
-		y: globals.element?.rectangle.top ?? 0
+		x: element?.rectangle.left ?? 0,
+		y: element?.rectangle.top ?? 0
 	};
 }
 function initializeContainer(item) {
 	resizer.observe(item.state.container);
 }
-function onBegin() {}
-function onCancel(globals, item) {
+function onCancel(item) {
 	const { element, moved, style } = item.state;
-	const { x, y } = globals.original ?? {
+	const { x, y } = draggableGlobals.original ?? {
 		x: 0,
 		y: 0
 	};
@@ -97,7 +99,7 @@ function onCancel(globals, item) {
 	else setStyles(element, style);
 	element.removeAttribute(MOVABLE_ATTRIBUTE_MOVING);
 }
-function onEnd(event, globals, item, reset) {
+function onEnd(event, item, reset) {
 	const movable = item.instance;
 	const state = item.state;
 	state.element.removeAttribute(MOVABLE_ATTRIBUTE_MOVING);
@@ -108,15 +110,16 @@ function onEnd(event, globals, item, reset) {
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
 	if (dispatch(state.element, "oui:movable:end", { detail: {
-		from: { ...globals.original },
+		from: { ...draggableGlobals.original },
 		to: getEventPosition(event)
-	} }).defaultPrevented) onCancel(globals, item);
+	} }).defaultPrevented) onCancel(item);
 	reset();
 }
-function onMove(_, globals, __, position) {
-	setAttribute(globals.element?.node, MOVABLE_ATTRIBUTE_MOVING, "");
+function onMove(_, __, position) {
+	const { element, original } = draggableGlobals;
+	setAttribute(element?.node, MOVABLE_ATTRIBUTE_MOVING, "");
 	return {
-		from: { ...globals.original },
+		from: { ...original },
 		to: { ...position.calculated }
 	};
 }

package/dist/js/movable/movable.model.d.mts

@@ -1,2 +1,2 @@
-import { a as MOVABLE_ATTRIBUTE_MOVING, c as MOVABLE_MOVED, d as OuiMovableState, f as OuiMovableStyle, i as MOVABLE_ATTRIBUTE_HANDLE, l as MOVABLE_SELECTOR_HANDLE, n as MOVABLE_ATTRIBUTE_CONTAINER, o as MOVABLE_CONTAINERS, r as MOVABLE_ATTRIBUTE_DIRECTION, s as MOVABLE_MESSAGE, t as MOVABLE_ATTRIBUTE, u as OuiMovable } from "../movable.model-BHaK_mKw.mjs";
+import { a as MOVABLE_ATTRIBUTE_MOVING, c as MOVABLE_MOVED, d as OuiMovableState, f as OuiMovableStyle, i as MOVABLE_ATTRIBUTE_HANDLE, l as MOVABLE_SELECTOR_HANDLE, n as MOVABLE_ATTRIBUTE_CONTAINER, o as MOVABLE_CONTAINERS, r as MOVABLE_ATTRIBUTE_DIRECTION, s as MOVABLE_MESSAGE, t as MOVABLE_ATTRIBUTE, u as OuiMovable } from "../movable.model-D9nnPWKk.mjs";
 export { MOVABLE_ATTRIBUTE, MOVABLE_ATTRIBUTE_CONTAINER, MOVABLE_ATTRIBUTE_DIRECTION, MOVABLE_ATTRIBUTE_HANDLE, MOVABLE_ATTRIBUTE_MOVING, MOVABLE_CONTAINERS, MOVABLE_MESSAGE, MOVABLE_MOVED, MOVABLE_SELECTOR_HANDLE, OuiMovable, OuiMovableState, OuiMovableStyle };

package/dist/js/movable/movable.standalone.d.mts

@@ -1,3 +1,3 @@
-import { p as CreateOuiDraggableOptions, u as OuiMovable } from "../movable.model-BHaK_mKw.mjs";
-import { t as createMovable } from "../movable.embedded-DoyXLegc.mjs";
+import { p as CreateOuiDraggableOptions, u as OuiMovable } from "../movable.model-D9nnPWKk.mjs";
+import { t as createMovable } from "../movable.embedded-C1bDTLGs.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/movable/movable.standalone.mjs

@@ -1,2 +1 @@
-import { createMovable } from "./movable.embedded.mjs";
-export { createMovable };
+export { createMovable } from "./movable.embedded.mjs";

package/dist/js/{movable.embedded-DoyXLegc.d.mts → movable.embedded-C1bDTLGs.d.mts}

@@ -1,4 +1,4 @@
-import { p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model-BHaK_mKw.mjs";
+import { p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model-D9nnPWKk.mjs";
 //#region src/js/movable/movable.embedded.d.ts
 /**
  * Creates _(or retrieves)_ a _OuiMovable_ instance for an element
@@ -6,6 +6,6 @@ import { p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model
  * @param element Element to make movable
  * @returns _OuiMovable_ instance
  */
-declare function createMovable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiMovable;
+declare function createMovable(element: Element, options?: CreateOuiDraggableOptions): OuiMovable;
 //#endregion
 export { createMovable as t };

package/dist/js/{movable.model-BHaK_mKw.d.mts → movable.model-D9nnPWKk.d.mts}

@@ -7,15 +7,15 @@ type OuiSortable = {
 } & OuiDraggable<OuiSortableState>;
 type OuiSortablePlaceholder = {
   drag: OuiSortablePlaceholderDrag;
-  position: HTMLElement | undefined;
+  position: Element | undefined;
 };
 type OuiSortablePlaceholderDrag = {
-  custom: HTMLElement | undefined;
-  default: HTMLElement | undefined;
+  custom: Element | SVGElement | undefined;
+  default: Element | undefined;
 };
 type OuiSortableState = {
   connections: string | null | undefined;
-  origin?: HTMLElement;
+  origin?: Element;
 };
 declare const SORTABLE_ATTRIBUTE = "oui-sortable";
 declare const SORTABLE_ATTRIBUTE_ACTIVE: string;
@@ -38,99 +38,99 @@ type CreateOuiDraggableOptions = {
   /**
    * Container to hold the draggable element and restrict its movement within. Can be `body`, `document`, `window`, a _CSS_ selector, or an element. _(If not provided, the draggable element will not have any constraints)_
    */
-  container?: string | HTMLElement;
+  container?: string | Element;
   /**
    * Direction in which the element can be dragged. _(If not provided, the element can be dragged in any direction)_
    */
   direction?: OuiDraggableDirection;
 };
 type OuiDraggableDirection = "horizontal" | "vertical" | "x" | "y";
-interface OuiDraggable<ExtraState extends PlainObject = PlainObject> {
-  [DRAGGABLE_SYMBOL]: OuiDraggableState & ExtraState;
-  get element(): HTMLElement;
+interface OuiDraggable<ExtraState extends PlainObject> {
+  [DRAGGABLE_SYMBOL]: OuiDraggableState<ExtraState>;
+  get element(): Element;
   destroy(): void;
 }
-type OuiDragBegin<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
-type OuiDragCancel<State extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<State>) => void;
-type OuiDragEnd<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, reset: () => void) => void;
-type OuiDragMove<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, position: OuiDragMovePosition) => PlainObject | undefined;
+type OuiDragBegin<State extends PlainObject> = (event: MouseEvent | TouchEvent, item: OuiDraggableItem<State>, element: Element, handle: Element, position: EventPosition) => void;
+type OuiDragCancel<State extends PlainObject> = (item: OuiDraggableItem<State>) => void;
+type OuiDragEnd<State extends PlainObject> = (event: MouseEvent | TouchEvent, item: OuiDraggableItem<State>, reset: () => void) => void;
+type OuiDragMove<State extends PlainObject> = (event: MouseEvent | TouchEvent, item: OuiDraggableItem<State>, position: OuiDragMovePosition) => PlainObject | undefined;
 type OuiDragMovePosition = {
   calculated: EventPosition;
   original: EventPosition;
 };
 type OuiDraggableBound<Property extends keyof OuiDraggableInstances = keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property] = OuiDraggableInstances[Property]> = {
-  constructor: new (element: HTMLElement, options?: CreateOuiDraggableOptions) => Instance;
+  constructor: new (element: Element, options?: CreateOuiDraggableOptions) => Instance;
   property: Property;
 };
 type OuiDraggableGlobals = {
   container?: DOMRect;
   element?: OuiDraggableGlobalsElement;
-  instances: WeakMap<HTMLElement, OuiDraggableInstances>;
+  instances: WeakMap<Element, OuiDraggableInstances>;
   offset?: EventPosition;
   original?: EventPosition;
-  states: WeakMap<HTMLElement, OuiDraggableStates>;
+  states: WeakMap<Element, OuiDraggableStates>;
 };
 type OuiDraggableGlobalsElement = {
-  node: HTMLElement;
+  node: Element;
   rectangle: DOMRect;
 };
 type OuiDraggableInstances = {
   movable?: OuiMovable;
   sortable?: OuiSortable;
 };
-type OuiDraggableItem<ExtraState extends PlainObject = PlainObject> = {
+type OuiDraggableItem<ExtraState extends PlainObject> = {
   instance: OuiDraggable<ExtraState>;
-  state: OuiDraggableState & ExtraState;
+  state: OuiDraggableState<ExtraState>;
 };
-type OuiDraggableOptions<ExtraState extends PlainObject = PlainObject> = {
+type OuiDraggableOptions<ExtraState extends PlainObject> = {
   container: OuiDraggableOptionsContainer<ExtraState>;
   direction: OuiDraggableOptionsDirection<ExtraState>;
   drag: OuiDraggableOptionsDrag<ExtraState>;
   input?: CreateOuiDraggableOptions;
   position: OuiDraggableOptionsPosition<ExtraState>;
-  getDragged(): HTMLElement;
-  getOrigin(): HTMLElement | undefined;
+  getDragged(): Element;
+  getOrigin(): Element | undefined;
 };
-type OuiDraggableOptionsContainer<ExtraState extends PlainObject = PlainObject> = {
+type OuiDraggableOptionsContainer<ExtraState extends PlainObject> = {
   attribute: string;
-  map: Map<HTMLElement, Set<OuiDraggable>>;
+  map: Map<Element, Set<OuiDraggable<ExtraState>>>;
   onDestroy?: OuiDraggableOptionsContainerOnDestroy<ExtraState>;
-  onInitialize?: OuiDraggableOptionsContainerOnInitialize;
+  onInitialize?: OuiDraggableOptionsContainerOnInitialize<ExtraState>;
 };
-type OuiDraggableOptionsContainerOnDestroy<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>, container: HTMLElement, empty: boolean) => void;
-type OuiDraggableOptionsContainerOnInitialize<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
-type OuiDraggableOptionsDirection<ExtraState extends PlainObject = PlainObject> = {
+type OuiDraggableOptionsContainerOnDestroy<ExtraState extends PlainObject> = (item: OuiDraggableItem<ExtraState>, container: Element, empty: boolean) => void;
+type OuiDraggableOptionsContainerOnInitialize<ExtraState extends PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
+type OuiDraggableOptionsDirection<ExtraState extends PlainObject> = {
   attribute: string;
   onAfter?: OuiDraggableOptionsDirectionOnAfter<ExtraState>;
 };
-type OuiDraggableOptionsDirectionOnAfter<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
-type OuiDraggableOptionsDrag<ExtraState extends PlainObject = PlainObject> = {
+type OuiDraggableOptionsDirectionOnAfter<ExtraState extends PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
+type OuiDraggableOptionsDrag<ExtraState extends PlainObject> = {
   onBegin: OuiDragBegin<ExtraState>;
   onCancel: OuiDragCancel<ExtraState>;
   onEnd: OuiDragEnd<ExtraState>;
   onMove: OuiDragMove<ExtraState>;
 };
-type OuiDraggableOptionsPosition<ExtraState extends PlainObject = PlainObject> = {
+type OuiDraggableOptionsPosition<ExtraState extends PlainObject> = {
   getOffset: OuiDraggableOptionsPositionGetOffset<ExtraState>;
   getOriginal: OuiDraggableOptionsPositionGetOriginal<ExtraState>;
 };
-type OuiDraggableOptionsPositionGetOffset<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, element: HTMLElement, position: EventPosition) => EventPosition;
-type OuiDraggableOptionsPositionGetOriginal<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, position: EventPosition) => EventPosition;
-type OuiDraggableState = {
+type OuiDraggableOptionsPositionGetOffset<ExtraState extends PlainObject> = (item: OuiDraggableItem<ExtraState>, element: Element, position: EventPosition) => EventPosition;
+type OuiDraggableOptionsPositionGetOriginal<ExtraState extends PlainObject> = (item: OuiDraggableItem<ExtraState>, position: EventPosition) => EventPosition;
+type OuiDraggableState<ExtraState extends PlainObject> = {
   attribute: string;
-  container?: HTMLElement;
+  container?: Element;
   destroyed: boolean;
-  element: HTMLElement;
+  element: Element;
   hasHandles?: boolean;
   horizontal: boolean;
   name: keyof OuiDraggableStates;
-  options: OuiDraggableOptions;
+  options: OuiDraggableOptions<ExtraState>;
   styling: StyleToggler;
   vertical: boolean;
-};
+} & ExtraState;
 type OuiDraggableStates = {
-  movable?: OuiDraggableState;
-  sortable?: OuiDraggableState;
+  movable?: OuiDraggableState<{}>;
+  sortable?: OuiDraggableState<{}>;
 };
 declare const DRAGGABLE_ATTRIBUTE_MOVABLE = "oui-movable";
 declare const DRAGGABLE_ATTRIBUTE_SORTABLE = "oui-sortable";
@@ -157,7 +157,7 @@ type OuiMovable = {
   /**
    * The movable element
    */
-  get element(): HTMLElement;
+  get element(): Element;
   /**
    * Destroy the movable
    */
@@ -178,7 +178,7 @@ declare const MOVABLE_ATTRIBUTE_CONTAINER: string;
 declare const MOVABLE_ATTRIBUTE_DIRECTION: string;
 declare const MOVABLE_ATTRIBUTE_HANDLE: string;
 declare const MOVABLE_ATTRIBUTE_MOVING: string;
-declare const MOVABLE_CONTAINERS: Map<HTMLElement, Set<OuiMovable>>;
+declare const MOVABLE_CONTAINERS: Map<Element, Set<OuiMovable>>;
 declare const MOVABLE_MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
 declare const MOVABLE_MOVED: Set<OuiMovable>;
 declare const MOVABLE_SELECTOR_HANDLE: string;

package/dist/js/{navigable.model-BPOM8DZk.d.mts → navigable.model-BqoR6iBv.d.mts}

@@ -25,7 +25,7 @@ type OuiNavigableOptions = {
 type OuiNavigableOrientation = "horizontal" | "vertical";
 type OuiNavigableState = {
   active: OuiNavigableActive;
-  element: HTMLElement;
+  element: Element;
   listeners: RemovableEventListener[];
   options: OuiNavigableOptions;
   orientation: OuiNavigableOrientation;