@tamagui/alert-dialog 2.7.7 → 3.0.0-beta.1093.1

package/dist/cjs/AlertDialog.cjs

@@ -5,275 +5,219 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 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: true
-  });
+	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;
+	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;
 };
-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: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AlertDialog_exports = {};
 __export(AlertDialog_exports, {
-  AlertDialog: () => AlertDialog,
-  AlertDialogAction: () => AlertDialogAction,
-  AlertDialogCancel: () => AlertDialogCancel,
-  AlertDialogContent: () => AlertDialogContent,
-  AlertDialogDescription: () => AlertDialogDescription,
-  AlertDialogDestructive: () => AlertDialogDestructive,
-  AlertDialogOverlay: () => AlertDialogOverlay,
-  AlertDialogPortal: () => AlertDialogPortal,
-  AlertDialogTitle: () => AlertDialogTitle,
-  AlertDialogTrigger: () => AlertDialogTrigger
+	AlertDialog: () => AlertDialog,
+	AlertDialogAction: () => AlertDialogAction,
+	AlertDialogCancel: () => AlertDialogCancel,
+	AlertDialogContent: () => AlertDialogContent,
+	AlertDialogDescription: () => AlertDialogDescription,
+	AlertDialogDestructive: () => AlertDialogDestructive,
+	AlertDialogOverlay: () => AlertDialogOverlay,
+	AlertDialogPortal: () => AlertDialogPortal,
+	AlertDialogTitle: () => AlertDialogTitle,
+	AlertDialogTrigger: () => AlertDialogTrigger
 });
 module.exports = __toCommonJS(AlertDialog_exports);
+var import_core = require("@tamagui/core");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_constants = require("@tamagui/constants");
-var import_core = require("@tamagui/core");
+var import_core2 = 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_alertDialogPart = require("./alertDialogPart.cjs");
+var import_useNativeAlertDialog = require("./useNativeAlertDialog.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const getAlertDialogScope = scope => scope;
+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 {
-      __native,
-      onPress,
-      __onPress,
-      ...rest
-    } = props;
-    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 TRIGGER_NAME = "AlertDialogTrigger";
+const NativeAlertDialogTriggerFrame = (0, import_core2.styled)(import_core2.View, { displayName: TRIGGER_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(NativeAlertDialogTriggerFrame, "trigger");
+const AlertDialogTrigger = (0, import_core.createStyledHOC)(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(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)
+		});
+	}
+	const { scope, ...triggerProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, {
+		scope: getAlertDialogScope(scope),
+		...triggerProps,
+		ref: forwardedRef
+	});
 });
 const AlertDialogPortal = function AlertDialogPortal2(props) {
-  const {
-    scope,
-    ...portalProps
-  } = props;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dialog.DialogPortal, {
-    scope: getAlertDialogScope(scope),
-    ...portalProps
-  });
+	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 OVERLAY_NAME = "AlertDialogOverlay";
+const AlertDialogOverlayFrame = (0, import_core2.styled)(import_dialog.DialogOverlayFrame, { displayName: OVERLAY_NAME });
+const AlertDialogOverlay = (0, import_core.createStyledHOC)(AlertDialogOverlayFrame, 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,
-      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
-        })]
-      })
-    })
-  });
+const { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = (0, import_core2.createStyledContext)({}, "AlertDialogContext");
+const AlertDialogContent = (0, import_core.createRefComponent)(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,
+			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.cancel();
+					if (import_constants.isWeb) {
+						cancelRef.current?.focus({ preventScroll: true });
+					}
+				}),
+				onPointerDownOutside: (event) => event.cancel(),
+				onInteractOutside: (event) => event.cancel(),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core2.Slottable, { children }), process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, { contentRef })]
+			})
+		})
+	});
 });
 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 AlertDialogTitleFrame = (0, import_core2.styled)(import_core2.View, { displayName: TITLE_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogTitleFrame, "title");
+const AlertDialogTitle = (0, import_core.createStyledHOC)(AlertDialogTitleFrame, 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 AlertDialogDescriptionFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESCRIPTION_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogDescriptionFrame, "description");
+const AlertDialogDescription = (0, import_core.createStyledHOC)(AlertDialogDescriptionFrame, 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 ACTION_NAME = "AlertDialogAction";
+const AlertDialogActionFrame = (0, import_core2.styled)(import_core2.View, { displayName: ACTION_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogActionFrame, "action");
+const AlertDialogAction = (0, import_core.createStyledHOC)(AlertDialogActionFrame, 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 CANCEL_NAME = "AlertDialogCancel";
+const AlertDialogCancelFrame = (0, import_core2.styled)(import_core2.View, { displayName: CANCEL_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogCancelFrame, "cancel");
+const AlertDialogCancel = (0, import_core.createStyledHOC)(AlertDialogCancelFrame, 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 DESTRUCTIVE_NAME = "AlertDialogDestructive";
+const AlertDialogDestructiveFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESTRUCTIVE_NAME });
+(0, import_alertDialogPart.markAlertDialogPart)(AlertDialogDestructiveFrame, "destructive");
+const AlertDialogDestructive = (0, import_core.createStyledHOC)(AlertDialogDestructiveFrame, 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;
-    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.
+const DescriptionWarning = ({ contentRef }) => {
+	if (process.env.NODE_ENV === "development") {
+		React.useEffect(() => {
+			if (!import_constants.isWeb) return;
+			const hasDescription = document.getElementById(contentRef.current?.getAttribute("aria-describedby"));
+			if (!hasDescription) {
+				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]);
-  return null;
+			}
+		}, [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
-  });
+const AlertDialogInner = (props) => {
+	const { scope, native, ...alertDialogProps } = props;
+	const dialogScope = getAlertDialogScope(scope);
+	const nativeAlert = (0, import_useNativeAlertDialog.useNativeAlertDialog)(props);
+	if (nativeAlert) return nativeAlert;
+	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,
-  Overlay: AlertDialogOverlay,
-  Content: AlertDialogContent,
-  Action: AlertDialogAction,
-  Cancel: AlertDialogCancel,
-  Destructive: AlertDialogDestructive,
-  Title: AlertDialogTitle,
-  Description: AlertDialogDescription
+	Trigger: AlertDialogTrigger,
+	Portal: AlertDialogPortal,
+	Overlay: AlertDialogOverlay,
+	Content: AlertDialogContent,
+	Action: AlertDialogAction,
+	Cancel: AlertDialogCancel,
+	Destructive: AlertDialogDestructive,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription
 });
-AlertDialog.displayName = ROOT_NAME;
+AlertDialog.displayName = ROOT_NAME;