@swan-io/lake 9.1.0 → 9.1.1

package/package.json

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

package/src/components/MultiSelect.d.ts

@@ -1,24 +1,24 @@
 import { StyleProp, ViewStyle } from "react-native";
 import { ColorVariants } from "../constants/design";
-export type MultiSelectItem = {
+export type MultiSelectItem<Value> = {
     disabled?: boolean;
     group: string;
     label: string;
-    value: string;
+    value: Value;
 };
-export type MultiSelectProps<I> = {
+export type MultiSelectProps<Value> = {
     color?: ColorVariants;
     disabled?: boolean;
     error?: string;
     emptyResultText?: string;
     enableGroups?: boolean;
     filterPlaceholder?: string;
-    items: I[];
-    onValueChange: (values: string[]) => void;
+    items: MultiSelectItem<Value>[];
+    onValueChange: (values: Value[]) => void;
     placeholder?: string;
-    renderTagGroup?: (items: readonly MultiSelectItem[]) => string;
+    renderTagGroup?: (items: readonly MultiSelectItem<Value>[]) => string;
     style?: StyleProp<ViewStyle>;
-    values: string[];
+    values: Value[];
     id?: string;
 };
-export declare const MultiSelect: import("react").NamedExoticComponent<MultiSelectProps<MultiSelectItem>>;
+export declare const MultiSelect: <Value>({ color, disabled, emptyResultText, enableGroups, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }: MultiSelectProps<Value>) => import("react/jsx-runtime").JSX.Element;

package/src/components/MultiSelect.js

@@ -1,6 +1,6 @@
 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 { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
         color: colors.gray.primary,
     },
 });
-export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResultText, enableGroups = true, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }) => {
+export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText, enableGroups = true, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }) => {
     const [filter, setFilter] = useState("");
     const [filterFocused, setFilterFocused] = useBoolean(false);
     const shouldScrollToBottomRef = useRef(false);
@@ -176,11 +176,14 @@ export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResult
         onValueChange(newValue);
     };
     // Used to get full selected value informations in O(1).
-    const valueItemMapping = useMemo(() => items.reduce((acc, item) => {
-        acc[item.value] = item;
-        return acc;
-    }, {}), [items]);
-    const selectedTags = useMemo(() => values.map(value => valueItemMapping[value]).filter(isNotNullish), [values, valueItemMapping]);
+    const valueItemMapping = useMemo(() => {
+        const map = new Map();
+        items.forEach(item => {
+            map.set(item.value, item);
+        });
+        return map;
+    }, [items]);
+    const selectedTags = useMemo(() => values.map(value => valueItemMapping.get(value)).filter(isNotNullish), [values, valueItemMapping]);
     const filteredItems = useMemo(() => {
         const remainingTags = items.filter(item => !values.includes(item.value));
         const cleanedFilter = filter.trim().toLowerCase();
@@ -199,13 +202,13 @@ 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}`, 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 }) => [
+                ], 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 }, String(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-${String(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, { 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 }) => {
+                            ], 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-${String(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;
     const cleanFilter = filter.trim().toLowerCase();
     const tint50 = colors[color][50];