Merge pull request #136 from linked-planet/dev

updated global state to use eval func

Author: marcus-wishes

library/src/components/inputs/Select.tsx

@@ -23,6 +23,7 @@ import {
 	type AriaOnFilter,
 	type AriaLiveMessages,
 } from "react-select"
+import ReactSelectAsync from "react-select/async"
 
 // usage aria stuff:
 // https://react-select.com/advanced
@@ -312,6 +313,7 @@ type InnerProps<
 	IsMulti extends boolean = boolean,
 > = PickedCreateableProps<ValueType, IsMulti> & {
 	isCreateable?: boolean
+	isAsync?: boolean
 	testId?: string
 	innerRef?: React.Ref<SelectInstance<
 		OptionType<ValueType>,
@@ -328,6 +330,7 @@ type InnerProps<
 
 const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 	isCreateable,
+	isAsync,
 	formatCreateLabel,
 	testId,
 	innerRef,
@@ -525,6 +528,12 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 		_components,
 	])
 
+	if (isAsync && isCreateable) {
+		throw new Error(
+			"Select - isAsync and isCreateable cannot be true at the same time",
+		)
+	}
+
 	if (isCreateable) {
 		return (
 			<ReactSelectCreatable<
@@ -560,6 +569,31 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 		)
 	}
 
+	if (isAsync) {
+		return (
+			<ReactSelectAsync<
+				OptionType<ValueType>,
+				IsMulti,
+				OptionGroupType<ValueType>
+			>
+				placeholder={
+					(props.placeholder ?? locale.startsWith("de"))
+						? "Auswahl..."
+						: "Select..."
+				}
+				ref={locRef}
+				unstyled
+				inputId={inputId}
+				classNames={classNamesConfig}
+				data-testid={testId}
+				data-invalid={invalid}
+				styles={customStyles}
+				components={components}
+				{...props}
+			/>
+		)
+	}
+
 	return (
 		<RSelect<OptionType<ValueType>, IsMulti, OptionGroupType<ValueType>>
 			placeholder={
@@ -613,6 +647,7 @@ type SelectPropsProtoOld<
 	usePortal?: boolean
 	disabled?: boolean
 	isCreateable?: boolean
+	isAsync?: boolean
 	dropdownLabel?: (isOpen: boolean) => string
 	clearValuesButtonLabel?: string
 	removeValueButtonLabel?: string
@@ -764,6 +799,7 @@ function SelectInForm<
 	const innerProps: InnerProps<ValueType, IsMulti> = {
 		...props,
 		isCreateable: props.isCreateable,
+		isAsync: props.isAsync,
 		testId,
 		innerRef: ref,
 		invalid,

library/src/utils/GlobalState.tsx

@@ -7,7 +7,7 @@ const proxies: Record<string, { value: any }> = {}
 export function useGlobalState<T>(
 	typeName: string,
 	initialValue: T,
-): readonly [T, (value: T) => void] {
+): readonly [T, (prevEval: (prev: T) => T) => void] {
 	if (!proxies[typeName]) {
 		proxies[typeName] = proxy<{ value: T }>({ value: initialValue })
 	}
@@ -16,7 +16,8 @@ export function useGlobalState<T>(
 	const snapshot = useSnapshot(store)
 
 	const setter = useCallback(
-		(value: T) => {
+		(prevEval: (prev: T) => T) => {
+			const value = prevEval(store.value)
 			store.value = value
 		},
 		[store],