@octanejs/select 0.1.1

package/src/use-state-manager.tsrx

@@ -0,0 +1,90 @@
+import { useCallback, useState } from 'octane';
+
+import type { ActionMeta, GroupBase, InputActionMeta, OnChangeValue, PropsValue } from './types';
+import type { PublicBaseSelectProps } from './select.tsrx';
+
+export type StateManagedPropKeys =
+	| 'inputValue'
+	| 'menuIsOpen'
+	| 'onChange'
+	| 'onInputChange'
+	| 'onMenuClose'
+	| 'onMenuOpen'
+	| 'value';
+
+export interface StateManagerAdditionalProps<Option> {
+	defaultInputValue?: string;
+	defaultMenuIsOpen?: boolean;
+	defaultValue?: PropsValue<Option>;
+}
+
+export type StateManagerProps<
+	Option = unknown,
+	IsMulti extends boolean = boolean,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+> =
+	Omit<PublicBaseSelectProps<Option, IsMulti, Group>, StateManagedPropKeys> & Partial<
+		PublicBaseSelectProps<Option, IsMulti, Group>
+	> & StateManagerAdditionalProps<Option>;
+
+export function useStateManager<
+	Option,
+	IsMulti extends boolean,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+	AdditionalProps extends object = object,
+>(props: StateManagerProps<Option, IsMulti, Group> & AdditionalProps) {
+	const {
+		defaultInputValue = '',
+		defaultMenuIsOpen = false,
+		defaultValue = null,
+		inputValue: propsInputValue,
+		menuIsOpen: propsMenuIsOpen,
+		onChange: propsOnChange,
+		onInputChange: propsOnInputChange,
+		onMenuClose: propsOnMenuClose,
+		onMenuOpen: propsOnMenuOpen,
+		value: propsValue,
+		...restSelectProps
+	} = props;
+
+	const [stateInputValue, setStateInputValue] = useState(
+		propsInputValue !== undefined ? propsInputValue : defaultInputValue,
+	);
+	const [stateMenuIsOpen, setStateMenuIsOpen] = useState(
+		propsMenuIsOpen !== undefined ? propsMenuIsOpen : defaultMenuIsOpen,
+	);
+	const [stateValue, setStateValue] = useState<PropsValue<Option>>(
+		propsValue !== undefined ? propsValue : defaultValue,
+	);
+
+	const onChange = useCallback((
+		value: OnChangeValue<Option, IsMulti>,
+		actionMeta: ActionMeta<Option>,
+	) => {
+		propsOnChange?.(value, actionMeta);
+		setStateValue(value);
+	}, [propsOnChange]);
+	const onInputChange = useCallback((value: string, actionMeta: InputActionMeta) => {
+		const newValue = propsOnInputChange?.(value, actionMeta);
+		setStateInputValue(newValue !== undefined ? newValue : value);
+	}, [propsOnInputChange]);
+	const onMenuOpen = useCallback(() => {
+		propsOnMenuOpen?.();
+		setStateMenuIsOpen(true);
+	}, [propsOnMenuOpen]);
+	const onMenuClose = useCallback(() => {
+		propsOnMenuClose?.();
+		setStateMenuIsOpen(false);
+	}, [propsOnMenuClose]);
+
+	return {
+		...restSelectProps,
+		inputValue: propsInputValue !== undefined ? propsInputValue : stateInputValue,
+		menuIsOpen: propsMenuIsOpen !== undefined ? propsMenuIsOpen : stateMenuIsOpen,
+		onChange,
+		onInputChange,
+		onMenuClose,
+		onMenuOpen,
+		value: propsValue !== undefined ? propsValue : stateValue,
+	};
+}

package/src/utils.ts

@@ -0,0 +1,71 @@
+import type { InputActionMeta, Options, PropsValue } from './types';
+
+export type ClassNamesState = Record<string, boolean>;
+
+function applyPrefixToName(prefix: string, name: string): string {
+	if (!name) return prefix;
+	if (name[0] === '-') return prefix + name;
+	return `${prefix}__${name}`;
+}
+
+export function classNames(
+	prefix?: string | null,
+	state?: ClassNamesState,
+	...classNameList: Array<string | undefined>
+): string {
+	const names = [...classNameList];
+	if (state && prefix) {
+		for (const key in state) {
+			if (Object.prototype.hasOwnProperty.call(state, key) && state[key]) {
+				names.push(applyPrefixToName(prefix, key));
+			}
+		}
+	}
+	return names
+		.filter((name): name is string => Boolean(name))
+		.map((name) => String(name).trim())
+		.join(' ');
+}
+
+export function cleanValue<Option>(value: PropsValue<Option>): Options<Option> {
+	if (Array.isArray(value)) return value.filter(Boolean) as Option[];
+	if (typeof value === 'object' && value !== null) return [value as Option];
+	return [];
+}
+
+export function handleInputChange(
+	inputValue: string,
+	actionMeta: InputActionMeta,
+	onInputChange?: (newValue: string, actionMeta: InputActionMeta) => string | void,
+): string {
+	if (onInputChange) {
+		const nextValue = onInputChange(inputValue, actionMeta);
+		if (typeof nextValue === 'string') return nextValue;
+	}
+	return inputValue;
+}
+
+export function scrollOptionIntoView(menuElement: HTMLElement, focusedElement: HTMLElement): void {
+	const menuRect = menuElement.getBoundingClientRect();
+	const focusedRect = focusedElement.getBoundingClientRect();
+	const overScroll = focusedElement.offsetHeight / 3;
+	if (focusedRect.bottom + overScroll > menuRect.bottom) {
+		menuElement.scrollTop = Math.min(
+			focusedElement.offsetTop +
+				focusedElement.clientHeight -
+				menuElement.offsetHeight +
+				overScroll,
+			menuElement.scrollHeight,
+		);
+	} else if (focusedRect.top - overScroll < menuRect.top) {
+		menuElement.scrollTop = Math.max(focusedElement.offsetTop - overScroll, 0);
+	}
+}
+
+export function valueTernary<Option, IsMulti extends boolean>(
+	isMulti: IsMulti | undefined,
+	multiValue: readonly Option[],
+	singleValue: Option,
+): IsMulti extends true ? readonly Option[] : Option {
+	return (isMulti ? multiValue : singleValue) as IsMulti extends true ? readonly Option[] : Option;
+}