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

package/dist/cjs/AlertDialog.native.cjs

@@ -0,0 +1,309 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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
+	});
+};
+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;
+};
+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 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
+});
+module.exports = __toCommonJS(AlertDialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core2 = require("@tamagui/core");
+var import_dialog = require("@tamagui/dialog");
+var import_helpers = require("@tamagui/helpers");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var React = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var getAlertDialogScope = function(scope) {
+	return scope;
+};
+var ROOT_NAME = "AlertDialog";
+var ALERT_DIALOG_PART = /* @__PURE__ */ Symbol("AlertDialogPart");
+var markAlertDialogPart = function(component, part) {
+	Object.assign(component.staticConfig, { [ALERT_DIALOG_PART]: part });
+};
+var NativeAlertDialogTriggerFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogTrigger" });
+markAlertDialogPart(NativeAlertDialogTriggerFrame, "trigger");
+var AlertDialogTrigger = (0, import_core.createStyledHOC)(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(props, forwardedRef) {
+	if (props["__native"]) {
+		var { __native, onPress, __onPress, ...rest } = props;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeAlertDialogTriggerFrame, {
+			...rest,
+			onPress: (0, import_helpers.composeEventHandlers)(onPress, __onPress)
+		});
+	}
+	var { scope, ...triggerProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, {
+		scope: getAlertDialogScope(scope),
+		...triggerProps,
+		ref: forwardedRef
+	});
+});
+var AlertDialogPortal = function AlertDialogPortal2(props) {
+	var { scope, ...portalProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogPortal, {
+		scope: getAlertDialogScope(scope),
+		...portalProps
+	});
+};
+var AlertDialogOverlayFrame = (0, import_core2.styled)(import_dialog.DialogOverlayFrame, { displayName: "AlertDialogOverlay" });
+var AlertDialogOverlay = (0, import_core.createStyledHOC)(AlertDialogOverlayFrame, function AlertDialogOverlay2(props, forwardedRef) {
+	var { scope, ...overlayProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, {
+		scope: getAlertDialogScope(scope),
+		...overlayProps,
+		ref: forwardedRef
+	});
+});
+var CONTENT_NAME = "AlertDialogContent";
+var { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = (0, import_core2.createStyledContext)({}, "AlertDialogContext");
+var AlertDialogContent = (0, import_core.createRefComponent)(function AlertDialogContent2(props, forwardedRef) {
+	var { scope, children, ...contentProps } = props;
+	var dialogScope = getAlertDialogScope(scope);
+	var contentRef = React.useRef(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+	var cancelRef = React.useRef(null);
+	var 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, function(event) {
+					event.cancel();
+					if (import_constants.isWeb) {
+						var _cancelRef_current;
+						(_cancelRef_current = cancelRef.current) === null || _cancelRef_current === void 0 || _cancelRef_current.focus({ preventScroll: true });
+					}
+				}),
+				onPointerDownOutside: function(event) {
+					return event.cancel();
+				},
+				onInteractOutside: function(event) {
+					return 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 })]
+			})
+		})
+	});
+});
+var TITLE_NAME = "AlertDialogTitle";
+var AlertDialogTitleFrame = (0, import_core2.styled)(import_core2.View, { displayName: TITLE_NAME });
+markAlertDialogPart(AlertDialogTitleFrame, "title");
+var AlertDialogTitle = (0, import_core.createStyledHOC)(AlertDialogTitleFrame, function AlertDialogTitle2(props, forwardedRef) {
+	var { scope, ...titleProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, {
+		scope: getAlertDialogScope(scope),
+		...titleProps,
+		ref: forwardedRef
+	});
+});
+var DESCRIPTION_NAME = "AlertDialogDescription";
+var AlertDialogDescriptionFrame = (0, import_core2.styled)(import_core2.View, { displayName: DESCRIPTION_NAME });
+markAlertDialogPart(AlertDialogDescriptionFrame, "description");
+var AlertDialogDescription = (0, import_core.createStyledHOC)(AlertDialogDescriptionFrame, function AlertDialogDescription2(props, forwardedRef) {
+	var { scope, ...descriptionProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, {
+		scope: getAlertDialogScope(scope),
+		...descriptionProps,
+		ref: forwardedRef
+	});
+});
+var AlertDialogActionFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogAction" });
+markAlertDialogPart(AlertDialogActionFrame, "action");
+var AlertDialogAction = (0, import_core.createStyledHOC)(AlertDialogActionFrame, function AlertDialogAction2(props, forwardedRef) {
+	var { scope, ...actionProps } = props;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
+		scope: getAlertDialogScope(scope),
+		...actionProps,
+		ref: forwardedRef
+	});
+});
+var AlertDialogCancelFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogCancel" });
+markAlertDialogPart(AlertDialogCancelFrame, "cancel");
+var AlertDialogCancel = (0, import_core.createStyledHOC)(AlertDialogCancelFrame, function AlertDialogCancel2(props, forwardedRef) {
+	var { scope, ...cancelProps } = props;
+	var { cancelRef } = useAlertDialogContentContext(scope);
+	var ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, cancelRef);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
+		scope: getAlertDialogScope(scope),
+		...cancelProps,
+		ref
+	});
+});
+var AlertDialogDestructiveFrame = (0, import_core2.styled)(import_core2.View, { displayName: "AlertDialogDestructive" });
+markAlertDialogPart(AlertDialogDestructiveFrame, "destructive");
+var AlertDialogDestructive = (0, import_core.createStyledHOC)(AlertDialogDestructiveFrame, function AlertDialogDestructive2(props, forwardedRef) {
+	var { scope, ...destructiveProps } = props;
+	var { destructiveRef } = useAlertDialogContentContext(scope);
+	var ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, destructiveRef);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
+		scope: getAlertDialogScope(scope),
+		...destructiveProps,
+		ref
+	});
+});
+var DescriptionWarning = function(param) {
+	var { contentRef } = param;
+	if (process.env.NODE_ENV === "development") React.useEffect(function() {
+		var _contentRef_current;
+		if (!import_constants.isWeb) return;
+		if (!document.getElementById((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _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]);
+	return null;
+};
+var AlertDialogInner = function(props) {
+	var { scope, native, ...alertDialogProps } = props;
+	var dialogScope = getAlertDialogScope(scope);
+	var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+		prop: props.open,
+		defaultProp: props.defaultOpen || false,
+		onChange: props.onOpenChange,
+		transition: true
+	});
+	var triggerElement = null;
+	var title = "";
+	var description = "";
+	var buttons = [];
+	forEachChildDeep(React.Children.toArray(props.children), function(child) {
+		if (!/* @__PURE__ */ React.isValidElement(child)) return false;
+		var part = (0, import_core2.isTamaguiElement)(child) ? child.type.staticConfig[ALERT_DIALOG_PART] : void 0;
+		switch (part) {
+			case "trigger":
+				triggerElement = /* @__PURE__ */ React.cloneElement(child, { __native: true });
+				return false;
+			case "title":
+				title = getStringChildren(child);
+				return false;
+			case "description":
+				description = getStringChildren(child);
+				return false;
+			case "action":
+			case "destructive":
+			case "cancel":
+				var style = part === "action" ? "default" : part === "destructive" ? "destructive" : "cancel";
+				var text = getStringChildren(child);
+				var onPress = function() {
+					var _childProps_onPress;
+					var childProps = child.props;
+					childProps === null || childProps === void 0 || (_childProps_onPress = childProps.onPress) == null || _childProps_onPress.call(childProps, { native: true });
+					setOpen(false);
+				};
+				buttons.push({
+					style,
+					text,
+					onPress
+				});
+				return false;
+			default: return true;
+		}
+	});
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		if (!open || !native) return;
+		if (title || description) import_react_native.Alert.alert(title, description, buttons);
+	}, [native, open]);
+	if (native) return /* @__PURE__ */ React.cloneElement(triggerElement, { __onPress: function() {
+		setOpen(true);
+	} });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog, {
+		scope: dialogScope,
+		...alertDialogProps,
+		modal: true
+	});
+};
+function forEachChildDeep(children, onChild) {
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var child = _step.value;
+			if (!/* @__PURE__ */ React.isValidElement(child)) continue;
+			if (!onChild(child)) continue;
+			var childProps = child.props;
+			if (childProps.children) forEachChildDeep(React.Children.toArray(childProps.children), onChild);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+}
+function getStringChildren(child) {
+	var string = "";
+	forEachChildDeep(React.Children.toArray(child), function(child2) {
+		if (typeof child2.props.children === "string") {
+			string = child2.props.children;
+			return false;
+		}
+		return true;
+	});
+	return string;
+}
+var AlertDialog = (0, import_helpers.withStaticProperties)(AlertDialogInner, {
+	Trigger: AlertDialogTrigger,
+	Portal: AlertDialogPortal,
+	Overlay: AlertDialogOverlay,
+	Content: AlertDialogContent,
+	Action: AlertDialogAction,
+	Cancel: AlertDialogCancel,
+	Destructive: AlertDialogDestructive,
+	Title: AlertDialogTitle,
+	Description: AlertDialogDescription
+});
+AlertDialog.displayName = ROOT_NAME;