@swan-io/lake 6.0.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -26,11 +26,10 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
     "@react-three/drei": "^9.99.4",
     "@react-three/fiber": "^8.15.16",
-    "@swan-io/boxed": "^2.0.1",
-    "@swan-io/chicane": "^1.4.1",
+    "@swan-io/boxed": "^2.1.0-beta",
+    "@swan-io/chicane": "^2.0.0-rc.0",
     "dayjs": "^1.11.10",
     "polished": "^4.3.1",
     "prism-react-renderer": "^2.3.1",
@@ -38,7 +37,6 @@
     "react-atomic-state": "^2.0.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.19.10",
-    "react-popper": "^2.3.0",
     "@swan-io/use-form": "^2.0.0-rc.2",
     "rifm": "^0.12.1",
     "three": "^0.161.0",

package/src/components/FixedListViewCells.d.ts

@@ -26,7 +26,7 @@ export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
         hideArrow?: boolean | undefined;
         onHide?: (() => void) | undefined;
         onShow?: (() => void) | undefined;
-        placement: "bottom" | "left" | "right" | "top";
+        placement: "left" | "right" | "center";
         width?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
@@ -34,13 +34,13 @@ export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
     } & import("react").RefAttributes<import("./LakeTooltip").TooltipRef>, "children"> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const SimpleRegularTextCell: ({ variant, text, textAlign, color, }: {
-    variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
     text: string;
     textAlign?: "left" | "right" | "center" | undefined;
     color?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copyWording, copiedWording, tooltip, }: {
-    variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
     text: string;
     textToCopy?: string | undefined;
     copyWording: string;
@@ -53,7 +53,7 @@ export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copy
         hideArrow?: boolean | undefined;
         onHide?: (() => void) | undefined;
         onShow?: (() => void) | undefined;
-        placement: "bottom" | "left" | "right" | "top";
+        placement: "left" | "right" | "center";
         width?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
@@ -69,13 +69,13 @@ export declare const BalanceCell: ({ value, currency, originalValue, formatCurre
     } | undefined;
     formatCurrency: (value: number, currency: string) => string;
     textAlign?: "left" | "right" | "center" | undefined;
-    variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const LinkCell: ({ children, external, onPress, variant, tooltip, }: {
     children: ReactNode;
     onPress: () => void;
     external?: boolean | undefined;
-    variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
     tooltip?: Omit<{
         children: ReactNode;
         content: ReactNode;
@@ -84,7 +84,7 @@ export declare const LinkCell: ({ children, external, onPress, variant, tooltip,
         hideArrow?: boolean | undefined;
         onHide?: (() => void) | undefined;
         onShow?: (() => void) | undefined;
-        placement: "bottom" | "left" | "right" | "top";
+        placement: "left" | "right" | "center";
         width?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;

package/src/components/FixedListViewCells.js

@@ -125,7 +125,7 @@ export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy,
         Clipboard.setString(clipboardText);
         setVisibleState("copied");
     }, [clipboardText]);
-    return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { tooltip: tooltip, color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
+    return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "right", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { tooltip: tooltip, color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
 export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {

package/src/components/LakeCombobox.js

@@ -151,7 +151,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
             setState("dismissed");
         }, 100);
     }, []);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: state === "opened", ariaControls: state === "opened" ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: handleChangeText, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onEscapeKey: dismiss, referenceRef: ref, autoFocus: false, returnFocus: true, visible: state === "opened" && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", field: true, children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: state === "opened", ariaControls: state === "opened" ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: handleChangeText, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onEscapeKey: dismiss, referenceRef: ref, autoFocus: false, returnFocus: true, visible: state === "opened" && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({

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: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {
+    return (_jsx(LakeTooltip, { describedBy: "copy", placement: "right", 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

@@ -59,8 +59,8 @@ export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
     role?: import("react-native").WebRole | undefined;
     lang?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "name" | "email" | "off" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
-    enterKeyHint?: "enter" | "search" | "done" | "next" | "go" | "send" | "previous" | undefined;
+    autoComplete?: "name" | "off" | "email" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
     rows?: number | undefined;
     children?: import("react").ReactNode;
     hitSlop?: import("react-native").Insets | undefined;

package/src/components/LakeText.d.ts

@@ -15,7 +15,7 @@ export declare const LakeText: import("react").ForwardRefExoticComponent<TextPro
     children: ReactNode;
     color?: string | undefined;
     userSelect?: TextStyle["userSelect"];
-    variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
     tooltip?: Omit<{
         children: ReactNode;
         content: ReactNode;
@@ -24,7 +24,7 @@ export declare const LakeText: import("react").ForwardRefExoticComponent<TextPro
         hideArrow?: boolean | undefined;
         onHide?: (() => void) | undefined;
         onShow?: (() => void) | undefined;
-        placement: "bottom" | "left" | "right" | "top";
+        placement: "left" | "right" | "center";
         width?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;

package/src/components/LakeTextInput.d.ts

@@ -72,8 +72,8 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     role?: import("react-native").WebRole | undefined;
     lang?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "name" | "email" | "off" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
-    enterKeyHint?: "enter" | "search" | "done" | "next" | "go" | "send" | "previous" | undefined;
+    autoComplete?: "name" | "off" | "email" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
     rows?: number | undefined;
     readOnly?: boolean | undefined;
     children?: ReactNode;

package/src/components/LakeTooltip.d.ts

@@ -8,7 +8,7 @@ type Props = {
     hideArrow?: boolean;
     onHide?: () => void;
     onShow?: () => void;
-    placement: "left" | "top" | "bottom" | "right";
+    placement: "left" | "right" | "center";
     width?: number;
     togglableOnFocus?: boolean;
     containerStyle?: ViewProps["style"];

package/src/components/LakeTooltip.js

@@ -1,31 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState, } from "react";
 import { StyleSheet, View } from "react-native";
-import { usePopper } from "react-popper";
 import { match } from "ts-pattern";
-import { colors, shadows } from "../constants/design";
+import { colors, shadows, spacings } from "../constants/design";
+import { useContextualLayer } from "../hooks/useContextualLayer";
 import { useHover } from "../hooks/useHover";
 import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
-import { getRootElement, matchReferenceWidthModifier } from "../utils/popper";
+import { getRootElement } from "../utils/popper";
+import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Portal } from "./Portal";
+import { Polygon, Svg } from "./Svg";
 const { matches: canHover } = window.matchMedia("(hover: hover)");
 const styles = StyleSheet.create({
     base: {
-        alignItems: "center",
-    },
-    baseTop: {
-        marginBottom: 8,
-    },
-    baseBottom: {
-        marginTop: 8,
-    },
-    baseRight: {
-        marginLeft: 8,
-    },
-    baseLeft: {
-        marginRight: 8,
+        position: "absolute",
+        pointerEvents: "none",
     },
     content: {
         paddingVertical: 12,
@@ -37,51 +28,13 @@ const styles = StyleSheet.create({
         borderColor: colors.gray[900],
         boxShadow: shadows.modal,
     },
-    arrowContainer: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        margin: "auto",
-        width: 14,
-        height: 10,
-        overflow: "hidden",
-    },
-    arrowContainerHorizontal: {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        margin: "auto",
-        width: 14,
-        height: 10,
-        overflow: "hidden",
-    },
-    arrowContainerTop: {
-        bottom: -7,
-    },
-    arrowContainerBottom: {
-        top: -7,
-    },
-    arrowContainerRight: {
-        left: -7,
-    },
-    arrowContainerLeft: {
-        right: -7,
-    },
-    arrow: {
-        position: "relative",
-        top: -7,
-        height: 14,
-        width: 14,
-        backgroundColor: colors.gray[900],
-        borderWidth: 1,
-        borderColor: colors.gray[900],
-        transform: "rotate(45deg)",
+    arrowBar: {
+        paddingHorizontal: spacings[12],
     },
     info: {
         flexGrow: 0,
     },
 });
-const MAX_WIDTH = "calc(100vw - 20px)";
 export const LakeTooltip = forwardRef(({ content, children, ...rest }, forwardedRef) => {
     if (isNullishOrEmpty(content)) {
         return children;
@@ -89,12 +42,14 @@ export const LakeTooltip = forwardRef(({ content, children, ...rest }, forwarded
     return (_jsx(Tooltip, { ref: forwardedRef, content: content, ...rest, children: children }));
 });
 const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, togglableOnFocus = false, containerStyle, disabled = false, }, forwardedRef) => {
-    var _a, _b;
-    const referenceRef = useRef(null);
-    const rootElement = getRootElement(referenceRef.current);
-    const [popperElement, setPopperElement] = useState(null);
     const timeoutRef = useRef(0);
     const [visible, setVisible] = useState(false);
+    const { referenceRef, position } = useContextualLayer({
+        placement,
+        visible,
+        matchReferenceWidth,
+    });
+    const rootElement = getRootElement(referenceRef.current);
     useImperativeHandle(forwardedRef, () => ({
         show: () => setVisible(true),
         hide: () => setVisible(false),
@@ -106,16 +61,6 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
             setVisible(nextVisible);
         },
     });
-    const { attributes, update, styles: popperStyles, state, } = usePopper(referenceRef.current, popperElement, {
-        placement,
-        modifiers: useMemo(() => [
-            { name: "preventOverflow", enabled: true, options: { padding: 10 } },
-            { name: "flip", enabled: false },
-            { name: "hide", enabled: true },
-            { ...matchReferenceWidthModifier, enabled: matchReferenceWidth },
-        ], [matchReferenceWidth]),
-    });
-    const overflowOffset = (_b = (_a = state === null || state === void 0 ? void 0 : state.modifiersData.preventOverflow) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
     useEffect(() => {
         const node = referenceRef.current;
         if (!(node instanceof Element)) {
@@ -159,31 +104,14 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
     useEffect(() => {
         return () => clearTimeout(timeoutRef.current);
     }, []);
-    useLayoutEffect(() => {
-        void (update === null || update === void 0 ? void 0 : update());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [content]);
-    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && visible && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx("div", { ref: setPopperElement, style: { ...popperStyles.popper, maxWidth: MAX_WIDTH }, ...attributes.popper, role: "tooltip", "aria-describedby": describedBy, children: _jsxs(View, { style: [
-                            styles.base,
-                            (state === null || state === void 0 ? void 0 : state.placement) === "top" && styles.baseTop,
-                            (state === null || state === void 0 ? void 0 : state.placement) === "bottom" && styles.baseBottom,
-                            (state === null || state === void 0 ? void 0 : state.placement) === "right" && styles.baseRight,
-                            (state === null || state === void 0 ? void 0 : state.placement) === "left" && styles.baseLeft,
-                        ], children: [_jsx(View, { style: [styles.content, { width, maxWidth: MAX_WIDTH }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), !hideArrow && (_jsx(View, { role: "none", style: [
-                                    (state === null || state === void 0 ? void 0 : state.placement) === "right" || (state === null || state === void 0 ? void 0 : state.placement) === "left"
-                                        ? styles.arrowContainerHorizontal
-                                        : styles.arrowContainer,
-                                    (state === null || state === void 0 ? void 0 : state.placement) === "top" && styles.arrowContainerTop,
-                                    (state === null || state === void 0 ? void 0 : state.placement) === "bottom" && styles.arrowContainerBottom,
-                                    (state === null || state === void 0 ? void 0 : state.placement) === "right" && styles.arrowContainerRight,
-                                    (state === null || state === void 0 ? void 0 : state.placement) === "left" && styles.arrowContainerLeft,
-                                    {
-                                        transform: `translateX(${-overflowOffset}px) rotate(${match(state === null || state === void 0 ? void 0 : state.placement)
-                                            .with("bottom", () => "180deg")
-                                            .with("left", () => "-90deg")
-                                            .with("right", () => "90deg")
-                                            .otherwise(() => "0deg")})`,
-                                    },
-                                ], children: _jsx(View, { style: styles.arrow }) }))] }) }) }))] }));
+    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, 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)
+                                    .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)
+                                    .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] }) }) }))] }));
 }));
