@swan-io/lake 2.7.35 → 2.7.37

package/package.json

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

package/src/components/ChoicePicker.d.ts

@@ -6,6 +6,7 @@ type Props<T> = {
     value?: T;
     getId?: (item: T) => unknown;
     onChange: (value: T) => void;
+    disabled?: boolean;
 };
-export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, disabled, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/ChoicePicker.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
+import { commonStyles } from "../constants/commonStyles";
 import { breakpoints, negativeSpacings, spacings } from "../constants/design";
 import { useResponsive } from "../hooks/useResponsive";
 import { clampValue } from "../utils/math";
@@ -100,7 +101,7 @@ const styles = StyleSheet.create({
     },
 });
 const identity = (x) => x;
-export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, onChange, }) => {
+export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, disabled = false, onChange, }) => {
     const containerRef = useRef(null);
     const { desktop } = useResponsive(breakpoints.medium);
     const [mobilePosition, setMobilePosition] = useState("start");
@@ -179,12 +180,13 @@ export const ChoicePicker = ({ items, getId = identity, large = false, renderIte
                         styles.container,
                         !desktop && styles.mobileContainer,
                         !desktop && { width: `${items.length * 100}%` },
-                    ], children: items.map((item, index) => (_jsx(Pressable, { style: [
+                    ], children: items.map((item, index) => (_jsx(Pressable, { disabled: disabled, style: [
                             styles.item,
+                            disabled && commonStyles.disabled,
                             desktop && styles.itemAnimation,
                             desktop && { animationDelay: `${200 + 100 * index}ms` },
                             large && styles.itemLarge,
                             !desktop && styles.itemSmallViewport,
                             !desktop && { width: `${100 / items.length}%` },
-                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start", style: styles.leftButton })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end", style: styles.rightButton }))] }));
+                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start" || disabled, style: styles.leftButton })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end" || disabled, style: styles.rightButton }))] }));
 };

package/src/components/LakeButton.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Children, forwardRef, Fragment, memo } from "react";
 import { ActivityIndicator, StyleSheet, View, } from "react-native";
 import { match } from "ts-pattern";
+import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, spacings, texts, } from "../constants/design";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { Icon } from "./Icon";
@@ -72,10 +73,6 @@ const styles = StyleSheet.create({
     },
     text: texts.semibold,
     textSmall: texts.smallSemibold,
-    disabled: {
-        cursor: "not-allowed",
-        opacity: 0.3,
-    },
     resetOpacity: {
         opacity: 1,
     },
@@ -116,7 +113,7 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
             hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
-            disabled && styles.disabled,
+            disabled && commonStyles.disabled,
             disabled && forceBackground && styles.resetOpacity,
             grow && styles.grow,
             match(mode)

package/src/components/LakeSlider.d.ts

@@ -5,7 +5,8 @@ export type SliderProps = {
     max: number;
     step: number;
     unit: string;
+    disabled?: boolean;
     onChange: (value: number) => void;
 };
 export declare const sliderBreakpoint: number;
-export declare const LakeSlider: ({ label, value, min, max, step, unit, onChange }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSlider: ({ label, value, min, max, step, unit, disabled, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeSlider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
 import { breakpoints } from "../constants/design";
 import { Box } from "./Box";
 import { LakeLabel } from "./LakeLabel";
@@ -17,7 +18,7 @@ const styles = StyleSheet.create({
     },
 });
 export const sliderBreakpoint = breakpoints.tiny;
-export const LakeSlider = ({ label, value, min, max, step, unit, onChange }) => {
+export const LakeSlider = ({ label, value, min, max, step, unit, disabled = false, onChange, }) => {
     const [dirtyValue, setDirtyValue] = useState(String(value));
     useEffect(() => {
         setDirtyValue(String(value));
@@ -27,5 +28,8 @@ export const LakeSlider = ({ label, value, min, max, step, unit, onChange }) =>
         setDirtyValue(String(cleanValue));
         onChange(cleanValue);
     }, [min, max, dirtyValue, onChange]);
-    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal" }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: event => onChange(Number(event.target.value)), style: { backgroundSize: `${((value - min) / (max - min)) * 100}% 100%` } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal" })) })) })) }));
+    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal", disabled: disabled }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: event => onChange(Number(event.target.value)), style: {
+                            backgroundSize: `${((value - min) / (max - min)) * 100}% 100%`,
+                            ...(disabled ? commonStyles.disabled : {}),
+                        } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, inputMode: "decimal", disabled: disabled })) })) })) }));
 };

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,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
 import { colors } from "../constants/design";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -9,9 +10,6 @@ import { Pressable } from "./Pressable";
 const HEIGHT = 26;
 const BORDER_WIDTH = 1;
 const styles = StyleSheet.create({
-    disabled: {
-        opacity: 0.3,
-    },
     switch: {
         userSelect: "none",
         flexDirection: "row",
@@ -57,7 +55,7 @@ export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", on
         }, () => { });
     }, [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: [
+    return (_jsxs(Pressable, { style: [styles.switch, disabled && commonStyles.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/constants/commonStyles.d.ts

@@ -32,6 +32,10 @@ export declare const commonStyles: {
     readonly hidden: {
         readonly visibility: "hidden";
     };
+    readonly disabled: {
+        readonly cursor: "not-allowed";
+        readonly opacity: 0.5;
+    };
     readonly view: {
         readonly alignItems: "stretch";
         readonly backgroundColor: "transparent";

package/src/constants/commonStyles.js

@@ -41,6 +41,7 @@ export const commonStyles = {
     fill: { flexGrow: 1, flexShrink: 1 },
     fillNoShrink: { flexGrow: 1, flexShrink: 0 },
     hidden: { visibility: "hidden" },
+    disabled: { cursor: "not-allowed", opacity: 0.5 },
     view: viewStyle,
     visuallyHidden: visuallyHiddenStyle,
 };

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));