@swan-io/lake 1.0.0

package/src/components/MultilineInput.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useId } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { isNotNullish } from "../utils/nullish";
+import { InputError } from "./InputError";
+import { Label } from "./Label";
+import { PressableTextInput } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        ...typography.bodyLarge,
+        backgroundColor: colors.white,
+        borderColor: colors.gray[10],
+        borderRadius: 4,
+        borderWidth: 1,
+        flexGrow: 1,
+        flexShrink: 1,
+        maxWidth: "100%",
+        minHeight: 128,
+        outlineStyle: "none",
+        padding: 16,
+        placeholderTextColor: colors.gray[30],
+        resize: "vertical",
+        transitionProperty: ["border-color", "box-shadow"],
+        transitionDuration: "150ms",
+    },
+    focused: {
+        borderColor: colors.gray[30],
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.12,
+        shadowOffset: { height: 0, width: 0 },
+        shadowRadius: 2,
+    },
+    hovered: {
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.06,
+        shadowOffset: { height: 4, width: 0 },
+        shadowRadius: 8,
+    },
+    errored: {
+        borderColor: colors.red[100],
+        paddingRight: 48,
+    },
+});
+export const MultilineInput = memo(forwardRef(({ disabled = false, error, label, onBlur, onSubmitEditing, onValueChange, placeholder, readOnly = false, value = "", }, forwardedRef) => {
+    const id = `input-${useId()}`;
+    return (_jsxs(View, { children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Space, { height: 8 }), _jsx(PressableTextInput, { nativeID: id, ref: forwardedRef, allowFontScaling: false, autoComplete: "off", editable: !readOnly && !disabled, multiline: true, onBlur: onBlur, onChangeText: onValueChange, onSubmitEditing: onSubmitEditing, placeholder: placeholder, value: value, style: ({ hovered, focused }) => [
+                    styles.base,
+                    focused ? styles.focused : hovered && styles.hovered,
+                    isNotNullish(error) && styles.errored,
+                ] }), _jsx(InputError, { message: error })] }));
+}));
+MultilineInput.displayName = "MultilineInput";

package/src/components/Picker.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+type Props<V, I extends {
+    value: V;
+}> = {
+    value: V;
+    items: I[];
+    onValueChange: (item: V) => void;
+    renderItem: (item: I) => ReactNode | null;
+    renderValue?: (item: I) => ReactNode | null;
+    itemHeight?: number;
+    describedBy?: string;
+    size?: "large" | "small";
+    label?: string | (() => ReactNode);
+    info?: ReactNode;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    pickerStyle?: StyleProp<ViewStyle>;
+    hideErrorMessage?: boolean;
+};
+export declare const Picker: (<V, I extends {
+    value: V;
+}>(props: Props<V, I>) => JSX.Element | null) & {
+    displayName?: string | undefined;
+};
+export {};

