@swan-io/lake 2.7.34 → 2.7.36

package/package.json

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

package/src/components/PlainListView.d.ts

@@ -36,6 +36,7 @@ type Props<T, ExtraInfo> = {
     breakpoint?: number;
     withoutScroll?: boolean;
     stickyOffset?: number;
+    headerBackgroundColor?: string;
 };
-export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint, withoutScroll, stickyOffset, }: Props<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint, withoutScroll, stickyOffset, headerBackgroundColor, }: Props<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/PlainListView.js

@@ -44,6 +44,13 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
     },
+    header: {
+        position: "sticky",
+        top: 0,
+        flexDirection: "row",
+        alignItems: "stretch",
+        zIndex: 2,
+    },
     stickyHeader: {
         position: "sticky",
         backgroundColor: backgroundColor.default90Transparency,
@@ -106,7 +113,7 @@ const Row = ({ id, item, index, rowHeight, columns, extraInfo, isActive, isHover
                 },
             ], id: columnId, children: renderCell({ columnId, item, index, extraInfo, isHovered }) }, columnId))) }));
 };
-export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns = columns, extraInfo, onEndReached, onEndReachedThresholdPx = 200, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint = breakpoints.large, withoutScroll = false, stickyOffset = 0, }) => {
+export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns = columns, extraInfo, onEndReached, onEndReachedThresholdPx = 200, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint = breakpoints.large, withoutScroll = false, stickyOffset = 0, headerBackgroundColor = backgroundColor.default, }) => {
     const viewId = useId();
     const scrollTrackerRef = useRef(null);
     const groups = useMemo(() => {
@@ -165,22 +172,31 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
         ] })), [isLoading, loading?.count, rowHeight, totalHeight, withoutScroll]);
     return (_jsx(ResponsiveContainer, { style: withoutScroll ? (isEmpty ? commonStyles.fill : undefined) : styles.root, breakpoint: breakpoint, children: ({ large }) => {
             const displayColumns = large ? columns : smallColumns;
-            return (_jsxs(_Fragment, { children: [!isEmpty && large ? (_jsx(View, { style: [styles.segment, styles.segmentLarge, headerStyle], children: displayColumns.map(({ id, width, title, renderTitle }) => {
-                            const columnId = `${viewId}_${id}`;
-                            return (_jsx(View, { style: [
-                                    styles.segmentHeaderCell,
-                                    {
-                                        width: typeof width === "number" ? width : ONE,
-                                        flexGrow: width === "grow" ? ONE : ZERO,
-                                        height: headerHeight,
-                                    },
-                                ], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
-                        }) })) : null, cloneElement(listWrapper, {
-                        children: (_jsxs(_Fragment, { children: [Array.from(groups.entries()).map(([groupName, items]) => {
+            return (_jsx(_Fragment, { children: cloneElement(listWrapper, {
+                    children: (_jsxs(_Fragment, { children: [!isEmpty && large ? (_jsx(View, { style: [
+                                    styles.segment,
+                                    styles.segmentLarge,
+                                    styles.header,
+                                    headerStyle,
+                                    { backgroundColor: headerBackgroundColor },
+                                ], children: displayColumns.map(({ id, width, title, renderTitle }) => {
+                                    const columnId = `${viewId}_${id}`;
+                                    return (_jsx(View, { style: [
+                                            styles.segmentHeaderCell,
+                                            {
+                                                width: typeof width === "number" ? width : ONE,
+                                                flexGrow: width === "grow" ? ONE : ZERO,
+                                                height: headerHeight,
+                                            },
+                                        ], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                                }) })) : null, _jsx(View, { children: Array.from(groups.entries()).map(([groupName, items]) => {
                                     return (_jsxs(Fragment, { children: [groupName != null ? (_jsx(View, { style: [
                                                     styles.stickyHeader,
                                                     large && styles.stickyHeaderLarge,
-                                                    { height: groupHeaderHeight, top: stickyOffset },
+                                                    {
+                                                        height: groupHeaderHeight,
+                                                        top: stickyOffset + groupHeaderHeight,
+                                                    },
                                                 ], children: _jsx(LakeHeading, { level: 3, variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
                                                 const key = keyExtractor(item, index);
                                                 const isActive = activeRowId === key;
@@ -197,7 +213,7 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                                     children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, style: rowStyle, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
                                                 });
                                             })] }, groupName));
-                                }), _jsx(View, { children: _jsx(View, { "aria-busy": isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
-                    })] }));
+                                }) }), _jsx(View, { children: _jsx(View, { "aria-busy": isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
+                }) }));
         } }));
 };

package/src/components/Toggle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors } from "../constants/design";
 import { Box } from "./Box";
@@ -47,16 +47,17 @@ export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", on
     const isMobile = mode === "mobile";
     const onColor = value ? colors.positive[500] : colors.gray[500];
     const offColor = !value ? colors.negative[500] : colors.gray[500];
-    useEffect(() => {
+    const reajustLayout = useCallback(() => {
         (value ? onItemRef : offItemRef).current?.measureLayout(containerRef.current, (left, _, width) => {
             setHandleStyle(prev => ({
                 transitionProperty: prev ? "width, transform" : "none",
                 width: width + 2 * BORDER_WIDTH,
-                transform: `translateX(${value ? -BORDER_WIDTH : left - (isMobile ? 2 * BORDER_WIDTH : 0)}px)`,
+                transform: `translateX(${value ? -BORDER_WIDTH : left - 2 * BORDER_WIDTH}px)`,
             }));
         }, () => { });
-    }, [value, isMobile, onLabel, offLabel]);
-    return (_jsxs(Pressable, { style: [styles.switch, disabled && styles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", children: [_jsx(View, { style: [
+    }, [value]);
+    useEffect(reajustLayout, [reajustLayout, value, isMobile, onLabel, offLabel]);
+    return (_jsxs(Pressable, { style: [styles.switch, disabled && styles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", onLayout: reajustLayout, children: [_jsx(View, { style: [
                     styles.handle,
                     handleStyle,
                     {

package/src/utils/urql.d.ts

@@ -0,0 +1,22 @@
+import { Result } from "@swan-io/boxed";
+import { Except, SetRequired } from "type-fest";
+import { AnyVariables, OperationResult, UseQueryArgs, UseQueryResponse, UseQueryState } from "urql";
+export declare const parseOperationResult: <T>({ error, data }: OperationResult<T, AnyVariables>) => T;
+export declare const useQueryWithErrorBoundary: <Data = unknown, Variables extends AnyVariables = AnyVariables>(options: UseQueryArgs<Variables, Data>) => [{
+    stale: boolean;
+    extensions?: Record<string, any> | undefined;
+    operation?: import("@urql/core/dist/urql-core-chunk").Operation<Data, Variables> | undefined;
+    data: Data;
+}, import("urql").UseQueryExecute];
+export declare const filterRejectionsToPromise: <T extends {
+    __typename: string;
+}>(input: T) => Promise<Exclude<T, {
+    __typename: `${string}Rejection`;
+}>>;
+export declare const filterRejectionsToResult: <T extends {
+    __typename: string;
+}>(input: T) => Result<Exclude<T, {
+    __typename: `${string}Rejection`;
+}>, Extract<T, {
+    __typename: `${string}Rejection`;
+}>>;

package/src/utils/urql.js

@@ -0,0 +1,30 @@
+import { Result } from "@swan-io/boxed";
+import { CombinedError, useQuery, } from "urql";
+import { isNotNullish, isNullish } from "./nullish";
+export const parseOperationResult = ({ error, data }) => {
+    if (isNotNullish(error)) {
+        throw error;
+    }
+    if (isNullish(data)) {
+        throw new CombinedError({
+            networkError: new Error("No Content"),
+        });
+    }
+    return data;
+};
+export const useQueryWithErrorBoundary = (options) => {
+    const [{ fetching, data, error, ...rest }, reexecuteQuery] = useQuery(options);
+    if (isNotNullish(error)) {
+        throw error;
+    }
+    if (isNullish(data)) {
+        throw new CombinedError({
+            networkError: new Error("No Content"),
+        });
+    }
+    return [{ data, ...rest }, reexecuteQuery];
+};
+export const filterRejectionsToPromise = (input) => (input.__typename.endsWith("Rejection")
+    ? Promise.reject(new Error(input.__typename))
+    : Promise.resolve(input));
+export const filterRejectionsToResult = (input) => (input.__typename.endsWith("Rejection") ? Result.Error(input) : Result.Ok(input));