@swan-io/lake 13.9.2 → 13.10.0

package/package.json

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

package/src/components/LakeSelect.js

@@ -119,8 +119,7 @@ const styles = StyleSheet.create({
         flexGrow: 1,
         flexShrink: 1,
         marginHorizontal: 16,
-        marginBottom: 12,
-        marginTop: 4,
+        marginTop: 16,
     },
     filterInput: {
         ...texts.regular,
@@ -235,32 +234,32 @@ 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 : " " })), _jsx(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _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) => {
-                                var _a;
-                                const { key } = event.nativeEvent;
-                                if (key === "ArrowDown" || key === "ArrowUp") {
-                                    event.preventDefault();
-                                    if (isNotNullish(event.currentTarget)) {
-                                        const focusableElements = getFocusableElements(event.currentTarget);
-                                        const current = focusableElements.indexOf(event.target);
-                                        const nextIndex = key === "ArrowDown" ? current + 1 : current - 1;
-                                        (_a = focusableElements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                                            ], 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) => {
+                                    var _a;
+                                    const { key } = event.nativeEvent;
+                                    if (key === "ArrowDown" || key === "ArrowUp") {
+                                        event.preventDefault();
+                                        if (isNotNullish(event.currentTarget)) {
+                                            const focusableElements = getFocusableElements(event.currentTarget);
+                                            const current = focusableElements.indexOf(event.target);
+                                            const nextIndex = key === "ArrowDown" ? current + 1 : current - 1;
+                                            (_a = focusableElements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                                        }
                                     }
-                                }
-                            }, 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 })] }));
-                                return (_jsx(LakeTooltip, { placement: "right", content: disablement === null || disablement === void 0 ? void 0 : disablement.message, disabled: isNullishOrEmpty(disablement === null || disablement === void 0 ? void 0 : disablement.message), children: _jsxs(Pressable, { ref: element => {
-                                            listItemRefs.current[index] = element;
-                                        }, onKeyDown: onKeyDown, disabled: isNotNullish(disablement), style: ({ hovered, focused }) => [
-                                            styles.item,
-                                            (hovered || isSelected) && styles.itemHighlighted,
-                                            focused && styles.itemFocused,
-                                            isNotNullish(disablement) && styles.itemDisabled,
-                                        ], role: "option", "aria-selected": true, onPress: () => {
-                                            onValueChange(item.value);
-                                            close();
-                                        }, children: [content, _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }) }));
-                            } }), typeof PopoverFooter === "function" ? PopoverFooter({ close }) : PopoverFooter] }) })] }));
+                                }, keyExtractor: (_, index) => `select-item-${index}`, 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 })] }));
+                                    return (_jsx(LakeTooltip, { placement: "right", content: disablement === null || disablement === void 0 ? void 0 : disablement.message, disabled: isNullishOrEmpty(disablement === null || disablement === void 0 ? void 0 : disablement.message), children: _jsxs(Pressable, { ref: element => {
+                                                listItemRefs.current[index] = element;
+                                            }, onKeyDown: onKeyDown, disabled: isNotNullish(disablement), style: ({ hovered, focused }) => [
+                                                styles.item,
+                                                (hovered || isSelected) && styles.itemHighlighted,
+                                                focused && styles.itemFocused,
+                                                isNotNullish(disablement) && styles.itemDisabled,
+                                            ], role: "option", "aria-selected": true, onPress: () => {
+                                                onValueChange(item.value);
+                                                close();
+                                            }, children: [content, _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }) }));
+                                } }), typeof PopoverFooter === "function" ? PopoverFooter({ close }) : PopoverFooter] })] })] }));
 };

package/src/components/InputPhoneNumber.d.ts

