@tamagui/popover 1.0.1-beta.21 → 1.0.1-beta.211

package/dist/esm/Popover.js

@@ -1,17 +1,21 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
 import "@tamagui/polyfill-dev";
-import {
-  useDismiss,
-  useFloating,
-  useFocus,
-  useInteractions,
-  useRole
-} from "@floating-ui/react-dom-interactions";
 import { AnimatePresence } from "@tamagui/animate-presence";
+import { hideOthers } from "@tamagui/aria-hidden";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import { composeEventHandlers, useId, withStaticProperties } from "@tamagui/core";
+import {
+  Theme,
+  composeEventHandlers,
+  isWeb,
+  useEvent,
+  useGet,
+  useId,
+  useMedia,
+  useThemeName,
+  withStaticProperties
+} from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
+import { FocusScope } from "@tamagui/focus-scope";
 import {
   FloatingOverrideContext,
   Popper,
@@ -20,10 +24,14 @@ import {
   PopperContent,
   createPopperScope
 } from "@tamagui/popper";
-import { Portal } from "@tamagui/portal";
+import { Portal, PortalHost, PortalItem } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { ControlledSheet, SheetController } from "@tamagui/sheet";
 import { YStack } from "@tamagui/stacks";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
+import { ScrollView } from "react-native";
+import { useDismiss, useFloating, useFocus, useInteractions, useRole } from "./floating";
 const POPOVER_NAME = "Popover";
 const [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [
   createPopperScope
@@ -33,232 +41,326 @@ const createPopoverScope = createPopoverScopeInternal;
 const [PopoverProviderInternal, usePopoverInternalContext] = createPopoverContext(POPOVER_NAME);
 const __PopoverProviderInternal = PopoverProviderInternal;
 const ANCHOR_NAME = "PopoverAnchor";
-const PopoverAnchor = React.forwardRef((props, forwardedRef) => {
-  const { __scopePopover, ...anchorProps } = props;
-  const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover);
-  const popperScope = usePopoverScope(__scopePopover);
-  const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-  React.useEffect(() => {
-    onCustomAnchorAdd();
-    return () => onCustomAnchorRemove();
-  }, [onCustomAnchorAdd, onCustomAnchorRemove]);
-  return /* @__PURE__ */ React.createElement(PopperAnchor, {
-    ...popperScope,
-    ...anchorProps,
-    ref: forwardedRef
-  });
-});
+const PopoverAnchor = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...anchorProps } = props;
+    const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover);
+    const popperScope = usePopoverScope(__scopePopover);
+    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+    React.useEffect(() => {
+      onCustomAnchorAdd();
+      return () => onCustomAnchorRemove();
+    }, [onCustomAnchorAdd, onCustomAnchorRemove]);
+    return /* @__PURE__ */ jsx(PopperAnchor, {
+      ...popperScope,
+      ...anchorProps,
+      ref: forwardedRef
+    });
+  }
+);
 PopoverAnchor.displayName = ANCHOR_NAME;
 const TRIGGER_NAME = "PopoverTrigger";
-const PopoverTrigger = React.forwardRef((props, forwardedRef) => {
-  const { __scopePopover, ...triggerProps } = props;
-  const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover);
-  const popperScope = usePopoverScope(__scopePopover);
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ React.createElement(YStack, {
-    "aria-haspopup": "dialog",
-    "aria-expanded": context.open,
-    "aria-controls": context.contentId,
-    "data-state": getState(context.open),
-    ...triggerProps,
-    ref: composedTriggerRef,
-    onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
-  });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React.createElement(PopperAnchor, {
-    asChild: true,
-    ...popperScope
-  }, trigger);
-});
+const PopoverTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...triggerProps } = props;
+    const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover);
+    const popperScope = usePopoverScope(__scopePopover);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    const trigger = /* @__PURE__ */ jsx(YStack, {
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+    });
+    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(PopperAnchor, {
+      asChild: true,
+      ...popperScope,
+      children: trigger
+    });
+  }
+);
 PopoverTrigger.displayName = TRIGGER_NAME;
 const CONTENT_NAME = "PopoverContent";
