@octanejs/select 0.1.1

package/src/state-managed-select.tsrx

@@ -0,0 +1,19 @@
+import { Select, type SelectProps } from './select.tsrx';
+import { useStateManager, type StateManagerProps } from './use-state-manager.tsrx';
+import type { GroupBase } from './types';
+
+export type Props<
+	Option = unknown,
+	IsMulti extends boolean = boolean,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+> =
+	StateManagerProps<Option, IsMulti, Group>;
+
+export function StateManagedSelect<
+	Option = unknown,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: Props<Option, IsMulti, Group>) @{
+	const selectProps = useStateManager<Option, IsMulti, Group>(props);
+	<Select {...selectProps as SelectProps<Option, IsMulti, Group>} />
+}

package/src/style-adapter.d.ts

@@ -0,0 +1,25 @@
+import type { CSSObjectWithLabel } from './types';
+
+export interface StyleCache {
+	key: string;
+	inserted: Record<string, unknown>;
+	registered: Record<string, string>;
+}
+
+export function createStyleCache(options?: { key?: string; nonce?: string }): StyleCache;
+
+export function resolveComponentStyle(
+	cssValue: CSSObjectWithLabel,
+	className?: unknown,
+	cache?: StyleCache,
+	nonce?: string,
+): { className: string; id: string };
+
+export interface KeyframesValue {
+	name: string;
+	styles: string;
+	anim: 1;
+	toString(): string;
+}
+
+export function createKeyframes(cssValue: CSSObjectWithLabel): KeyframesValue;

package/src/style-adapter.mjs

@@ -0,0 +1,53 @@
+import createEmotionCacheModule from '@emotion/cache';
+import { serializeStyles } from '@emotion/serialize';
+import { getRegisteredStyles, insertStyles } from '@emotion/utils';
+import { injectStyle } from 'octane';
+
+const createEmotionCache = createEmotionCacheModule.default ?? createEmotionCacheModule;
+let clientCache;
+
+export function createStyleCache(options = {}) {
+	return createEmotionCache(options);
+}
+
+function cacheForRender() {
+	if (typeof document === 'undefined') return createEmotionCache({ key: 'css' });
+	clientCache ??= createEmotionCache({ key: 'css' });
+	return clientCache;
+}
+
+export function resolveComponentStyle(cssValue, className, providedCache, nonce) {
+	const cache = providedCache ?? cacheForRender();
+	const registeredStyles = [cssValue];
+	let composedClassName = '';
+	if (typeof className === 'string') {
+		composedClassName = getRegisteredStyles(cache.registered, registeredStyles, className);
+	}
+	const serialized = serializeStyles(registeredStyles);
+	composedClassName += `${cache.key}-${serialized.name}`;
+	const id = `${cache.key}-${serialized.name}`;
+
+	if (typeof document !== 'undefined') {
+		const existing = document.querySelector(
+			`style[data-octane="${id}"], style[data-emotion~="${serialized.name}"][data-emotion^="${cache.key} "]`,
+		);
+		if (existing) cache.inserted[serialized.name] = true;
+	}
+	const rules = insertStyles(cache, serialized, true);
+	if (rules !== undefined && rules !== '') injectStyle(id, rules, nonce);
+
+	return { className: composedClassName, id };
+}
+
+export function createKeyframes(cssValue) {
+	const serialized = serializeStyles([cssValue]);
+	const name = `animation-${serialized.name}`;
+	return {
+		name,
+		styles: `@keyframes ${name}{${serialized.styles}}`,
+		anim: 1,
+		toString() {
+			return `_EMO_${this.name}_${this.styles}_EMO_`;
+		},
+	};
+}

package/src/style-context.tsrx

