@swan-io/lake 13.10.2 → 13.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "13.10.2",
+  "version": "13.11.1",
   "engines": {
     "node": ">22.12.0"
   },

package/src/components/LakeSelect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { StyleSheet, TextInput, View, } from "react-native";
+import { StyleSheet, Text, TextInput, View, } from "react-native";
+import { t } from "../../../shared-business/src/utils/i18n";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
@@ -145,6 +146,12 @@ const styles = StyleSheet.create({
     list: {
         maxHeight: ITEM_ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
     },
+    emptyList: {
+        height: 136,
+    },
+    emptyListText: {
+        color: colors.gray.primary,
+    },
 });
 export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceMinWidth = true, matchReferenceWidth = false, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], renderItem, PopoverFooter, style, hasSearch = false, searchPlaceholder, }) => {
     var _a;
@@ -212,6 +219,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
         setHighlightApi(filter, (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.element);
     }, [filter, hasSearch]);
     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: searchPlaceholder, 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, searchPlaceholder, color]);
+    const ListEmptyComponent = (_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: t("common.noResult") })] }));
     return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: mergedRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused, hovered, pressed }) => [
                     mode === "normal" ? styles.normal : styles.borderless,
                     size === "small" && styles.small,
@@ -234,7 +242,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
                                                 styles.itemText,
                                                 styles.selectPlaceholder,
                                                 isSmall && styles.selectSmallPlaceholder,
-                                            ], children: placeholder !== null && placeholder !== void 0 ? placeholder : " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error !== null && error !== void 0 ? error : " " })), _jsxs(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [hasSearch ? ListHeaderComponent : undefined, _jsxs(View, { style: styles.list, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: filteredItems, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
+                                            ], children: placeholder !== null && placeholder !== void 0 ? placeholder : " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error !== null && error !== void 0 ? error : " " })), _jsxs(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [hasSearch ? ListHeaderComponent : undefined, _jsxs(View, { style: styles.list, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: filteredItems, ref: listRef, contentContainerStyle: styles.listContent, ListEmptyComponent: ListEmptyComponent, onKeyDown: (event) => {
                                     var _a;
                                     const { key } = event.nativeEvent;
                                     if (key === "ArrowDown" || key === "ArrowUp") {

package/src/components/SegmentedControl.d.ts

@@ -8,8 +8,9 @@ export type Item<T extends string> = {
 type Props<T extends string> = {
     selected: T;
     items: ReadonlyArray<Item<T>>;
+    fullWidth?: boolean;
+    mobileBreakpoint?: number;
     onValueChange: (value: T) => void;
-    minItemWidth?: number;
 };
-export declare const SegmentedControl: <T extends string>({ selected, items, onValueChange, minItemWidth, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/SegmentedControl.js

@@ -1,45 +1,56 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { backgroundColor, breakpoints, colors, invariantColors, radii, spacings, } from "../constants/design";
 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 HORIZONTAL_PADDING = 4;
 const styles = StyleSheet.create({
+    responsiveContainer: {
+        flexDirection: "row",
+        justifyContent: "center",
+    },
     container: {
-        padding: spacings[4],
+        flexDirection: "row",
+        alignItems: "center",
         backgroundColor: colors.gray[50],
-        borderRadius: radii[8],
+        borderRadius: 30,
+        paddingVertical: 4,
+        paddingHorizontal: HORIZONTAL_PADDING,
     },
-    selectedItemIndicator: {
+    containerFullWidth: {
+        width: "100%",
+    },
+    selectedIndicator: {
         position: "absolute",
-        left: 0,
-        top: 0,
-        flexGrow: 1,
-        flexShrink: 1,
-        transitionProperty: "transform",
-        transitionDuration: "250ms",
+        top: 4,
+        bottom: 4,
+        backgroundColor: invariantColors.white,
+        borderRadius: 30,
+        transitionProperty: "transform, width",
         transitionTimingFunction: "ease",
-        padding: spacings[4],
-        borderRadius: radii[4],
-        backgroundColor: backgroundColor.accented,
     },
-    itemMobile: {
-        backgroundColor: backgroundColor.accented,
-        borderRadius: radii[4],
-        padding: spacings[16],
+    fill: {
+        flex: 1,
+    },
+    item: {
         flexDirection: "row",
-        height: 60,
-        alignItems: "center",
         justifyContent: "center",
-        flexGrow: 1,
+        alignItems: "center",
+        paddingVertical: 12,
+        paddingHorizontal: 12,
+        borderRadius: 30,
+    },
+    itemSelected: {
+        backgroundColor: invariantColors.white,
+    },
+    button: {
+        borderRadius: 30,
     },
     dropdownItem: {
         backgroundColor: backgroundColor.accented,
@@ -48,71 +59,70 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         height: 60,
         alignItems: "center",
-        flexGrow: 1,
+        flex: 1,
     },
     dropdownItemSelected: {
         backgroundColor: colors.gray[50],
-        borderRadius: radii[4],
-        padding: spacings[16],
-        flexDirection: "row",
-        height: 60,
-        alignItems: "center",
-        flexGrow: 1,
-    },
-    button: {
-        width: 60,
-        height: 60,
     },
-    itemDesktop: {
-        flexBasis: "0%",
-        flexGrow: 1,
-        flexShrink: 1,
+    dropdownCheckIconContainer: {
         alignItems: "center",
-        padding: spacings[16],
-        flexDirection: "row",
         justifyContent: "center",
-    },
-    itemText: {
-        userSelect: "none",
-        lineHeight: texts.regular.fontSize,
-    },
-    selectedItemDesktop: {
-        bottom: 0,
+        paddingHorizontal: spacings[24],
+        backgroundColor: colors.gray[50],
     },
 });
-export const SegmentedControl = ({ selected, items, onValueChange, minItemWidth = 250, }) => {
+export const SegmentedControl = (props) => {
+    const { mobileBreakpoint = breakpoints.small } = props;
+    return (_jsx(ResponsiveContainer, { breakpoint: mobileBreakpoint, style: styles.responsiveContainer, children: ({ small }) => small ? _jsx(SegmentedControlMobile, { ...props }) : _jsx(SegmentedControlDesktop, { ...props }) }));
+};
+const SegmentedControlDesktop = ({ selected, items, fullWidth = false, onValueChange, }) => {
+    var _a;
     const selectedItemIndex = items.findIndex(item => item.id === selected);
-    const selectedItem = items[selectedItemIndex];
-    const [pressed, setPressed] = useState(false);
-    return (_jsx(ResponsiveContainer, { breakpoint: items.length * minItemWidth, 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: () => {
+    const [itemSizes, setItemSizes] = useState([]);
+    const indicatorPosition = (_a = itemSizes[selectedItemIndex]) !== null && _a !== void 0 ? _a : { left: 0, width: 0 };
+    const [indicatorRendered, setIndicatorRendered] = useState(false); // use to prevent animation on first render
+    const updateItemSize = (event) => {
+        // @ts-expect-error target exists in react-native-web
+        const target = event.nativeEvent.target;
+        const sizes = Array.from(target.children)
+            .slice(1) // first child is the selected indicator
+            .map(child => ({
+            left: child.offsetLeft - HORIZONTAL_PADDING,
+            width: child.offsetWidth,
+        }));
+        setItemSizes(sizes);
+    };
+    useEffect(() => {
+        if (indicatorPosition.width > 0) {
+            setIndicatorRendered(true);
+        }
+    }, [indicatorPosition]);
+    return (_jsxs(View, { style: [styles.container, fullWidth && styles.containerFullWidth], onLayout: updateItemSize, children: [_jsx(View, { role: "none", style: [
+                    styles.selectedIndicator,
+                    indicatorPosition
+                        ? {
+                            transitionDuration: indicatorRendered ? "250ms" : "0ms",
+                            transform: `translateX(${indicatorPosition.left}px)`,
+                            width: indicatorPosition.width,
+                        }
+                        : null,
+                ] }), items.map(item => {
+                const isSelected = item.id === selected;
+                return (_jsxs(Pressable, { style: [styles.item, fullWidth && styles.fill], onPress: () => onValueChange(item.id), children: [item.icon != null && (_jsxs(_Fragment, { children: [isSelected && item.activeIcon != null ? item.activeIcon : item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: isSelected ? colors.current[500] : colors.gray[500], children: item.name })] }, item.id));
+            })] }));
+};
+const SegmentedControlMobile = ({ selected, items, onValueChange }) => {
+    var _a;
+    // biome-ignore lint/style/noNonNullAssertion: we're sure to have at least 2 items
+    const selectedItem = (_a = items.find(item => item.id === selected)) !== null && _a !== void 0 ? _a : items[0];
+    const [menuOpen, setMenuOpen] = useState(false);
+    return (_jsxs(View, { style: [styles.container, styles.containerFullWidth], children: [_jsxs(Pressable, { style: [styles.item, styles.itemSelected, styles.fill], onPress: () => setMenuOpen(true), children: [selectedItem.icon != null && (_jsxs(_Fragment, { children: [selectedItem.activeIcon != null ? selectedItem.activeIcon : selectedItem.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.current[500], children: selectedItem.name })] }), _jsx(Space, { width: 4 }), _jsx(LakeButton, { mode: "tertiary", size: "small", icon: "more-horizontal-filled", style: styles.button, onPress: () => setMenuOpen(true), ariaLabel: "Open options" }), _jsx(BottomPanel, { visible: menuOpen === true, onPressClose: () => {
+                    setMenuOpen(false);
+                }, children: items.map(item => {
+                    const isSelected = item.id === selected;
+                    return (_jsxs(Box, { direction: "row", children: [_jsxs(Pressable, { style: [styles.dropdownItem, isSelected && styles.dropdownItemSelected], 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 })] }), (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] }) }))] }, item.id))) }), _jsx(Space, { width: 4 }), _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,
-                        styles.selectedItemDesktop,
-                        {
-                            width: `${(1 / items.length) * 100}%`,
-                            transform: `translateX(${selectedItemIndex * 100}%)`,
-                        },
-                    ] }), items.map(item => (_jsxs(Pressable, { style: styles.itemDesktop, onPress: () => {
-                        onValueChange(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)))] })) }));
+                                    setMenuOpen(false);
+                                }, children: [item.icon != null && (_jsxs(_Fragment, { children: [isSelected && item.activeIcon != null ? item.activeIcon : item.icon, _jsx(Space, { width: 12 })] })), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", children: item.name })] }), isSelected && (_jsx(View, { style: styles.dropdownCheckIconContainer, children: _jsx(Icon, { size: 16, name: "lake-check", color: colors.positive[500] }) }))] }, item.id));
+                }) })] }));
 };