@swan-io/lake 4.5.2 → 4.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "4.5.2",
+  "version": "4.6.1",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/Filters.js

@@ -182,7 +182,7 @@ function FilterInput({ label, initialValue = "", noValueText, submitText, autoOp
             }
         });
     };
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange, onSubmitEditing: onSubmit })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
 }
 function FilterBooleanTag({ children, onAdd, onPressRemove }) {
     useEffect(onAdd, []); // eslint-disable-line react-hooks/exhaustive-deps

package/src/components/FixedListView.js

@@ -280,11 +280,14 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         bottom: 0,
+        backgroundColor: backgroundColor.default,
+    },
+    emptyListContentContainer: {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
         padding: spacings[48],
-        backgroundColor: backgroundColor.default,
+        minHeight: "100%",
     },
     emptyList: {
         flexDirection: "column",
@@ -632,7 +635,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
             }
         }
     }, [viewId]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const renderedRangeStartIndex = Math.max(0, Math.floor((currentScrollY.current - renderThreshold) / totalRowHeight));
         const renderedRangeEndIndex = Math.min(originalData.length, renderedRangeStartIndex +
             Math.ceil((lastKnownHeight.current + renderThreshold * 2) / totalRowHeight));
@@ -808,7 +811,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         ], children: [_jsx(View, { style: [
                                                     styles.stickyColumnEndOverflow,
                                                     { width: horizontalPadding, backgroundColor: headerBackgroundColor },
-                                                ] }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
+                                                ] }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: { height: rowsHeight }, children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(ScrollView, { style: styles.emptyListContainer, contentContainerStyle: styles.emptyListContentContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
 };
 export const FixedListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
     const totalRowHeight = rowHeight + rowVerticalSpacing;

package/src/components/LakeTagInput.d.ts

@@ -7,6 +7,7 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     disabled?: boolean;
     valid?: boolean;
     hideErrors?: boolean;
+    validateOnBlur?: boolean;
     help?: string;
     validator?: (value: string) => boolean;
     values: string[];
@@ -211,6 +212,7 @@ export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     valid?: boolean | undefined;
     hideErrors?: boolean | undefined;
+    validateOnBlur?: boolean | undefined;
     help?: string | undefined;
     validator?: ((value: string) => boolean) | undefined;
     placeholder?: string | undefined;

package/src/components/LakeTagInput.js

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
     },
 });
 const SEPARATORS_REGEX = /,| /;
-export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardRef) => {
+export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardRef) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
@@ -97,6 +97,9 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
         }
     }, [pushNewValues]);
     const onTextInputKeyPress = useCallback(({ nativeEvent }) => {
+        if (disabled || readOnly) {
+            return;
+        }
         match({ key: nativeEvent.key, input: inputRef.current })
             .with({ key: "Backspace", input: P.instanceOf(HTMLInputElement) }, ({ input }) => {
             if (isNullishOrEmpty(input.value)) {
@@ -108,7 +111,7 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
                 pushNewValues([input.value]);
             }
         });
-    }, [onValuesChanged, pushNewValues, values]);
+    }, [onValuesChanged, pushNewValues, values, disabled, readOnly]);
     const autoFocus = useCallback(() => {
         inputRef.current?.focus();
     }, []);
