@swan-io/lake 15.5.0 → 15.5.2

package/package.json

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

package/src/components/LakeSlider.d.ts

@@ -7,7 +7,8 @@ type Props = {
     step: number;
     disabled?: boolean;
     style?: ViewProps["style"];
+    labelledBy?: string;
     onChange: (value: number) => void;
 };
-export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, onChange, }: Props) => import("react").JSX.Element;
+export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, labelledBy, onChange, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeSlider.js

@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
         zIndex: 1,
     },
 });
-export const LakeSlider = ({ id, min, max, value, step, disabled = false, style, onChange, }) => (_jsx(View, { style: [styles.container, style], children: _jsx("input", { id: id, type: "range", min: min, max: max, value: value, step: step, disabled: disabled, onChange: useCallback((event) => onChange(Number(event.target.value)), [onChange]), style: {
+export const LakeSlider = ({ id, min, max, value, step, disabled = false, style, labelledBy, onChange, }) => (_jsx(View, { style: [styles.container, style], children: _jsx("input", { id: id, "aria-labelledby": labelledBy, type: "range", min: min, max: max, value: value, step: step, disabled: disabled, onChange: useCallback((event) => onChange(Number(event.target.value)), [onChange]), style: {
             backgroundSize: `${((value - min) / (max - min)) * 100}% 100%`,
             ...(disabled ? commonStyles.disabled : {}),
         } }) }));

package/src/components/LakeTagInput.d.ts

@@ -18,4 +18,4 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     onValuesChanged: (values: string[]) => void;
     placeholder?: string;
 }>;
-export declare const LakeTagInput: ({ ref, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react").JSX.Element;
+export declare const LakeTagInput: ({ ref, id, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react").JSX.Element;

package/src/components/LakeTagInput.js

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
     },
 });
 const SEPARATORS_REGEX = /,| /;
-export const LakeTagInput = ({ ref, validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }) => {
+export const LakeTagInput = ({ ref, id, validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
@@ -152,5 +152,5 @@ export const LakeTagInput = ({ ref, validator = () => true, onFocus: originalOnF
                     isHovered && styles.hovered,
                 ], "aria-errormessage": error, onPress: autoFocus, ref: containerRef, children: [values.map((value, i) => (_jsx(Tag, { onPressRemove: !readOnly && !disabled
                             ? () => onValuesChanged(values.filter(current => current !== value))
-                            : undefined, style: styles.tag, color: validator(value) ? "gray" : "negative", children: value }, i))), _jsx(TextInput, { ref: mergedRef, style: [styles.input, disabled && styles.disabled], onFocus: onFocus, onBlur: onBlur, "aria-disabled": disabled, onChangeText: onTextInputChange, onKeyPress: onTextInputKeyPress, readOnly: readOnly, placeholder: placeholder })] }), !hideErrors && (_jsx(Box, { direction: "row", style: styles.errorContainer, children: isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help !== null && help !== void 0 ? help : " " })) }))] }));
+                            : undefined, style: styles.tag, color: validator(value) ? "gray" : "negative", children: value }, i))), _jsx(TextInput, { ref: mergedRef, id: id, style: [styles.input, disabled && styles.disabled], onFocus: onFocus, onBlur: onBlur, "aria-disabled": disabled, onChangeText: onTextInputChange, onKeyPress: onTextInputKeyPress, readOnly: readOnly, placeholder: placeholder })] }), !hideErrors && (_jsx(Box, { direction: "row", style: styles.errorContainer, children: isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help !== null && help !== void 0 ? help : " " })) }))] }));
 };

package/src/components/LakeTooltip.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
-import { match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useContextualLayer } from "../hooks/useContextualLayer";
 import { useHover } from "../hooks/useHover";
@@ -57,6 +57,7 @@ const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth
         placement,
         visible,
         matchReferenceWidth,
+        withArrow: !hideArrow,
     });
     const rootElement = getRootElement(referenceRef.current);
     useImperativeHandle(ref, () => ({
@@ -113,14 +114,17 @@ const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth
     useEffect(() => {
         return () => clearTimeout(timeoutRef.current);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && position.isSome() && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx(View, { style: [position.get().rootStyle, styles.root], children: _jsxs(View, { ref: contentRef, role: "tooltip", "aria-describedby": describedBy, style: [styles.base, position.get().style], children: [position.get().verticalPosition === "bottom" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
-                                    .with("left", () => "start")
-                                    .with("center", () => "center")
-                                    .with("right", () => "end")
-                                    .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, maxWidth }], 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, 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] }) }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && position.isSome() && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx(View, { style: [position.get().rootStyle, styles.root], children: _jsxs(View, { ref: contentRef, role: "tooltip", "aria-describedby": describedBy, style: [styles.base, position.get().style], children: [position.get().verticalPosition === "bottom" ? (_jsx(TooltipArrow, { verticalPosition: "bottom", position: position.get().arrowPosition, hideArrow: hideArrow })) : null, _jsx(View, { style: [styles.content, { width, maxWidth }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), position.get().verticalPosition === "top" ? (_jsx(TooltipArrow, { verticalPosition: "top", position: position.get().arrowPosition, hideArrow: hideArrow })) : null] }) }) }))] }));
 });
