@swan-io/lake 11.4.1 → 11.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "11.4.1",
+  "version": "11.4.2",
   "engines": {
     "node": "^22.12.0",
     "pnpm": "^10.2.0"

package/src/components/LakeSearchField.d.ts

@@ -5,7 +5,8 @@ type Props = {
     onChangeText: (text: string) => void;
     debounceDuration?: number;
     maxWidth?: number;
+    children?: ReactNode;
     renderEnd?: () => ReactNode;
 };
-export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth, renderEnd, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth: maxWidthProp, renderEnd, children, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeSearchField.js

@@ -5,23 +5,22 @@ import { animations, backgroundColor, colors, radii, spacings } from "../constan
 import { useBoolean } from "../hooks/useBoolean";
 import { useDebounce } from "../hooks/useDebounce";
 import { isNotNullishOrEmpty } from "../utils/nullish";
+import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeTextInput } from "./LakeTextInput";
 import { ResponsiveContainer } from "./ResponsiveContainer";
-import { Line, Svg } from "./Svg";
 import { TransitionView } from "./TransitionView";
+const BREAKPOINT = 350;
 const styles = StyleSheet.create({
     container: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
         flexGrow: 1,
         flexShrink: 1,
     },
     input: {
         transition: "300ms ease-in-out border-color",
-        // ResponsiveContainer uses a 200 breaking,
-        // we give the opportunity to the component to grow 2px more
-        // to trigger the change
-        maxWidth: 202,
-        minWidth: 38,
         justifyContent: "flex-end",
     },
     focus: {
@@ -29,21 +28,8 @@ const styles = StyleSheet.create({
         borderColor: colors.current.primary,
     },
     clearButton: {
-        marginRight: spacings[8],
-    },
-    clear: {
-        width: 8,
-        height: 8,
-    },
-    smallButtonContainer: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        flexGrow: 1,
-    },
-    largeInputContainer: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        flexGrow: 1,
+        padding: spacings[8],
+        borderRadius: radii[4],
     },
     openSearchFieldContainer: {
         position: "absolute",
@@ -60,19 +46,17 @@ const styles = StyleSheet.create({
         borderRadius: radii[6],
     },
 });
-const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, renderEnd, }) => {
-    return (_jsxs(View, { style: styles.smallButtonContainer, children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: () => {
-                    setFocused.on();
-                }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue, renderEnd: renderEnd }) })) : null })] }));
+const CollapsibleSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, renderEnd, }) => {
+    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: setFocused.on, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue, renderEnd: renderEnd }) })) : null })] }));
 };
 const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, renderEnd, currentValue, }) => {
     const timeoutRef = useRef(null);
-    return (_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, renderEnd: () => (_jsxs(_Fragment, { children: [isNotNullishOrEmpty(currentValue) && (_jsx(Pressable, { onPress: () => {
+    return (_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, renderEnd: () => (_jsxs(_Fragment, { children: [isNotNullishOrEmpty(currentValue) && (_jsx(Pressable, { role: "button", style: styles.clearButton, onPress: () => {
                         if (timeoutRef.current != null) {
                             clearTimeout(timeoutRef.current);
                         }
                         clear();
-                    }, style: styles.clearButton, children: _jsx(Svg, { viewBox: "0 0 16 16", style: styles.clear, children: _jsxs(_Fragment, { children: [_jsx(Line, { x1: "0", x2: "16", y1: "0", y2: "16", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 }), _jsx(Line, { x1: "0", x2: "16", y1: "16", y2: "0", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 })] }) }) })), renderEnd === null || renderEnd === void 0 ? void 0 : renderEnd()] })), onFocus: () => {
+                    }, children: _jsx(Icon, { name: "dismiss-filled", size: 12, color: colors.gray[500] }) })), renderEnd === null || renderEnd === void 0 ? void 0 : renderEnd()] })), onFocus: () => {
             if (timeoutRef.current != null) {
                 clearTimeout(timeoutRef.current);
             }
@@ -81,9 +65,9 @@ const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, se
             timeoutRef.current = window.setTimeout(() => {
                 setFocused.off();
             }, 300);
-        }, containerStyle: styles.largeInputContainer, style: [styles.input, hasFocus ? styles.focus : null] }));
+        }, style: [styles.input, hasFocus && styles.focus] }));
 };
-export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, renderEnd, }) => {
+export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth: maxWidthProp = 350, renderEnd, children, }) => {
     const [hasFocus, setFocused] = useBoolean(false);
     const inputRef = useRef(null);
     const [currentValue, setCurrentValue] = useState(initialValue);
@@ -92,7 +76,7 @@ export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debou
         setCurrentValue(value.trim());
     }, debounceDuration);
     const clear = useCallback(() => {
-        if (inputRef.current instanceof HTMLInputElement) {
+        if (inputRef.current != null) {
             inputRef.current.clear();
             inputRef.current.focus();
             onChangeText("");
@@ -110,8 +94,9 @@ export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debou
         currentValue,
         renderEnd,
     };
-    return (_jsx(ResponsiveContainer, { breakpoint: 200, style: [styles.container, maxWidth != null && { maxWidth }], children: ({ large }) => {
-            const Component = large ? ExpandedSearchField : CollapsibleSeachField;
-            return _jsx(Component, { ...props });
+    const maxWidth = Math.max(maxWidthProp, BREAKPOINT);
+    return (_jsx(ResponsiveContainer, { breakpoint: BREAKPOINT, style: [styles.container, { maxWidth }], children: ({ large }) => {
+            const Component = large ? ExpandedSearchField : CollapsibleSearchField;
+            return (_jsxs(_Fragment, { children: [children, _jsx(Component, { ...props })] }));
         } }));
 };

package/src/components/Toggle.js

@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
         userSelect: "none",
         flexDirection: "row",
         borderRadius: HEIGHT / 2,
+        height: HEIGHT,
         transform: "translateZ(0px)",
         width: "min-content",
         borderColor: colors.gray[100],