-const PopoverContent = React.forwardRef((props, forwardedRef) => {
-  const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
-  return context.modal ? /* @__PURE__ */ React.createElement(PopoverContentModal, {
-    ...props,
-    ref: forwardedRef
-  }) : /* @__PURE__ */ React.createElement(PopoverContentNonModal, {
-    ...props,
-    ref: forwardedRef
-  });
-});
-PopoverContent.displayName = CONTENT_NAME;
-const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
-  const { allowPinchZoom, ...contentModalProps } = props;
-  const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
-  const contentRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, contentRef);
-  const isRightClickOutsideRef = React.useRef(false);
-  const PortalWrapper = context.modal ? Portal : React.Fragment;
-  return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(PopoverContentImpl, {
-    ...contentModalProps,
-    ref: composedRefs,
-    trapFocus: context.open,
-    disableOutsidePointerEvents: true,
-    onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
-      var _a;
-      event.preventDefault();
-      if (!isRightClickOutsideRef.current)
-        (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
-    }),
-    onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
-      console.log("pinter outside", event);
-      const originalEvent = event.detail.originalEvent;
-      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      isRightClickOutsideRef.current = isRightClick;
-    }, { checkDefaultPrevented: false }),
-    onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
-  }));
-});
-const PopoverContentNonModal = React.forwardRef((props, forwardedRef) => {
-  const { ...contentNonModalProps } = props;
-  const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
-  const hasInteractedOutsideRef = React.useRef(false);
-  const PortalWrapper = context.modal ? Portal : React.Fragment;
-  return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(PopoverContentImpl, {
-    ...contentNonModalProps,
-    ref: forwardedRef,
-    trapFocus: false,
-    disableOutsidePointerEvents: false,
-    onCloseAutoFocus: (event) => {
-      var _a, _b;
-      (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented) {
-        if (!hasInteractedOutsideRef.current)
-          (_b = context.triggerRef.current) == null ? void 0 : _b.focus();
-        event.preventDefault();
-      }
-      hasInteractedOutsideRef.current = false;
-    },
-    onInteractOutside: (event) => {
-      var _a, _b;
-      (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented)
-        hasInteractedOutsideRef.current = true;
-      const target = event.target;
-      const targetIsTrigger = (_b = context.triggerRef.current) == null ? void 0 : _b.contains(target);
-      if (targetIsTrigger)
-        event.preventDefault();
+const PopoverContent = React.forwardRef(
+  (props, forwardedRef) => {
+    const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props;
+    const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const isRightClickOutsideRef = React.useRef(false);
+    const themeName = useThemeName();
+    React.useEffect(() => {
+      if (!context.open)
+        return;
+      const content = contentRef.current;
+      if (content)
+        return hideOthers(content);
+    }, [context.open]);
+    return /* @__PURE__ */ jsx(Portal, {
+      zIndex: props.zIndex ?? 1e3,
+      children: /* @__PURE__ */ jsx(Theme, {
+        name: themeName,
+        children: /* @__PURE__ */ jsx(PopoverContentImpl, {
+          ...contentModalProps,
+          disableRemoveScroll,
+          ref: composedRefs,
+          trapFocus: trapFocus ?? context.open,
+          disableOutsidePointerEvents: true,
+          onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+            var _a;
+            event.preventDefault();
+            if (!isRightClickOutsideRef.current)
+              (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+          }),
+          onPointerDownOutside: composeEventHandlers(
+            props.onPointerDownOutside,
+            (event) => {
+              const originalEvent = event.detail.originalEvent;
+              const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+              const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+              isRightClickOutsideRef.current = isRightClick;
+            },
+            { checkDefaultPrevented: false }
+          ),
+          onFocusOutside: composeEventHandlers(
+            props.onFocusOutside,
+            (event) => event.preventDefault(),
+            { checkDefaultPrevented: false }
+          )
+        })
+      })
+    });
+  }
+);
+const PopoverContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopePopover,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      children,
+      disableRemoveScroll,
+      ...contentProps
+    } = props;
+    const popperScope = usePopoverScope(__scopePopover);
+    const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
+    const showSheet = useShowPopoverSheet(context);
+    if (showSheet) {
+      const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {
+        if (React.isValidElement(child)) {
+          if (child.type === PopoverScrollView) {
+            return child.props.children;
+          }
+        }
+        return child;
+      });
+      return /* @__PURE__ */ jsx(PortalItem, {
+        hostName: `${context.scopeKey}SheetContents`,
+        children: childrenWithoutScrollView
+      });
     }
-  }));
-});
-const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopePopover,
-    trapFocus,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    disableOutsidePointerEvents,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    ...contentProps
-  } = props;
-  const context = usePopoverInternalContext(CONTENT_NAME, __scopePopover);
-  const popperScope = usePopoverScope(__scopePopover);
-  return /* @__PURE__ */ React.createElement(AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(PopperContent, {
-    "data-state": getState(context.open),
-    id: context.contentId,
-    pointerEvents: "auto",
-    ...popperScope,
-    ...contentProps,
-    ref: forwardedRef
-  }));
-});
+    return /* @__PURE__ */ jsx(AnimatePresence, {
+      children: !!context.open && /* @__PURE__ */ jsx(PopperContent, {
+        "data-state": getState(context.open),
+        id: context.contentId,
+        pointerEvents: "auto",
+        ...popperScope,
+        ...contentProps,
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(RemoveScroll, {
+          enabled: disableRemoveScroll ? false : context.open,
+          allowPinchZoom: true,
+          removeScrollBar: false,
+          style: {
+            display: "contents"
+          },
+          children: trapFocus === false ? children : /* @__PURE__ */ jsx(FocusScope, {
+            loop: true,
+            trapped: trapFocus ?? context.open,
+            onMountAutoFocus: onOpenAutoFocus,
+            onUnmountAutoFocus: onCloseAutoFocus,
+            children: /* @__PURE__ */ jsx("div", {
+              style: { display: "contents" },
+              children
+            })
+          })
+        })
+      }, "popper-content")
+    });
+  }
+);
 const CLOSE_NAME = "PopoverClose";
