@octanejs/select 0.1.1

package/src/filters.ts

@@ -0,0 +1,49 @@
+import memoizeOne from 'memoize-one';
+
+import { stripDiacritics } from './diacritics';
+
+export interface FilterOptionOption<Option> {
+	readonly label: string;
+	readonly value: string;
+	readonly data: Option;
+}
+
+interface Config<Option> {
+	readonly ignoreCase?: boolean;
+	readonly ignoreAccents?: boolean;
+	readonly stringify?: (option: FilterOptionOption<Option>) => string;
+	readonly trim?: boolean;
+	readonly matchFrom?: 'any' | 'start';
+}
+
+const memoizedStripDiacriticsForInput = memoizeOne(stripDiacritics);
+const trimString = (value: string) => value.replace(/^\s+|\s+$/g, '');
+const defaultStringify = <Option>(option: FilterOptionOption<Option>) =>
+	`${option.label} ${option.value}`;
+
+export const createFilter =
+	<Option>(config?: Config<Option>) =>
+	(option: FilterOptionOption<Option>, rawInput: string): boolean => {
+		if ((option.data as { __isNew__?: unknown }).__isNew__) return true;
+		const { ignoreCase, ignoreAccents, stringify, trim, matchFrom } = {
+			ignoreCase: true,
+			ignoreAccents: true,
+			stringify: defaultStringify,
+			trim: true,
+			matchFrom: 'any' as const,
+			...config,
+		};
+		let input = trim ? trimString(rawInput) : rawInput;
+		let candidate = trim ? trimString(stringify(option)) : stringify(option);
+		if (ignoreCase) {
+			input = input.toLowerCase();
+			candidate = candidate.toLowerCase();
+		}
+		if (ignoreAccents) {
+			input = memoizedStripDiacriticsForInput(input);
+			candidate = stripDiacritics(candidate);
+		}
+		return matchFrom === 'start'
+			? candidate.slice(0, input.length) === input
+			: candidate.indexOf(input) > -1;
+	};

package/src/index.ts

@@ -0,0 +1,66 @@
+export { mergeStyles } from './styles';
+export type { ClassNamesConfig, StylesConfig } from './styles';
+export { defaultTheme } from './theme';
+export type { ThemeConfig } from './theme';
+export type {
+	Colors,
+	CSSObjectWithLabel,
+	GroupBase,
+	InputAction,
+	InputActionMeta,
+	MultiValue,
+	Options,
+	PropsValue,
+	SingleValue,
+	Theme,
+	ThemeSpacing,
+} from './types';
+export { createFilter } from './filters';
+export type { FilterOptionOption } from './filters';
+export * from './types';
+export type {
+	AriaGuidance,
+	AriaGuidanceProps,
+	AriaLiveMessages,
+	AriaOnChange,
+	AriaOnChangeProps,
+	AriaOnFilter,
+	AriaOnFilterProps,
+	AriaOnFocus,
+	AriaOnFocusProps,
+	GuidanceContext,
+	OptionContext,
+} from './accessibility-types';
+export { StateManagedSelect as default } from './state-managed-select.tsrx';
+export { NonceProvider } from './style-context.tsrx';
+export { components } from './components.tsrx';
+export { useStateManager } from './use-state-manager.tsrx';
+export type {
+	ContainerProps,
+	ControlProps,
+	GroupHeadingProps,
+	GroupProps,
+	IndicatorProps as ClearIndicatorProps,
+	IndicatorProps as DropdownIndicatorProps,
+	IndicatorSeparatorProps,
+	IndicatorsContainerProps,
+	InputProps,
+	LoadingIndicatorProps,
+	MenuListProps,
+	MenuProps,
+	MultiValueGenericProps,
+	MultiValueProps,
+	MultiValueRemoveProps,
+	NoticeProps,
+	OptionProps,
+	PlaceholderProps,
+	SelectComponentsConfig,
+	SingleValueProps,
+	ValueContainerProps,
+} from './components.tsrx';
+export type {
+	FormatOptionLabelContext,
+	FormatOptionLabelMeta,
+	SelectInstance,
+} from './select.tsrx';
+export type { Props } from './state-managed-select.tsrx';

package/src/menu-placement.ts

