@octanejs/window 0.0.1

package/src/utils/colors/stringToColor.ts

@@ -0,0 +1,13 @@
+export function stringToColor(string: string) {
+	let hash = 0;
+	string.split('').forEach((char) => {
+		hash = char.charCodeAt(0) + ((hash << 5) - hash);
+	});
+
+	let color = '#';
+	for (let i = 0; i < 3; i++) {
+		const value = (hash >> (i * 8)) & 0xff;
+		color += value.toString(16).padStart(2, '0');
+	}
+	return color;
+}

package/src/utils/debug.ts

@@ -0,0 +1,13 @@
+import { getContrastColor } from './colors/getContrastColor.js';
+import { stringToColor } from './colors/stringToColor.js';
+
+export function debug(namespace: string, ...args: unknown[]) {
+	const backgroundColor = stringToColor(namespace);
+	const color = getContrastColor(backgroundColor);
+
+	console.log(
+		`%c ${namespace} `,
+		`background-color: ${backgroundColor}; color: ${color};`,
+		...args,
+	);
+}

package/src/utils/getRTLOffsetType.ts

@@ -0,0 +1,46 @@
+export type RTLOffsetType = 'negative' | 'positive-descending' | 'positive-ascending';
+
+let cachedRTLResult: RTLOffsetType | null = null;
+
+// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
+// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
+// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
+// The safest way to check this is to intentionally set a negative offset,
+// and then verify that the subsequent "scroll" event matches the negative offset.
+// If it does not match, then we can assume a non-standard RTL scroll implementation.
+export function getRTLOffsetType(recalculate: boolean = false): RTLOffsetType {
+	if (cachedRTLResult === null || recalculate) {
+		const outerDiv = document.createElement('div');
+		const outerStyle = outerDiv.style;
+		outerStyle.width = '50px';
+		outerStyle.height = '50px';
+		outerStyle.overflow = 'scroll';
+		outerStyle.direction = 'rtl';
+
+		const innerDiv = document.createElement('div');
+		const innerStyle = innerDiv.style;
+		innerStyle.width = '100px';
+		innerStyle.height = '100px';
+
+		outerDiv.appendChild(innerDiv);
+
+		document.body.appendChild(outerDiv);
+
+		if (outerDiv.scrollLeft > 0) {
+			cachedRTLResult = 'positive-descending';
+		} else {
+			outerDiv.scrollLeft = 1;
+			if (outerDiv.scrollLeft === 0) {
+				cachedRTLResult = 'negative';
+			} else {
+				cachedRTLResult = 'positive-ascending';
+			}
+		}
+
+		document.body.removeChild(outerDiv);
+
+		return cachedRTLResult;
+	}
+
+	return cachedRTLResult;
+}

package/src/utils/getScrollbarSize.ts

@@ -0,0 +1,23 @@
+let size: number = -1;
+
+export function getScrollbarSize(recalculate: boolean = false): number {
+	if (size === -1 || recalculate) {
+		const div = document.createElement('div');
+		const style = div.style;
+		style.width = '50px';
+		style.height = '50px';
+		style.overflow = 'scroll';
+
+		document.body.appendChild(div);
+
+		size = div.offsetWidth - div.clientWidth;
+
+		document.body.removeChild(div);
+	}
+
+	return size;
+}
+
+export function setScrollbarSizeForTests(value: number) {
+	size = value;
+}

package/src/utils/isRtl.ts

@@ -0,0 +1,12 @@
+export function isRtl(element: HTMLElement) {
+	let currentElement: HTMLElement | null = element;
+	while (currentElement) {
+		if (currentElement.dir) {
+			return currentElement.dir === 'rtl';
+		}
+
+		currentElement = currentElement.parentElement;
+	}
+
+	return false;
+}

package/src/utils/parseNumericStyleValue.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+
+export function parseNumericStyleValue(value: CSSProperties['height']): number | undefined {
+	if (value !== undefined) {
+		switch (typeof value) {
+			case 'number': {
+				return value;
+			}
+			case 'string': {
+				if (value.endsWith('px')) {
+					return parseFloat(value);
+				}
+				break;
+			}
+		}
+	}
+}

package/src/utils/shallowCompare.ts

@@ -0,0 +1,26 @@
+import { assert } from './assert.js';
+
+export function shallowCompare<Type extends object>(a: Type | undefined, b: Type | undefined) {
+	if (a === b) {
+		return true;
+	}
+
+	if (!!a !== !!b) {
+		return false;
+	}
+
+	assert(a !== undefined);
+	assert(b !== undefined);
+
+	if (Object.keys(a).length !== Object.keys(b).length) {
+		return false;
+	}
+
+	for (const key in a) {
+		if (!Object.is(b[key], a[key])) {
+			return false;
+		}
+	}
+
+	return true;
+}