-const PopoverClose = React.forwardRef((props, forwardedRef) => {
-  const { __scopePopover, ...closeProps } = props;
-  const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React.createElement(YStack, {
-    ...closeProps,
-    ref: forwardedRef,
-    onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
-  });
-});
+const PopoverClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...closeProps } = props;
+    const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover);
+    return /* @__PURE__ */ jsx(YStack, {
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
+    });
+  }
+);
 PopoverClose.displayName = CLOSE_NAME;
 const ARROW_NAME = "PopoverArrow";
-const PopoverArrow = React.forwardRef((props, forwardedRef) => {
-  const { __scopePopover, ...arrowProps } = props;
-  const popperScope = usePopoverScope(__scopePopover);
-  return /* @__PURE__ */ React.createElement(PopperArrow, {
-    ...popperScope,
-    ...arrowProps,
-    ref: forwardedRef
-  });
-});
+const PopoverArrow = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...arrowProps } = props;
+    const popperScope = usePopoverScope(__scopePopover);
+    return /* @__PURE__ */ jsx(PopperArrow, {
+      ...popperScope,
+      ...arrowProps,
+      ref: forwardedRef
+    });
+  }
+);
 PopoverArrow.displayName = ARROW_NAME;
-const Popover = withStaticProperties((props) => {
-  const {
-    __scopePopover,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    modal = true,
-    ...restProps
-  } = props;
-  const popperScope = usePopoverScope(__scopePopover);
-  const triggerRef = React.useRef(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: onOpenChange
+const SHEET_CONTENTS_NAME = "PopoverSheetContents";
+const PopoverSheetContents = ({ __scopePopover }) => {
+  const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover);
+  return /* @__PURE__ */ jsx(PortalHost, {
+    name: `${context.scopeKey}SheetContents`
+  });
+};
+PopoverSheetContents.displayName = SHEET_CONTENTS_NAME;
+const PopoverScrollView = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(ScrollView, {
+    ref,
+    ...props
   });
-  const useFloatingFn = /* @__PURE__ */ __name((props2) => {
-    const floating = useFloating({
-      ...props2,
-      open,
-      onOpenChange: setOpen
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-      useFocus(floating.context),
-      useRole(floating.context, { role: "dialog" }),
-      useDismiss(floating.context)
-    ]);
-    return {
-      ...floating,
-      getReferenceProps,
-      getFloatingProps
-    };
-  }, "useFloatingFn");
-  const useFloatingContext = React.useCallback(useFloatingFn, [open]);
-  return /* @__PURE__ */ React.createElement(FloatingOverrideContext.Provider, {
-    value: useFloatingContext
-  }, /* @__PURE__ */ React.createElement(Popper, {
-    ...popperScope,
-    ...restProps
-  }, /* @__PURE__ */ React.createElement(PopoverProviderInternal, {
-    scope: __scopePopover,
-    contentId: useId(),
-    triggerRef,
-    open,
-    onOpenChange: setOpen,
-    onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-    hasCustomAnchor,
-    onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
-    modal
-  }, children)));
-}, {
-  Anchor: PopoverAnchor,
-  Arrow: PopoverArrow,
-  Trigger: PopoverTrigger,
-  Content: PopoverContent,
-  Close: PopoverClose
 });
