@swan-io/lake 11.4.3 → 12.0.0

package/src/components/Form.d.ts

@@ -1,13 +1,42 @@
-import { ReactNode } from "react";
-import { View } from "react-native";
-export declare const Form: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+import { ReactNode, Ref } from "react";
+import { View, ViewProps } from "react-native";
+import { Except } from "type-fest";
+type Props = Except<ViewProps, "role"> & {
+    ref?: Ref<View>;
+    children?: ReactNode;
+    onReset?: (event: React.FormEvent<HTMLElement>) => void;
+    onSubmit?: (event: React.FormEvent<HTMLElement>) => void;
+};
+export declare const Form: import("react").MemoExoticComponent<({ ref, style, onReset, onSubmit, ...props }: Props) => import("react").ReactElement<{
+    ref: Ref<View> | undefined;
+    onReset: (event: React.FormEvent<HTMLElement>) => void;
+    onSubmit: (event: React.FormEvent<HTMLElement>) => void;
+    style: (import("react-native").StyleProp<import("react-native").ViewStyle> | {
+        readonly alignItems: "stretch";
+        readonly backgroundColor: "transparent";
+        readonly borderColor: "black";
+        readonly borderStyle: "solid";
+        readonly borderWidth: 0;
+        readonly boxSizing: "border-box";
+        readonly display: "flex";
+        readonly flexBasis: "auto";
+        readonly flexDirection: "column";
+        readonly flexShrink: 0;
+        readonly listStyle: "none";
+        readonly margin: 0;
+        readonly minHeight: 0;
+        readonly minWidth: 0;
+        readonly padding: 0;
+        readonly position: "relative";
+        readonly textDecoration: "none";
+        readonly zIndex: 0;
+    })[];
     children?: ReactNode;
     hitSlop?: import("react-native").Insets | undefined;
     id?: string | undefined | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
     pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
     removeClippedSubviews?: boolean | undefined | undefined;
-    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     testID?: string | undefined | undefined;
     nativeID?: string | undefined | undefined;
     onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
@@ -123,8 +152,5 @@ export declare const Form: import("react").MemoExoticComponent<import("react").F
     "aria-rowspan"?: number | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-} & {
-    children?: ReactNode;
-    onReset?: (event: React.FormEvent<HTMLElement>) => void;
-    onSubmit?: (event: React.FormEvent<HTMLElement>) => void;
-} & import("react").RefAttributes<View>>>;
+}, string | import("react").JSXElementConstructor<any>>>;
+export {};

package/src/components/Form.js

@@ -1,9 +1,9 @@
-import { forwardRef, memo } from "react";
+import { memo } from "react";
 import { unstable_createElement as createElement } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
-export const Form = memo(forwardRef(({ style, onReset, onSubmit, ...props }, forwardedRef) => createElement("form", {
+export const Form = memo(({ ref, style, onReset, onSubmit, ...props }) => createElement("form", {
     ...props,
-    ref: forwardedRef,
+    ref,
     onReset: (event) => {
         event.preventDefault();
         onReset === null || onReset === void 0 ? void 0 : onReset(event);
@@ -13,5 +13,5 @@ export const Form = memo(forwardRef(({ style, onReset, onSubmit, ...props }, for
         onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
     },
     style: [commonStyles.view, style],
-})));
+}));
 Form.displayName = "Form";

package/src/components/LakeButton.d.ts

@@ -1,8 +1,9 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { GestureResponderEvent, HrefAttrs, PressableStateCallbackType, StyleProp, View, ViewStyle } from "react-native";
 import { ColorVariants, Spacings } from "../constants/design";
 import { IconName } from "./Icon";
 export type ButtonProps = {
+    ref?: Ref<View>;
     ariaControls?: string;
     ariaExpanded?: boolean;
     color?: ColorVariants;
@@ -29,7 +30,7 @@ export type ButtonProps = {
     ariaLabel?: string;
     children: ReactNode;
 });
-export declare const LakeButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<View>>>;
+export declare const LakeButton: import("react").MemoExoticComponent<({ ref, ariaControls, ariaExpanded, ariaLabel, children, color, direction, disabled, icon, grow, iconPosition, loading, mode, onPress, size, iconSize, style, forceBackground, href, hrefAttrs, pill, disabledUntil, }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
 type GroupProps = {
     children: ReactNode;
     justifyContent?: ViewStyle["justifyContent"];

package/src/components/LakeButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Option } from "@swan-io/boxed";
-import { Children, forwardRef, Fragment, memo, useEffect, useState } from "react";
+import { Children, Fragment, memo, useEffect, useState } from "react";
 import { ActivityIndicator, StyleSheet, View, } from "react-native";
 import { match, P } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
         visibility: "hidden",
     },
 });
-export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", direction = "row", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", iconSize = size === "small" ? 18 : 20, style, forceBackground = false, href, hrefAttrs, pill = false, disabledUntil, }, forwardedRef) => {
+export const LakeButton = memo(({ ref, ariaControls, ariaExpanded, ariaLabel, children, color = "gray", direction = "row", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", iconSize = size === "small" ? 18 : 20, style, forceBackground = false, href, hrefAttrs, pill = false, disabledUntil, }) => {
     const [progressAnimation, setProgressAnimation] = useState(() => Option.None());
     const isPrimary = mode === "primary";
     const isSmall = size === "small";
@@ -163,7 +163,7 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
         return () => cancelAnimationFrame(animationFrameId);
     }, [disabledUntil]);
     const shouldHideContents = loading || progressAnimation.isSome();
-    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled || progressAnimation.isSome(), ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
+    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled || progressAnimation.isSome(), ref: ref, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
             (hovered || pressed) && styles.transition,
             grow && styles.grow,
@@ -227,7 +227,7 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                                 ] }), _jsx(LakeText, { color: isPrimary ? colors[color].contrast : colors[color].primary, children: Math.ceil((duration - (now - startTime)) / 1000) })] })))
                         .otherwise(() => null), pill && _jsx(View, { style: styles.pill })] }));
         } }));
