@swan-io/lake 8.4.6 → 8.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.4.6",
+  "version": "8.5.1",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/FilterChooser.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { FlatList, Pressable, StyleSheet, View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 import { colors } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { isNotNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeText } from "./LakeText";

package/src/components/Filters.js

@@ -3,7 +3,7 @@ import { DatePickerModal, } from "@swan-io/shared-business/src/components/DatePi
 import { useForm } from "@swan-io/use-form";
 import dayjs from "dayjs";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 import { P, match } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -11,6 +11,7 @@ import { useMergeRefs } from "../hooks/useMergeRefs";
 import { usePreviousValue } from "../hooks/usePreviousValue";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeCheckbox } from "./LakeCheckbox";

package/src/components/FlatList.d.ts

@@ -0,0 +1,31 @@
+import { ForwardedRef, ReactNode } from "react";
+import { ScrollView, ScrollViewProps, StyleProp, ViewStyle, WebRole } from "react-native";
+export type FlatListRef = ScrollView;
+export type ListRenderItemInfo<T> = {
+    item: T;
+    index: number;
+};
+type Props<T> = {
+    ItemSeparatorComponent?: ReactNode;
+    ListEmptyComponent?: ReactNode;
+    ListFooterComponent?: ReactNode;
+    ListHeaderComponent?: ReactNode;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    data: T[];
+    horizontal?: boolean;
+    keyExtractor: (item: T, index: number) => string;
+    onEndReached?: () => void;
+    onEndReachedThresholdPx?: number;
+    onKeyDown?: ScrollViewProps["onKeyDown"];
+    onScroll?: ScrollViewProps["onScroll"];
+    renderItem: (info: ListRenderItemInfo<T>) => ReactNode;
+    role?: WebRole;
+    scrollEventThrottle?: number;
+    showsScrollIndicators?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+declare const FlatListWithRef: <T>({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, role, scrollEventThrottle, showsScrollIndicators, style, }: Props<T>, forwardedRef: ForwardedRef<FlatListRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const FlatList: <T>(props: Props<T> & {
+    ref?: ForwardedRef<FlatListRef>;
+}) => ReturnType<typeof FlatListWithRef>;
+export {};

package/src/components/FlatList.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, forwardRef, useEffect, useRef } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+const styles = StyleSheet.create({
+    scrollTracker: {
+        position: "absolute",
+        pointerEvents: "none",
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
+});
+const FlatListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, data, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, role, scrollEventThrottle = 0, showsScrollIndicators = true, style, }, forwardedRef) => {
+    const scrollTrackerRef = useRef(null);
+    useEffect(() => {
+        const element = scrollTrackerRef.current;
+        if (element != null) {
+            const observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+                    }
+                });
+            });
+            observer.observe(element);
+            return () => {
+                observer.unobserve(element);
+            };
+        }
+        // re-create an observer only on list length change
+    }, [data.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsHorizontalScrollIndicator: showsScrollIndicators, showsVerticalScrollIndicator: showsScrollIndicators, style: style, children: [ListHeaderComponent, data.length > 0 ? (_jsxs(View, { children: [data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index)))), _jsx(View, { ref: scrollTrackerRef, style: [styles.scrollTracker, { height: onEndReachedThresholdPx }] })] })) : (ListEmptyComponent), ListFooterComponent] }));
+};
+export const FlatList = forwardRef(FlatListWithRef);

