@swan-io/lake 11.1.7 → 11.1.9

package/package.json

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

package/src/components/Cells.d.ts

@@ -125,7 +125,10 @@ export declare const CenteredCell: (props: Except<CellProps, "align">) => import
  * @deprecated Use `<Cell align="right" />` instead
  */
 export declare const EndAlignedCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
-export declare const ActionCell: ({ style, ...props }: CellProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `<Cell align="right" />` instead
+ */
+export declare const ActionCell: (props: CellProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated Use <ActionCell /> instead
  */

package/src/components/Cells.js

@@ -29,14 +29,14 @@ const justifyContentStyles = StyleSheet.create({
     right: { justifyContent: "flex-end" },
 });
 /* eslint-enable react-native/no-unused-styles */
-const fadeOnLeftMask = `linear-gradient(to right, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[16]})`;
-const fadeOnRightMask = `linear-gradient(to left, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[16]})`;
+const fadeOnLeftMask = `linear-gradient(to right, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[8]})`;
+const fadeOnRightMask = `linear-gradient(to left, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[8]})`;
 const styles = StyleSheet.create({
     cell: {
         flexDirection: "row",
         flexGrow: 1,
         flexShrink: 1,
-        paddingHorizontal: spacings[16],
+        paddingHorizontal: spacings[8],
     },
     cellContentContainer: {
         flexGrow: 1,
@@ -98,10 +98,6 @@ const styles = StyleSheet.create({
         paddingRight: 0,
         paddingLeft: spacings[8],
     },
-    actionCell: {
-        paddingVertical: spacings[16],
-        paddingHorizontal: spacings[8],
-    },
 });
 export const Cell = ({ children, align = "left", direction = "row", fadeOn, style, contentContainerStyle, }) => (_jsx(View, { style: [styles.cell, style], children: _jsx(View, { style: [
             styles.cellContentContainer,
@@ -196,7 +192,10 @@ export const CenteredCell = (props) => (_jsx(Cell, { align: "center", ...props }
  * @deprecated Use `<Cell align="right" />` instead
  */
 export const EndAlignedCell = (props) => (_jsx(Cell, { align: "right", ...props }));
-export const ActionCell = ({ style, ...props }) => (_jsx(Cell, { ...props, style: [styles.actionCell, style] }));
+/**
+ * @deprecated Use `<Cell align="right" />` instead
+ */
+export const ActionCell = (props) => _jsx(Cell, { align: "right", ...props });
 /**
  * @deprecated Use <ActionCell /> instead
  */

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/components/PlainListView.js

@@ -26,10 +26,10 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "stretch",
         overflow: "hidden",
-        paddingHorizontal: spacings[8],
+        paddingHorizontal: spacings[16],
     },
     segmentLarge: {
-        paddingHorizontal: spacings[24],
+        paddingHorizontal: spacings[32],
     },
     row: {
         boxShadow: `inset 0 -1px ${colors.gray[100]}`,

package/src/components/VirtualizedList.d.ts

@@ -7,9 +7,6 @@ export type ColumnTitleConfig<ExtraInfo> = {
 export type ColumnCellConfig<T, ExtraInfo> = {
     columnId: string;
     item: T;
-    /**
-     * isHovered is only set for PlainListView
-     */
     isHovered: boolean;
     index: number;
     extraInfo: ExtraInfo;

package/src/components/VirtualizedList.js

@@ -7,7 +7,7 @@ import { backgroundColor as backgroundColorVariants, colors, spacings } from "..
 import { useHover } from "../hooks/useHover";
 import { ScrollView } from "./ScrollView";
 import { Space } from "./Space";
-const HORIZONTAL_ROW_PADDING = 8;
+const HORIZONTAL_ROW_PADDING = 16;
 const styles = StyleSheet.create({
     container: {
         ...commonStyles.fill,
@@ -441,7 +441,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                                 item,
                                 index: absoluteIndex,
                                 extraInfo,
-                                isHovered: false,
+                                isHovered,
                             }) }, columnId));
                     }) })))
                     .toNull(), _jsx(View, { style: [
@@ -466,7 +466,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                                 item,
                                 index: absoluteIndex,
                                 extraInfo,
-                                isHovered: false,
+                                isHovered,
                             }) }, columnId));
                     }) }), Option.fromNullable(stickedToEndColumns)
                     .map(columns => (_jsx(View, { style: [
@@ -488,7 +488,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                                 item,
                                 index: absoluteIndex,
                                 extraInfo,
-                                isHovered: false,
+                                isHovered,
                             }) }, columnId));
                     }) })))
                     .toNull()] })),

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];
 };