package/src/components/Picker.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo as reactMemo, useMemo, useRef } from "react";
+import isEqual from "react-fast-compare";
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { colors } from "../constants/colors";
+import { commonStyles } from "../constants/commonStyles";
+import { typography } from "../constants/typography";
+import { useBoolean } from "../hooks/useBoolean";
+import { Fill } from "./Fill";
+import { Icon } from "./Icon";
+import { InputError } from "./InputError";
+import { Label } from "./Label";
+import { Popover } from "./Popover";
+import { Space } from "./Space";
+const ELEMENT_HEIGHT = 48;
+const styles = StyleSheet.create({
+    base: {
+        alignItems: "center",
+        backgroundColor: colors.white,
+        borderColor: colors.gray[10],
+        borderRadius: 4,
+        borderWidth: 1,
+        flexDirection: "row",
+        flexGrow: 1,
+        flexShrink: 1,
+        height: 48,
+        outlineStyle: "none",
+        paddingHorizontal: 16,
+        transitionDuration: "150ms",
+        transitionProperty: ["border-color", "box-shadow"],
+    },
+    small: {
+        height: 40,
+    },
+    focused: {
+        borderColor: colors.gray[20],
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.12,
+        shadowOffset: { height: 0, width: 0 },
+        shadowRadius: 2,
+    },
+    hovered: {
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.06,
+        shadowOffset: { height: 4, width: 0 },
+        shadowRadius: 8,
+    },
+    disabled: {
+        backgroundColor: colors.gray[3],
+        borderColor: colors.gray[3],
+        cursor: "not-allowed",
+    },
+    list: {
+        maxHeight: ELEMENT_HEIGHT * 4.5,
+        backgroundColor: colors.white,
+        borderRadius: 4,
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.12,
+        shadowOffset: { height: 6, width: 0 },
+        shadowRadius: 24,
+    },
+    item: {
+        alignItems: "center",
+        flexDirection: "row",
+        flexGrow: 1,
+        flexShrink: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 0,
+        transitionProperty: "background-color",
+        transitionDuration: "200ms",
+    },
+    hoveredItem: {
+        backgroundColor: colors.gray[3],
+    },
+    pressedItem: {
+        backgroundColor: colors.gray[10],
+    },
+    itemText: {
+        ...typography.bodyLarge,
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+const memo = reactMemo;
+export const Picker = memo(({ value, items, onValueChange, renderItem, renderValue = renderItem, itemHeight = ELEMENT_HEIGHT, describedBy, size = "large", label = "", info = "", disabled = false, style, pickerStyle, hideErrorMessage = false, }) => {
+    const buttonRef = useRef(null);
+    const [visible, setVisible] = useBoolean(false);
+    const selectedItem = items.find(item => item.value === value);
+    const selectedRendered = selectedItem ? renderValue(selectedItem) : undefined;
+    const getItemLayout = useMemo(() => (data, index) => ({
+        length: itemHeight,
+        offset: itemHeight * index,
+        index,
+    }), [itemHeight]);
+    return (_jsxs(View, { style: style, children: [typeof label === "function"
+                ? label()
+                : label !== "" && (_jsxs(_Fragment, { children: [_jsx(Label, { children: label }), _jsx(Space, { height: 8 })] })), _jsxs(Pressable, { ref: buttonRef, accessibilityRole: "button", disabled: disabled, onPress: setVisible.toggle, style: ({ hovered, focused }) => [
+                    styles.base,
+                    size === "small" && styles.small,
+                    pickerStyle,
+                    focused || visible ? styles.focused : hovered && styles.hovered,
+                    disabled && styles.disabled,
+                ], children: [selectedItem ? (_jsx(View, { style: commonStyles.fill, children: isReactText(selectedRendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: selectedRendered })) : (selectedRendered) })) : (_jsx(Fill, {})), !disabled && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Icon, { name: visible ? "chevron-up-filled" : "chevron-down-filled", color: colors.gray[30], size: 18 })] }))] }), info !== "" && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(View, { children: info })] })), !hideErrorMessage && _jsx(InputError, {}), _jsx(Popover, { referenceRef: buttonRef, matchReferenceWidth: true, describedBy: describedBy, visible: visible, onDismiss: setVisible.toggle, children: _jsx(FlatList, { getItemLayout: getItemLayout, accessibilityRole: "list", data: items, style: styles.list, keyExtractor: item => `option-${item.value}`, renderItem: ({ item }) => {
+                        const selected = item.value === value;
+                        const rendered = renderItem(item);
+                        return (_jsxs(Pressable, { accessibilityRole: "listitem", accessibilitySelected: selected, style: ({ hovered, pressed }) => [
+                                styles.item,
+                                (hovered || selected) && styles.hoveredItem,
+                                pressed && styles.pressedItem,
+                                { height: itemHeight },
+                            ], onPress: () => {
+                                onValueChange(item.value);
+                                setVisible.toggle();
+                            }, children: [isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered), selected && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 16 }), _jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20 })] }))] }));
+                    } }) })] }));
+}, isEqual);
+Picker.displayName = "Picker";

package/src/components/PlainListView.d.ts

