@swan-io/lake 7.0.3 → 7.0.5

package/package.json

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

package/src/components/LakeCopyButton.js

@@ -7,7 +7,7 @@ import { Pressable } from "./Pressable";
 export const copyButtondefaultSize = 21;
 export const LakeCopyButton = ({ valueToCopy, size = copyButtondefaultSize, copyText, copiedText, }) => {
     const [visibleState, setVisibleState] = useState("copy");
-    return (_jsx(LakeTooltip, { describedBy: "copy", placement: "right", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {
+    return (_jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {
                 event.stopPropagation();
                 event.preventDefault();
                 Clipboard.setString(valueToCopy);

package/src/components/LakeTagInput.d.ts

@@ -14,6 +14,9 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     onValuesChanged: (values: string[]) => void;
     placeholder?: string;
 }>;
+export type TagInputRef = TextInput & {
+    pushPendingValue: () => void;
+};
 export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
     allowFontScaling?: boolean | undefined;
     autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
@@ -216,4 +219,4 @@ export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
     values: string[];
     onValuesChanged: (values: string[]) => void;
     placeholder?: string | undefined;
-} & import("react").RefAttributes<TextInput | null>>;
+} & import("react").RefAttributes<TagInputRef>>;

package/src/components/LakeTagInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, useState } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, TextInput, View, } from "react-native";
 import { P, match } from "ts-pattern";
 import { backgroundColor, colors, radii, shadows, spacings } from "../constants/design";
@@ -77,11 +77,12 @@ const styles = StyleSheet.create({
     },
 });
 const SEPARATORS_REGEX = /,| /;
-export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardRef) => {
+export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardedRef) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
+    const mergedRef = useMergeRefs(inputRef, forwardedRef);
     useHover(containerRef, {
         onHoverStart: () => setIsHovered(true),
         onHoverEnd: () => setIsHovered(false),
@@ -131,7 +132,16 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
         setIsFocused(false);
         originalOnBlur === null || originalOnBlur === void 0 ? void 0 : originalOnBlur(event);
     }, [pushNewValues, originalOnBlur, validateOnBlur]);
-    const mergedRef = useMergeRefs(inputRef, forwardRef);
+    useImperativeHandle(forwardedRef, () => ({
+        pushPendingValue: () => {
+            const input = inputRef.current;
+            if (input instanceof HTMLInputElement &&
+                isNotNullishOrEmpty(input.value) &&
+                validateOnBlur) {
+                pushNewValues([input.value]);
+            }
+        },
+    }), [pushNewValues, validateOnBlur]);
     const hasError = isNotNullishOrEmpty(error);
     return (_jsxs(View, { children: [_jsxs(Pressable, { style: [
                     styles.root,

package/src/components/LakeTooltip.js

@@ -31,6 +31,12 @@ const styles = StyleSheet.create({
     arrowBar: {
         paddingHorizontal: spacings[12],
     },
+    arrowBarTop: {
+        top: 1,
+    },
+    arrowBarBottom: {
+        bottom: 1,
+    },
     info: {
         flexGrow: 0,
     },
@@ -108,10 +114,10 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
                                     .with("left", () => "start")
                                     .with("center", () => "center")
                                     .with("right", () => "end")
-                                    .exhaustive(), style: styles.arrowBar, children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 0 16 8 0 8", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null, _jsx(View, { style: [styles.content, { width }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), position.get().verticalPosition === "top" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
+                                    .exhaustive(), style: [styles.arrowBar, styles.arrowBarTop], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 0 16 8 0 8", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null, _jsx(View, { style: [styles.content, { width }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), position.get().verticalPosition === "top" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
                                     .with("left", () => "start")
                                     .with("center", () => "center")
                                     .with("right", () => "end")
-                                    .exhaustive(), style: styles.arrowBar, children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 8 16 0 0 0", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null] }) }) }))] }));
+                                    .exhaustive(), style: [styles.arrowBar, styles.arrowBarBottom], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 8 16 0 0 0", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null] }) }) }))] }));
 }));
 export const InformationTooltip = forwardRef(({ text }, forwardedRef) => (_jsx(LakeTooltip, { ref: forwardedRef, describedBy: "copy", placement: "right", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: "info-regular", size: 24, color: colors.gray[900] }) }) })));

package/src/utils/object.d.ts

@@ -1,2 +1,2 @@
 export declare const isPlainObject: (value: unknown) => boolean;
-export declare const pick: <T extends Record<K, unknown>, K extends keyof T>(object: T, keys: K[]) => Pick<T, K>;
+export declare const pick: <T extends Record<K, unknown>, const K extends keyof T>(object: T, keys: K[]) => Pick<T, K>;

package/src/utils/refs.d.ts

@@ -0,0 +1,2 @@
+import { LegacyRef, MutableRefObject, RefCallback } from "react";
+export declare const mergeRefs: <T>(refs: (MutableRefObject<T> | LegacyRef<T> | null | undefined)[]) => RefCallback<T>;

package/src/utils/refs.js

@@ -0,0 +1,11 @@
+// From https://github.com/gregberge/react-merge-refs
+export const mergeRefs = (refs) => value => {
+    refs.forEach(ref => {
+        if (typeof ref === "function") {
+            ref(value);
+        }
+        else if (ref != null) {
+            ref.current = value;
+        }
+    });
+};