@swan-io/lake 13.7.11 → 13.7.13

package/package.json

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

package/src/components/ContextMenu.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { VerticalPlacement } from "../hooks/useContextualLayer";
+type ContextMenuProps = {
+    children: ReactNode;
+    ariaLabel: string;
+    withPill?: boolean;
+    verticalPlacement?: VerticalPlacement;
+};
+export declare const ContextMenu: ({ children, ariaLabel, withPill, verticalPlacement, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+type ContextMenuItemProps = {
+    children: string;
+    withPill?: boolean;
+    onPress: () => void;
+};
+export declare const ContextMenuItem: ({ children, withPill, onPress }: ContextMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/ContextMenu.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors, spacings } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { noop } from "../utils/function";
+import { LakeButton } from "./LakeButton";
+import { LakeText } from "./LakeText";
+import { Popover } from "./Popover";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    container: {
+        minWidth: 120,
+    },
+    menuItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: spacings[24],
+        paddingVertical: spacings[12],
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: colors.negative[500],
+    },
+});
+const ContextMenuContext = createContext({ close: noop });
+export const ContextMenu = ({ children, ariaLabel, withPill = false, verticalPlacement, }) => {
+    const [isOpen, { open, close }] = useDisclosure(false);
+    const triggerRef = useRef(null);
+    return (_jsxs(ContextMenuContext.Provider, { value: { close }, children: [_jsx(LakeButton, { ref: triggerRef, mode: "tertiary", size: "small", icon: "more-horizontal-filled", color: "gray", onPress: open, ariaLabel: ariaLabel, pill: withPill }), _jsx(Popover, { referenceRef: triggerRef, visible: isOpen, onDismiss: close, verticalPlacement: verticalPlacement, children: _jsx(View, { style: styles.container, children: children }) })] }));
+};
+export const ContextMenuItem = ({ children, withPill = false, onPress }) => {
+    const { close } = useContext(ContextMenuContext);
+    return (_jsxs(Pressable, { style: styles.menuItem, onPress: () => {
+            close();
+            onPress();
+        }, children: [_jsx(LakeText, { variant: "regular", color: colors.gray[700], children: children }), withPill ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(View, { style: styles.dot })] })) : null] }));
+};

package/src/components/Popover.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode, RefObject } from "react";
 import { Text, View } from "react-native";
+import { Placement, VerticalPlacement } from "../hooks/useContextualLayer";
 type Props = {
     children: ReactNode | ((state: {
         mode: "dropdown" | "panel";
     }) => ReactNode);
     id?: string;
     label?: string;
-    placement?: "left" | "right" | "center";
+    placement?: Placement;
+    verticalPlacement?: VerticalPlacement;
     role?: "listbox" | "combobox" | "dialog";
     describedBy?: string;
     matchReferenceWidth?: boolean;

package/src/components/Popover.js

@@ -56,12 +56,13 @@ const animation = {
     ],
 };
 export const VIEWPORT_WIDTH_THRESHOLD = 600;
-export const Popover = memo(({ children, id, label, placement, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss = noop, onEscapeKey = onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, forcedMode, }) => {
+export const Popover = memo(({ children, id, label, placement, verticalPlacement, 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 { position } = useContextualLayer({
         placement,
+        verticalPlacement,
         referenceRef,
         visible,
         matchReferenceWidth,

package/src/hooks/useContextualLayer.d.ts

@@ -15,9 +15,11 @@ export type ElementPosition = {
     width: number;
     height: number;
 };
-type Placement = "left" | "center" | "right";
+export type Placement = "left" | "center" | "right";
+export type VerticalPlacement = "above" | "below";
 type Config = {
     placement?: Placement;
+    verticalPlacement?: VerticalPlacement;
     visible: boolean;
     matchReferenceWidth?: boolean;
     matchReferenceMinWidth?: boolean;
@@ -33,5 +35,5 @@ type ContextualLayerConfig = {
     referenceRef: RefObject<View | Text | null>;
     position: Option<ContextualLayerPosition>;
 };
-export declare const useContextualLayer: ({ placement, visible, matchReferenceWidth, matchReferenceMinWidth, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
+export declare const useContextualLayer: ({ placement, verticalPlacement, visible, matchReferenceWidth, matchReferenceMinWidth, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
 export {};

package/src/hooks/useContextualLayer.js

@@ -3,7 +3,7 @@ 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, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
+export const useContextualLayer = ({ placement, verticalPlacement, 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());
@@ -27,7 +27,12 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
             : availableSpaceBefore > availableSpaceAfter
                 ? "right"
                 : "left");
-        const verticalPosition = availableSpaceAbove > availableSpaceBelow
+        const openAbove = verticalPlacement === "above"
+            ? true
+            : verticalPlacement === "below"
+                ? false
+                : availableSpaceAbove > availableSpaceBelow;
+        const verticalPosition = openAbove
             ? {
                 maxHeight: availableSpaceAbove,
                 bottom: viewportHeight - rect.top,
@@ -41,9 +46,7 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
             .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 maxHeight = openAbove ? availableSpaceAbove : window.innerHeight - rect.top - height;
         const rootStyle = {
             position: "absolute",
             top: window.scrollY,
@@ -55,7 +58,8 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
         const maxWidth = match(inferedPlacement)
             .with("left", () => viewportWidth - rect.left - HORIZONTAL_SAFETY_MARGIN)
             .with("right", () => rect.right - HORIZONTAL_SAFETY_MARGIN)
-            .with("center", () => Math.min(availableSpaceBefore + width / 2, availableSpaceAfter + width / 2) * 2 - HORIZONTAL_SAFETY_MARGIN)
+            .with("center", () => Math.min(availableSpaceBefore + width / 2, availableSpaceAfter + width / 2) * 2 -
+            HORIZONTAL_SAFETY_MARGIN)
             .exhaustive();
         const style = {
             ...verticalPosition,
@@ -69,10 +73,10 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
         return Option.Some({
             rootStyle,
             horizontalPosition: inferedPlacement,
-            verticalPosition: availableSpaceAbove > availableSpaceBelow ? "top" : "bottom",
+            verticalPosition: openAbove ? "top" : "bottom",
             style,
         });
-    }, [placement, matchReferenceWidth, matchReferenceMinWidth, usedRef]);
+    }, [placement, verticalPlacement, matchReferenceWidth, matchReferenceMinWidth, usedRef]);
     useEffect(() => {
         if (visible) {
             setPosition(getPosition());