-}));
+});
 LakeButton.displayName = "Button";
 const ZERO = 0;
 export const LakeButtonGroup = ({ children, justifyContent = "flex-start", paddingBottom = 16, }) => (_jsx(View, { style: [

package/src/components/LakeCombobox.d.ts

@@ -1,9 +1,14 @@
 import { AsyncData, Result } from "@swan-io/boxed";
-import { ForwardedRef, ReactNode, RefObject } from "react";
+import { ReactNode, Ref } from "react";
 import { IconName } from "./Icon";
 import { LakeTextInputProps } from "./LakeTextInput";
+export type LakeComboboxRef = {
+    close: () => void;
+    open: () => void;
+};
 export type LakeComboboxProps<I> = {
-    inputRef?: RefObject<unknown>;
+    ref?: Ref<LakeComboboxRef>;
+    inputRef?: Ref<unknown>;
     value: string;
     items: AsyncData<Result<I[], unknown>>;
     itemHeight?: number;
@@ -23,12 +28,4 @@ export type LakeComboboxProps<I> = {
     id?: string;
     readOnly?: boolean;
 };
-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>, forwardedRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
-export declare const LakeCombobox: <I>(props: LakeComboboxProps<I> & {
-    ref?: RefObject<LakeComboboxRef>;
-}) => ReturnType<typeof LakeComboboxWithRef>;
-export {};
+export declare const LakeCombobox: <I>({ ref, inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeCombobox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState, } from "react";
+import { useCallback, useId, useImperativeHandle, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { useMergeRefs } from "../hooks/useMergeRefs";
@@ -74,9 +74,9 @@ const styles = StyleSheet.create({
         flexGrow: 1,
     },
 });
-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);
+export const LakeCombobox = ({ ref, 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, }) => {
+    const innerInputRef = useRef(null);
+    const inputTextRef = useMergeRefs(innerInputRef, inputRef);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
@@ -87,7 +87,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(forwardedRef, () => {
+    useImperativeHandle(ref, () => {
         return {
             open,
             close,
@@ -122,7 +122,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                 const nextIndex = index + direction;
                 event.preventDefault();
                 if (nextIndex === -1) {
-                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_a = innerInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 else {
                     (_b = focusableElements[nextIndex === focusableElements.length ? 0 : nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
@@ -148,7 +148,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
             setState("dismissed");
         }, 100);
     }, []);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: state === "opened", ariaControls: state === "opened" ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: handleChangeText, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onEscapeKey: dismiss, referenceRef: ref, autoFocus: false, returnFocus: true, visible: state === "opened" && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: state === "opened", ariaControls: state === "opened" ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: handleChangeText, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onEscapeKey: dismiss, referenceRef: innerInputRef, autoFocus: false, returnFocus: true, visible: state === "opened" && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
@@ -173,4 +173,3 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                         }),
                     }) }) })] }));
 };
-export const LakeCombobox = forwardRef(LakeComboboxWithRef);