package/src/components/LakeCombobox.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState, } from "react";
-import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
+import { Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { isNotEmpty } from "../utils/nullish";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { LakeTextInput } from "./LakeTextInput";
@@ -19,7 +20,9 @@ const styles = StyleSheet.create({
     list: {
         marginVertical: spacings[8],
     },
-    flatList: { scrollBehavior: "smooth" },
+    flatList: {
+        scrollBehavior: "smooth",
+    },
     item: {
         flexShrink: 1,
         flexGrow: 1,
@@ -71,15 +74,9 @@ const styles = StyleSheet.create({
         flexGrow: 1,
     },
 });
-const getItemLayout = (_data, index) => ({
-    length: DEFAULT_ELEMENT_HEIGHT,
-    offset: DEFAULT_ELEMENT_HEIGHT * index,
-    index,
-});
 const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEMENT_HEIGHT, nbItemsDisplayed = DEFAULT_NB_SUGGESTION_DISPLAYED, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, hideErrors, }, forwardedRef) => {
     const ref = useRef(null);
     const inputTextRef = useMergeRefs(ref, inputRef);
-    const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
@@ -156,7 +153,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
                             Error: _ => (_jsx(Icon, { name: "error-circle-regular", size: 22, color: colors.negative[500] })),
-                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { ref: listRef, keyExtractor: keyExtractor, getItemLayout: getItemLayout, role: "list", data: items, style: styles.flatList, ItemSeparatorComponent: Separator, renderItem: ({ item }) => {
+                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { keyExtractor: keyExtractor, role: "list", data: items, style: styles.flatList, ItemSeparatorComponent: _jsx(Separator, {}), renderItem: ({ item }) => {
                                             const rendered = renderItem(item);
                                             return (_jsx(Pressable, { onFocus: handleFocus, onBlur: handleBlur, role: "listitem", onKeyDown: handleListItemKeyPress, style: ({ hovered, pressed, focused }) => [
                                                     styles.item,

package/src/components/LakeSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, } from "react";
-import { FlatList, StyleSheet, View, } from "react-native";
+import { StyleSheet, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -9,6 +9,7 @@ import { getFocusableElements } from "../utils/a11y";
 import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Fill } from "./Fill";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";

package/src/components/MultiSelect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Array, Dict, Option } from "@swan-io/boxed";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { FlatList, Pressable, SectionList, StyleSheet, Text, TextInput, View, } from "react-native";
+import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -9,10 +9,12 @@ import { groupBy } from "../utils/array";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { safeSplitAround } from "../utils/string";
 import { Box } from "./Box";
+import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
 import { InputError } from "./InputError";
 import { Popover } from "./Popover";
 import { PressableText } from "./Pressable";
+import { SectionList } from "./SectionList";
 import { Space } from "./Space";
 import { Tag } from "./Tag";
 const MAX_INPUT_HEIGHT = 120;
@@ -141,7 +143,6 @@ export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResult
     const shouldScrollToBottomRef = useRef(false);
     const selectedTagListRef = useRef(null);
     const inputRef = useRef(null);
-    const listRef = useRef(null);
     const [visible, { open, close }] = useDisclosure(false);
     const tint50 = colors[color][50];
     const tint100 = colors[color][100];
@@ -198,11 +199,11 @@ export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResult
                     (focused || visible) && styles.focused,
                     disabled && styles.disabled,
                     isNotNullish(error) && styles.errored,
-                ], children: [_jsx(Box, { ref: selectedTagListRef, alignItems: "center", direction: "row", style: styles.tagsList, children: selectedTags.length > 0 ? (selectedTags.map(item => (_jsx(Tag, { color: color, onPressRemove: disabled ? undefined : () => handleRemoveItem(item), style: styles.tag, children: item.label }, item.value)))) : placeholder !== "" ? (_jsx(Text, { role: "label", numberOfLines: 1, style: styles.placeholder, children: placeholder })) : null }), _jsxs(Box, { direction: "row", alignItems: "center", style: styles.actions, children: [selectedTags.length >= 1 && !disabled && (_jsxs(_Fragment, { children: [_jsx(Pressable, { role: "button", onPress: handleClearAll, children: _jsx(Icon, { name: "dismiss-filled", color: colors.gray.primary, size: 15 }) }), _jsx(Space, { width: 8 })] })), _jsx(Icon, { color: colors.gray.primary, name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 20 })] })] }), _jsx(Popover, { role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _jsx(View, { style: styles.list, children: enableGroups ? (_jsx(SectionList, { role: "listbox", "aria-multiselectable": true, keyExtractor: (item, index) => `group-field-${item.value}-${index}`, extraData: filter, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 16 }), sections: sections, renderSectionHeader: ({ section: { title, data }, }) => (_jsxs(Pressable, { role: "listitem", onPress: () => handleSelectGroup(data), style: ({ hovered, pressed, focused }) => [
+                ], children: [_jsx(Box, { ref: selectedTagListRef, alignItems: "center", direction: "row", style: styles.tagsList, children: selectedTags.length > 0 ? (selectedTags.map(item => (_jsx(Tag, { color: color, onPressRemove: disabled ? undefined : () => handleRemoveItem(item), style: styles.tag, children: item.label }, item.value)))) : placeholder !== "" ? (_jsx(Text, { role: "label", numberOfLines: 1, style: styles.placeholder, children: placeholder })) : null }), _jsxs(Box, { direction: "row", alignItems: "center", style: styles.actions, children: [selectedTags.length >= 1 && !disabled && (_jsxs(_Fragment, { children: [_jsx(Pressable, { role: "button", onPress: handleClearAll, children: _jsx(Icon, { name: "dismiss-filled", color: colors.gray.primary, size: 15 }) }), _jsx(Space, { width: 8 })] })), _jsx(Icon, { color: colors.gray.primary, name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 20 })] })] }), _jsx(Popover, { role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _jsx(View, { style: styles.list, children: enableGroups ? (_jsx(SectionList, { role: "listbox", "aria-multiselectable": true, keyExtractor: (item, index) => `group-field-${item.value}-${index}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 16 }), sections: sections, renderSectionHeader: ({ title, data }) => (_jsxs(Pressable, { role: "listitem", onPress: () => handleSelectGroup(data), style: ({ hovered, pressed, focused }) => [
                                 styles.groupTitleBase,
                                 (hovered || focused) && { backgroundColor: tint50 },
                                 pressed && { backgroundColor: tint100 },
-                            ], children: [_jsx(Text, { numberOfLines: 1, style: styles.groupTitle, children: title }), isNotNullish(renderTagGroup) && (_jsx(Tag, { color: color, children: renderTagGroup(data) }))] })), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem, style: styles.lineInGroup })) })) : (_jsx(FlatList, { ref: listRef, role: "list", data: filteredItems, extraData: filter, keyExtractor: item => `field-${item.value}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 8 }), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem })) })) }) }), _jsx(InputError, { message: error })] }));
+                            ], children: [_jsx(Text, { numberOfLines: 1, style: styles.groupTitle, children: title }), isNotNullish(renderTagGroup) && (_jsx(Tag, { color: color, children: renderTagGroup(data) }))] })), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem, style: styles.lineInGroup })) })) : (_jsx(FlatList, { role: "list", data: filteredItems, keyExtractor: item => `field-${item.value}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 8 }), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem })) })) }) }), _jsx(InputError, { message: error })] }));
 });
 const LineItem = ({ item, color, filter, handleSelectItem, style }) => {
     const { label, disabled = false } = item;

package/src/components/SectionList.d.ts

@@ -0,0 +1,33 @@
+import { ForwardedRef, ReactNode } from "react";
+import { ScrollView, ScrollViewProps, StyleProp, ViewStyle, WebRole } from "react-native";
+import { ListRenderItemInfo } from "./FlatList";
+export type SectionListRef = ScrollView;
+type Section<T> = {
+    title: string;
+    data: T[];
+};
+type Props<T> = {
+    ItemSeparatorComponent?: ReactNode;
+    ListEmptyComponent?: ReactNode;
+    ListFooterComponent?: ReactNode;
+    ListHeaderComponent?: ReactNode;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    horizontal?: boolean;
+    keyExtractor: (item: T, index: number) => string;
+    onEndReached?: () => void;
+    onEndReachedThresholdPx?: number;
+    onKeyDown?: ScrollViewProps["onKeyDown"];
+    onScroll?: ScrollViewProps["onScroll"];
+    renderItem: (info: ListRenderItemInfo<T>) => ReactNode;
+    renderSectionHeader?: (section: Section<T>) => ReactNode;
+    role?: WebRole;
+    scrollEventThrottle?: number;
+    sections: Section<T>[];
+    showsScrollIndicators?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+declare const SectionListWithRef: <T>({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle, sections, showsScrollIndicators, style, }: Props<T>, forwardedRef: ForwardedRef<SectionListRef>) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionList: <T>(props: Props<T> & {
+    ref?: ForwardedRef<SectionListRef>;
+}) => ReturnType<typeof SectionListWithRef>;
+export {};

package/src/components/SectionList.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, forwardRef, useEffect, useId, useRef } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+const styles = StyleSheet.create({
+    scrollTracker: {
+        position: "absolute",
+        pointerEvents: "none",
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+});
+const SectionListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle = 0, sections, showsScrollIndicators = true, style, }, forwardedRef) => {
+    const groupId = useId();
+    const scrollTrackerRef = useRef(null);
+    useEffect(() => {
+        const element = scrollTrackerRef.current;
+        if (element != null) {
+            const observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+                    }
+                });
+            });
+            observer.observe(element);
+            return () => {
+                observer.unobserve(element);
+            };
+        }
+        // re-create an observer only on list length change
+    }, [sections.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsHorizontalScrollIndicator: showsScrollIndicators, showsVerticalScrollIndicator: showsScrollIndicators, style: style, children: [ListHeaderComponent, sections.length > 0 ? (_jsxs(View, { children: [sections.map(section => (_jsxs(Fragment, { children: [renderSectionHeader === null || renderSectionHeader === void 0 ? void 0 : renderSectionHeader(section), section.data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index))))] }, `group-${groupId}-${section.title}`))), _jsx(View, { ref: scrollTrackerRef, style: [styles.scrollTracker, { height: onEndReachedThresholdPx }] })] })) : (ListEmptyComponent), ListFooterComponent] }));
+};
+export const SectionList = forwardRef(SectionListWithRef);

package/src/components/SegmentedControl.d.ts

@@ -3,12 +3,12 @@ export type Item<T extends string> = {
     name: string;
     id: T;
     icon?: ReactNode;
+    activeIcon?: ReactNode;
 };
 type Props<T extends string> = {
-    mode?: "desktop" | "mobile";
     selected: T;
     items: ReadonlyArray<Item<T>>;
     onValueChange: (value: T) => void;
 };
-export declare const SegmentedControl: <T extends string>({ mode, selected, items, onValueChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ selected, items, onValueChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/SegmentedControl.js

@@ -1,16 +1,22 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { StyleSheet, View } from "react-native";
+import { P, match } from "ts-pattern";
 import { backgroundColor, colors, radii, spacings, texts } from "../constants/design";
 import { isNotNullish } from "../utils/nullish";
+import { BottomPanel } from "./BottomPanel";
 import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeButton } from "./LakeButton";
 import { LakeText } from "./LakeText";
 import { Pressable } from "./Pressable";
+import { ResponsiveContainer } from "./ResponsiveContainer";
 import { Space } from "./Space";
 const styles = StyleSheet.create({
     container: {
+        padding: spacings[4],
         backgroundColor: colors.gray[50],
         borderRadius: radii[8],
-        padding: spacings[4],
     },
     selectedItemIndicator: {
         position: "absolute",
@@ -25,15 +31,44 @@ const styles = StyleSheet.create({
         borderRadius: radii[4],
         backgroundColor: backgroundColor.accented,
     },
-    item: {
-        flexBasis: "0%",
+    itemMobile: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[4],
+        padding: spacings[16],
+        flexDirection: "row",
+        height: 60,
+        alignItems: "center",
+        justifyContent: "center",
         flexGrow: 1,
-        flexShrink: 1,
+    },
+    dropdownItem: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[4],
+        padding: spacings[16],
+        flexDirection: "row",
+        height: 60,
         alignItems: "center",
+        flexGrow: 1,
+    },
+    dropdownItemSelected: {
+        backgroundColor: colors.gray[50],
+        borderRadius: radii[4],
         padding: spacings[16],
-        flexDirection: "column",
+        flexDirection: "row",
+        height: 60,
+        alignItems: "center",
+        flexGrow: 1,
+    },
+    button: {
+        width: 60,
+        height: 60,
     },
     itemDesktop: {
+        flexBasis: "0%",
+        flexGrow: 1,
+        flexShrink: 1,
+        alignItems: "center",
+        padding: spacings[16],
         flexDirection: "row",
         justifyContent: "center",
     },
@@ -41,28 +76,43 @@ const styles = StyleSheet.create({
         userSelect: "none",
         lineHeight: texts.regular.fontSize,
     },
-    selectedItemMobile: {
-        right: 0,
-    },
     selectedItemDesktop: {
         bottom: 0,
     },
 });
-export const SegmentedControl = ({ mode = "desktop", selected, items, onValueChange, }) => {
+export const SegmentedControl = ({ selected, items, onValueChange, }) => {
     const selectedItemIndex = items.findIndex(item => item.id === selected);
-    return (_jsx(Box, { style: styles.container, children: _jsxs(Box, { direction: mode === "mobile" ? "column" : "row", children: [_jsx(View, { role: "none", style: [
+    const selectedItem = items.find(item => item.id === selected);
+    const [pressed, setPressed] = useState(false);
+    return (_jsx(ResponsiveContainer, { style: styles.container, children: ({ small }) => small ? (_jsxs(Box, { direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(Pressable, { style: styles.itemMobile, onPress: () => {
+                        setPressed(true);
+                    }, children: [isNotNullish(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
+                            match(selectedItem)
+                                .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => selectedItem.activeIcon)
+                                .with({ icon: P.nonNullable }, () => selectedItem.icon)
+                                .otherwise(() => null), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name })] }), _jsx(BottomPanel, { visible: pressed === true, onPressClose: () => {
+                        setPressed(false);
+                    }, children: items.map(item => (_jsxs(Box, { direction: "row", children: [_jsxs(Pressable, { style: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id
+                                    ? styles.dropdownItemSelected
+                                    : styles.dropdownItem, onPress: () => {
+                                    onValueChange(item.id);
+                                    setPressed(false);
+                                }, children: [isNotNullish(item.icon) &&
+                                        match(item)
+                                            .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? selectedItem.activeIcon : item.icon)
+                                            .with({ icon: P.nonNullable }, () => item.icon)
+                                            .otherwise(() => null), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id), (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && (_jsx(Box, { justifyContent: "center", style: { paddingHorizontal: spacings[24], backgroundColor: colors.gray[50] }, children: _jsx(Icon, { size: 16, name: "lake-check", color: colors.positive[500] }) }))] }))) }), _jsx(LakeButton, { mode: "tertiary", style: styles.button, size: "small", icon: "more-horizontal-filled", onPress: () => setPressed(true), ariaLabel: "Previous" })] })) : (_jsxs(Box, { direction: "row", children: [_jsx(View, { role: "none", style: [
                         styles.selectedItemIndicator,
-                        mode === "mobile" ? styles.selectedItemMobile : styles.selectedItemDesktop,
-                        mode === "mobile"
-                            ? {
-                                height: `${(1 / items.length) * 100}%`,
-                                transform: `translateY(${selectedItemIndex * 100}%)`,
-                            }
-                            : {
-                                width: `${(1 / items.length) * 100}%`,
-                                transform: `translateX(${selectedItemIndex * 100}%)`,
-                            },
-                    ] }), items.map(item => (_jsxs(Pressable, { style: [styles.item, mode === "desktop" && styles.itemDesktop], onPress: () => {
+                        styles.selectedItemDesktop,
+                        {
+                            width: `${(1 / items.length) * 100}%`,
+                            transform: `translateX(${selectedItemIndex * 100}%)`,
+                        },
+                    ] }), items.map(item => (_jsxs(Pressable, { style: styles.itemDesktop, onPress: () => {
                         onValueChange(item.id);
-                    }, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { height: 8, width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id)))] }) }));
+                    }, children: [_jsxs(_Fragment, { children: [isNotNullish(item.icon) &&
+                                    match(item)
+                                        .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? selectedItem.activeIcon : item.icon)
+                                        .with({ icon: P.nonNullable }, () => item.icon)
+                                        .otherwise(() => null), _jsx(Space, { height: 8, width: 12 })] }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id)))] })) }));
 };