@tamagui/dialog 1.2.8 → 1.2.10

package/dist/esm/Dialog.mjs

@@ -0,0 +1,610 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { hideOthers } from "@tamagui/aria-hidden";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  Theme,
+  composeEventHandlers,
+  isWeb,
+  spacedChildren,
+  styled,
+  useGet,
+  useId,
+  useMedia,
+  useThemeName,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContext, createContextScope } from "@tamagui/create-context";
+import { Dismissable } from "@tamagui/dismissable";
+import { FocusScope } from "@tamagui/focus-scope";
+import { PortalHost, PortalItem } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { ControlledSheet, SheetController } from "@tamagui/sheet";
+import { ThemeableStack, YStack } from "@tamagui/stacks";
+import { H2, Paragraph } from "@tamagui/text";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+const DIALOG_NAME = "Dialog";
+const [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
+const TRIGGER_NAME = "DialogTrigger";
+const DialogTriggerFrame = styled(YStack, {
+  name: TRIGGER_NAME
+});
+const DialogTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ jsx(
+      DialogTriggerFrame,
+      {
+        tag: "button",
+        "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)
+      }
+    );
+  }
+);
+DialogTrigger.displayName = TRIGGER_NAME;
+const PORTAL_NAME = "DialogPortal";
+const [PortalProvider, usePortalContext] = createDialogContext(
+  PORTAL_NAME,
+  {
+    forceMount: void 0
+  }
+);
+const DialogPortalFrame = styled(YStack, {
+  alignItems: "center",
+  justifyContent: "center",
+  fullscreen: true,
+  zIndex: 100,
+  ...isWeb && {
+    maxHeight: "100vh",
+    position: "fixed"
+  }
+});
+const DialogPortalItem = (props) => {
+  const themeName = useThemeName();
+  const context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
+  return /* @__PURE__ */ jsx(PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ jsx(DialogPortalItemContent, { ...props, themeName, context }) });
+};
+function DialogPortalItemContent(props) {
+  const {
+    __scopeDialog,
+    children,
+    context,
+    themeName,
+    space,
+    spaceDirection,
+    separator
+  } = props;
+  let childrenSpaced = children;
+  if (space || separator) {
+    childrenSpaced = spacedChildren({
+      children,
+      separator,
+      space,
+      direction: spaceDirection
+    });
+  }
+  return /* @__PURE__ */ jsx(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ jsx(Theme, { name: themeName, children: childrenSpaced }) });
+}
+const DialogPortal = (props) => {
+  const { __scopeDialog, forceMount, children, ...frameProps } = props;
+  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+  const isShowing = forceMount || context.open;
+  const [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
+  if (isShowing && isFullyHidden) {
+    setIsFullyHidden(false);
+  }
+  const contents = /* @__PURE__ */ jsx(
+    AnimatePresence,
+    {
+      onExitComplete: () => {
+        setIsFullyHidden(true);
+      },
+      children: isShowing ? children : null
+    }
+  );
+  const isSheet = useShowDialogSheet(context);
+  if (isSheet) {
+    return children;
+  }
+  if (context.modal) {
+    if (isFullyHidden) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(DialogPortalItem, { __scopeDialog, children: /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: /* @__PURE__ */ jsx(DialogPortalFrame, { pointerEvents: isShowing ? "auto" : "none", ...frameProps, children: contents }) }) });
+  }
+  return contents;
+};
+DialogPortal.displayName = PORTAL_NAME;
+const OVERLAY_NAME = "DialogOverlay";
+const DialogOverlayFrame = styled(ThemeableStack, {
+  name: OVERLAY_NAME,
+  backgrounded: true,
+  fullscreen: true
+});
+const DialogOverlay = React.forwardRef(
+  ({ __scopeDialog, ...props }, forwardedRef) => {
+    const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
+    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+    const showSheet = useShowDialogSheet(context);
+    if (!forceMount) {
+      if (!context.modal || showSheet) {
+        return null;
+      }
+    }
+    return /* @__PURE__ */ jsx(DialogOverlayImpl, { context, ...overlayProps, ref: forwardedRef });
+  }
+);
+DialogOverlay.displayName = OVERLAY_NAME;
+const DialogOverlayImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { context, ...overlayProps } = props;
+    return (
+      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+      // ie. when `Overlay` and `Content` are siblings
+      /* @__PURE__ */ jsx(
+        DialogOverlayFrame,
+        {
+          "data-state": getState(context.open),
+          pointerEvents: context.open ? "auto" : "none",
+          ...overlayProps,
+          ref: forwardedRef
+        }
+      )
+    );
+  }
+);
+const CONTENT_NAME = "DialogContent";
+const DialogContentFrame = styled(ThemeableStack, {
+  name: CONTENT_NAME,
+  tag: "dialog",
+  position: "relative",
+  backgrounded: true,
+  padded: true,
+  radiused: true,
+  elevate: true,
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        return {};
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$true"
+  }
+});
+const DialogContent = DialogContentFrame.extractable(
+  React.forwardRef(
+    ({ __scopeDialog, ...props }, forwardedRef) => {
+      const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
+      const { forceMount = portalContext.forceMount, ...contentProps } = props;
+      const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+      const contents = context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { context, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { context, ...contentProps, ref: forwardedRef });
+      if (!isWeb) {
+        return contents;
+      }
+      return /* @__PURE__ */ jsx(
+        RemoveScroll,
+        {
+          forwardProps: true,
+          enabled: context.open,
+          allowPinchZoom: context.allowPinchZoom,
+          shards: [context.contentRef],
+          removeScrollBar: false,
+          children: /* @__PURE__ */ jsx("div", { className: "_dsp_contents", children: contents })
+        }
+      );
+    }
+  )
+);
+DialogContent.displayName = CONTENT_NAME;
+const DialogContentModal = React.forwardRef(
+  ({ children, context, ...props }, forwardedRef) => {
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+    if (isWeb) {
+      React.useEffect(() => {
+        if (!context.open)
+          return;
+        const content = contentRef.current;
+        if (content)
+          return hideOthers(content);
+      }, [context.open]);
+    }
+    return /* @__PURE__ */ jsx(
+      DialogContentImpl,
+      {
+        ...props,
+        context,
+        ref: composedRefs,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          var _a;
+          event.preventDefault();
+          (_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;
+            if (isRightClick)
+              event.preventDefault();
+          }
+        ),
+        onFocusOutside: composeEventHandlers(
+          props.onFocusOutside,
+          (event) => event.preventDefault()
+        ),
+        children
+      }
+    );
+  }
+);
+const DialogContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(
+      DialogContentImpl,
+      {
+        ...props,
+        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 = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+            }
+            event.preventDefault();
+          }
+          hasInteractedOutsideRef.current = false;
+        },
+        onInteractOutside: (event) => {
+          var _a;
+          (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
+          if (!event.defaultPrevented)
+            hasInteractedOutsideRef.current = true;
+          const target = event.target;
+          const trigger = props.context.triggerRef.current;
+          if (!(trigger instanceof HTMLElement))
+            return;
+          const targetIsTrigger = trigger.contains(target);
+          if (targetIsTrigger)
+            event.preventDefault();
+        }
+      }
+    );
+  }
+);
+const DialogContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeDialog,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      context,
+      ...contentProps
+    } = props;
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const showSheet = useShowDialogSheet(context);
+    const contents = /* @__PURE__ */ jsx(
+      DialogContentFrame,
+      {
+        id: context.contentId,
+        "aria-describedby": context.descriptionId,
+        "aria-labelledby": context.titleId,
+        "data-state": getState(context.open),
+        ...contentProps
+      }
+    );
+    if (showSheet) {
+      return /* @__PURE__ */ jsx(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children });
+    }
+    if (!isWeb) {
+      return contents;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        FocusScope,
+        {
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          forceUnmount: !context.open,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ jsx(
+            Dismissable,
+            {
+              disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+              forceUnmount: !context.open,
+              onEscapeKeyDown,
+              onPointerDownOutside,
+              onFocusOutside,
+              onInteractOutside,
+              ref: composedRefs,
+              onDismiss: () => context.onOpenChange(false),
+              children: contents
+            }
+          )
+        }
+      ),
+      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }),
+        /* @__PURE__ */ jsx(
+          DescriptionWarning,
+          {
+            contentRef,
+            descriptionId: context.descriptionId
+          }
+        )
+      ] })
+    ] });
+  }
+);
+const TITLE_NAME = "DialogTitle";
+const DialogTitleFrame = styled(H2, {
+  name: TITLE_NAME
+});
+const DialogTitle = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(DialogTitleFrame, { id: context.titleId, ...titleProps, ref: forwardedRef });
+  }
+);
+DialogTitle.displayName = TITLE_NAME;
+const DialogDescriptionFrame = styled(Paragraph, {
+  name: "DialogDescription"
+});
+const DESCRIPTION_NAME = "DialogDescription";
+const DialogDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(
+      DialogDescriptionFrame,
+      {
+        id: context.descriptionId,
+        ...descriptionProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DialogDescription.displayName = DESCRIPTION_NAME;
+const CLOSE_NAME = "DialogClose";
+const DialogClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, displayWhenAdapted, ...closeProps } = props;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog, {
+      warn: false,
+      fallback: {}
+    });
+    const isSheet = useShowDialogSheet(context);
+    if (isSheet && !displayWhenAdapted) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      YStack,
+      {
+        tag: "button",
+        accessibilityLabel: "Dialog Close",
+        ...closeProps,
+        ref: forwardedRef,
+        onPress: composeEventHandlers(
+          props.onPress,
+          () => context.onOpenChange(false)
+        )
+      }
+    );
+  }
+);
+DialogClose.displayName = CLOSE_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const TITLE_WARNING_NAME = "DialogTitleWarning";
+const [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
+  contentName: CONTENT_NAME,
+  titleName: TITLE_NAME,
+  docsSlug: "dialog"
+});
+const TitleWarning = ({ titleId }) => {
+  if (process.env.NODE_ENV === "development") {
+    const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
+    const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      if (titleId) {
+        const hasTitle = document.getElementById(titleId);
+        if (!hasTitle) {
+          console.warn(MESSAGE);
+        }
+      }
+    }, [MESSAGE, titleId]);
+  }
+  return null;
+};
+const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
+const DescriptionWarning = ({
+  contentRef,
+  descriptionId
+}) => {
+  if (process.env.NODE_ENV === "development") {
+    const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
+    const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const contentNode = contentRef.current;
+      if (!(contentNode instanceof HTMLElement)) {
+        return;
+      }
+      const describedById = contentNode.getAttribute("aria-describedby");
+      if (descriptionId && describedById) {
+        const hasDescription = document.getElementById(descriptionId);
+        if (!hasDescription) {
+          console.warn(MESSAGE);
+        }
+      }
+    }, [MESSAGE, contentRef, descriptionId]);
+  }
+  return null;
+};
+const Dialog = withStaticProperties(
+  React.forwardRef(function Dialog2(props, ref) {
+    const {
+      __scopeDialog,
+      children,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      modal = true,
+      allowPinchZoom = false
+    } = props;
+    const scopeId = useId();
+    const contentId = useId();
+    const titleId = useId();
+    const descriptionId = useId();
+    const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
+    const sheetContentsName = getSheetContentsName({ scopeKey, contentId });
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const onOpenToggle = React.useCallback(
+      () => setOpen((prevOpen) => !prevOpen),
+      [setOpen]
+    );
+    const context = {
+      scope: __scopeDialog,
+      scopeKey,
+      triggerRef,
+      contentRef,
+      contentId,
+      titleId,
+      descriptionId,
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle,
+      modal,
+      allowPinchZoom
+    };
+    const { when, AdaptProvider } = useAdaptParent({
+      Contents: React.useCallback(
+        (props2) => {
+          return /* @__PURE__ */ jsx(PortalHost, { forwardProps: props2, name: sheetContentsName });
+        },
+        [sheetContentsName]
+      )
+    });
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        open: setOpen
+      }),
+      [setOpen]
+    );
+    return /* @__PURE__ */ jsx(AdaptProvider, { children: /* @__PURE__ */ jsx(DialogProvider, { ...context, sheetBreakpoint: when, children: /* @__PURE__ */ jsx(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children }) }) });
+  }),
+  {
+    Trigger: DialogTrigger,
+    Portal: DialogPortal,
+    Overlay: DialogOverlay,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+    Sheet: ControlledSheet,
+    Adapt
+  }
+);
+const SHEET_CONTENTS_NAME = "DialogSheetContents";
+const DialogSheetContents = ({
+  name,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(PortalHost, { forwardProps: props, name });
+};
+DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
+const getSheetContentsName = ({
+  scopeKey,
+  contentId
+}) => `${scopeKey || contentId}SheetContents`;
+const DialogSheetController = (props) => {
+  const context = useDialogContext("DialogSheetController", props.__scopeDialog);
+  const showSheet = useShowDialogSheet(context);
+  const breakpointActive = useSheetBreakpointActive(context);
+  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 = (context) => {
+  const media = useMedia();
+  if (!context.sheetBreakpoint)
+    return false;
+  if (context.sheetBreakpoint === true)
+    return true;
+  return media[context.sheetBreakpoint];
+};
+const useShowDialogSheet = (context) => {
+  const breakpointActive = useSheetBreakpointActive(context);
+  return context.open === false ? false : breakpointActive;
+};
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogPortalFrame,
+  DialogSheetContents,
+  DialogTitle,
+  DialogTrigger,
+  DialogWarningProvider,
+  createDialogScope
+};
+//# sourceMappingURL=Dialog.mjs.map