@@ -0,0 +1,37 @@
+import { createContext, useContext, useMemo } from 'octane';
+import type { OctaneNode } from 'octane';
+
+import { createStyleCache, resolveComponentStyle, type StyleCache } from './style-adapter';
+import type { CSSObjectWithLabel } from './types';
+
+interface StyleContextValue {
+	cache: StyleCache;
+	nonce: string;
+}
+
+const StyleContext = createContext<StyleContextValue | null>(null);
+
+export function NonceProvider(props: {
+	nonce: string;
+	children?: OctaneNode;
+	cacheKey: string;
+}) @{
+	const value = useMemo(
+		() => ({
+			cache: createStyleCache({ key: props.cacheKey, nonce: props.nonce }),
+			nonce: props.nonce,
+		}),
+		[props.cacheKey, props.nonce],
+	);
+	<StyleContext.Provider value={value}>{props.children}</StyleContext.Provider>
+}
+
+export function useStyleResolver() {
+	const context = useContext(StyleContext);
+	return (cssValue: CSSObjectWithLabel, className?: unknown) => resolveComponentStyle(
+		cssValue,
+		className,
+		context?.cache,
+		context?.nonce,
+	);
+}

package/src/styles.ts

@@ -0,0 +1,53 @@
+import type { CSSObjectWithLabel, GroupBase } from './types';
+
+export type StyleKey =
+	| 'clearIndicator'
+	| 'container'
+	| 'control'
+	| 'dropdownIndicator'
+	| 'group'
+	| 'groupHeading'
+	| 'indicatorsContainer'
+	| 'indicatorSeparator'
+	| 'input'
+	| 'loadingIndicator'
+	| 'loadingMessage'
+	| 'menu'
+	| 'menuList'
+	| 'menuPortal'
+	| 'multiValue'
+	| 'multiValueLabel'
+	| 'multiValueRemove'
+	| 'noOptionsMessage'
+	| 'option'
+	| 'placeholder'
+	| 'singleValue'
+	| 'valueContainer';
+
+export type StylesConfig<
+	Option = unknown,
+	IsMulti extends boolean = boolean,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+> = Partial<Record<StyleKey, (base: CSSObjectWithLabel, props: unknown) => CSSObjectWithLabel>>;
+
+export type ClassNamesConfig<
+	Option = unknown,
+	IsMulti extends boolean = boolean,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+> = Partial<Record<StyleKey, (props: unknown) => string>>;
+
+export function mergeStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+	source: StylesConfig<Option, IsMulti, Group>,
+	target: StylesConfig<Option, IsMulti, Group> = {},
+): StylesConfig<Option, IsMulti, Group> {
+	const styles = { ...source };
+	for (const keyAsString of Object.keys(target)) {
+		const key = keyAsString as StyleKey;
+		if (source[key]) {
+			styles[key] = (base, props) => target[key]!(source[key]!(base, props), props);
+		} else {
+			styles[key] = target[key];
+		}
+	}
+	return styles;
+}

package/src/theme.ts

@@ -0,0 +1,35 @@
+import type { Theme } from './types';
+
+export const colors = {
+	primary: '#2684FF',
+	primary75: '#4C9AFF',
+	primary50: '#B2D4FF',
+	primary25: '#DEEBFF',
+	danger: '#DE350B',
+	dangerLight: '#FFBDAD',
+	neutral0: 'hsl(0, 0%, 100%)',
+	neutral5: 'hsl(0, 0%, 95%)',
+	neutral10: 'hsl(0, 0%, 90%)',
+	neutral20: 'hsl(0, 0%, 80%)',
+	neutral30: 'hsl(0, 0%, 70%)',
+	neutral40: 'hsl(0, 0%, 60%)',
+	neutral50: 'hsl(0, 0%, 50%)',
+	neutral60: 'hsl(0, 0%, 40%)',
+	neutral70: 'hsl(0, 0%, 30%)',
+	neutral80: 'hsl(0, 0%, 20%)',
+	neutral90: 'hsl(0, 0%, 10%)',
+};
+
+export const spacing = {
+	baseUnit: 4,
+	controlHeight: 38,
+	menuGutter: 8,
+};
+
+export const defaultTheme: Theme = {
+	borderRadius: 4,
+	colors,
+	spacing,
+};
+
+export type ThemeConfig = Theme | ((theme: Theme) => Theme);

package/src/types.ts

