@swan-io/lake 15.3.1 → 15.5.0

package/src/components/WithPartnerAccentColor.d.ts

@@ -4,5 +4,5 @@ type Props = {
     children: ReactNode;
     scoped?: boolean;
 };
-export declare const WithPartnerAccentColor: ({ color, scoped, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const WithPartnerAccentColor: ({ color, scoped, children }: Props) => import("react").JSX.Element;
 export {};

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/hooks/useUpdateEffect.js

@@ -2,11 +2,10 @@ import { useEffect } from "react";
 import { useFirstMountState } from "./useFirstMountState";
 export const useUpdateEffect = (effect, deps) => {
     const isFirstMount = useFirstMountState();
-    // biome-ignore lint/correctness/useExhaustiveDependencies(effect):
-    // biome-ignore lint/correctness/useExhaustiveDependencies(isFirstMount):
     useEffect(() => {
         if (!isFirstMount) {
             return effect();
         }
+        // biome-ignore lint/correctness/useExhaustiveDependencies: rerun effect only when deps change
     }, deps);
 };

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];

package/src/utils/highlights.js

@@ -1,7 +1,8 @@
 import { isNullishOrEmpty } from "./nullish";
 const highlightName = "lake-highlight";
 export const setHighlightApi = (text, element, minLength = 2) => {
-    var _a, _b;
+    var _a;
+    var _b;
     if (!("highlights" in CSS)) {
         return;
     }

package/src/utils/string.js

@@ -233,4 +233,4 @@ export const upperCase = (value) => value.toUpperCase();
 export const capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
 export const uncapitalize = (value) => `${value.charAt(0).toLowerCase()}${value.slice(1)}`;
 export const optionFromString = (value) => value !== "" ? Option.Some(value) : Option.None();
-export const getFlagGlyphName = (flag) => { var _a, _b, _c, _d; return `${(_b = (_a = flag.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16)) !== null && _b !== void 0 ? _b : ""}-${(_d = (_c = flag.codePointAt(2)) === null || _c === void 0 ? void 0 : _c.toString(16)) !== null && _d !== void 0 ? _d : ""}`; };
+export const getFlagGlyphName = (flag) => { var _a, _b; var _c, _d; return `${(_c = (_a = flag.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16)) !== null && _c !== void 0 ? _c : ""}-${(_d = (_b = flag.codePointAt(2)) === null || _b === void 0 ? void 0 : _b.toString(16)) !== null && _d !== void 0 ? _d : ""}`; };

package/src/utils/svg.js

@@ -11,16 +11,16 @@ export const getSvgSize = (svg) => {
     // first we try to get width and height from "width" and "height" attributes
     const widthAttr = svg.getAttribute("width");
     const heightAttr = svg.getAttribute("height");
-    const width = isNotNullish(widthAttr) ? Number.parseInt(widthAttr) : Number.NaN;
-    const height = isNotNullish(heightAttr) ? Number.parseInt(heightAttr) : Number.NaN;
+    const width = isNotNullish(widthAttr) ? Number.parseInt(widthAttr, 10) : Number.NaN;
+    const height = isNotNullish(heightAttr) ? Number.parseInt(heightAttr, 10) : Number.NaN;
     if (!Number.isNaN(width) || !Number.isNaN(height)) {
         return Result.Ok({ width, height });
     }
     // if height and width aren't provided, we get values from viewBox attribute
     const viewBox = svg.getAttribute("viewBox");
     const [, , boxWidthAttr, boxHeightAttr] = (_a = viewBox === null || viewBox === void 0 ? void 0 : viewBox.split(" ")) !== null && _a !== void 0 ? _a : [];
-    const boxWidth = isNotNullish(boxWidthAttr) ? Number.parseInt(boxWidthAttr) : Number.NaN;
-    const boxHeight = isNotNullish(boxHeightAttr) ? Number.parseInt(boxHeightAttr) : Number.NaN;
+    const boxWidth = isNotNullish(boxWidthAttr) ? Number.parseInt(boxWidthAttr, 10) : Number.NaN;
+    const boxHeight = isNotNullish(boxHeightAttr) ? Number.parseInt(boxHeightAttr, 10) : Number.NaN;
     if (Number.isNaN(boxWidth) || Number.isNaN(boxHeight)) {
         return Result.Error("VIEWBOX_MISSING");
     }
@@ -68,7 +68,7 @@ const getMatrixColor = (color) => {
     const green = colorIntensity;
     const blue = colorIntensity;
     const alpha = 1;
-    // prettier-ignore
+    // biome-ignore format: keep matrix format for readability
     const matrix = [
         red, red, red, red, red, // R
         green, green, green, green, green, // G