+const TooltipArrow = ({ verticalPosition, position, hideArrow }) => {
+    const { polygonPoints, top, bottom } = verticalPosition === "top"
+        ? { polygonPoints: "8 8 16 0 0 0", top: undefined, bottom: 1 }
+        : { polygonPoints: "8 0 16 8 0 8", top: 1, bottom: undefined };
+    const { justifyContent, left } = match(position)
+        .with("left", () => ({ justifyContent: "start", left: undefined }))
+        .with("right", () => ({ justifyContent: "end", left: undefined }))
+        .with(P.number, value => ({ justifyContent: "center", left: value }))
+        .exhaustive();
+    return (_jsx(Box, { direction: "row", justifyContent: justifyContent, style: [styles.arrowBar, styles.arrowBarBottom, { top, bottom, left }], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: polygonPoints, fill: hideArrow ? "transparent" : colors.gray[900] }) }) }));
+};
 export const InformationTooltip = ({ ref, text, placement = "center", icon = "info-regular", iconSize = 24, }) => (_jsx(LakeTooltip, { ref: ref, describedBy: "copy", placement: placement, togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: colors.gray[900] }) }) }));

package/src/hooks/useContextualLayer.d.ts

@@ -24,17 +24,19 @@ type Config = {
     matchReferenceWidth?: boolean;
     matchReferenceMinWidth?: boolean;
     referenceRef?: RefObject<View | Text | null>;
+    withArrow?: boolean;
 };
 export type ContextualLayerPosition = {
     rootStyle: ViewStyle;
     style: ViewStyle;
     verticalPosition: "top" | "bottom";
     horizontalPosition: "left" | "center" | "right";
+    arrowPosition: "left" | "right" | number;
 };
 type ContextualLayerConfig = {
     referenceRef: RefObject<View | Text | null>;
     contentRef: RefObject<View | Text | null>;
     position: Option<ContextualLayerPosition>;
 };
-export declare const useContextualLayer: ({ placement, verticalPlacement, visible, matchReferenceWidth, matchReferenceMinWidth, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
+export declare const useContextualLayer: ({ placement, verticalPlacement, visible, matchReferenceWidth, matchReferenceMinWidth, withArrow, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
 export {};

package/src/hooks/useContextualLayer.js

@@ -1,8 +1,21 @@
 import { Option } from "@swan-io/boxed";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { match } from "ts-pattern";
+import { match, P } from "ts-pattern";
+const MAX_OFFSET_FOR_CENTER_PLACEMENT = 100;
 const HORIZONTAL_SAFETY_MARGIN = 16;
-export const useContextualLayer = ({ placement = "left", verticalPlacement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
+const getArrowPosition = (placement, referenceWidth, contentWidth) => {
+    if (placement === "center") {
+        return 0;
+    }
+    if (contentWidth <= referenceWidth) {
+        return placement;
+    }
+    const maxOffset = contentWidth / 2 - 12; // avoid arrow to be too close to the edge of the tooltip
+    const offset = (contentWidth - referenceWidth) / 2;
+    const arrowOffset = Math.min(offset, maxOffset);
+    return placement === "left" ? -arrowOffset : arrowOffset;
+};
+export const useContextualLayer = ({ placement, verticalPlacement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, withArrow = false, referenceRef: externalReferenceRef, }) => {
     const referenceRef = useRef(null);
     const contentRef = useRef(null);
     const usedRef = externalReferenceRef !== null && externalReferenceRef !== void 0 ? externalReferenceRef : referenceRef;
@@ -25,14 +38,13 @@ export const useContextualLayer = ({ placement = "left", verticalPlacement, visi
         // if contentRef isn't used in the component, we don't infer the placement depending on content size
         const contentRect = contentElement != null ? contentElement.getBoundingClientRect() : { width: 0, height: 0 };
         const contentWidth = contentRect.width;
-        const contentMidWidth = contentWidth / 2;
-        const isCenteredEnough = availableSpaceBefore > contentMidWidth && availableSpaceAfter > contentMidWidth;
+        const isCenteredEnough = Math.abs(availableSpaceBefore - availableSpaceAfter) < MAX_OFFSET_FOR_CENTER_PLACEMENT;
         const bestPlacement = availableSpaceBefore > availableSpaceAfter ? "right" : "left";
         const inferedPlacement = match(placement)
             .returnType()
-            .with("center", () => (isCenteredEnough ? "center" : bestPlacement))
-            .with("left", () => (availableSpaceBefore > contentWidth ? "left" : bestPlacement))
-            .with("right", () => (availableSpaceAfter > contentWidth ? "right" : bestPlacement))
+            .with("center", P.nullish, () => (isCenteredEnough ? "center" : bestPlacement))
+            .with("left", () => (availableSpaceAfter > contentWidth ? "left" : bestPlacement))
+            .with("right", () => (availableSpaceBefore > contentWidth ? "right" : bestPlacement))
             .exhaustive();
         const openAbove = verticalPlacement === "above"
             ? true
@@ -53,6 +65,7 @@ export const useContextualLayer = ({ placement = "left", verticalPlacement, visi
             .with("right", () => ({ right: window.innerWidth - rect.right }))
             .with("center", () => ({ left: rect.left + width / 2, transform: "translateX(-50%)" }))
             .exhaustive();
+        const arrowPosition = withArrow ? getArrowPosition(inferedPlacement, width, contentWidth) : 0;
         const maxHeight = openAbove ? availableSpaceAbove : window.innerHeight - rect.top - height;
         const rootStyle = {
             position: "absolute",
@@ -80,10 +93,18 @@ export const useContextualLayer = ({ placement = "left", verticalPlacement, visi
         return Option.Some({
             rootStyle,
             horizontalPosition: inferedPlacement,
+            arrowPosition,
             verticalPosition: openAbove ? "top" : "bottom",
             style,
         });
-    }, [placement, verticalPlacement, matchReferenceWidth, matchReferenceMinWidth, usedRef]);
+    }, [
+        placement,
+        verticalPlacement,
+        matchReferenceWidth,
+        matchReferenceMinWidth,
+        usedRef,
+        withArrow,
+    ]);
     useEffect(() => {
         if (visible) {
             setPosition(getPosition());