@@ -0,0 +1,147 @@
+export interface GroupBase<Option> {
+	readonly options: readonly Option[];
+	readonly label?: string;
+}
+
+export type Options<Option> = readonly Option[];
+export type OptionsOrGroups<Option, Group extends GroupBase<Option>> = readonly (Option | Group)[];
+export type GetOptionLabel<Option> = (option: Option) => string;
+export type GetOptionValue<Option> = (option: Option) => string;
+export type SingleValue<Option> = Option | null;
+export type MultiValue<Option> = readonly Option[];
+export type PropsValue<Option> = MultiValue<Option> | SingleValue<Option>;
+export type OnChangeValue<Option, IsMulti extends boolean> = IsMulti extends true
+	? MultiValue<Option>
+	: SingleValue<Option>;
+export type SetValueAction = 'select-option' | 'deselect-option';
+export interface ActionMetaBase<Option> {
+	option?: Option;
+	removedValue?: Option;
+	removedValues?: Options<Option>;
+	name?: string;
+}
+export interface SelectOptionActionMeta<Option> extends ActionMetaBase<Option> {
+	action: 'select-option';
+	option: Option | undefined;
+}
+export interface DeselectOptionActionMeta<Option> extends ActionMetaBase<Option> {
+	action: 'deselect-option';
+	option: Option | undefined;
+}
+export interface RemoveValueActionMeta<Option> extends ActionMetaBase<Option> {
+	action: 'remove-value';
+	removedValue: Option;
+}
+export interface PopValueActionMeta<Option> extends ActionMetaBase<Option> {
+	action: 'pop-value';
+	removedValue: Option;
+}
+export interface ClearActionMeta<Option> extends ActionMetaBase<Option> {
+	action: 'clear';
+	removedValues: Options<Option>;
+}
+export interface CreateOptionActionMeta<Option> extends ActionMetaBase<Option> {
+	action: 'create-option';
+	option: Option;
+}
+export interface InitialInputFocusedActionMeta<
+	Option,
+	IsMulti extends boolean,
+> extends ActionMetaBase<Option> {
+	action: 'initial-input-focus';
+	value: OnChangeValue<Option, IsMulti>;
+	options?: Options<Option>;
+}
+export type ActionMeta<Option> =
+	| SelectOptionActionMeta<Option>
+	| DeselectOptionActionMeta<Option>
+	| RemoveValueActionMeta<Option>
+	| PopValueActionMeta<Option>
+	| ClearActionMeta<Option>
+	| CreateOptionActionMeta<Option>;
+export type InputAction = 'set-value' | 'input-change' | 'input-blur' | 'menu-close';
+export interface InputActionMeta {
+	action: InputAction;
+	prevInputValue: string;
+}
+
+export type MenuPlacement = 'auto' | 'bottom' | 'top';
+export type CoercedMenuPlacement = 'bottom' | 'top';
+export type MenuPosition = 'absolute' | 'fixed';
+export type FocusDirection = 'up' | 'down' | 'pageup' | 'pagedown' | 'first' | 'last';
+
+export type ClassNamesState = Record<string, boolean>;
+export type CX = (state: ClassNamesState, ...classNames: (string | undefined)[]) => string;
+
+export type GetStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = (
+	propertyName: string,
+	props: unknown,
+) => CSSObjectWithLabel;
+
+export interface CommonProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+	clearValue: () => void;
+	cx: CX;
+	getStyles: GetStyles<Option, IsMulti, Group>;
+	getClassNames: (propertyName: string, props: unknown) => string | undefined;
+	getValue: () => Options<Option>;
+	hasValue: boolean;
+	isMulti: boolean;
+	isRtl: boolean;
+	options: OptionsOrGroups<Option, Group>;
+	selectOption: (newValue: Option) => void;
+	selectProps: Record<string, unknown>;
+	setValue: (
+		newValue: OnChangeValue<Option, IsMulti>,
+		action: SetValueAction,
+		option?: Option,
+	) => void;
+	theme: Theme;
+}
+
+export interface CommonPropsAndClassName<
+	Option,
+	IsMulti extends boolean,
+	Group extends GroupBase<Option>,
+> extends CommonProps<Option, IsMulti, Group> {
+	className?: string;
+}
+
+export interface Colors {
+	primary: string;
+	primary75: string;
+	primary50: string;
+	primary25: string;
+	danger: string;
+	dangerLight: string;
+	neutral0: string;
+	neutral5: string;
+	neutral10: string;
+	neutral20: string;
+	neutral30: string;
+	neutral40: string;
+	neutral50: string;
+	neutral60: string;
+	neutral70: string;
+	neutral80: string;
+	neutral90: string;
+}
+
+export interface ThemeSpacing {
+	baseUnit: number;
+	controlHeight: number;
+	menuGutter: number;
+}
+
+export interface Theme {
+	borderRadius: number;
+	colors: Colors;
+	spacing: ThemeSpacing;
+}
+
+export type CSSInterpolation =
+	string | number | boolean | null | undefined | CSSObjectWithLabel | readonly CSSInterpolation[];
+
+export type CSSObjectWithLabel = {
+	[key: string]: CSSInterpolation;
+	label?: string;
+};

