@octanejs/select 0.1.13 → 0.1.14

package/src/state-managed-select.tsrx

@@ -6,8 +6,7 @@ export type Props<
 	Option = unknown,
 	IsMulti extends boolean = boolean,
 	Group extends GroupBase<Option> = GroupBase<Option>,
-> =
-	StateManagerProps<Option, IsMulti, Group>;
+> = StateManagerProps<Option, IsMulti, Group>;
 
 export function StateManagedSelect<
 	Option = unknown,
@@ -15,5 +14,5 @@ export function StateManagedSelect<
 	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>} />
+	<Select {...(selectProps as SelectProps<Option, IsMulti, Group>)} />
 }

package/src/style-context.tsrx

@@ -11,11 +11,7 @@ interface StyleContextValue {
 
 const StyleContext = createContext<StyleContextValue | null>(null);
 
-export function NonceProvider(props: {
-	nonce: string;
-	children?: OctaneNode;
-	cacheKey: string;
-}) @{
+export function NonceProvider(props: { nonce: string; children?: OctaneNode; cacheKey: string }) @{
 	const value = useMemo(
 		() => ({
 			cache: createStyleCache({ key: props.cacheKey, nonce: props.nonce }),
@@ -28,10 +24,6 @@ export function NonceProvider(props: {
 
 export function useStyleResolver() {
 	const context = useContext(StyleContext);
-	return (cssValue: CSSObjectWithLabel, className?: unknown) => resolveComponentStyle(
-		cssValue,
-		className,
-		context?.cache,
-		context?.nonce,
-	);
+	return (cssValue: CSSObjectWithLabel, className?: unknown) =>
+		resolveComponentStyle(cssValue, className, context?.cache, context?.nonce);
 }

package/src/use-async.tsrx

@@ -9,15 +9,18 @@ export interface AsyncAdditionalProps<Option, Group extends GroupBase<Option>> {
 	// 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;
+	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 type AsyncProps<
+	Option,
+	IsMulti extends boolean,
+	Group extends GroupBase<Option>,
+> = StateManagerProps<Option, IsMulti, Group> & AsyncAdditionalProps<Option, Group>;
 
 export function useAsync<
 	Option,
@@ -47,12 +50,11 @@ export function useAsync<
 	const [defaultOptions, setDefaultOptions] = useLinkedState<
 		OptionsOrGroups<Option, Group> | boolean,
 		OptionsOrGroups<Option, Group> | undefined
-	>(
-		propsDefaultOptions,
-		(nextDefaultOptions) => Array.isArray(nextDefaultOptions) ? nextDefaultOptions : undefined,
+	>(propsDefaultOptions, (nextDefaultOptions) =>
+		Array.isArray(nextDefaultOptions) ? nextDefaultOptions : undefined,
 	);
 	const [stateInputValue, setStateInputValue] = useState(
-		typeof propsInputValue !== 'undefined' ? propsInputValue as string : '',
+		typeof propsInputValue !== 'undefined' ? (propsInputValue as string) : '',
 	);
 	const [isLoading, setIsLoading] = useState(propsDefaultOptions === true);
 	const [loadedInputValue, setLoadedInputValue] = useState<string | undefined>(undefined);
@@ -73,17 +75,17 @@ export function useAsync<
 		};
 	}, []);
 
-	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]);
+	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) {
@@ -95,46 +97,48 @@ export function useAsync<
 		}
 	}, []);
 
-	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]) {
+	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);
-			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]);
+			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>;
+	const options = passEmptyOptions
+		? []
+		: stateInputValue && loadedInputValue
+			? loadedOptions
+			: ((defaultOptions || []) as OptionsOrGroups<Option, Group>);
 
 	return {
 		...restSelectProps,

package/src/use-creatable.tsrx

@@ -26,21 +26,28 @@ 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;
+	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>;
+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;
+	return (
+		String(accessors.getOptionValue(option)).toLowerCase() === candidate ||
+		String(accessors.getOptionLabel(option)).toLowerCase() === candidate
+	);
 }
 
 const builtins = {
@@ -51,9 +58,11 @@ const builtins = {
 		selectOptions: OptionsOrGroups<Option, Group>,
 		accessors: Accessors<Option>,
 	) {
-		return !(!inputValue ||
+		return !(
+			!inputValue ||
 			selectValue.some((option) => compareOption(inputValue, option, accessors)) ||
-			selectOptions.some((option) => compareOption(inputValue, option as Option, accessors)));
+			selectOptions.some((option) => compareOption(inputValue, option as Option, accessors))
+		);
 	},
 	getNewOptionData(inputValue: string, optionLabel: OctaneNode) {
 		return { label: optionLabel, value: inputValue, __isNew__: true };
@@ -68,7 +77,10 @@ export function useCreatable<Option, IsMulti extends boolean, Group extends Grou
 		createOptionPosition = 'last',
 		formatCreateLabel = builtins.formatCreateLabel,
 		isValidNewOption = builtins.isValidNewOption,
-		getNewOptionData = builtins.getNewOptionData as unknown as (inputValue: string, optionLabel: OctaneNode) => Option,
+		getNewOptionData = builtins.getNewOptionData as unknown as (
+			inputValue: string,
+			optionLabel: OctaneNode,
+		) => Option,
 		onCreateOption,
 		options: propsOptions = [],
 		onChange: propsOnChange,
@@ -85,10 +97,13 @@ export function useCreatable<Option, IsMulti extends boolean, Group extends Grou
 	} = restSelectProps;
 
 	const newOption = useMemo(
-		() => isValidNewOption(inputValue, cleanValue(value), propsOptions, {
-			getOptionValue,
-			getOptionLabel,
-		}) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined,
+		() =>
+			isValidNewOption(inputValue, cleanValue(value), propsOptions, {
+				getOptionValue,
+				getOptionLabel,
+			})
+				? getNewOptionData(inputValue, formatCreateLabel(inputValue))
+				: undefined,
 		[
 			formatCreateLabel,
 			getNewOptionData,
@@ -102,49 +117,41 @@ export function useCreatable<Option, IsMulti extends boolean, Group extends Grou
 	);
 
 	const options = useMemo(
-		() => (allowCreateWhileLoading || !isLoading) && newOption
-			? createOptionPosition === 'first'
-				? [newOption, ...propsOptions]
-				: [...propsOptions, newOption]
-			: propsOptions,
+		() =>
+			(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 },
-				);
+	const onChange = useCallback(
+		(newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => {
+			if (actionMeta.action !== 'select-option') {
+				propsOnChange?.(newValue, actionMeta);
+				return;
 			}
-			return;
-		}
-		propsOnChange?.(newValue, actionMeta);
-	}, [
-		getNewOptionData,
-		inputValue,
-		isMulti,
-		name,
-		newOption,
-		onCreateOption,
-		propsOnChange,
-		value,
-	]);
+			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>;
 }

package/src/use-state-manager.tsrx

@@ -22,10 +22,9 @@ 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>;
+> = Omit<PublicBaseSelectProps<Option, IsMulti, Group>, StateManagedPropKeys> &
+	Partial<PublicBaseSelectProps<Option, IsMulti, Group>> &
+	StateManagerAdditionalProps<Option>;
 
 export function useStateManager<
 	Option,
@@ -57,17 +56,20 @@ export function useStateManager<
 		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 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);