@swan-io/lake 15.4.0 → 15.5.0

package/package.json

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

package/src/components/Breadcrumbs.js

@@ -126,7 +126,7 @@ export const BreadcrumbsRoot = ({ rootLevelCrumbs = emptyCrumbArray, children })
         }
         setRootCrumbs(rootLevelCrumbs.map(crumb => ({ id: uuid(), crumb, isRootCrumb: true })));
     }, [rootLevelCrumbs]);
-    const orderedCrumbs = useMemo(() => [...crumbs].sort((a, b) => { var _a, _b; return (((_a = b.index) !== null && _a !== void 0 ? _a : -1) > ((_b = a.index) !== null && _b !== void 0 ? _b : -1) ? -1 : 1); }), [crumbs]);
+    const orderedCrumbs = useMemo(() => crumbs.toSorted((a, b) => { var _a, _b; return (((_a = b.index) !== null && _a !== void 0 ? _a : -1) > ((_b = a.index) !== null && _b !== void 0 ? _b : -1) ? -1 : 1); }), [crumbs]);
     const value = useMemo(() => [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef], [rootCrumbs, orderedCrumbs]);
     return _jsx(BreadcrumbsContext.Provider, { value: value, children: children });
 };

package/src/components/LakeAlert.js

@@ -20,8 +20,6 @@ const styles = StyleSheet.create({
         boxShadow: shadows.tile,
     },
     anchored: {
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0,
         borderLeftWidth: 0.5,
         marginHorizontal: -1,
         marginBottom: -1,
@@ -87,8 +85,11 @@ export const LakeAlert = ({ anchored = false, variant, title, subtitle, children
         .exhaustive();
     return (_jsxs(View, { style: [
             styles.base,
-            { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
+            {
+                backgroundColor: alertBackground[variant],
+                borderColor: alertBorder[variant],
+            },
             anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
             style,
-        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), tag && _jsx(Tag, { color: translateColorTag(), children: tag })] }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: desktop && icon != null && styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { color: color, children: children }) : children] }))] }));
+        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeText, { color: color, variant: "medium", children: title }), tag && _jsx(Tag, { color: translateColorTag(), children: tag })] }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: desktop && icon != null && styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { color: color, children: children }) : children] }))] }));
 };

package/src/components/LakeTooltip.d.ts

@@ -22,9 +22,10 @@ type Props = {
     disabled?: boolean;
 };
 export declare const LakeTooltip: ({ ref, content, children, ...rest }: Props) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
-export declare const InformationTooltip: ({ ref, text, icon, iconSize, }: {
+export declare const InformationTooltip: ({ ref, text, placement, icon, iconSize, }: {
     ref?: Ref<TooltipRef>;
     text: string;
+    placement?: Props["placement"];
     icon?: IconName;
     iconSize?: number;
 }) => import("react").JSX.Element;

package/src/components/LakeTooltip.js

@@ -53,7 +53,7 @@ export const LakeTooltip = ({ ref, content, children, ...rest }) => {
 const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, maxWidth, togglableOnFocus = false, containerStyle, disabled = false, }) => {
     const timeoutRef = useRef(0);
     const [visible, setVisible] = useState(false);
-    const { referenceRef, position } = useContextualLayer({
+    const { referenceRef, contentRef, position } = useContextualLayer({
         placement,
         visible,
         matchReferenceWidth,
@@ -113,7 +113,7 @@ 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, { 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)
+    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")
@@ -123,4 +123,4 @@ const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth
                                     .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] }) }) }))] }));
 });
-export const InformationTooltip = ({ ref, text, icon = "info-regular", iconSize = 24, }) => (_jsx(LakeTooltip, { ref: ref, describedBy: "copy", placement: "center", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: 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/components/Switch.d.ts

@@ -3,8 +3,9 @@ import { View } from "react-native";
 type Props = {
     ref?: Ref<View>;
     value: boolean;
+    labelledBy?: string;
     onValueChange?: (value: boolean) => void;
     disabled?: boolean;
 };
-export declare const Switch: import("react").MemoExoticComponent<({ ref, value, disabled, onValueChange }: Props) => import("react").JSX.Element>;
+export declare const Switch: import("react").MemoExoticComponent<({ ref, value, labelledBy, disabled, onValueChange }: Props) => import("react").JSX.Element>;
 export {};

package/src/components/Switch.js

@@ -61,4 +61,4 @@ const styles = StyleSheet.create({
         transitionDuration: "250ms",
     },
 });
-export const Switch = memo(({ ref, value, disabled = false, onValueChange }) => (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, disabled: disabled, onPress: () => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { style: [styles.button, value && styles.buttonActive], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) })));
+export const Switch = memo(({ ref, value, labelledBy, disabled = false, onValueChange }) => (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, "aria-labelledby": labelledBy, disabled: disabled, onPress: () => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { style: [styles.button, value && styles.buttonActive], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) })));

package/src/hooks/useContextualLayer.d.ts

@@ -33,6 +33,7 @@ export type ContextualLayerPosition = {
 };
 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;

package/src/hooks/useContextualLayer.js

@@ -1,10 +1,10 @@
 import { Option } from "@swan-io/boxed";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { match } from "ts-pattern";
-const MAX_OFFSET_FOR_CENTER_PLACEMENT = 100;
 const HORIZONTAL_SAFETY_MARGIN = 16;
-export const useContextualLayer = ({ placement, verticalPlacement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
+export const useContextualLayer = ({ placement = "left", verticalPlacement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
     const referenceRef = useRef(null);
+    const contentRef = useRef(null);
     const usedRef = externalReferenceRef !== null && externalReferenceRef !== void 0 ? externalReferenceRef : referenceRef;
     const [position, setPosition] = useState(Option.None());
     const getPosition = useCallback(() => {
@@ -21,12 +21,19 @@ export const useContextualLayer = ({ placement, verticalPlacement, visible, matc
         const availableSpaceAfter = viewportWidth - rect.right;
         const height = rect.bottom - rect.top;
         const width = rect.right - rect.left;
-        const isCenteredEnough = Math.abs(availableSpaceBefore - availableSpaceAfter) < MAX_OFFSET_FOR_CENTER_PLACEMENT;
-        const inferedPlacement = placement !== null && placement !== void 0 ? placement : (isCenteredEnough
-            ? "center"
-            : availableSpaceBefore > availableSpaceAfter
-                ? "right"
-                : "left");
+        const contentElement = contentRef.current;
+        // 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 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))
+            .exhaustive();
         const openAbove = verticalPlacement === "above"
             ? true
             : verticalPlacement === "below"
@@ -93,6 +100,7 @@ export const useContextualLayer = ({ placement, verticalPlacement, visible, matc
     }, [visible, getPosition]);
     return {
         referenceRef: usedRef,
+        contentRef,
         position,
     };
 };

package/src/utils/array.js

@@ -1,5 +1,5 @@
 export const sortBy = (array, keys) => {
-    return [...array].sort((a, b) => {
+    return array.toSorted((a, b) => {
         let index = -1;
         while (++index < keys.length) {
             const key = keys[index];