@@ -0,0 +1,143 @@
+import type { CoercedMenuPlacement, MenuPlacement } from './types';
+
+type ScrollTarget = HTMLElement | Window;
+
+export interface PlacementArgs {
+	maxHeight: number;
+	menuEl: HTMLElement | null;
+	minHeight: number;
+	placement: MenuPlacement;
+	shouldScroll: boolean;
+	isFixedPosition: boolean;
+	controlHeight: number;
+}
+
+export interface CalculatedMenuPlacementAndHeight {
+	placement: CoercedMenuPlacement;
+	maxHeight: number;
+}
+
+function isDocumentElement(element: ScrollTarget) {
+	return element === document.documentElement || element === document.body || element === window;
+}
+
+function normalizedHeight(element: ScrollTarget) {
+	return isDocumentElement(element) ? window.innerHeight : (element as HTMLElement).clientHeight;
+}
+
+function getScrollTop(element: ScrollTarget) {
+	return isDocumentElement(element) ? window.pageYOffset : (element as HTMLElement).scrollTop;
+}
+
+function scrollTo(element: ScrollTarget, top: number) {
+	if (isDocumentElement(element)) window.scrollTo(0, top);
+	else (element as HTMLElement).scrollTop = top;
+}
+
+function getScrollParent(element: HTMLElement | null): ScrollTarget {
+	if (!element) return typeof document === 'undefined' ? ({} as Window) : document.documentElement;
+	let style = getComputedStyle(element);
+	const excludeStaticParent = style.position === 'absolute';
+	if (style.position === 'fixed') return document.documentElement;
+	for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+		style = getComputedStyle(parent);
+		if (excludeStaticParent && style.position === 'static') continue;
+		if (/(auto|scroll)/.test(`${style.overflow}${style.overflowY}${style.overflowX}`)) {
+			return parent;
+		}
+	}
+	return document.documentElement;
+}
+
+function animatedScrollTo(element: ScrollTarget, to: number, duration = 200) {
+	const start = getScrollTop(element);
+	const change = to - start;
+	const increment = 10;
+	let currentTime = 0;
+	const animate = () => {
+		currentTime += increment;
+		const elapsed = currentTime / duration - 1;
+		scrollTo(element, change * (elapsed * elapsed * elapsed + 1) + start);
+		if (currentTime < duration) window.requestAnimationFrame(animate);
+	};
+	animate();
+}
+
+export function getMenuPlacement({
+	maxHeight: preferredMaxHeight,
+	menuEl,
+	minHeight,
+	placement: preferredPlacement,
+	shouldScroll,
+	isFixedPosition,
+	controlHeight,
+}: PlacementArgs): CalculatedMenuPlacementAndHeight {
+	const defaultState = { placement: 'bottom' as const, maxHeight: preferredMaxHeight };
+	if (!menuEl || !menuEl.offsetParent) return defaultState;
+
+	const scrollParent = getScrollParent(menuEl);
+	const scrollHeight = (scrollParent as HTMLElement).getBoundingClientRect().height;
+	const { bottom: menuBottom, height: menuHeight, top: menuTop } = menuEl.getBoundingClientRect();
+	const containerTop = (menuEl.offsetParent as HTMLElement).getBoundingClientRect().top;
+	const viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
+	const scrollTop = getScrollTop(scrollParent);
+	const marginBottom = Number.parseInt(getComputedStyle(menuEl).marginBottom, 10);
+	const marginTop = Number.parseInt(getComputedStyle(menuEl).marginTop, 10);
+	const viewSpaceAbove = containerTop - marginTop;
+	const viewSpaceBelow = viewHeight - menuTop;
+	const scrollSpaceAbove = viewSpaceAbove + scrollTop;
+	const scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+	const scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
+	const scrollUp = scrollTop + menuTop - marginTop;
+
+	if (preferredPlacement === 'auto' || preferredPlacement === 'bottom') {
+		if (viewSpaceBelow >= menuHeight) return defaultState;
+		if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {
+			if (shouldScroll) animatedScrollTo(scrollParent, scrollDown, 160);
+			return defaultState;
+		}
+		if (
+			(!isFixedPosition && scrollSpaceBelow >= minHeight) ||
+			(isFixedPosition && viewSpaceBelow >= minHeight)
+		) {
+			if (shouldScroll) animatedScrollTo(scrollParent, scrollDown, 160);
+			return {
+				placement: 'bottom',
+				maxHeight: (isFixedPosition ? viewSpaceBelow : scrollSpaceBelow) - marginBottom,
+			};
+		}
+		if (preferredPlacement === 'auto' || isFixedPosition) {
+			const spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
+			return {
+				placement: 'top',
+				maxHeight:
+					spaceAbove >= minHeight
+						? Math.min(spaceAbove - marginBottom - controlHeight, preferredMaxHeight)
+						: preferredMaxHeight,
+			};
+		}
+		if (shouldScroll) scrollTo(scrollParent, scrollDown);
+		return defaultState;
+	}
+
+	if (preferredPlacement === 'top') {
+		if (viewSpaceAbove >= menuHeight) return { placement: 'top', maxHeight: preferredMaxHeight };
+		if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {
+			if (shouldScroll) animatedScrollTo(scrollParent, scrollUp, 160);
+			return { placement: 'top', maxHeight: preferredMaxHeight };
+		}
+		if (
+			(!isFixedPosition && scrollSpaceAbove >= minHeight) ||
+			(isFixedPosition && viewSpaceAbove >= minHeight)
+		) {
+			if (shouldScroll) animatedScrollTo(scrollParent, scrollUp, 160);
+			return {
+				placement: 'top',
+				maxHeight: (isFixedPosition ? viewSpaceAbove : scrollSpaceAbove) - marginTop,
+			};
+		}
+		return defaultState;
+	}
+
+	throw new Error(`Invalid placement provided "${preferredPlacement}".`);
+}