@@ -117,9 +120,15 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
         originalOnFocus?.(event);
     }, [originalOnFocus]);
     const onBlur = useCallback((event) => {
+        const input = inputRef.current;
+        if (input instanceof HTMLInputElement &&
+            isNotNullishOrEmpty(input.value) &&
+            validateOnBlur) {
+            pushNewValues([input.value]);
+        }
         setIsFocused(false);
         originalOnBlur?.(event);
-    }, [originalOnBlur]);
+    }, [pushNewValues, originalOnBlur, validateOnBlur]);
     const mergedRef = useMergeRefs(inputRef, forwardRef);
     const hasError = isNotNullishOrEmpty(error);
     return (_jsxs(View, { children: [_jsxs(Pressable, { style: [

package/src/hooks/useUrqlMutation.d.ts

@@ -1,3 +1,3 @@
 import { AsyncData, Future, Result } from "@swan-io/boxed";
 import { AnyVariables, CombinedError, OperationContext, TypedDocumentNode } from "urql";
-export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, Error>>, (input: Variables, context?: Partial<OperationContext>) => Future<Result<Data, Error | CombinedError>>];
+export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, CombinedError>>, (variables: Variables, context?: Partial<OperationContext>) => Future<Result<Data, CombinedError>>];

package/src/hooks/useUrqlMutation.js

@@ -23,8 +23,8 @@ export const useUrqlMutation = (query) => {
             }
             return AsyncData.Done(toResult({ data, error }));
         }, [fetching, data, error]),
-        useCallback((input, context) => Future.fromPromise(execute(input, context))
-            .mapError(error => error) // Only used to cast error
+        useCallback((variables, context) => Future.fromPromise(execute(variables, context))
+            .mapError(error => error)
             .mapOkToResult(toResult), [execute]),
     ];
 };

package/src/hooks/useUrqlQuery.d.ts

@@ -1,19 +1,19 @@
 import { AsyncData, Result } from "@swan-io/boxed";
 import { DependencyList } from "react";
-import { AnyVariables, UseQueryArgs } from "urql";
+import { AnyVariables, CombinedError, UseQueryArgs } from "urql";
 type Query<Data> = {
-    data: AsyncData<Result<Data, Error>>;
-    nextData: AsyncData<Result<Data, Error>>;
     isForceReloading: boolean;
+    data: AsyncData<Result<Data, CombinedError>>;
+    nextData: AsyncData<Result<Data, CombinedError>>;
     reload: () => void;
 };
-export declare const useUrqlQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList: DependencyList) => Query<Data>;
+export declare const useUrqlQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList?: DependencyList) => Query<Data>;
 type PaginatedQuery<Data> = {
-    data: AsyncData<Result<Data, Error>>;
-    nextData: AsyncData<Result<Data, Error>>;
     isForceReloading: boolean;
+    data: AsyncData<Result<Data, CombinedError>>;
+    nextData: AsyncData<Result<Data, CombinedError>>;
     reload: () => void;
     setAfter: (cursor: string | undefined) => void;
 };
-export declare const useUrqlPaginatedQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList: DependencyList) => PaginatedQuery<Data>;
+export declare const useUrqlPaginatedQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList?: DependencyList) => PaginatedQuery<Data>;
 export {};

package/src/hooks/useUrqlQuery.js

@@ -2,72 +2,82 @@ import { AsyncData, Result } from "@swan-io/boxed";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useQuery } from "urql";
 import { isNotNullish, isNullish } from "../utils/nullish";
