@swan-io/lake 13.6.7 → 13.7.1

package/package.json

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

package/src/assets/main.css

@@ -471,3 +471,7 @@ input[type="range"]::-webkit-slider-thumb {
   transform: scale(0.98);
   filter: blur(4px);
 }
+
+::highlight(lake-highlight) {
+  background-color: #fff4cc;
+}

package/src/components/LakeSelect.d.ts

@@ -6,6 +6,7 @@ export type Item<V> = {
     name: string;
     value: V;
     icon?: ReactNode;
+    searchTerms?: string[];
 };
 export type SelectProps<V, T extends Item<V> = Item<V>> = {
     ref?: Ref<View>;
@@ -34,5 +35,7 @@ export type SelectProps<V, T extends Item<V> = Item<V>> = {
     error?: string;
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
+    hasSearch?: boolean;
+    searchPlaceholder?: string;
 };
-export declare const LakeSelect: <V, T extends Item<V> = Item<V>>({ ref, title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, disabledItems, renderItem, PopoverFooter, style, }: SelectProps<V, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSelect: <V, T extends Item<V> = Item<V>>({ ref, title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, disabledItems, renderItem, PopoverFooter, style, hasSearch, searchPlaceholder, }: SelectProps<V, T>) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeSelect.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
-import { StyleSheet, View, } from "react-native";
+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 { commonStyles } from "../constants/commonStyles";
-import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
+import { backgroundColor, colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
+import { useBoolean } from "../hooks/useBoolean";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
+import { setHighlightApi } from "../utils/highlights";
 import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Fill } from "./Fill";
@@ -111,9 +113,37 @@ const styles = StyleSheet.create({
     errorContainer: {
         borderColor: colors.negative[500],
     },
+    filterContainer: {
+        flexGrow: 1,
+        flexShrink: 1,
+        margin: 16,
+    },
+    filterInput: {
+        ...texts.regular,
+        backgroundColor: backgroundColor.accented,
+        borderColor: colors.gray[100],
+        borderRadius: 4,
+        borderWidth: 1,
+        flexGrow: 1,
+        flexShrink: 1,
+        height: 40,
+        outlineStyle: "none",
+        paddingHorizontal: 12,
+        paddingLeft: 40,
+        placeholderTextColor: colors.gray[300],
+    },
+    filterFocused: {
+        borderColor: colors.gray[200],
+    },
+    searchIcon: {
+        position: "absolute",
+        left: 14,
+    },
 });
-export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], renderItem, PopoverFooter, style, }) => {
+export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], renderItem, PopoverFooter, style, hasSearch = false, searchPlaceholder, }) => {
     var _a;
+    const [filter, setFilter] = useState("");
+    const [filterFocused, setFilterFocused] = useBoolean(false);
     const inputRef = useRef(null);
     const listRef = useRef(null);
     const typingTimeoutRef = useRef(undefined);
@@ -152,6 +182,30 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
         }, 300);
     }, [items, onValueChange, visible]);
     const name = (_a = itemValue === null || itemValue === void 0 ? void 0 : itemValue.name) !== null && _a !== void 0 ? _a : value;
+    const filteredItems = useMemo(() => {
+        if (isNullishOrEmpty(filter)) {
+            return items;
+        }
+        const lowerFilter = filter.toLowerCase();
+        return items.filter(item => {
+            var _a;
+            return item.name.toLowerCase().includes(lowerFilter) ||
+                ((_a = item.searchTerms) === null || _a === void 0 ? void 0 : _a.some(term => term.toLowerCase() === lowerFilter));
+        });
+    }, [items, filter]);
+    useEffect(() => {
+        if (!visible) {
+            setFilter("");
+        }
+    }, [visible]);
+    useEffect(() => {
+        var _a;
+        if (!hasSearch) {
+            return;
+        }
+        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]);
     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,
@@ -174,7 +228,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", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, 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: items, 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", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, 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) => {
                             var _a;
                             const { key } = event.nativeEvent;
                             if (key === "ArrowDown" || key === "ArrowUp") {
@@ -186,7 +240,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
                                     (_a = focusableElements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
                                 }
                             }
-                        }, keyExtractor: (_, index) => `select-item-${index}`, renderItem: ({ item, index }) => {
+                        }, keyExtractor: (_, index) => `select-item-${index}`, ListHeaderComponent: hasSearch ? ListHeaderComponent : undefined, renderItem: ({ item, index }) => {
                             const isSelected = value === item.value;
                             const disablement = disabledItems.find(({ value }) => value === item.value);
                             const content = renderItem != null ? (renderItem(item, isSelected)) : (_jsxs(_Fragment, { children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name })] }));

package/src/hooks/useContextualLayer.js

@@ -2,6 +2,7 @@ import { Option } from "@swan-io/boxed";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { match } from "ts-pattern";
 const MAX_OFFSET_FOR_CENTER_PLACEMENT = 100;
+const HORIZONTAL_SAFETY_MARGIN = 16;
 export const useContextualLayer = ({ placement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
     const referenceRef = useRef(null);
     const usedRef = externalReferenceRef !== null && externalReferenceRef !== void 0 ? externalReferenceRef : referenceRef;
@@ -51,10 +52,16 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
             height: "100vh",
             pointerEvents: "none",
         };
+        const maxWidth = match(inferedPlacement)
+            .with("left", () => viewportWidth - rect.left - HORIZONTAL_SAFETY_MARGIN)
+            .with("right", () => rect.right - HORIZONTAL_SAFETY_MARGIN)
+            .with("center", () => Math.min(availableSpaceBefore + width / 2, availableSpaceAfter + width / 2) * 2 - HORIZONTAL_SAFETY_MARGIN)
+            .exhaustive();
         const style = {
             ...verticalPosition,
             ...horizontalPosition,
             maxHeight,
+            maxWidth,
             ...(matchReferenceWidth === true ? { width } : undefined),
             ...(matchReferenceMinWidth === true ? { minWidth: width } : undefined),
             pointerEvents: "auto",

package/src/utils/highlights.d.ts

@@ -0,0 +1 @@
+export declare const setHighlightApi: (text: string, element: HTMLElement | null | undefined, minLength?: number) => (() => void) | undefined;

package/src/utils/highlights.js

@@ -0,0 +1,41 @@
+import { isNullishOrEmpty } from "./nullish";
+const highlightName = "lake-highlight";
+export const setHighlightApi = (text, element, minLength = 2) => {
+    var _a, _b;
+    if (!("highlights" in CSS)) {
+        return;
+    }
+    if (element == null || isNullishOrEmpty(text) || text.length < minLength) {
+        CSS.highlights.delete(highlightName);
+        return;
+    }
+    const str = text.toLowerCase();
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    const ranges = [];
+    let currentNode = treeWalker.nextNode();
+    while (currentNode != null) {
+        const text = (_b = (_a = currentNode.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+        let startPos = 0;
+        while (startPos < text.length) {
+            const index = text.indexOf(str, startPos);
+            if (index === -1) {
+                break;
+            }
+            const range = new Range();
+            range.setStart(currentNode, index);
+            range.setEnd(currentNode, index + str.length);
+            ranges.push(range);
+            startPos = index + str.length;
+        }
+        currentNode = treeWalker.nextNode();
+    }
+    if (ranges.length > 0) {
+        CSS.highlights.set(highlightName, new Highlight(...ranges));
+    }
+    else {
+        CSS.highlights.delete(highlightName);
+    }
+    return () => {
+        CSS.highlights.delete(highlightName);
+    };
+};