+const Popover = withStaticProperties(
+  (props) => {
+    const {
+      __scopePopover,
+      children,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      sheetBreakpoint = false,
+      ...restProps
+    } = props;
+    const popperScope = usePopoverScope(__scopePopover);
+    const triggerRef = React.useRef(null);
+    const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange: onOpenChange
+    });
+    const breakpointActive = useSheetBreakpointActive(sheetBreakpoint);
+    const useFloatingContext = React.useCallback(
+      (props2) => {
+        const floating = useFloating({
+          ...props2,
+          open,
+          onOpenChange: setOpen
+        });
+        const { getReferenceProps, getFloatingProps } = useInteractions([
+          useFocus(floating.context, {
+            enabled: !breakpointActive
+          }),
+          useRole(floating.context, { role: "dialog" }),
+          useDismiss(floating.context, {
+            enabled: !breakpointActive
+          })
+        ]);
+        return {
+          ...floating,
+          getReferenceProps,
+          getFloatingProps
+        };
+      },
+      [breakpointActive, open, setOpen]
+    );
+    return /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, {
+      value: useFloatingContext,
+      children: /* @__PURE__ */ jsx(Popper, {
+        ...popperScope,
+        stayInFrame: true,
+        ...restProps,
+        children: /* @__PURE__ */ jsx(PopoverProviderInternal, {
+          scope: __scopePopover,
+          scopeKey: __scopePopover ? Object.keys(__scopePopover)[0] : "",
+          sheetBreakpoint,
+          contentId: useId(),
+          triggerRef,
+          open,
+          onOpenChange: setOpen,
+          onOpenToggle: useEvent(() => {
+            if (open && breakpointActive) {
+              return;
+            }
+            setOpen(!open);
+          }),
+          hasCustomAnchor,
+          onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
+          onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
+          children: /* @__PURE__ */ jsx(PopoverSheetController, {
+            onOpenChange: setOpen,
+            __scopePopover,
+            children
+          })
+        })
+      })
+    });
+  },
+  {
+    Anchor: PopoverAnchor,
+    Arrow: PopoverArrow,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Close: PopoverClose,
+    SheetContents: PopoverSheetContents,
+    ScrollView: PopoverScrollView,
+    Sheet: ControlledSheet
+  }
+);
 Popover.displayName = POPOVER_NAME;
 function getState(open) {
   return open ? "open" : "closed";
 }
-__name(getState, "getState");
+const PopoverSheetController = (props) => {
+  const context = usePopoverInternalContext("PopoverSheetController", props.__scopePopover);
+  const showSheet = useShowPopoverSheet(context);
+  const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
+  const getShowSheet = useGet(showSheet);
+  return /* @__PURE__ */ jsx(SheetController, {
+    onOpenChange: (val) => {
+      if (getShowSheet()) {
+        props.onOpenChange(val);
+      }
+    },
+    open: context.open,
+    hidden: breakpointActive === false,
+    children: props.children
+  });
+};
+const useSheetBreakpointActive = (breakpoint) => {
+  const media = useMedia();
+  return breakpoint ? media[breakpoint] : false;
+};
+const useShowPopoverSheet = (context) => {
+  if (!isWeb)
+    return true;
+  const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
+  return context.open === false ? false : breakpointActive;
+};
 export {
   Popover,
   PopoverAnchor,
   PopoverArrow,
   PopoverClose,
   PopoverContent,
+  PopoverSheetContents,
   PopoverTrigger,
   __PopoverProviderInternal,
   createPopoverScope,