-const NO_SUSPENSE_CONTEXT = { suspense: false };
-export const useUrqlQuery = (args, dependencyList) => {
-    const [haveParamsChanged, setHaveParamsChanged] = useState(false);
+const EMPTY_DEPENDENCY_LIST = [];
+export const useUrqlQuery = (args, dependencyList = EMPTY_DEPENDENCY_LIST) => {
+    const hasDependencyList = dependencyList !== EMPTY_DEPENDENCY_LIST;
+    const [isDepsListUpdate, setIsDepsListUpdate] = useState(hasDependencyList);
     const [isForceReloading, setIsForceReloading] = useState(false);
     const [{ data, fetching, error }, reexecute] = useQuery({
         ...args,
-        context: NO_SUSPENSE_CONTEXT,
+        context: useMemo(() => ({ ...args.context, suspense: false }), [args.context]),
     });
-    const reload = useCallback(() => {
-        setIsForceReloading(true);
-        reexecute({ requestPolicy: "network-only" });
-    }, [reexecute]);
     useEffect(() => {
-        setHaveParamsChanged(true);
+        if (hasDependencyList) {
+            setIsDepsListUpdate(true);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencyList);
     useEffect(() => {
         if (!fetching) {
-            setHaveParamsChanged(false);
+            setIsDepsListUpdate(false);
             setIsForceReloading(false);
         }
     }, [fetching]);
-    const okResult = useMemo(() => AsyncData.Done(Result.Ok(data)), [data]);
-    const errorResult = useMemo(() => AsyncData.Done(Result.Error(error)), [error]);
-    const shouldResetState = isForceReloading || haveParamsChanged;
-    if (((isNullish(data) && isNullish(error)) || shouldResetState) && fetching) {
+    const reload = useCallback(() => {
+        setIsForceReloading(true);
+        reexecute({ requestPolicy: "network-only" });
+    }, [reexecute]);
+    const okResult = useMemo(() => (isNullish(data) ? null : AsyncData.Done(Result.Ok(data))), [data]);
+    const errorResult = useMemo(() => (isNullish(error) ? null : AsyncData.Done(Result.Error(error))), [error]);
+    const initialFetching = isNullish(okResult) && isNullish(errorResult);
+    const shouldResetState = isDepsListUpdate || isForceReloading;
+    if (fetching && (initialFetching || shouldResetState)) {
         return {
+            isForceReloading,
             data: AsyncData.Loading(),
             nextData: AsyncData.Loading(),
-            isForceReloading,
             reload,
         };
     }
-    if (isNotNullish(error)) {
+    if (isNotNullish(errorResult)) {
         return {
+            isForceReloading,
             data: errorResult,
             nextData: errorResult,
-            isForceReloading,
             reload,
         };
     }
-    if (isNotNullish(data)) {
+    if (isNotNullish(okResult)) {
         return {
+            isForceReloading,
             data: okResult,
             nextData: fetching ? AsyncData.Loading() : okResult,
-            isForceReloading,
             reload,
         };
     }
     return {
+        isForceReloading,
         data: AsyncData.NotAsked(),
         nextData: AsyncData.NotAsked(),
-        isForceReloading,
         reload,
     };
 };
-export const useUrqlPaginatedQuery = (args, dependencyList) => {
-    const [after, setAfter] = useState(undefined);
-    const { data, nextData, isForceReloading, reload: originalReload, } = useUrqlQuery({ ...args, variables: { ...args.variables, after } }, dependencyList);
+export const useUrqlPaginatedQuery = (args, dependencyList = EMPTY_DEPENDENCY_LIST) => {
+    const [after, setAfter] = useState();
+    const { isForceReloading, data, nextData, reload: baseReload, } = useUrqlQuery({ ...args, variables: { ...args.variables, after } }, dependencyList);
     useEffect(() => {
         setAfter(undefined);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencyList);
     const reload = useCallback(() => {
         setAfter(undefined);
-        originalReload();
-    }, [originalReload]);
-    return { data, nextData, isForceReloading, reload, setAfter };
+        baseReload();
+    }, [baseReload]);
+    return {
+        isForceReloading,
+        data,
+        nextData,
+        reload,
+        setAfter,
+    };
 };

package/src/utils/function.d.ts

@@ -3,4 +3,5 @@ export declare const noop: () => void;
 export declare const stubFalse: () => false;
 export declare const stubTrue: () => true;
 export declare const unionToArray: <T extends PropertyKey>(object: Record<T, true>) => T[];
+export declare const getUnionGuard: <T extends PropertyKey>(object: Record<T, true>) => (value: unknown) => value is T;
 export declare const memoize: <Input extends unknown[], Output>(func: (...input: Input) => Output, getCacheKey: (...input: Input) => string) => (...input: Input) => Output;

package/src/utils/function.js

@@ -4,6 +4,10 @@ export const noop = () => { };
 export const stubFalse = () => false;
 export const stubTrue = () => true;
 export const unionToArray = (object) => Dict.keys(object);
+export const getUnionGuard = (object) => {
+    const set = new Set(unionToArray(object));
+    return (value) => set.has(value);
+};
 export const memoize = (func, getCacheKey) => {
     const cache = new Map();
     return (...input) => {