package/src/use-async.tsrx

@@ -0,0 +1,146 @@
+import { useCallback, useEffect, useLinkedState, useRef, useState } from 'octane';
+
+import type { GroupBase, InputActionMeta, OptionsOrGroups } from './types';
+import type { StateManagerProps } from './use-state-manager.tsrx';
+import { handleInputChange } from './utils';
+
+export interface AsyncAdditionalProps<Option, Group extends GroupBase<Option>> {
+	defaultOptions?: OptionsOrGroups<Option, Group> | boolean;
+	// Matches upstream's deliberately opaque cache invalidation token.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	cacheOptions?: any;
+	loadOptions?: (inputValue: string, callback: (options: OptionsOrGroups<
+		Option,
+		Group
+	>) => void) => Promise<OptionsOrGroups<Option, Group>> | void;
+	isLoading?: boolean;
+}
+
+export type AsyncProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> =
+	StateManagerProps<Option, IsMulti, Group> & AsyncAdditionalProps<Option, Group>;
+
+export function useAsync<
+	Option,
+	IsMulti extends boolean = boolean,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+>(
+	props: AsyncProps<Option, IsMulti, Group>,
+): AsyncProps<Option, IsMulti, Group> & {
+	filterOption: unknown;
+	isLoading: boolean;
+	onInputChange: (newValue: string, actionMeta: InputActionMeta) => void;
+	options: OptionsOrGroups<Option, Group>;
+} {
+	const {
+		defaultOptions: propsDefaultOptions = false,
+		cacheOptions = false,
+		loadOptions: propsLoadOptions,
+		options: _propsOptions,
+		isLoading: propsIsLoading = false,
+		onInputChange: propsOnInputChange,
+		filterOption = null,
+		...restSelectProps
+	} = props;
+	const { inputValue: propsInputValue } = restSelectProps;
+	const lastRequest = useRef<unknown>(undefined);
+	const mounted = useRef(false);
+	const [defaultOptions, setDefaultOptions] = useLinkedState<
+		OptionsOrGroups<Option, Group> | boolean,
+		OptionsOrGroups<Option, Group> | undefined
+	>(
+		propsDefaultOptions,
+		(nextDefaultOptions) => Array.isArray(nextDefaultOptions) ? nextDefaultOptions : undefined,
+	);
+	const [stateInputValue, setStateInputValue] = useState(
+		typeof propsInputValue !== 'undefined' ? propsInputValue as string : '',
+	);
+	const [isLoading, setIsLoading] = useState(propsDefaultOptions === true);
+	const [loadedInputValue, setLoadedInputValue] = useState<string | undefined>(undefined);
+	const [loadedOptions, setLoadedOptions] = useState<OptionsOrGroups<Option, Group>>([]);
+	const [passEmptyOptions, setPassEmptyOptions] = useState(false);
+	const [optionsCache, setOptionsCache] = useLinkedState<
+		unknown,
+		Record<string, OptionsOrGroups<Option, Group>>
+	>(cacheOptions, () => ({}), {
+		// Preserve upstream's strict-equality cache-token comparison.
+		sourceEqual: (previous, next) => previous === next,
+	});
+
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+
+	const loadOptions = useCallback((
+		inputValue: string,
+		callback: (options?: OptionsOrGroups<Option, Group>) => void,
+	) => {
+		if (!propsLoadOptions) {
+			callback();
+			return;
+		}
+		const loader = propsLoadOptions(inputValue, callback);
+		if (loader && typeof loader.then === 'function') loader.then(callback, () => callback());
+	}, [propsLoadOptions]);
+
+	useEffect(() => {
+		if (propsDefaultOptions === true) {
+			loadOptions(stateInputValue, (options) => {
+				if (!mounted.current) return;
+				setDefaultOptions(options || []);
+				setIsLoading(Boolean(lastRequest.current));
+			});
+		}
+	}, []);
+
+	const onInputChange = useCallback((newValue: string, actionMeta: InputActionMeta) => {
+		const inputValue = handleInputChange(newValue, actionMeta, propsOnInputChange);
+		if (!inputValue) {
+			lastRequest.current = undefined;
+			setStateInputValue('');
+			setLoadedInputValue('');
+			setLoadedOptions([]);
+			setIsLoading(false);
+			setPassEmptyOptions(false);
+			return;
+		}
+		if (cacheOptions && optionsCache[inputValue]) {
+			setStateInputValue(inputValue);
+			setLoadedInputValue(inputValue);
+			setLoadedOptions(optionsCache[inputValue]);
+			setIsLoading(false);
+			setPassEmptyOptions(false);
+			return;
+		}
+		const request = lastRequest.current = {};
+		setStateInputValue(inputValue);
+		setIsLoading(true);
+		setPassEmptyOptions(!loadedInputValue);
+		loadOptions(inputValue, (options) => {
+			if (!mounted.current || request !== lastRequest.current) return;
+			lastRequest.current = undefined;
+			setIsLoading(false);
+			setLoadedInputValue(inputValue);
+			setLoadedOptions(options || []);
+			setPassEmptyOptions(false);
+			setOptionsCache(options ? { ...optionsCache, [inputValue]: options } : optionsCache);
+		});
+	}, [cacheOptions, loadOptions, loadedInputValue, optionsCache, propsOnInputChange]);
+
+	const options =
+		passEmptyOptions
+			? []
+			: stateInputValue && loadedInputValue
+				? loadedOptions
+				: (defaultOptions || []) as OptionsOrGroups<Option, Group>;
+
+	return {
+		...restSelectProps,
+		options,
+		isLoading: isLoading || propsIsLoading,
+		onInputChange,
+		filterOption,
+	};
+}

