@oscarpalmer/atoms 0.7.0 → 0.8.0

package/dist/js/atoms.js

@@ -1,4 +1,4 @@
-// src/js/element.ts
+// src/js/element/index.ts
 function findParentElement(origin, selector) {
   if (origin == null || selector == null) {
     return;
@@ -18,13 +18,171 @@ function findParentElement(origin, selector) {
   }
   return parent ?? undefined;
 }
-function getElementUnderPointer(all) {
+function getElementUnderPointer(skipIgnore) {
   const elements = Array.from(document.querySelectorAll(":hover")).filter((element) => {
-    const style = window.getComputedStyle(element);
-    return element.tagName !== "HEAD" && (typeof all === "boolean" && all ? true : style.pointerEvents !== "none" && style.visibility !== "hidden");
+    if (headPattern.test(element.tagName)) {
+      return false;
+    }
+    const style = getComputedStyle(element);
+    return typeof skipIgnore === "boolean" && skipIgnore || style.pointerEvents !== "none" && style.visibility !== "hidden";
   });
   return elements[elements.length - 1];
 }
+function getTextDirection(element) {
+  const attribute = element.getAttribute("dir");
+  if (attribute !== null && directionPattern.test(attribute)) {
+    return attribute.toLowerCase();
+  }
+  return getComputedStyle?.(element)?.direction === "rtl" ? "rtl" : "ltr";
+}
+var directionPattern = /^(ltr|rtl)$/i;
+var headPattern = /^head$/i;
+// src/js/element/focusable.ts
+var _getItem = function(type, element) {
+  return {
+    element,
+    tabIndex: type === "focusable" ? -1 : _getTabIndex(element)
+  };
+};
+var _getTabIndex = function(element) {
+  if (element.tabIndex < 0 && (audioDetailsVideoPattern.test(element.tagName) || _isEditable(element)) && !_hasTabIndex(element)) {
+    return 0;
+  }
+  return element.tabIndex;
+};
+var _getValidElements = function(type, parent, filters) {
+  const items = Array.from(parent.querySelectorAll(selector)).map((element) => _getItem(type, element)).filter((item) => !filters.some((filter) => filter(item)));
+  if (type === "focusable") {
+    return items.map((item) => item.element);
+  }
+  const indiced = [];
+  const zeroed = [];
+  const { length } = items;
+  let position = Number(length);
+  while (position--) {
+    const index = length - position - 1;
+    const item = items[index];
+    if (item.tabIndex === 0) {
+      zeroed.push(item.element);
+    } else {
+      indiced[item.tabIndex] = [
+        ...indiced[item.tabIndex] ?? [],
+        item.element
+      ];
+    }
+  }
+  return [...indiced.flat(), ...zeroed];
+};
+var _hasTabIndex = function(element) {
+  return !Number.isNaN(Number.parseInt(element.getAttribute("tabindex"), 10));
+};
+var _isDisabled = function(item) {
+  if (inputPattern.test(item.element.tagName) && _isDisabledFromFieldset(item.element)) {
+    return true;
+  }
+  return (item.element.disabled ?? false) || item.element.getAttribute("aria-disabled") === "true";
+};
+var _isDisabledFromFieldset = function(element) {
+  let parent = element.parentElement;
+  while (parent !== null) {
+    if (parent instanceof HTMLFieldSetElement && parent.disabled) {
+      const children = Array.from(parent.children);
+      for (const child of children) {
+        if (child instanceof HTMLLegendElement) {
+          return parent.matches("fieldset[disabled] *") ? true : !child.contains(element);
+        }
+      }
+      return true;
+    }
+    parent = parent.parentElement;
+  }
+  return false;
+};
+var _isEditable = function(element) {
+  return booleanPattern.test(element.getAttribute("contenteditable"));
+};
+var _isHidden = function(item) {
+  if ((item.element.hidden ?? false) || item.element instanceof HTMLInputElement && item.element.type === "hidden") {
+    return true;
+  }
+  const isDirectSummary = item.element.matches("details > summary:first-of-type");
+  const nodeUnderDetails = isDirectSummary ? item.element.parentElement : item.element;
+  if (nodeUnderDetails?.matches("details:not([open]) *") ?? false) {
+    return true;
+  }
+  const style = getComputedStyle(item.element);
+  if (style.display === "none" || style.visibility === "hidden") {
+    return true;
+  }
+  const { height, width } = item.element.getBoundingClientRect();
+  return height === 0 && width === 0;
+};
+var _isInert = function(item) {
+  return (item.element.inert ?? false) || booleanPattern.test(item.element.getAttribute("inert")) || item.element.parentElement !== null && _isInert({
+    element: item.element.parentElement,
+    tabIndex: -1
+  });
+};
+var _isNotTabbable = function(item) {
+  return (item.tabIndex ?? -1) < 0;
+};
+var _isNotTabbableRadio = function(item) {
+  if (!(item.element instanceof HTMLInputElement) || item.element.type !== "radio" || !item.element.name || item.element.checked) {
+    return false;
+  }
+  const parent = item.element.form ?? item.element.getRootNode?.() ?? item.element.ownerDocument;
+  const realName = CSS?.escape?.(item.element.name) ?? item.element.name;
+  const radios = Array.from(parent.querySelectorAll(`input[type="radio"][name="${realName}"]`));
+  const checked = radios.find((radio) => radio.checked);
+  return checked !== undefined && checked !== item.element;
+};
+var _isSummarised = function(item) {
+  return item.element instanceof HTMLDetailsElement && Array.from(item.element.children).some((child) => summaryPattern.test(child.tagName));
+};
+var _isValidElement = function(element, filters) {
+  const item = _getItem("focusable", element);
+  return !filters.some((filter) => filter(item));
+};
+function getFocusableElements(parent) {
+  return _getValidElements("focusable", parent, focusableFilters);
+}
+function getTabbableElements(parent) {
+  return _getValidElements("tabbable", parent, tabbableFilters);
+}
+function isFocusableElement(element) {
+  return _isValidElement(element, focusableFilters);
+}
+function isTabbableElement(element) {
+  return _isValidElement(element, tabbableFilters);
+}
+var audioDetailsVideoPattern = /^(audio|details|video)$/i;
+var booleanPattern = /^(|true)$/i;
+var focusableFilters = [
+  _isDisabled,
+  _isInert,
+  _isHidden,
+  _isSummarised
+];
+var inputPattern = /^(button|input|select|textarea)$/i;
+var selector = [
+  '[contenteditable]:not([contenteditable="false"])',
+  "[tabindex]:not(slot)",
+  "a[href]",
+  "audio[controls]",
+  "button",
+  "details",
+  "details > summary:first-of-type",
+  "input",
+  "select",
+  "textarea",
+  "video[controls]"
+].map((selector2) => `${selector2}:not([inert])`).join(",");
+var summaryPattern = /^summary$/i;
+var tabbableFilters = [
+  _isNotTabbable,
+  _isNotTabbableRadio,
+  ...focusableFilters
+];
 // src/js/event.ts
 function getPosition(event) {
   let x;
@@ -38,23 +196,6 @@ function getPosition(event) {
   }
   return typeof x === "number" && typeof y === "number" ? { x, y } : undefined;
 }
-var supportsTouch = (() => {
-  let value = false;
-  try {
-    if ("matchMedia" in window) {
-      const media = matchMedia("(pointer: coarse)");
-      if (typeof media?.matches === "boolean") {
-        value = media.matches;
-      }
-    }
-    if (!value) {
-      value = "ontouchstart" in window || navigator.maxTouchPoints > 0 || (navigator.msMaxTouchPoints ?? 0) > 0;
-    }
-  } catch {
-    value = false;
-  }
-  return value;
-})();
 // src/js/number.ts
 function clampNumber(value, min, max) {
   return Math.min(Math.max(getNumber(value), getNumber(min)), getNumber(max));
@@ -173,16 +314,20 @@ var objectConstructor = "Object";
 var constructors = new Set(["Array", objectConstructor]);
 var numberExpression = /^\d+$/;
 export {
-  supportsTouch,
   setValue,
+  isTabbableElement,
   isObject,
   isNullableOrWhitespace,
   isNullable,
+  isFocusableElement,
   isArrayOrObject,
   getValue,
+  getTextDirection,
+  getTabbableElements,
   getString,
   getPosition,
   getNumber,
+  getFocusableElements,
   getElementUnderPointer,
   findParentElement,
   createUuid,

package/dist/js/touch.js

@@ -0,0 +1,22 @@
+// src/js/touch.ts
+var supportsTouch = (() => {
+  let value = false;
+  try {
+    if ("matchMedia" in window) {
+      const media = matchMedia("(pointer: coarse)");
+      if (typeof media?.matches === "boolean") {
+        value = media.matches;
+      }
+    }
+    if (!value) {
+      value = "ontouchstart" in window || navigator.maxTouchPoints > 0 || (navigator.msMaxTouchPoints ?? 0) > 0;
+    }
+  } catch {
+    value = false;
+  }
+  return value;
+})();
+var touch_default = supportsTouch;
+export {
+  touch_default as default
+};

package/package.json

@@ -16,6 +16,10 @@
 			"types": "./types/index.d.ts",
 			"import": "./dist/js/atoms.js"
 		},
+		"./supports-touch": {
+			"types": "./types/touch.d.ts",
+			"import": "./dist/js/touch.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"files": ["dist", "src", "types"],
@@ -29,9 +33,10 @@
 		"url": "git+https://github.com/oscarpalmer/atoms.git"
 	},
 	"scripts": {
-		"build": "bun run build:css && bun run build:js && bun run types",
+		"build": "bun run build:css && bun run build:js && bun run build:js-touch && bun run types",
 		"build:css": "bunx sass ./src/css:./dist/css --no-source-map",
 		"build:js": "bunx bun build ./src/js/index.ts --outfile ./dist/js/atoms.js",
+		"build:js-touch": "bunx bun build ./src/js/touch.ts --outfile ./dist/js/touch.js",
 		"test": "bun test --preload ./test/_preload.ts --coverage",
 		"types": "bunx tsc -p ./tsconfig.json",
 		"watch:css": "bunx sass ./src/css:./dist/css --no-source-map --watch",
@@ -39,5 +44,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.7.0"
+	"version": "0.8.0"
 }

package/src/js/element/focusable.ts

@@ -0,0 +1,275 @@
+// Based on https://github.com/focus-trap/tabbable :-)
+
+type ElementWithTabIndex = {
+	element: FocusableElement;
+	tabIndex: number;
+};
+
+type Filter = (item: ElementWithTabIndex) => boolean;
+type FocusableElement = HTMLElement | SVGElement;
+type GetType = 'focusable' | 'tabbable';
+type InertElement = FocusableElement & {inert: boolean};
+type TabbableElement = FocusableElement;
+
+const audioDetailsVideoPattern = /^(audio|details|video)$/i;
+const booleanPattern = /^(|true)$/i;
+
+const focusableFilters: Filter[] = [
+	_isDisabled,
+	_isInert,
+	_isHidden,
+	_isSummarised,
+];
+
+const inputPattern = /^(button|input|select|textarea)$/i;
+
+const selector = [
+	'[contenteditable]:not([contenteditable="false"])',
+	'[tabindex]:not(slot)',
+	'a[href]',
+	'audio[controls]',
+	'button',
+	'details',
+	'details > summary:first-of-type',
+	'input',
+	'select',
+	'textarea',
+	'video[controls]',
+]
+	.map(selector => `${selector}:not([inert])`)
+	.join(',');
+
+const summaryPattern = /^summary$/i;
+
+const tabbableFilters: Filter[] = [
+	_isNotTabbable,
+	_isNotTabbableRadio,
+	...focusableFilters,
+];
+
+function _getItem(
+	type: GetType,
+	element: FocusableElement,
+): ElementWithTabIndex {
+	return {
+		element,
+		tabIndex: type === 'focusable' ? -1 : _getTabIndex(element),
+	};
+}
+
+function _getTabIndex(element: FocusableElement): number {
+	if (
+		element.tabIndex < 0 &&
+		(audioDetailsVideoPattern.test(element.tagName) || _isEditable(element)) &&
+		!_hasTabIndex(element)
+	) {
+		return 0;
+	}
+
+	return element.tabIndex;
+}
+
+function _getValidElements(
+	type: GetType,
+	parent: Element,
+	filters: Filter[],
+): Array<FocusableElement> {
+	const items: ElementWithTabIndex[] = Array.from(
+		parent.querySelectorAll(selector),
+	)
+		.map(element => _getItem(type, element as FocusableElement))
+		.filter(item => !filters.some(filter => filter(item)));
+
+	if (type === 'focusable') {
+		return items.map(item => item.element);
+	}
+
+	const indiced: Array<Array<FocusableElement>> = [];
+	const zeroed: Array<FocusableElement> = [];
+
+	const {length} = items;
+
+	let position = Number(length);
+
+	while (position--) {
+		const index = length - position - 1;
+		const item = items[index];
+
+		if (item.tabIndex === 0) {
+			zeroed.push(item.element);
+		} else {
+			indiced[item.tabIndex] = [
+				...(indiced[item.tabIndex] ?? []),
+				item.element,
+			];
+		}
+	}
+
+	return [...indiced.flat(), ...zeroed];
+}
+
+function _hasTabIndex(element: FocusableElement): boolean {
+	return !Number.isNaN(
+		Number.parseInt(element.getAttribute('tabindex') as string, 10),
+	);
+}
+
+function _isDisabled(item: ElementWithTabIndex): boolean {
+	if (
+		inputPattern.test(item.element.tagName) &&
+		_isDisabledFromFieldset(item.element)
+	) {
+		return true;
+	}
+
+	return (
+		((item.element as HTMLInputElement).disabled ?? false) ||
+		item.element.getAttribute('aria-disabled') === 'true'
+	);
+}
+
+function _isDisabledFromFieldset(element: FocusableElement): boolean {
+	let parent = element.parentElement;
+
+	while (parent !== null) {
+		if (parent instanceof HTMLFieldSetElement && parent.disabled) {
+			const children = Array.from(parent.children);
+
+			for (const child of children) {
+				if (child instanceof HTMLLegendElement) {
+					return parent.matches('fieldset[disabled] *')
+						? true
+						: !child.contains(element);
+				}
+			}
+
+			return true;
+		}
+
+		parent = parent.parentElement;
+	}
+
+	return false;
+}
+
+function _isEditable(element: Element): boolean {
+	return booleanPattern.test(element.getAttribute('contenteditable') as string);
+}
+
+function _isHidden(item: ElementWithTabIndex) {
+	if (
+		((item.element as HTMLElement).hidden ?? false) ||
+		(item.element instanceof HTMLInputElement && item.element.type === 'hidden')
+	) {
+		return true;
+	}
+
+	const isDirectSummary = item.element.matches(
+		'details > summary:first-of-type',
+	);
+
+	const nodeUnderDetails = isDirectSummary
+		? item.element.parentElement
+		: item.element;
+
+	if (nodeUnderDetails?.matches('details:not([open]) *') ?? false) {
+		return true;
+	}
+
+	const style = getComputedStyle(item.element);
+
+	if (style.display === 'none' || style.visibility === 'hidden') {
+		return true;
+	}
+
+	const {height, width} = item.element.getBoundingClientRect();
+
+	return height === 0 && width === 0;
+}
+
+function _isInert(item: ElementWithTabIndex): boolean {
+	return (
+		((item.element as InertElement).inert ?? false) ||
+		booleanPattern.test(item.element.getAttribute('inert') as string) ||
+		(item.element.parentElement !== null &&
+			_isInert({
+				element: item.element.parentElement as FocusableElement,
+				tabIndex: -1,
+			}))
+	);
+}
+
+function _isNotTabbable(item: ElementWithTabIndex) {
+	return (item.tabIndex ?? -1) < 0;
+}
+
+function _isNotTabbableRadio(item: ElementWithTabIndex): boolean {
+	if (
+		!(item.element instanceof HTMLInputElement) ||
+		item.element.type !== 'radio' ||
+		!item.element.name ||
+		item.element.checked
+	) {
+		return false;
+	}
+
+	const parent =
+		item.element.form ??
+		item.element.getRootNode?.() ??
+		item.element.ownerDocument;
+
+	const realName = CSS?.escape?.(item.element.name) ?? item.element.name;
+
+	const radios = Array.from(
+		(parent as Element).querySelectorAll(
+			`input[type="radio"][name="${realName}"]`,
+		),
+	) as HTMLInputElement[];
+
+	const checked = radios.find(radio => radio.checked);
+
+	return checked !== undefined && checked !== item.element;
+}
+
+function _isSummarised(item: ElementWithTabIndex) {
+	return (
+		item.element instanceof HTMLDetailsElement &&
+		Array.from(item.element.children).some(child =>
+			summaryPattern.test(child.tagName),
+		)
+	);
+}
+
+function _isValidElement(element: Element, filters: Filter[]): boolean {
+	const item = _getItem('focusable', element as FocusableElement);
+
+	return !filters.some(filter => filter(item));
+}
+
+/**
+ * Get a list of focusable elements within a parent element
+ */
+export function getFocusableElements(parent: Element): FocusableElement[] {
+	return _getValidElements('focusable', parent, focusableFilters);
+}
+
+/**
+ * Get a list of tabbable elements within a parent element
+ */
+export function getTabbableElements(parent: Element): TabbableElement[] {
+	return _getValidElements('tabbable', parent, tabbableFilters);
+}
+
+/**
+ * Is the element focusable?
+ */
+export function isFocusableElement(element: Element): boolean {
+	return _isValidElement(element, focusableFilters);
+}
+
+/**
+ * Is the element tabbable?
+ */
+export function isTabbableElement(element: Element): boolean {
+	return _isValidElement(element, tabbableFilters);
+}

package/src/js/{element.ts → element/index.ts}

@@ -1,3 +1,8 @@
+type TextDirection = 'ltr' | 'rtl';
+
+const directionPattern = /^(ltr|rtl)$/i;
+const headPattern = /^head$/i;
+
 /**
  * - Find the parent element that matches the selector
  * - Matches may be found by a query string or a callback
@@ -38,21 +43,40 @@ export function findParentElement(
 /**
  * - Get the most specific element under the pointer
  * - Ignores elements with `pointer-events: none` and `visibility: hidden`
- * - If `all` is `true`, all elements under the pointer are returned
+ * - If `skipIgnore` is `true`, no elements are ignored
  */
-export function getElementUnderPointer(all?: boolean): Element | undefined {
+export function getElementUnderPointer(
+	skipIgnore?: boolean,
+): Element | undefined {
 	const elements = Array.from(document.querySelectorAll(':hover')).filter(
 		element => {
-			const style = window.getComputedStyle(element);
+			if (headPattern.test(element.tagName)) {
+				return false;
+			}
+
+			const style = getComputedStyle(element);
 
 			return (
-				element.tagName !== 'HEAD' &&
-				(typeof all === 'boolean' && all
-					? true
-					: style.pointerEvents !== 'none' && style.visibility !== 'hidden')
+				(typeof skipIgnore === 'boolean' && skipIgnore) ||
+				(style.pointerEvents !== 'none' && style.visibility !== 'hidden')
 			);
 		},
 	);
 
 	return elements[elements.length - 1];
 }
+
+/**
+ * Get the text direction of an element
+ */
+export function getTextDirection(element: Element): TextDirection {
+	const attribute = element.getAttribute('dir');
+
+	if (attribute !== null && directionPattern.test(attribute)) {
+		return attribute.toLowerCase() as TextDirection;
+	}
+
+	return (
+		getComputedStyle?.(element)?.direction === 'rtl' ? 'rtl' : 'ltr'
+	) as TextDirection;
+}

package/src/js/event.ts

@@ -1,41 +1,8 @@
-type NavigatorWithMsMaxTouchPoints = Navigator & {
-	msMaxTouchPoints: number;
-};
-
 type Position = {
 	x: number;
 	y: number;
 };
 
-/**
- * Does the browser support touch events?
- */
-export const supportsTouch = (() => {
-	let value = false;
-
-	try {
-		if ('matchMedia' in window) {
-			const media = matchMedia('(pointer: coarse)');
-
-			if (typeof media?.matches === 'boolean') {
-				value = media.matches;
-			}
-		}
-
-		if (!value) {
-			value =
-				'ontouchstart' in window ||
-				navigator.maxTouchPoints > 0 ||
-				((navigator as NavigatorWithMsMaxTouchPoints).msMaxTouchPoints ?? 0) >
-					0;
-		}
-	} catch {
-		value = false;
-	}
-
-	return value;
-})();
-
 /**
  * Get the X- and Y-coordinates from a pointer event
  */

package/src/js/index.ts

@@ -1,4 +1,5 @@
 export * from './element';
+export * from './element/focusable';
 export * from './event';
 export * from './number';
 export * from './string';

package/src/js/touch.ts

@@ -0,0 +1,34 @@
+type NavigatorWithMsMaxTouchPoints = Navigator & {
+	msMaxTouchPoints: number;
+};
+
+/**
+ * Does the browser/device support touch?
+ */
+const supportsTouch = (() => {
+	let value = false;
+
+	try {
+		if ('matchMedia' in window) {
+			const media = matchMedia('(pointer: coarse)');
+
+			if (typeof media?.matches === 'boolean') {
+				value = media.matches;
+			}
+		}
+
+		if (!value) {
+			value =
+				'ontouchstart' in window ||
+				navigator.maxTouchPoints > 0 ||
+				((navigator as NavigatorWithMsMaxTouchPoints).msMaxTouchPoints ?? 0) >
+					0;
+		}
+	} catch {
+		value = false;
+	}
+
+	return value;
+})();
+
+export default supportsTouch;

package/types/element/focusable.d.ts

@@ -0,0 +1,19 @@
+type FocusableElement = HTMLElement | SVGElement;
+type TabbableElement = FocusableElement;
+/**
+ * Get a list of focusable elements within a parent element
+ */
+export declare function getFocusableElements(parent: Element): FocusableElement[];
+/**
+ * Get a list of tabbable elements within a parent element
+ */
+export declare function getTabbableElements(parent: Element): TabbableElement[];
+/**
+ * Is the element focusable?
+ */
+export declare function isFocusableElement(element: Element): boolean;
+/**
+ * Is the element tabbable?
+ */
+export declare function isTabbableElement(element: Element): boolean;
+export {};

package/types/{element.d.ts → element/index.d.ts}

@@ -1,3 +1,4 @@
+type TextDirection = 'ltr' | 'rtl';
 /**
  * - Find the parent element that matches the selector
  * - Matches may be found by a query string or a callback
@@ -6,6 +7,11 @@ export declare function findParentElement(origin: Element, selector: string | ((
 /**
  * - Get the most specific element under the pointer
  * - Ignores elements with `pointer-events: none` and `visibility: hidden`
- * - If `all` is `true`, all elements under the pointer are returned
+ * - If `skipIgnore` is `true`, no elements are ignored
  */
-export declare function getElementUnderPointer(all?: boolean): Element | undefined;
+export declare function getElementUnderPointer(skipIgnore?: boolean): Element | undefined;
+/**
+ * Get the text direction of an element
+ */
+export declare function getTextDirection(element: Element): TextDirection;
+export {};

package/types/event.d.ts

@@ -2,10 +2,6 @@ type Position = {
     x: number;
     y: number;
 };
-/**
- * Does the browser support touch events?
- */
-export declare const supportsTouch: boolean;
 /**
  * Get the X- and Y-coordinates from a pointer event
  */

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './element';
+export * from './element/focusable';
 export * from './event';
 export * from './number';
 export * from './string';

package/types/touch.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Does the browser/device support touch?
+ */
+declare const supportsTouch: boolean;
+export default supportsTouch;