package/src/scroll-manager.ts

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'octane';
+
+interface ScrollManagerOptions {
+	enabled: boolean;
+	captureEnabled: boolean;
+	lockEnabled: boolean;
+	target: { current: HTMLElement | null };
+	onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
+	onTopArrive?: (event: WheelEvent | TouchEvent) => void;
+}
+
+let activeScrollLocks = 0;
+let originalBodyStyle: {
+	boxSizing: string;
+	height: string;
+	overflow: string;
+	paddingRight: string;
+	position: string;
+} | null = null;
+
+function cancelScroll(event: Event) {
+	if (event.cancelable) event.preventDefault();
+	event.stopPropagation();
+}
+
+export function useScrollManager(options: ScrollManagerOptions) {
+	const atBottom = useRef(false);
+	const atTop = useRef(false);
+	const touchStart = useRef(0);
+
+	useEffect(() => {
+		const element = options.target.current;
+		if (!options.enabled || !options.captureEnabled || !element) return;
+
+		const handleDelta = (event: WheelEvent | TouchEvent, delta: number) => {
+			const { scrollTop, scrollHeight, clientHeight } = element;
+			const available = scrollHeight - clientHeight - scrollTop;
+			let nextDelta = delta;
+			if (delta > available && available > 0) {
+				element.scrollTop = scrollHeight;
+				nextDelta = 0;
+			} else if (delta > 0 && available <= 0) {
+				if (!atBottom.current) options.onBottomArrive?.(event);
+				atBottom.current = true;
+				nextDelta = 0;
+			} else if (delta < -scrollTop && scrollTop > 0) {
+				element.scrollTop = 0;
+				nextDelta = 0;
+			} else if (delta < 0 && scrollTop <= 0) {
+				if (!atTop.current) options.onTopArrive?.(event);
+				atTop.current = true;
+				nextDelta = 0;
+			}
+			if (nextDelta !== 0) {
+				atTop.current = false;
+				atBottom.current = false;
+			}
+			if (nextDelta === 0) cancelScroll(event);
+		};
+		const onWheel = (event: WheelEvent) => handleDelta(event, event.deltaY);
+		const onTouchStart = (event: TouchEvent) => {
+			touchStart.current = event.changedTouches[0]?.clientY ?? 0;
+		};
+		const onTouchMove = (event: TouchEvent) => {
+			const next = event.changedTouches[0]?.clientY ?? touchStart.current;
+			handleDelta(event, touchStart.current - next);
+		};
+		element.addEventListener('wheel', onWheel, { passive: false });
+		element.addEventListener('touchstart', onTouchStart, { passive: false });
+		element.addEventListener('touchmove', onTouchMove, { passive: false });
+		return () => {
+			element.removeEventListener('wheel', onWheel);
+			element.removeEventListener('touchstart', onTouchStart);
+			element.removeEventListener('touchmove', onTouchMove);
+		};
+	}, [
+		options.captureEnabled,
+		options.enabled,
+		options.onBottomArrive,
+		options.onTopArrive,
+		options.target,
+	]);
+
+	useEffect(() => {
+		if (!options.enabled || !options.lockEnabled || typeof document === 'undefined') return;
+		const style = document.body.style;
+		if (activeScrollLocks === 0) {
+			originalBodyStyle = {
+				boxSizing: style.boxSizing,
+				height: style.height,
+				overflow: style.overflow,
+				paddingRight: style.paddingRight,
+				position: style.position,
+			};
+			const currentPadding = Number.parseInt(originalBodyStyle.paddingRight, 10) || 0;
+			const scrollbar = window.innerWidth - document.body.clientWidth;
+			style.boxSizing = 'border-box';
+			style.height = '100%';
+			style.overflow = 'hidden';
+			style.position = 'relative';
+			style.paddingRight = `${scrollbar + currentPadding}px`;
+		}
+		activeScrollLocks += 1;
+		return () => {
+			activeScrollLocks = Math.max(activeScrollLocks - 1, 0);
+			if (activeScrollLocks === 0 && originalBodyStyle) {
+				Object.assign(style, originalBodyStyle);
+				originalBodyStyle = null;
+			}
+		};
+	}, [options.enabled, options.lockEnabled]);
+}