@tamagui/alert-dialog 2.0.0-rc.8 → 2.0.0

package/dist/cjs/AlertDialog.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var AlertDialog_exports = {};
 __export(AlertDialog_exports, {
   AlertDialog: () => AlertDialog,
@@ -43,225 +45,226 @@ __export(AlertDialog_exports, {
   AlertDialogTrigger: () => AlertDialogTrigger
 });
 module.exports = __toCommonJS(AlertDialog_exports);
-var import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_dialog = require("@tamagui/dialog"),
-  import_helpers = require("@tamagui/helpers"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  React = __toESM(require("react"), 1),
-  import_react_native = require("react-native-web"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const getAlertDialogScope = scope => scope,
-  ROOT_NAME = "AlertDialog",
-  TRIGGER_NAME = "AlertDialogTrigger",
-  NativeAlertDialogTriggerFrame = (0, import_core.styled)(import_core.View, {
-    name: TRIGGER_NAME
-  }),
-  AlertDialogTrigger = NativeAlertDialogTriggerFrame.styleable(function (props, forwardedRef) {
-    if (props.__native) {
-      const {
-        __native,
-        onPress,
-        __onPress,
-        ...rest
-      } = props;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeAlertDialogTriggerFrame, {
-        ...rest,
-        onPress: (0, import_helpers.composeEventHandlers)(onPress, __onPress)
-      });
-    }
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_dialog = require("@tamagui/dialog");
+var import_helpers = require("@tamagui/helpers");
+require("@tamagui/use-controllable-state");
+var React = __toESM(require("react"), 1);
+require("react-native-web");
+var import_jsx_runtime = require("react/jsx-runtime");
+const getAlertDialogScope = scope => scope;
+const ROOT_NAME = "AlertDialog";
+const NativeAlertDialogTriggerFrame = (0, import_core.styled)(import_core.View, {
+  name: "AlertDialogTrigger"
+});
+const AlertDialogTrigger = NativeAlertDialogTriggerFrame.styleable(function AlertDialogTrigger2(props, forwardedRef) {
+  if (props["__native"]) {
     const {
-      scope,
-      ...triggerProps
+      __native,
+      onPress,
+      __onPress,
+      ...rest
     } = props;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, {
-      scope: getAlertDialogScope(scope),
-      ...triggerProps,
-      ref: forwardedRef
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeAlertDialogTriggerFrame, {
+      ...rest,
+      onPress: (0, import_helpers.composeEventHandlers)(onPress, __onPress)
     });
+  }
+  const {
+    scope,
+    ...triggerProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, {
+    scope: getAlertDialogScope(scope),
+    ...triggerProps,
+    ref: forwardedRef
   });
-const AlertDialogPortal = function (props) {
-    const {
-      scope,
-      ...portalProps
-    } = props;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogPortal, {
-      scope: getAlertDialogScope(scope),
-      ...portalProps
-    });
-  },
-  OVERLAY_NAME = "AlertDialogOverlay",
-  AlertDialogOverlayFrame = (0, import_core.styled)(import_dialog.DialogOverlayFrame, {
-    name: OVERLAY_NAME
-  }),
-  AlertDialogOverlay = AlertDialogOverlayFrame.styleable(function (props, forwardedRef) {
-    const {
+});
+const AlertDialogPortal = function AlertDialogPortal2(props) {
+  const {
+    scope,
+    ...portalProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogPortal, {
+    scope: getAlertDialogScope(scope),
+    ...portalProps
+  });
+};
+const AlertDialogOverlay = (0, import_core.styled)(import_dialog.DialogOverlayFrame, {
+  name: "AlertDialogOverlay"
+}).styleable(function AlertDialogOverlay2(props, forwardedRef) {
+  const {
+    scope,
+    ...overlayProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, {
+    scope: getAlertDialogScope(scope),
+    ...overlayProps,
+    ref: forwardedRef
+  });
+});
+const CONTENT_NAME = "AlertDialogContent";
+const {
+  Provider: AlertDialogContextProvider,
+  useStyledContext: useAlertDialogContentContext
+} = (0, import_core.createStyledContext)({}, "AlertDialogContext");
+const AlertDialogContent = React.forwardRef(function AlertDialogContent2(props, forwardedRef) {
+  const {
+    scope,
+    children,
+    ...contentProps
+  } = props;
+  const dialogScope = getAlertDialogScope(scope);
+  const contentRef = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+  const cancelRef = React.useRef(null);
+  const destructiveRef = React.useRef(null);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogWarningProvider, {
+    contentName: CONTENT_NAME,
+    titleName: TITLE_NAME,
+    docsSlug: "alert-dialog",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlertDialogContextProvider, {
       scope,
-      ...overlayProps
-    } = props;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, {
-      scope: getAlertDialogScope(scope),
-      ...overlayProps,
-      ref: forwardedRef
-    });
-  }),
-  CONTENT_NAME = "AlertDialogContent",
-  {
-    Provider: AlertDialogContextProvider,
-    useStyledContext: useAlertDialogContentContext
-  } = (0, import_core.createStyledContext)({}, "AlertDialogContext"),
-  AlertDialogContent = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        children,
-        ...contentProps
-      } = props,
-      dialogScope = getAlertDialogScope(scope),
-      contentRef = React.useRef(null),
-      composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef),
-      cancelRef = React.useRef(null),
-      destructiveRef = React.useRef(null);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogWarningProvider, {
-      contentName: CONTENT_NAME,
-      titleName: TITLE_NAME,
-      docsSlug: "alert-dialog",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AlertDialogContextProvider, {
-        scope,
-        cancelRef,
-        destructiveRef,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_dialog.DialogContent, {
-          role: "alertdialog",
-          "aria-modal": !0,
-          scope: dialogScope,
-          ...contentProps,
-          ref: composedRefs,
-          onOpenAutoFocus: (0, import_helpers.composeEventHandlers)(contentProps.onOpenAutoFocus, event => {
-            event.preventDefault(), import_constants.isWeb && cancelRef.current?.focus({
-              preventScroll: !0
-            });
-          }),
-          onPointerDownOutside: event => event.preventDefault(),
-          onInteractOutside: event => event.preventDefault(),
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Slottable, {
-            children
-          }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionWarning, {
-            contentRef
-          })]
-        })
+      cancelRef,
+      destructiveRef,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_dialog.DialogContent, {
+        role: "alertdialog",
+        "aria-modal": true,
+        scope: dialogScope,
+        ...contentProps,
+        ref: composedRefs,
+        onOpenAutoFocus: (0, import_helpers.composeEventHandlers)(contentProps.onOpenAutoFocus, event => {
+          event.preventDefault();
+          if (import_constants.isWeb) cancelRef.current?.focus({
+            preventScroll: true
+          });
+        }),
+        onPointerDownOutside: event => event.preventDefault(),
+        onInteractOutside: event => event.preventDefault(),
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Slottable, {
+          children
+        }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionWarning, {
+          contentRef
+        })]
       })
-    });
-  }),
-  TITLE_NAME = "AlertDialogTitle",
-  AlertDialogTitleFrame = (0, import_core.styled)(import_core.View, {
-    name: TITLE_NAME
-  }),
-  AlertDialogTitle = AlertDialogTitleFrame.styleable(function (props, forwardedRef) {
-    const {
-      scope,
-      ...titleProps
-    } = props;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, {
-      scope: getAlertDialogScope(scope),
-      ...titleProps,
-      ref: forwardedRef
-    });
-  }),
-  DESCRIPTION_NAME = "AlertDialogDescription",
-  AlertDialogDescriptionFrame = (0, import_core.styled)(import_core.View, {
-    name: DESCRIPTION_NAME
-  }),
-  AlertDialogDescription = AlertDialogDescriptionFrame.styleable(function (props, forwardedRef) {
-    const {
-      scope,
-      ...descriptionProps
-    } = props;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, {
-      scope: getAlertDialogScope(scope),
-      ...descriptionProps,
-      ref: forwardedRef
-    });
-  }),
-  ACTION_NAME = "AlertDialogAction",
-  AlertDialogActionFrame = (0, import_core.styled)(import_core.View, {
-    name: ACTION_NAME
-  }),
-  AlertDialogAction = AlertDialogActionFrame.styleable(function (props, forwardedRef) {
-    const {
-      scope,
-      ...actionProps
-    } = props;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
-      scope: getAlertDialogScope(scope),
-      ...actionProps,
-      ref: forwardedRef
-    });
-  }),
-  CANCEL_NAME = "AlertDialogCancel",
-  AlertDialogCancelFrame = (0, import_core.styled)(import_core.View, {
-    name: CANCEL_NAME
-  }),
-  AlertDialogCancel = AlertDialogCancelFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...cancelProps
-      } = props,
-      {
-        cancelRef
-      } = useAlertDialogContentContext(scope),
-      ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, cancelRef);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
-      scope: getAlertDialogScope(scope),
-      ...cancelProps,
-      ref
-    });
-  }),
-  DESTRUCTIVE_NAME = "AlertDialogDestructive",
-  AlertDialogDestructiveFrame = (0, import_core.styled)(import_core.View, {
-    name: DESTRUCTIVE_NAME
-  }),
-  AlertDialogDestructive = AlertDialogDestructiveFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...destructiveProps
-      } = props,
-      {
-        destructiveRef
-      } = useAlertDialogContentContext(scope),
-      ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, destructiveRef);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
-      scope: getAlertDialogScope(scope),
-      ...destructiveProps,
-      ref
-    });
-  }),
-  DescriptionWarning = ({
-    contentRef
-  }) => (process.env.NODE_ENV === "development" && React.useEffect(() => {
+    })
+  });
+});
+const TITLE_NAME = "AlertDialogTitle";
+const AlertDialogTitle = (0, import_core.styled)(import_core.View, {
+  name: TITLE_NAME
+}).styleable(function AlertDialogTitle2(props, forwardedRef) {
+  const {
+    scope,
+    ...titleProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, {
+    scope: getAlertDialogScope(scope),
+    ...titleProps,
+    ref: forwardedRef
+  });
+});
+const DESCRIPTION_NAME = "AlertDialogDescription";
+const AlertDialogDescription = (0, import_core.styled)(import_core.View, {
+  name: DESCRIPTION_NAME
+}).styleable(function AlertDialogDescription2(props, forwardedRef) {
+  const {
+    scope,
+    ...descriptionProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, {
+    scope: getAlertDialogScope(scope),
+    ...descriptionProps,
+    ref: forwardedRef
+  });
+});
+const AlertDialogAction = (0, import_core.styled)(import_core.View, {
+  name: "AlertDialogAction"
+}).styleable(function AlertDialogAction2(props, forwardedRef) {
+  const {
+    scope,
+    ...actionProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
+    scope: getAlertDialogScope(scope),
+    ...actionProps,
+    ref: forwardedRef
+  });
+});
+const AlertDialogCancel = (0, import_core.styled)(import_core.View, {
+  name: "AlertDialogCancel"
+}).styleable(function AlertDialogCancel2(props, forwardedRef) {
+  const {
+    scope,
+    ...cancelProps
+  } = props;
+  const {
+    cancelRef
+  } = useAlertDialogContentContext(scope);
+  const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, cancelRef);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
+    scope: getAlertDialogScope(scope),
+    ...cancelProps,
+    ref
+  });
+});
+const AlertDialogDestructive = (0, import_core.styled)(import_core.View, {
+  name: "AlertDialogDestructive"
+}).styleable(function AlertDialogDestructive2(props, forwardedRef) {
+  const {
+    scope,
+    ...destructiveProps
+  } = props;
+  const {
+    destructiveRef
+  } = useAlertDialogContentContext(scope);
+  const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, destructiveRef);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
+    scope: getAlertDialogScope(scope),
+    ...destructiveProps,
+    ref
+  });
+});
+const DescriptionWarning = ({
+  contentRef
+}) => {
+  if (process.env.NODE_ENV === "development") React.useEffect(() => {
     if (!import_constants.isWeb) return;
-    document.getElementById(
+    if (!document.getElementById(
     // @ts-ignore
-    contentRef.current?.getAttribute("aria-describedby")) || console.warn(`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
+    contentRef.current?.getAttribute("aria-describedby"))) console.warn(`\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
   
         You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
         
         Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
         
         For more information, see https://tamagui.dev/docs/components/alert-dialog`);
-  }, [contentRef]), null),
-  AlertDialogInner = props => {
-    const {
-        scope,
-        native,
-        ...alertDialogProps
-      } = props,
-      dialogScope = getAlertDialogScope(scope);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.Dialog, {
-      scope: dialogScope,
-      ...alertDialogProps,
-      modal: !0
-    });
-  };
+  }, [contentRef]);
+  return null;
+};
+const AlertDialogInner = props => {
+  const {
+    scope,
+    native,
+    ...alertDialogProps
+  } = props;
+  const dialogScope = getAlertDialogScope(scope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.Dialog, {
+    scope: dialogScope,
+    ...alertDialogProps,
+    modal: true
+  });
+};
+function forEachChildDeep(children, onChild) {
+  for (const child of children) {
+    if (!React.isValidElement(child)) continue;
+    if (!onChild(child)) continue;
+    const childProps = child.props;
+    if (childProps.children) forEachChildDeep(React.Children.toArray(childProps.children), onChild);
+  }
+}
 const AlertDialog = (0, import_helpers.withStaticProperties)(AlertDialogInner, {
   Trigger: AlertDialogTrigger,
   Portal: AlertDialogPortal,