-export const InformationTooltip = forwardRef(({ text }, forwardedRef) => (_jsx(LakeTooltip, { ref: forwardedRef, describedBy: "copy", placement: "bottom", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: "info-regular", size: 24, color: colors.gray[900] }) }) })));
+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/components/Popover.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, RefObject } from "react";
+import { Text, View } from "react-native";
 type Props = {
     children: ReactNode | ((state: {
         mode: "dropdown" | "panel";
@@ -11,14 +12,13 @@ type Props = {
     matchReferenceMinWidth?: boolean;
     onDismiss?: () => void;
     onEscapeKey?: () => void;
-    referenceRef: RefObject<unknown>;
+    referenceRef: RefObject<View | Text>;
     returnFocus?: boolean;
     autoFocus?: boolean;
     visible: boolean;
     underlay?: boolean;
     safetyMargin?: number;
     forcedMode?: "Dropdown" | "BottomPanel";
-    field?: boolean;
 };
 export declare const VIEWPORT_WIDTH_THRESHOLD = 600;
 export declare const Popover: import("react").NamedExoticComponent<Props>;

package/src/components/Popover.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, } from "react-native";
 import { match, P } from "ts-pattern";
-import { animations, backgroundColor, radii, shadows } from "../constants/design";
+import { animations, backgroundColor, radii, shadows, spacings, } from "../constants/design";
+import { useContextualLayer } from "../hooks/useContextualLayer";
 import { useResponsive } from "../hooks/useResponsive";
 import { noop } from "../utils/function";
 import { BottomPanel } from "./BottomPanel";
@@ -14,9 +15,6 @@ const styles = StyleSheet.create({
         ...StyleSheet.absoluteFillObject,
         pointerEvents: "none",
     },
-    contents: {
-        ...StyleSheet.absoluteFillObject,
-    },
     defaultCursor: {
         cursor: "default",
     },
@@ -29,35 +27,26 @@ const styles = StyleSheet.create({
         bottom: 0,
         right: 0,
     },
+    popoverContainer: {
+        position: "absolute",
+        display: "flex",
+    },
     popover: {
         pointerEvents: "auto",
-        position: "absolute",
         display: "flex",
         flexDirection: "column",
         backgroundColor: backgroundColor.accented,
         borderRadius: radii[8],
-        marginVertical: 4,
+        marginVertical: spacings[8],
         overflow: "hidden",
         boxShadow: shadows.modal,
+        flexGrow: 1,
+        alignSelf: "stretch",
     },
     popoverContents: {
         alignItems: "stretch",
     },
 });
-const DEFAULT_VIEWPORT_INFORMATION = {
-    availableSpaceAbove: 0,
-    availableSpaceBelow: 0,
-    availableSpaceBefore: 0,
-    availableSpaceAfter: 0,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    availableHeight: 0,
-    width: 0,
-};
-const FLEX_END = "flex-end";
-const FLEX_START = "flex-start";
 const animation = {
     ...animations.fadeAndSlideInFromBottom,
     leave: [
@@ -66,36 +55,16 @@ const animation = {
     ],
 };
 export const VIEWPORT_WIDTH_THRESHOLD = 600;
-export const Popover = memo(({ children, id, label, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss = noop, onEscapeKey = onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, safetyMargin = 8, forcedMode, field = false, }) => {
+export const Popover = memo(({ children, id, label, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss = noop, onEscapeKey = onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, forcedMode, }) => {
     const [rootElement, setRootElement] = useState(null);
     const underlayRef = useRef(null);
     const { desktop } = useResponsive(VIEWPORT_WIDTH_THRESHOLD);
-    const [{ availableSpaceAbove, availableSpaceBelow, availableSpaceBefore, availableSpaceAfter, top, bottom, left, right, availableHeight, width, }, setViewportInformation,] = useState(DEFAULT_VIEWPORT_INFORMATION);
-    useEffect(() => {
-        var _a, _b;
-        const element = referenceRef.current;
-        if (element != null && visible) {
-            const rect = element.getBoundingClientRect();
-            const availableSpaceAbove = rect.top;
-            const availableSpaceBelow = window.innerHeight - rect.bottom;
-            const visualViewportOffsetTop = (_a = window.scrollY) !== null && _a !== void 0 ? _a : 0;
-            const visualViewportOffsetLeft = (_b = window.scrollX) !== null && _b !== void 0 ? _b : 0;
-            setViewportInformation({
-                availableSpaceAbove,
-                availableSpaceBelow,
-                availableSpaceBefore: rect.left,
-                availableSpaceAfter: window.innerWidth - rect.right,
-                top: visualViewportOffsetTop + Math.max(rect.bottom, safetyMargin),
-                bottom: Math.max(window.innerHeight - rect.top, safetyMargin) - visualViewportOffsetTop,
-                left: visualViewportOffsetLeft + Math.max(rect.left, safetyMargin),
-                right: Math.max(window.innerWidth - rect.right, safetyMargin) - visualViewportOffsetLeft,
-                availableHeight: field || availableSpaceAbove <= availableSpaceBelow
-                    ? window.innerHeight - rect.top - (rect.bottom - rect.top) - 20
-                    : availableSpaceAbove - 20,
-                width: rect.right - rect.left,
-            });
-        }
-    }, [safetyMargin, referenceRef, visible, field]);
+    const { position } = useContextualLayer({
+        referenceRef,
+        visible,
+        matchReferenceWidth,
+        matchReferenceMinWidth,
+    });
     useEffect(() => {
         const element = underlayRef.current;
         if (!visible && element != null) {
@@ -137,19 +106,15 @@ export const Popover = memo(({ children, id, label, role = "dialog", describedBy
     if (mode === "BottomPanel") {
         return (_jsx(BottomPanel, { visible: visible, onPressClose: onDismiss, returnFocus: false, children: typeof children == "function" ? children({ mode: "panel" }) : children }));
     }
-    return (_jsxs(Portal, { container: rootElement, children: [visible && underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, "aria-label": "Close" })) : null, _jsx(TransitionView, { style: styles.container, ...animation, children: visible ? (_jsx(View, { style: styles.contents, children: availableHeight > 0 ? (_jsx(ScrollView, { style: [
-                            styles.popover,
-                            (field || availableSpaceAbove <= availableSpaceBelow) && { top },
-                            !field && availableSpaceAbove > availableSpaceBelow && { bottom },
-                            availableSpaceBefore <= availableSpaceAfter && { left },
-                            availableSpaceBefore > availableSpaceAfter && { right },
-                            matchReferenceMinWidth && { minWidth: width },
-                            matchReferenceWidth && { width },
-                            { maxHeight: field ? undefined : availableHeight },
-                        ], contentContainerStyle: [
-                            styles.popoverContents,
+    return (_jsxs(Portal, { container: rootElement, children: [visible && underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, "aria-label": "Close" })) : null, _jsx(TransitionView, { style: styles.container, ...animation, children: position.isSome() ? (_jsx(View, { style: position.get().rootStyle, children: _jsx(View, { style: [
+                            styles.popoverContainer,
+                            position.get().style,
                             {
-                                justifyContent: !field && availableSpaceAbove > availableSpaceBelow ? FLEX_END : FLEX_START,
+                                alignItems: match(position.get().horizontalPosition)
+                                    .with("left", () => "flex-start")
+                                    .with("center", () => "center")
+                                    .with("right", () => "flex-end")
+                                    .exhaustive(),
                             },
-                        ], id: id, role: role, "aria-describedby": describedBy, "aria-label": label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onEscapeKey, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { tabIndex: -1, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) })) : null })) : null })] }));
+                        ], children: _jsx(ScrollView, { style: styles.popover, contentContainerStyle: styles.popoverContents, id: id, role: role, "aria-describedby": describedBy, "aria-label": label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onEscapeKey, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { tabIndex: -1, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) }) }) })) : null })] }));
 });

package/src/components/Pressable.d.ts

@@ -190,8 +190,8 @@ export declare const PressableTextInput: FC<{
     role?: import("react-native").WebRole | undefined;
     lang?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "name" | "email" | "off" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
-    enterKeyHint?: "enter" | "search" | "done" | "next" | "go" | "send" | "previous" | undefined;
+    autoComplete?: "name" | "off" | "email" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
     rows?: number | undefined;
     readOnly?: boolean | undefined;
     hitSlop?: import("react-native").Insets | undefined;

package/src/components/QuickActions.js

@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
 export const QuickActions = ({ actions }) => {
     return (_jsx(View, { style: styles.container, children: actions.map((action, index) => {
             var _a, _b;
-            return (_jsx(LakeTooltip, { content: action.tooltipText, placement: "top", containerStyle: styles.actionContainer, disabled: action.tooltipDisabled === true || isNullishOrEmpty(action.tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, action.disabled === true && styles.disabled], disabled: action.isLoading === true || action.disabled === true, children: [_jsx(View, { style: [
+            return (_jsx(LakeTooltip, { content: action.tooltipText, placement: "right", containerStyle: styles.actionContainer, disabled: action.tooltipDisabled === true || isNullishOrEmpty(action.tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, action.disabled === true && styles.disabled], disabled: action.isLoading === true || action.disabled === true, children: [_jsx(View, { style: [
                                 styles.icon,
                                 action.backgroundColor != null
                                     ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }

package/src/components/RightPanel.js

@@ -13,6 +13,7 @@ const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
 const styles = StyleSheet.create({
     root: {
         ...StyleSheet.absoluteFillObject,
+        position: "fixed",
     },
     inert: {
         pointerEvents: "none",

package/src/components/Svg.d.ts

@@ -110,6 +110,10 @@ type TspanProps = CommonProps & {
     x?: number;
     y?: number;
 };
+type PolygonProps = CommonProps & {
+    points: string;
+    fill?: string;
+};
 export declare const Svg: ({ style, ...props }: SvgProps) => import("react").ReactElement<{
     style: ({
         display: "flex";
@@ -134,6 +138,7 @@ export declare const Use: (props: UseProps) => import("react").ReactElement<UseP
 export declare const Mask: (props: CommonProps) => import("react").ReactElement<CommonProps, string | import("react").JSXElementConstructor<any>>;
 export declare const Text: (props: TextProps) => import("react").ReactElement<TextProps, string | import("react").JSXElementConstructor<any>>;
 export declare const Tspan: (props: TspanProps) => import("react").ReactElement<TspanProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Polygon: (props: PolygonProps) => import("react").ReactElement<PolygonProps, string | import("react").JSXElementConstructor<any>>;
 export declare const Image: (props: ImageProps) => import("react").ReactElement<ImageProps, string | import("react").JSXElementConstructor<any>>;
 export declare const RadialGradient: (props: RadialGradientProps) => import("react").ReactElement<RadialGradientProps, string | import("react").JSXElementConstructor<any>>;
 export declare const Path: (props: PathProps) => import("react").ReactElement<PathProps, string | import("react").JSXElementConstructor<any>>;

package/src/components/Svg.js

@@ -15,6 +15,7 @@ export const Use = (props) => createElement("use", props);
 export const Mask = (props) => createElement("mask", props);
 export const Text = (props) => createElement("text", props);
 export const Tspan = (props) => createElement("tspan", props);
+export const Polygon = (props) => createElement("polygon", props);
 export const Image = (props) => createElement("image", props);
 export const RadialGradient = (props) => createElement("radialGradient", props);
 export const Path = (props) => createElement("path", props);

package/src/hooks/useContextualLayer.d.ts

@@ -0,0 +1,37 @@
+import { Option } from "@swan-io/boxed";
+import { MutableRefObject } from "react";
+import { Text, View, ViewStyle } from "react-native";
+export type ElementPosition = {
+    availableSpaceAbove: number;
+    availableSpaceBelow: number;
+    availableSpaceBefore: number;
+    availableSpaceAfter: number;
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    availableHeight: number;
+    availableWidth: number;
+    width: number;
+    height: number;
+};
+type Placement = "left" | "center" | "right";
+type Config = {
+    placement?: Placement;
+    visible: boolean;
+    matchReferenceWidth?: boolean;
+    matchReferenceMinWidth?: boolean;
+    referenceRef?: MutableRefObject<View | Text | null>;
+};
+export type ContextualLayerPosition = {
+    rootStyle: ViewStyle;
+    style: ViewStyle;
+    verticalPosition: "top" | "bottom";
+    horizontalPosition: "left" | "center" | "right";
+};
+type ContextualLayerConfig = {
+    referenceRef: MutableRefObject<View | Text | null>;
+    position: Option<ContextualLayerPosition>;
+};
+export declare const useContextualLayer: ({ placement, visible, matchReferenceWidth, matchReferenceMinWidth, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
+export {};

package/src/hooks/useContextualLayer.js

@@ -0,0 +1,81 @@
+import { Option } from "@swan-io/boxed";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { match } from "ts-pattern";
+export const useContextualLayer = ({ placement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
+    const referenceRef = useRef(null);
+    const usedRef = externalReferenceRef !== null && externalReferenceRef !== void 0 ? externalReferenceRef : referenceRef;
+    const [position, setPosition] = useState(Option.None());
+    const getPosition = useCallback(() => {
+        if (usedRef.current == null) {
+            return Option.None();
+        }
+        const element = usedRef.current;
+        const rect = element.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const availableSpaceAbove = rect.top;
+        const availableSpaceBelow = viewportHeight - rect.bottom;
+        const availableSpaceBefore = rect.left;
+        const availableSpaceAfter = viewportWidth - rect.right;
+        const height = rect.bottom - rect.top;
+        const width = rect.right - rect.left;
+        const inferedPlacement = placement !== null && placement !== void 0 ? placement : (availableSpaceBefore > availableSpaceAfter ? "right" : "left");
+        const verticalPosition = availableSpaceAbove > availableSpaceBelow
+            ? {
+                maxHeight: availableSpaceAbove,
+                bottom: viewportHeight - rect.top,
+            }
+            : {
+                maxHeight: availableSpaceBelow,
+                top: rect.top + height,
+            };
+        const horizontalPosition = match(inferedPlacement)
+            .with("left", () => ({ left: rect.left }))
+            .with("right", () => ({ right: window.innerWidth - rect.right }))
+            .with("center", () => ({ left: rect.left + width / 2, transform: "translateX(-50%)" }))
+            .exhaustive();
+        const maxHeight = availableSpaceAbove <= availableSpaceBelow
+            ? window.innerHeight - rect.top - height
+            : availableSpaceAbove;
+        const rootStyle = {
+            position: "absolute",
+            top: window.scrollY,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            pointerEvents: "none",
+        };
+        const style = {
+            ...verticalPosition,
+            ...horizontalPosition,
+            maxHeight,
+            ...(matchReferenceWidth === true ? { width } : undefined),
+            ...(matchReferenceMinWidth === true ? { minWidth: width } : undefined),
+            pointerEvents: "auto",
+        };
+        return Option.Some({
+            rootStyle,
+            horizontalPosition: inferedPlacement,
+            verticalPosition: availableSpaceAbove > availableSpaceBelow ? "top" : "bottom",
+            style,
+        });
+    }, [placement, matchReferenceWidth, matchReferenceMinWidth, usedRef]);
+    useEffect(() => {
+        if (visible) {
+            setPosition(getPosition());
+            const tick = () => {
+                setPosition(getPosition());
+                animationFrame = requestAnimationFrame(tick);
+            };
+            let animationFrame = requestAnimationFrame(tick);
+            return () => cancelAnimationFrame(animationFrame);
+        }
+        else {
+            setPosition(Option.None());
+        }
+    }, [visible, getPosition]);
+    return {
+        referenceRef: usedRef,
+        position,
+    };
+};

package/src/utils/popper.d.ts

@@ -1,3 +1 @@
-import { Modifier } from "react-popper";
 export declare const getRootElement: (element: Element | null) => Element | null;
-export declare const matchReferenceWidthModifier: Modifier<"matchReferenceWidth">;

package/src/utils/popper.js

@@ -12,19 +12,3 @@ export const getRootElement = (element) => {
     }
     return null;
 };
-export const matchReferenceWidthModifier = {
-    name: "matchReferenceWidth",
-    requires: ["computeStyles"],
-    enabled: false,
-    phase: "beforeWrite",
-    fn({ state }) {
-        if (state.styles.popper) {
-            state.styles.popper.width = state.rects.reference.width.toString() + "px";
-        }
-    },
-    effect({ state }) {
-        if (state.elements.reference instanceof HTMLElement) {
-            state.elements.popper.style.width = state.elements.reference.offsetWidth.toString() + "px";
-        }
-    },
-};