@swan-io/lake 2.7.14 → 2.7.16

package/package.json

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

package/src/components/LakeModal.js

@@ -131,5 +131,5 @@ export const LakeModal = ({ visible, icon, title, color = "current", children, m
     if (rootElement == null) {
         return null;
     }
-    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { "aria-modal": true, style: [styles.container, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color][500] })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
+    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { "aria-modal": true, style: [styles.container, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { role: "dialog", style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color][500] })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
 };

package/src/components/LakeSearchField.js

@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
         // to trigger the change
         maxWidth: 202,
         minWidth: 38,
+        justifyContent: "flex-end",
     },
     focus: {
         outlineStyle: "none",
@@ -38,6 +39,11 @@ const styles = StyleSheet.create({
         justifyContent: "flex-end",
         flexGrow: 1,
     },
+    largeInputContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        flexGrow: 1,
+    },
     openSearchFieldContainer: {
         position: "absolute",
         right: 0,
@@ -74,7 +80,7 @@ const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, se
             timeoutRef.current = window.setTimeout(() => {
                 setFocused.off();
             }, 300);
-        }, style: [styles.input, hasFocus ? styles.focus : null] }));
+        }, containerStyle: styles.largeInputContainer, style: [styles.input, hasFocus ? styles.focus : null] }));
 };
 export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, renderEnd, }) => {
     const [hasFocus, setFocused] = useBoolean(false);

package/src/components/LakeTextInput.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, ReactNode, Ref } from "react";
-import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps, View } from "react-native";
+import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps, View, ViewProps } from "react-native";
 import { Except } from "type-fest";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
@@ -20,6 +20,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     children?: ReactNode;
     hideErrors?: boolean;
     style?: TextInputProps["style"];
+    containerStyle?: ViewProps["style"];
     onChange?: ChangeEventHandler<HTMLInputElement>;
     maxCharCount?: number;
     help?: string;
@@ -233,6 +234,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     children?: ReactNode;
     hideErrors?: boolean | undefined;
     style?: TextInputProps["style"];
+    containerStyle?: ViewProps["style"];
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
     maxCharCount?: number | undefined;
     help?: string | undefined;

package/src/components/LakeTextInput.js

@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
         paddingTop: spacings[4],
     },
 });
-export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, containerRef, 
+export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, containerStyle: containerStylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, containerRef, 
 //maxCharCount is different from maxLength(props inherited of TextInput)
 //maxLength truncates the text in the limitation asked,
 //maxCharCount doesn't have limitation but displays a counter of characters
@@ -146,7 +146,7 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
     const isInteractive = !disabled && !readOnly;
     const hasError = isNotNullishOrEmpty(error);
     const charCount = isNullish(value) ? 0 : value.length;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: [styles.container, containerStylesFromProps], children: [_jsxs(View, { style: [
                                     styles.contents,
                                     isHovered && isInteractive && styles.hovered,
                                     isFocused && { borderColor: colors[color][500] },