@@ -0,0 +1,36 @@
+import { ReactElement, ReactNode } from "react";
+import { PressableStateCallbackType } from "react-native";
+import { ColumnCellConfig, ColumnTitleConfig, LinkConfig } from "./FixedListView";
+export type ColumnConfig<T, ExtraInfo> = {
+    id: string;
+    width: number | "grow";
+    title: string;
+    renderTitle: (props: ColumnTitleConfig<ExtraInfo>) => ReactNode;
+    renderCell: (props: ColumnCellConfig<T, ExtraInfo>) => ReactNode;
+};
+type Props<T, ExtraInfo> = {
+    data: T[];
+    keyExtractor: (item: T, index: number) => string;
+    highlightedRowId?: string;
+    headerHeight: number;
+    rowHeight: number;
+    groupHeaderHeight: number;
+    extraInfo: ExtraInfo;
+    columns: ColumnConfig<T, ExtraInfo>[];
+    smallColumns?: ColumnConfig<T, ExtraInfo>[];
+    onEndReached?: () => void;
+    onEndReachedThresholdPx?: number;
+    getRowLink?: (config: LinkConfig<T, ExtraInfo>) => ReactElement<{
+        children: (state: PressableStateCallbackType) => React.ReactNode;
+    }>;
+    renderEmptyList?: () => ReactNode;
+    groupBy?: (item: T) => string;
+    onActiveRowChange?: (element: HTMLElement) => void;
+    activeRowId?: string;
+    loading?: {
+        isLoading: boolean;
+        count: number;
+    };
+};
+export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, }: Props<T, ExtraInfo>) => JSX.Element;
+export {};