package/src/components/LakeHeading.d.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
-import { Text, TextStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+import { Text, TextProps, TextStyle } from "react-native";
+import { Except } from "type-fest";
 declare const alignments: {
     center: {
         textAlign: "center";
@@ -21,110 +22,14 @@ declare const variants: {
 };
 type HeadingAlign = keyof typeof alignments;
 type HeadingVariant = keyof typeof variants;
-export declare const LakeHeading: import("react").ForwardRefExoticComponent<{
-    allowFontScaling?: boolean | undefined | undefined;
-    children?: ReactNode;
-    ellipsizeMode?: "head" | "middle" | "tail" | "clip" | undefined | undefined;
-    id?: string | undefined | undefined;
-    lineBreakMode?: "head" | "middle" | "tail" | "clip" | undefined | undefined;
-    numberOfLines?: number | undefined | undefined;
-    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
-    onTextLayout?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void) | undefined | undefined;
-    onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    style?: import("react-native").StyleProp<TextStyle>;
-    testID?: string | undefined | undefined;
-    nativeID?: string | undefined | undefined;
-    maxFontSizeMultiplier?: number | null | undefined | undefined;
-    href?: string | undefined;
-    hrefAttrs?: import("react-native").HrefAttrs | undefined;
-    lang?: string | undefined;
-    adjustsFontSizeToFit?: boolean | undefined | undefined;
-    dynamicTypeRamp?: "caption2" | "caption1" | "footnote" | "subheadline" | "callout" | "body" | "headline" | "title3" | "title2" | "title1" | "largeTitle" | undefined | undefined;
-    minimumFontScale?: number | undefined | undefined;
-    suppressHighlighting?: boolean | undefined | undefined;
-    lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined | undefined;
-    disabled?: boolean | undefined | undefined;
-    selectable?: boolean | undefined | undefined;
-    selectionColor?: import("react-native").ColorValue | undefined;
-    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined | undefined;
-    dataDetectorType?: null | "phoneNumber" | "link" | "email" | "none" | "all" | undefined | undefined;
-    android_hyphenationFrequency?: "normal" | "none" | "full" | undefined | undefined;
-    accessible?: boolean | undefined | undefined;
-    accessibilityActions?: readonly Readonly<{
-        name: import("react-native").AccessibilityActionName | string;
-        label?: string | undefined;
-    }>[] | undefined;
-    accessibilityLabel?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-    accessibilityState?: import("react-native").AccessibilityState | undefined;
-    "aria-busy"?: boolean | undefined | undefined;
-    "aria-checked"?: boolean | "mixed" | undefined | undefined;
-    "aria-disabled"?: boolean | undefined | undefined;
-    "aria-expanded"?: boolean | undefined | undefined;
-    "aria-selected"?: boolean | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    accessibilityHint?: string | undefined | undefined;
-    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined | undefined;
-    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
-    "aria-hidden"?: boolean | undefined | undefined;
-    "aria-live"?: ("polite" | "assertive" | "off") | undefined | undefined;
-    "aria-modal"?: boolean | undefined | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined | undefined;
-    accessibilityElementsHidden?: boolean | undefined | undefined;
-    accessibilityViewIsModal?: boolean | undefined | undefined;
-    onAccessibilityEscape?: (() => void) | undefined | undefined;
-    onAccessibilityTap?: (() => void) | undefined | undefined;
-    onMagicTap?: (() => void) | undefined | undefined;
-    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
-    accessibilityLanguage?: string | undefined | undefined;
-    tabIndex?: 0 | -1 | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: boolean | undefined;
-    "aria-autocomplete"?: string | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-haspopup"?: string | undefined;
-    "aria-invalid"?: boolean | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-multiline"?: boolean | undefined;
-    "aria-multiselectable"?: boolean | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | undefined;
-    "aria-readonly"?: boolean | undefined;
-    "aria-required"?: boolean | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-} & {
+type Props = Except<TextProps, "role"> & {
+    ref?: Ref<Text>;
     align?: HeadingAlign;
     children: ReactNode;
     color?: string;
     level: 1 | 2 | 3 | 4 | 5 | 6 | "none";
     userSelect?: TextStyle["userSelect"];
     variant?: HeadingVariant;
-} & import("react").RefAttributes<Text>>;
+};
+export declare const LakeHeading: ({ ref, align, children, color, level, style, userSelect, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeHeading.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
 import { texts } from "../constants/design";
 import { isNotNullish } from "../utils/nullish";
@@ -16,10 +15,10 @@ const variants = StyleSheet.create({
     h5: texts.h5,
     h6: texts.h6,
 });
-export const LakeHeading = forwardRef(({ align = "left", children, color, level, style, userSelect, variant = "h1", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, role: level === "none" ? undefined : "heading", "aria-level": level === "none" ? undefined : level, style: [
+export const LakeHeading = ({ ref, align = "left", children, color, level, style, userSelect, variant = "h1", ...props }) => (_jsx(Text, { ref: ref, role: level === "none" ? undefined : "heading", "aria-level": level === "none" ? undefined : level, style: [
         variants[variant],
         alignments[align],
         isNotNullish(color) && { color },
         isNotNullish(userSelect) && { userSelect },
         style,
-    ], ...props, children: children })));
+    ], ...props, children: children }));

package/src/components/LakeSelect.d.ts

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

package/src/components/LakeSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, } from "react";
+import { useCallback, useRef } from "react";
 import { StyleSheet, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
@@ -112,14 +112,14 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[500],
     },
 });
-const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], PopoverFooter, style, }, forwardedRef) => {
+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 = [], PopoverFooter, style, }) => {
     var _a;
     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 mergedRef = useMergeRefs(inputRef, ref);
     const [visible, { close, open }] = useDisclosure(false);
     const hasValue = isNotNullish(value);
     const isSmall = size === "small";
@@ -202,4 +202,3 @@ const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current",
                                     }, 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);