@tamagui/dialog 1.0.1-beta.43

package/dist/jsx/Dialog.js

@@ -0,0 +1,289 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  Slot,
+  Theme,
+  composeEventHandlers,
+  isWeb,
+  styled,
+  useId,
+  useThemeName,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContext, createContextScope } from "@tamagui/create-context";
+import { Dismissable } from "@tamagui/dismissable";
+import { FocusScope } from "@tamagui/focus-scope";
+import { Portal } from "@tamagui/portal";
+import { ThemeableStack, YStack } from "@tamagui/stacks";
+import { H2, Paragraph } from "@tamagui/text";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { RemoveScroll } from "react-remove-scroll";
+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 <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 DialogPortal = /* @__PURE__ */ __name((props) => {
+  const { __scopeDialog, forceMount, children, ...rest } = props;
+  const themeName = useThemeName();
+  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+  const isShowing = forceMount || context.open;
+  const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>;
+  if (!context.modal) {
+    return contents;
+  }
+  return <PortalProvider scope={__scopeDialog} forceMount={forceMount}><Portal alignItems="center" justifyContent="center" zIndex={100} pointerEvents={isShowing ? "auto" : "none"} {...isWeb && {
+    maxHeight: "100vh"
+  }} {...rest}><Theme name={themeName}>{contents}</Theme></Portal></PortalProvider>;
+}, "DialogPortal");
+DialogPortal.displayName = PORTAL_NAME;
+const OVERLAY_NAME = "DialogOverlay";
+const DialogOverlayFrame = styled(ThemeableStack, {
+  name: OVERLAY_NAME,
+  pointerEvents: "auto",
+  backgrounded: true,
+  fullscreen: true
+});
+const DialogOverlay = React.forwardRef((props, forwardedRef) => {
+  const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
+  const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+  const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
+  if (!context.modal) {
+    return null;
+  }
+  return <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />;
+});
+DialogOverlay.displayName = OVERLAY_NAME;
+const DialogOverlayImpl = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDialog, ...overlayProps } = props;
+  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+  const content = <DialogOverlayFrame data-state={getState(context.open)} pointerEvents="auto" {...overlayProps} ref={forwardedRef} />;
+  if (!isWeb) {
+    return content;
+  }
+  return <RemoveScroll as={Slot} allowPinchZoom={context.allowPinchZoom} shards={[context.contentRef]}>{content}</RemoveScroll>;
+});
+const CONTENT_NAME = "DialogContent";
+const DialogContentFrame = styled(ThemeableStack, {
+  name: CONTENT_NAME,
+  tag: "dialog",
+  pointerEvents: "auto",
+  position: "relative",
+  backgrounded: true,
+  padded: true,
+  radiused: true,
+  elevate: true,
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        return {};
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$4"
+  }
+});
+const DialogContent = React.forwardRef((props, forwardedRef) => {
+  const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props;
+  const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
+  return <>{context.modal ? <DialogContentModal {...contentProps} ref={forwardedRef} /> : <DialogContentNonModal {...contentProps} ref={forwardedRef} />}</>;
+});
+DialogContent.displayName = CONTENT_NAME;
+const DialogContentModal = React.forwardRef((props, forwardedRef) => {
+  const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
+  const contentRef = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+  return <DialogContentImpl {...props} ref={composedRefs} trapFocus={context.open} disableOutsidePointerEvents 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())} />;
+});
+const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
+  const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
+  const hasInteractedOutsideRef = React.useRef(false);
+  return <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 = 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 = 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,
+    ...contentProps
+  } = props;
+  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+  const contentRef = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, contentRef);
+  return <>
+    <FocusScope loop trapped={trapFocus} onMountAutoFocus={onOpenAutoFocus} onUnmountAutoFocus={onCloseAutoFocus}><Dismissable disableOutsidePointerEvents={disableOutsidePointerEvents} onEscapeKeyDown={onEscapeKeyDown} onPointerDownOutside={onPointerDownOutside} onFocusOutside={onFocusOutside} onInteractOutside={onInteractOutside} ref={composedRefs} onDismiss={() => context.onOpenChange(false)}><DialogContentFrame id={context.contentId} aria-describedby={context.descriptionId} aria-labelledby={context.titleId} data-state={getState(context.open)} {...contentProps} /></Dismissable></FocusScope>
+    {process.env.NODE_ENV !== "production" && <>
+      <TitleWarning titleId={context.titleId} />
+      <DescriptionWarning contentRef={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 <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 <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />;
+});
+DialogDescription.displayName = DESCRIPTION_NAME;
+const CLOSE_NAME = "DialogClose";
+const DialogClose = React.forwardRef((props, forwardedRef) => {
+  const { __scopeDialog, ...closeProps } = props;
+  const context = useDialogContext(CLOSE_NAME, __scopeDialog);
+  return <YStack tag="button" {...closeProps} ref={forwardedRef} onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))} />;
+});
+DialogClose.displayName = CLOSE_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+__name(getState, "getState");
+const TITLE_WARNING_NAME = "DialogTitleWarning";
+const [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
+  contentName: CONTENT_NAME,
+  titleName: TITLE_NAME,
+  docsSlug: "dialog"
+});
+const TitleWarning = /* @__PURE__ */ __name(({ titleId }) => {
+  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)
+        throw new Error(MESSAGE);
+    }
+  }, [MESSAGE, titleId]);
+  return null;
+}, "TitleWarning");
+const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
+const DescriptionWarning = /* @__PURE__ */ __name(({ contentRef, descriptionId }) => {
+  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;
+}, "DescriptionWarning");
+const Dialog = withStaticProperties(/* @__PURE__ */ __name(function Dialog2(props) {
+  const {
+    __scopeDialog,
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    modal = true,
+    allowPinchZoom
+  } = props;
+  const triggerRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return <DialogProvider scope={__scopeDialog} triggerRef={triggerRef} contentRef={contentRef} contentId={useId() || ""} titleId={useId() || ""} descriptionId={useId() || ""} open={open} onOpenChange={setOpen} onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])} modal={modal} allowPinchZoom={allowPinchZoom || false}>{children}</DialogProvider>;
+}, "Dialog"), {
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+});
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  WarningProvider,
+  createDialogScope
+};

package/dist/jsx/index.js

@@ -0,0 +1 @@
+export * from "./Dialog";

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@tamagui/dialog",
+  "version": "1.0.1-beta.43",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@tamagui/animate-presence": "^1.0.1-beta.43",
+    "@tamagui/compose-refs": "^1.0.1-beta.43",
+    "@tamagui/core": "^1.0.1-beta.43",
+    "@tamagui/create-context": "^1.0.1-beta.43",
+    "@tamagui/dismissable": "^1.0.1-beta.43",
+    "@tamagui/focus-scope": "^1.0.1-beta.43",
+    "@tamagui/polyfill-dev": "^1.0.1-beta.43",
+    "@tamagui/popper": "^1.0.1-beta.43",
+    "@tamagui/portal": "^1.0.1-beta.43",
+    "@tamagui/stacks": "^1.0.1-beta.43",
+    "@tamagui/text": "^1.0.1-beta.43",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.43",
+    "react-remove-scroll": "^2.5.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.43",
+    "@types/react-dom": "^18.0.3",
+    "@types/react-native": "^0.67.3",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}