@swan-io/lake 2.7.24 → 2.7.25

package/package.json

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

package/src/components/LakeCombobox.d.ts

@@ -27,7 +27,7 @@ export type LakeComboboxRef = {
     close: () => void;
     open: () => void;
 };
-declare const LakeComboboxWithRef: <I>({ inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
+declare const LakeComboboxWithRef: <I>({ inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>, forwardedRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
 export declare const LakeCombobox: <I>(props: LakeComboboxProps<I> & {
     ref?: RefObject<LakeComboboxRef> | undefined;
 }) => ReturnType<typeof LakeComboboxWithRef>;

package/src/components/LakeCombobox.js

@@ -78,7 +78,7 @@ const getItemLayout = (_data, index) => ({
     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, }, externalRef) => {
+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);
@@ -92,7 +92,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
     const open = useCallback(() => setState("opened"), []);
     const close = useCallback(() => setState("closed"), []);
     const dismiss = useCallback(() => setState("dismissed"), []);
-    useImperativeHandle(externalRef, () => {
+    useImperativeHandle(forwardedRef, () => {
         return {
             open,
             close,

package/src/components/LakeSelect.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ForwardedRef, ReactElement, ReactNode } from "react";
+import { StyleProp, TextStyle, View, ViewStyle } from "react-native";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
 export type Item<V> = {
@@ -27,4 +27,8 @@ export type SelectProps<V> = {
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): import("react/jsx-runtime").JSX.Element;
+declare const LakeSelectWithRef: <V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>, forwardedRef: ForwardedRef<View>) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSelect: <I>(props: SelectProps<I> & {
+    ref?: ForwardedRef<View> | undefined;
+}) => ReturnType<typeof LakeSelectWithRef>;
+export {};

package/src/components/LakeSelect.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
+import { forwardRef, useCallback, useRef, } from "react";
 import { FlatList, 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";
+import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
@@ -103,12 +104,13 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[500],
     },
 });
-export function LakeSelect({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }) {
+const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }, forwardedRef) => {
     const inputRef = useRef(null);
     const listRef = useRef(null);
     const typingTimeoutRef = useRef(undefined);
     const currentlyTypedRef = useRef(undefined);
     const listItemRefs = useRef(Array(items.length));
+    const mergedRef = useMergeRefs(inputRef, forwardedRef);
     const [visible, { close, open }] = useDisclosure(false);
     const hasValue = isNotNullish(value);
     const isSmall = size === "small";
@@ -141,7 +143,7 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
         }, 300);
     }, [items, onValueChange, visible]);
     const name = itemValue?.name ?? value;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused }) => [
+    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 }) => [
                     mode === "normal" ? styles.normal : styles.borderless,
                     size === "small" && styles.small,
                     (disabled || readOnly) && styles.inputDisabled,
@@ -176,4 +178,5 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
                                     close();
                                 }, 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 }), _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
                         } }), PopoverFooter] })] }));
-}
+};
+export const LakeSelect = forwardRef(LakeSelectWithRef);