@@ -1,28 +0,0 @@
-import { ReactNode, Ref } from "react";
-export type PhoneCountry = {
-    cca2: string;
-    idd: string;
-};
-export type InputPhoneNumberRef = {
-    focus: () => void;
-    blur: () => void;
-};
-type Props = {
-    ref?: Ref<InputPhoneNumberRef>;
-    id?: string;
-    country: PhoneCountry;
-    value: string;
-    error?: string;
-    valid?: boolean;
-    autofocus?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    flag?: ReactNode;
-    countryList: (close: () => void) => ReactNode;
-    countryButtonAriaLabel?: string;
-    onChangeText?: (text: string) => void;
-    onSubmitEditing?: () => void;
-    onBlur?: () => void;
-};
-export declare const InputPhoneNumber: ({ ref, id, country, value, error, valid, autofocus, disabled, readOnly, flag, countryList, countryButtonAriaLabel, onChangeText, onSubmitEditing, onBlur, }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/InputPhoneNumber.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useRef } from "react";
-import { Pressable, StyleSheet } from "react-native";
-import { colors, radii, spacings } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
-import { isNotNullishOrEmpty } from "../utils/nullish";
-import { Box } from "./Box";
-import { Icon } from "./Icon";
-import { LakeText } from "./LakeText";
-import { LakeTextInput } from "./LakeTextInput";
-import { Popover } from "./Popover";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    idd: {
-        alignItems: "center",
-        backgroundColor: colors.gray[50],
-        borderColor: colors.gray[100],
-        borderTopLeftRadius: radii[4],
-        borderBottomLeftRadius: radii[4],
-        borderWidth: 1,
-        borderRightWidth: 0,
-        flexDirection: "row",
-        justifyContent: "center",
-        paddingLeft: spacings[16],
-        paddingRight: spacings[12],
-        transitionDuration: "150ms",
-        transitionProperty: "background-color",
-    },
-    iddPressed: { backgroundColor: colors.gray[100] },
-    iddErrored: { borderColor: colors.negative[500] },
-    iddDisabled: {
-        borderColor: colors.gray[50],
-        borderRightWidth: 1,
-        borderRightColor: colors.gray[100],
-    },
-    input: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
-});
-export const InputPhoneNumber = ({ ref, id, country, value, error, valid = false, autofocus = false, disabled = false, readOnly = false, flag, countryList, countryButtonAriaLabel = "Select country", onChangeText, onSubmitEditing, onBlur, }) => {
-    const referenceRef = useRef(null);
-    const inputRef = useRef(null);
-    const [visible, { open, close }] = useDisclosure(false);
-    const handleChangeText = (text) => {
-        const clean = text.replace(/[^ +0-9-()]/g, "");
-        if (text === clean) {
-            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
-        }
-    };
-    useEffect(() => {
-        if (autofocus && inputRef.current) {
-            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 250);
-        }
-    }, [autofocus]);
-    useImperativeHandle(ref, () => ({ focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); } }), []);
-    return (_jsxs(_Fragment, { children: [_jsx(Popover, { referenceRef: referenceRef, visible: visible, matchReferenceWidth: true, onDismiss: close, children: countryList(close) }), _jsxs(Box, { ref: referenceRef, direction: "row", children: [_jsxs(Pressable, { role: "button", disabled: visible || disabled || readOnly, onPress: open, "aria-label": countryButtonAriaLabel, style: ({ pressed }) => [
-                            styles.idd,
-                            !visible && pressed && styles.iddPressed,
-                            (disabled || readOnly) && styles.iddDisabled,
-                            isNotNullishOrEmpty(error) && styles.iddErrored,
-                        ], children: [flag, flag != null && _jsx(Space, { width: 8 }), _jsxs(LakeText, { color: colors.gray[600], numberOfLines: 1, userSelect: "none", variant: "smallSemibold", children: ["+", country.idd] }), _jsx(Space, { width: 8 }), _jsx(Icon, { name: "chevron-down-filled", color: colors.gray[600], size: 16 })] }), _jsx(LakeTextInput, { id: id, ref: inputRef, autoComplete: "tel", inputMode: "tel", rows: 1, hideErrors: true, value: value, valid: valid, error: error, disabled: disabled, readOnly: readOnly, onChangeText: handleChangeText, onSubmitEditing: onSubmitEditing, onBlur: onBlur, style: styles.input })] })] }));
-};