package/src/use-creatable.tsrx

@@ -0,0 +1,151 @@
+import { useCallback, useMemo } from 'octane';
+import type { OctaneNode } from 'octane';
+
+import {
+	getOptionLabel as baseGetOptionLabel,
+	getOptionValue as baseGetOptionValue,
+} from './builtins';
+import type {
+	ActionMeta,
+	GetOptionLabel,
+	GetOptionValue,
+	GroupBase,
+	OnChangeValue,
+	Options,
+	OptionsOrGroups,
+	PropsValue,
+} from './types';
+import { cleanValue, valueTernary } from './utils';
+import type { PublicBaseSelectProps } from './select.tsrx';
+
+export interface Accessors<Option> {
+	getOptionValue: GetOptionValue<Option>;
+	getOptionLabel: GetOptionLabel<Option>;
+}
+
+export interface CreatableAdditionalProps<Option, Group extends GroupBase<Option>> {
+	allowCreateWhileLoading?: boolean;
+	createOptionPosition?: 'first' | 'last';
+	formatCreateLabel?: (inputValue: string) => OctaneNode;
+	isValidNewOption?: (inputValue: string, value: Options<Option>, options: OptionsOrGroups<
+		Option,
+		Group
+	>, accessors: Accessors<Option>) => boolean;
+	getNewOptionData?: (inputValue: string, optionLabel: OctaneNode) => Option;
+	onCreateOption?: (inputValue: string) => void;
+}
+
+export type CreatableBaseProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> =
+	PublicBaseSelectProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group>;
+
+function compareOption<Option>(inputValue: string, option: Option, accessors: Accessors<Option>) {
+	const candidate = String(inputValue).toLowerCase();
+	return String(accessors.getOptionValue(option)).toLowerCase() === candidate ||
+		String(accessors.getOptionLabel(option)).toLowerCase() === candidate;
+}
+
+const builtins = {
+	formatCreateLabel: (inputValue: string) => `Create "${inputValue}"`,
+	isValidNewOption<Option, Group extends GroupBase<Option>>(
+		inputValue: string,
+		selectValue: Options<Option>,
+		selectOptions: OptionsOrGroups<Option, Group>,
+		accessors: Accessors<Option>,
+	) {
+		return !(!inputValue ||
+			selectValue.some((option) => compareOption(inputValue, option, accessors)) ||
+			selectOptions.some((option) => compareOption(inputValue, option as Option, accessors)));
+	},
+	getNewOptionData(inputValue: string, optionLabel: OctaneNode) {
+		return { label: optionLabel, value: inputValue, __isNew__: true };
+	},
+};
+
+export function useCreatable<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+	props: CreatableBaseProps<Option, IsMulti, Group>,
+): CreatableBaseProps<Option, IsMulti, Group> {
+	const {
+		allowCreateWhileLoading = false,
+		createOptionPosition = 'last',
+		formatCreateLabel = builtins.formatCreateLabel,
+		isValidNewOption = builtins.isValidNewOption,
+		getNewOptionData = builtins.getNewOptionData as unknown as (inputValue: string, optionLabel: OctaneNode) => Option,
+		onCreateOption,
+		options: propsOptions = [],
+		onChange: propsOnChange,
+		...restSelectProps
+	} = props;
+	const {
+		getOptionValue = baseGetOptionValue,
+		getOptionLabel = baseGetOptionLabel,
+		inputValue = '',
+		isLoading,
+		isMulti,
+		value = null,
+		name,
+	} = restSelectProps;
+
+	const newOption = useMemo(
+		() => isValidNewOption(inputValue, cleanValue(value), propsOptions, {
+			getOptionValue,
+			getOptionLabel,
+		}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined,
+		[
+			formatCreateLabel,
+			getNewOptionData,
+			getOptionLabel,
+			getOptionValue,
+			inputValue,
+			isValidNewOption,
+			propsOptions,
+			value,
+		],
+	);
+
+	const options = useMemo(
+		() => (allowCreateWhileLoading || !isLoading) && newOption
+			? createOptionPosition === 'first'
+				? [newOption, ...propsOptions]
+				: [...propsOptions, newOption]
+			: propsOptions,
+		[allowCreateWhileLoading, createOptionPosition, isLoading, newOption, propsOptions],
+	);
+
+	const onChange = useCallback((
+		newValue: OnChangeValue<Option, IsMulti>,
+		actionMeta: ActionMeta<Option>,
+	) => {
+		if (actionMeta.action !== 'select-option') {
+			propsOnChange?.(newValue, actionMeta);
+			return;
+		}
+		const valueArray = Array.isArray(newValue) ? newValue : [newValue];
+		if (valueArray[valueArray.length - 1] === newOption) {
+			if (onCreateOption) onCreateOption(inputValue);
+			else {
+				const newOptionData = getNewOptionData(inputValue, inputValue);
+				propsOnChange?.(
+					valueTernary(
+						isMulti,
+						[...cleanValue(value), newOptionData],
+						newOptionData,
+					) as OnChangeValue<Option, IsMulti>,
+					{ action: 'create-option', name, option: newOptionData },
+				);
+			}
+			return;
+		}
+		propsOnChange?.(newValue, actionMeta);
+	}, [
+		getNewOptionData,
+		inputValue,
+		isMulti,
+		name,
+		newOption,
+		onCreateOption,
+		propsOnChange,
+		value,
+	]);
+
+	return { ...restSelectProps, options, onChange } as CreatableBaseProps<Option, IsMulti, Group>;
+}