@swan-io/lake 11.1.7 → 11.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "11.1.7",
+  "version": "11.1.8",
   "engines": {
     "node": ">=20.9.0",
     "pnpm": "^9.13.0"

package/src/components/MultiSelect.js

@@ -196,7 +196,7 @@ export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText,
     }, [filteredItems]);
     const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(TextInput, { autoComplete: "off", inputMode: "search", multiline: false, rows: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: filterPlaceholder, value: filter, onFocus: setFilterFocused.on, onBlur: setFilterFocused.off, style: [styles.filterInput, filterFocused && styles.filterFocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterFocused, setFilterFocused, filterPlaceholder, color]);
     const ListEmptyComponent = useMemo(() => (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), isNotNullishOrEmpty(emptyResultText) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] }))] })), [emptyResultText]);
-    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
+    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
                     styles.base,
                     hovered && styles.hovered,
                     (focused || visible) && styles.focused,

package/src/hooks/usePersistedState.d.ts

@@ -1 +1 @@
-export declare const usePersistedState: <T>(key: string, defaultValue: T) => readonly [T, (state: T) => void];
+export declare const usePersistedState: <T>(key: string, defaultValue: T) => readonly [T, (value: T | null) => void];

package/src/hooks/usePersistedState.js

@@ -1,21 +1,55 @@
 import { Option, Result } from "@swan-io/boxed";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+const getItem = (key) => Result.fromExecution(() => localStorage.getItem(key)).getOr(null);
+const parseRawValue = (rawValue, defaultValue) => Result.fromExecution(() => (rawValue != null ? JSON.parse(rawValue) : rawValue))
+    .toOption()
+    .flatMap(Option.fromNullable)
+    .getOr(defaultValue);
 export const usePersistedState = (key, defaultValue) => {
     const [state, setState] = useState(() => {
-        return Result.fromExecution(() => localStorage.getItem(key))
-            .toOption()
-            .flatMap(Option.fromNullable)
-            .map(value => JSON.parse(value))
-            .getOr(defaultValue);
+        const rawValue = getItem(key);
+        const value = parseRawValue(rawValue, defaultValue);
+        return { defaultValue, value, rawValue };
     });
-    const setPersistedState = useCallback((state) => {
-        setState(state);
+    const updateRawValue = useCallback((rawValue) => {
+        setState(prevState => {
+            if (rawValue === prevState.rawValue) {
+                return prevState; // skip update if rawValue didn't changed
+            }
+            else {
+                const { defaultValue } = prevState;
+                const value = parseRawValue(rawValue, defaultValue);
+                return { defaultValue, value, rawValue };
+            }
+        });
+    }, []);
+    const setPersistedState = useCallback((value) => {
         try {
-            localStorage.setItem(key, JSON.stringify(state));
+            if (value != null) {
+                const rawValue = JSON.stringify(value);
+                updateRawValue(rawValue);
+                localStorage.setItem(key, rawValue);
+            }
+            else {
+                updateRawValue(null);
+                localStorage.removeItem(key);
+            }
         }
         catch {
             // ignore
         }
-    }, [key]);
-    return [state, setPersistedState];
+    }, [key, updateRawValue]);
+    useEffect(() => {
+        const listener = (event) => {
+            if (event.storageArea === localStorage && (event.key === key || event.key === null)) {
+                const rawValue = getItem(key);
+                updateRawValue(rawValue);
+            }
+        };
+        window.addEventListener("storage", listener);
+        return () => {
+            window.removeEventListener("storage", listener);
+        };
+    }, [key, updateRawValue]);
+    return [state.value, setPersistedState];
 };