package/src/components/PlainListView.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, Fragment, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+import { backgroundColor, breakpoints, colors, spacings } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { PlainListViewPlaceholder, } from "./FixedListView";
+import { LakeHeading } from "./LakeHeading";
+import { ResponsiveContainer } from "./ResponsiveContainer";
+const INHERIT = "inherit";
+const styles = StyleSheet.create({
+    root: {
+        height: 1,
+        alignSelf: "stretch",
+        flexGrow: 1,
+        backgroundColor: backgroundColor.default,
+    },
+    container: {
+        height: 1,
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    contentContainer: {
+        flexDirection: "column",
+        alignItems: "stretch",
+        flexGrow: 1,
+    },
+    segment: {
+        flexDirection: "row",
+        alignItems: "stretch",
+        overflow: "hidden",
+        paddingHorizontal: spacings[8],
+    },
+    segmentLarge: {
+        paddingHorizontal: spacings[24],
+    },
+    row: {
+        boxShadow: `inset 0 -1px ${colors.gray[100]}`,
+    },
+    activeRow: {
+        backgroundColor: backgroundColor.accented,
+    },
+    hoveredRow: {
+        backgroundColor: backgroundColor.accented,
+    },
+    segmentHeaderCell: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    stickyHeader: {
+        position: "sticky",
+        top: 0,
+        backgroundColor: backgroundColor.default90Transparency,
+        backdropFilter: "blur(4px)",
+        zIndex: 10,
+        paddingHorizontal: spacings[24],
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    stickyHeaderLarge: {
+        paddingHorizontal: spacings[40],
+    },
+    loadingPlaceholder: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+    },
+    rowLink: {
+        color: INHERIT,
+        textDecorationLine: "none",
+    },
+    emptyListContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacings[48],
+        backgroundColor: backgroundColor.default,
+    },
+});
+const ONE = 1;
+const ZERO = 0;
+const Row = ({ id, item, index, rowHeight, columns, extraInfo, isActive, isHovered, large, onMouseEnter, onMouseLeave, }) => {
+    const containerRef = useRef(null);
+    useHover(containerRef, {
+        onHoverStart: () => onMouseEnter(id),
+        onHoverEnd: () => onMouseLeave(),
+    });
+    return (_jsx(View, { ref: containerRef, style: [
+            styles.segment,
+            large && styles.segmentLarge,
+            styles.row,
+            isActive && styles.activeRow,
+            isHovered && styles.hoveredRow,
+            { minHeight: rowHeight },
+        ], children: columns.map(({ width, id: columnId, renderCell }) => (_jsx(View, { style: [
+                styles.segmentHeaderCell,
+                {
+                    width: typeof width === "number" ? width : ONE,
+                    flexGrow: width === "grow" ? ONE : ZERO,
+                },
+            ], nativeID: columnId, children: renderCell({ columnId, item, index, extraInfo, isHovered }) }, columnId))) }));
+};
+export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns = columns, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, }) => {
+    const viewId = useId();
+    const groups = useMemo(() => {
+        if (groupBy == null) {
+            return new Map([[null, originalData]]);
+        }
+        const map = new Map();
+        originalData.forEach(item => {
+            const key = groupBy(item);
+            map.set(key, [...(map.get(key) ?? []), item]);
+        });
+        return map;
+    }, [groupBy, originalData]);
+    const totalHeight = rowHeight * originalData.length + groups.size * groupHeaderHeight;
+    const isLoading = isNotNullish(loading) && loading.isLoading;
+    const hasEndReachedBeenCalled = useRef(false);
+    const lastKnownHeight = useRef(0);
+    const [hoveredRow, setHoveredRow] = useState(undefined);
+    const removeHoveredRow = useCallback(() => {
+        setHoveredRow(undefined);
+    }, []);
+    const onLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => {
+        lastKnownHeight.current = height;
+        if (isNotNullish(onEndReached) &&
+            !hasEndReachedBeenCalled.current &&
+            height >= totalHeight - onEndReachedThresholdPx) {
+            hasEndReachedBeenCalled.current = true;
+            onEndReached();
+        }
+    }, [onEndReached, onEndReachedThresholdPx, totalHeight]);
+    useEffect(() => {
+        if (isNotNullish(onEndReached) &&
+            !hasEndReachedBeenCalled.current &&
+            lastKnownHeight.current >= totalHeight - onEndReachedThresholdPx) {
+            hasEndReachedBeenCalled.current = true;
+            onEndReached();
+            return;
+        }
+        hasEndReachedBeenCalled.current = false;
+    }, [originalData, onEndReached, onEndReachedThresholdPx, totalHeight]);
+    const onScroll = useCallback(({ nativeEvent: { contentOffset: { y }, layoutMeasurement: { height }, contentSize: { height: contentHeight }, }, }) => {
+        lastKnownHeight.current = height;
+        if (isNotNullish(onEndReached) &&
+            !hasEndReachedBeenCalled.current &&
+            y + height >= contentHeight - onEndReachedThresholdPx) {
+            hasEndReachedBeenCalled.current = true;
+            onEndReached();
+        }
+    }, [onEndReached, onEndReachedThresholdPx]);
+    const createRowWrapper = useCallback(({ item, absoluteIndex, extraInfo, }) => {
+        const customLinkElement = getRowLink?.({ item, index: absoluteIndex, extraInfo });
+        return isNullish(customLinkElement) ? _jsx(View, {}) : customLinkElement;
+    }, [getRowLink]);
+    const activeItemRef = useRef(null);
+    useEffect(() => {
+        const ref = activeItemRef.current;
+        if (activeRowId != null && ref != null) {
+            const element = ref;
+            element.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            onActiveRowChange?.(element);
+        }
+    }, [activeRowId, onActiveRowChange]);
+    return (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.large, children: ({ large }) => {
+            const displayColumns = large ? columns : smallColumns;
+            return (_jsxs(_Fragment, { children: [large ? (_jsx(View, { style: [styles.segment, large && styles.segmentLarge], children: displayColumns.map(({ id, width, title, renderTitle }) => {
+                            const columnId = `${viewId}_${id}`;
+                            return (_jsx(View, { style: [
+                                    styles.segmentHeaderCell,
+                                    {
+                                        width: typeof width === "number" ? width : ONE,
+                                        flexGrow: width === "grow" ? ONE : ZERO,
+                                        height: headerHeight,
+                                    },
+                                ], nativeID: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                        }) })) : null, _jsxs(ScrollView, { scrollEventThrottle: 32, style: styles.container, onLayout: onLayout, onScroll: onScroll, contentContainerStyle: [
+                            styles.contentContainer,
+                            {
+                                minHeight: totalHeight + (isLoading ? loading.count * rowHeight : 0),
+                            },
+                        ], children: [Array.from(groups.entries()).map(([groupName, items]) => {
+                                return (_jsxs(Fragment, { children: [groupName != null ? (_jsx(View, { style: [
+                                                styles.stickyHeader,
+                                                large && styles.stickyHeaderLarge,
+                                                { height: groupHeaderHeight },
+                                            ], children: _jsx(LakeHeading, { level: 3, variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
+                                            const key = keyExtractor(item, index);
+                                            const isActive = activeRowId === key;
+                                            const isHovered = hoveredRow === key;
+                                            const wrapper = createRowWrapper({ item, absoluteIndex: index, extraInfo });
+                                            return cloneElement(wrapper, {
+                                                style: { ...styles.rowLink, ...wrapper.props.style },
+                                                key: index,
+                                                ref: isActive ? activeItemRef : null,
+                                                children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
+                                            });
+                                        })] }, groupName));
+                            }), _jsx(View, { children: _jsx(View, { accessibilityBusy: isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) })] }), originalData.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null] }));
+        } }));
+};

package/src/components/Popover.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, RefObject } from "react";
+type Props = {
+    children: ReactNode | ((state: {
+        mode: "dropdown" | "panel";
+    }) => ReactNode);
+    id?: string;
+    label?: string;
+    role?: "listbox" | "combobox" | "dialog";
+    describedBy?: string;
+    matchReferenceWidth?: boolean;
+    matchReferenceMinWidth?: boolean;
+    onDismiss: () => void;
+    referenceRef: RefObject<unknown>;
+    returnFocus?: boolean;
+    autoFocus?: boolean;
+    visible: boolean;
+    underlay?: boolean;
+    safetyMargin?: number;
+    forcedMode?: "Dropdown" | "BottomPanel";
+};
+export declare const VIEWPORT_WIDTH_THRESHOLD = 600;
+export declare const Popover: import("react").NamedExoticComponent<Props>;
+export {};

package/src/components/Popover.js

@@ -0,0 +1,147 @@
+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 { useResponsive } from "../hooks/useResponsive";
+import { BottomPanel } from "./BottomPanel";
+import { FocusTrap } from "./FocusTrap";
+import { Portal } from "./Portal";
+import { TransitionView } from "./TransitionView";
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    contents: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    defaultCursor: {
+        cursor: "default",
+    },
+    underlay: {
+        cursor: "default",
+        position: "fixed",
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+    },
+    popover: {
+        position: "absolute",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[8],
+        marginVertical: 4,
+        overflow: "hidden",
+        boxShadow: shadows.modal,
+    },
+    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: StyleSheet.compose([animations.fadeAndSlideInFromBottom.leave], {
+        animationDuration: "100ms",
+    }),
+};
+export const VIEWPORT_WIDTH_THRESHOLD = 600;
+export const Popover = memo(({ children, id, label, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, safetyMargin = 8, 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(() => {
+        const element = referenceRef.current;
+        if (element != null && visible) {
+            const rect = element.getBoundingClientRect();
+            const availableSpaceAbove = rect.top;
+            const availableSpaceBelow = window.innerHeight - rect.bottom;
+            setViewportInformation({
+                availableSpaceAbove,
+                availableSpaceBelow,
+                availableSpaceBefore: rect.left,
+                availableSpaceAfter: window.innerWidth - rect.right,
+                top: Math.max(rect.bottom, safetyMargin),
+                bottom: Math.max(window.innerHeight - rect.top, safetyMargin),
+                left: Math.max(rect.left, safetyMargin),
+                right: Math.max(window.innerWidth - rect.right, safetyMargin),
+                availableHeight: availableSpaceAbove <= availableSpaceBelow
+                    ? window.innerHeight - rect.top - (rect.bottom - rect.top) - 20
+                    : availableSpaceAbove - 20,
+                width: rect.right - rect.left,
+            });
+        }
+    }, [safetyMargin, referenceRef, visible]);
+    useEffect(() => {
+        const element = underlayRef.current;
+        if (!visible && element != null) {
+            element.style.pointerEvents = "none";
+        }
+    }, [visible]);
+    useEffect(() => {
+        const element = document.createElement("div");
+        document.body.append(element);
+        setRootElement(element);
+        return () => {
+            setRootElement(null);
+            element.remove();
+        };
+    }, []);
+    const onPressUnderlay = useCallback((event) => {
+        event.preventDefault();
+        onDismiss();
+    }, [onDismiss]);
+    const onClickOutside = useCallback(({ target }) => {
+        const ref = referenceRef.current;
+        if (!(ref instanceof Element) ||
+            !(target instanceof Element) ||
+            (ref !== target && !ref.contains(target))) {
+            onDismiss();
+        }
+    }, [referenceRef, onDismiss]);
+    const onPress = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    if (rootElement == null) {
+        return null;
+    }
+    const mode = match(forcedMode)
+        .with(P.nullish, () => (desktop ? "Dropdown" : "BottomPanel"))
+        .with("BottomPanel", () => "BottomPanel")
+        .with("Dropdown", () => "Dropdown")
+        .exhaustive();
+    if (mode === "BottomPanel") {
+        return (_jsx(BottomPanel, { visible: visible, onPressClose: onDismiss, returnFocus: false, children: typeof children == "function" ? children({ mode: "panel" }) : children }));
+    }
+    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionView, { pointerEvents: "none", style: styles.container, ...animation, children: visible ? (_jsxs(View, { style: styles.contents, children: [underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, accessibilityRole: "button", accessibilityLabel: "Close", pointerEvents: "auto" })) : null, availableHeight > 0 ? (_jsx(ScrollView, { pointerEvents: "auto", style: [
+                            styles.popover,
+                            availableSpaceAbove <= availableSpaceBelow && { top },
+                            availableSpaceAbove > availableSpaceBelow && { bottom },
+                            availableSpaceBefore <= availableSpaceAfter && { left },
+                            availableSpaceBefore > availableSpaceAfter && { right },
+                            matchReferenceMinWidth && { minWidth: width },
+                            matchReferenceWidth && { width },
+                            { maxHeight: availableHeight },
+                        ], contentContainerStyle: [
+                            styles.popoverContents,
+                            {
+                                justifyContent: availableSpaceAbove > availableSpaceBelow ? FLEX_END : FLEX_START,
+                            },
+                        ], nativeID: id, accessibilityRole: role, accessibilityDescribedBy: describedBy, accessibilityLabel: label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onDismiss, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { focusable: false, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) })) : null] })) : null }) }));
+});

package/src/components/PopoverContent.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const PopoverContent: ({ style, children }: Props) => JSX.Element;
+export {};

package/src/components/PopoverContent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+        padding: 20,
+    },
+});
+export const PopoverContent = ({ style, children }) => (_jsx(View, { style: [styles.container, style], children: children }));

package/src/components/Portal.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    container: Element;
+};
+export declare const Portal: ({ children, container }: Props) => import("react").ReactPortal;
+export {};

package/src/components/Portal.js

@@ -0,0 +1,9 @@
+import { useContext, useRef } from "react";
+import * as ReactDOM from "react-dom";
+import { CurrentColorContext, useCurrentColor } from "./WithCurrentColor";
+export const Portal = ({ children, container }) => {
+    const currentColor = useContext(CurrentColorContext);
+    const containerRef = useRef(container);
+    useCurrentColor(containerRef, currentColor);
+    return ReactDOM.createPortal(children, container);
+};