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

package/dist/esm/AlertDialog.native.js

@@ -1,329 +1,267 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Slottable, View, createRefComponent, createStyledContext, createStyledHOC, isTamaguiElement, styled } from "@tamagui/core";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { Slottable, View, createStyledContext, isTamaguiElement, styled } from "@tamagui/core";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogOverlayFrame, DialogPortal, DialogTitle, DialogTrigger, DialogWarningProvider } from "@tamagui/dialog";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
 import { Alert } from "react-native";
-var getAlertDialogScope = function (scope) {
-  return scope;
+
+var getAlertDialogScope = function(scope) {
+	return scope;
 };
 var ROOT_NAME = "AlertDialog";
-var TRIGGER_NAME = "AlertDialogTrigger";
-var NativeAlertDialogTriggerFrame = styled(View, {
-  name: TRIGGER_NAME
-});
-var AlertDialogTrigger = NativeAlertDialogTriggerFrame.styleable(function AlertDialogTrigger2(props, forwardedRef) {
-  if (props["__native"]) {
-    var {
-      __native,
-      onPress,
-      __onPress,
-      ...rest
-    } = props;
-    return /* @__PURE__ */jsx(NativeAlertDialogTriggerFrame, {
-      ...rest,
-      onPress: composeEventHandlers(onPress, __onPress)
-    });
-  }
-  var {
-    scope,
-    ...triggerProps
-  } = props;
-  return /* @__PURE__ */jsx(DialogTrigger, {
-    scope: getAlertDialogScope(scope),
-    ...triggerProps,
-    ref: forwardedRef
-  });
+var ALERT_DIALOG_PART = /* @__PURE__ */ Symbol("AlertDialogPart");
+var markAlertDialogPart = function(component, part) {
+	Object.assign(component.staticConfig, { [ALERT_DIALOG_PART]: part });
+};
+var NativeAlertDialogTriggerFrame = styled(View, { displayName: "AlertDialogTrigger" });
+markAlertDialogPart(NativeAlertDialogTriggerFrame, "trigger");
+var AlertDialogTrigger = createStyledHOC(NativeAlertDialogTriggerFrame, function AlertDialogTrigger2(props, forwardedRef) {
+	if (props["__native"]) {
+		var { __native, onPress, __onPress, ...rest } = props;
+		return /* @__PURE__ */ jsx(NativeAlertDialogTriggerFrame, {
+			...rest,
+			onPress: composeEventHandlers(onPress, __onPress)
+		});
+	}
+	var { scope, ...triggerProps } = props;
+	return /* @__PURE__ */ jsx(DialogTrigger, {
+		scope: getAlertDialogScope(scope),
+		...triggerProps,
+		ref: forwardedRef
+	});
 });
 var AlertDialogPortal = function AlertDialogPortal2(props) {
-  var {
-    scope,
-    ...portalProps
-  } = props;
-  return /* @__PURE__ */jsx(DialogPortal, {
-    scope: getAlertDialogScope(scope),
-    ...portalProps
-  });
+	var { scope, ...portalProps } = props;
+	return /* @__PURE__ */ jsx(DialogPortal, {
+		scope: getAlertDialogScope(scope),
+		...portalProps
+	});
 };
-var AlertDialogOverlay = styled(DialogOverlayFrame, {
-  name: "AlertDialogOverlay"
-}).styleable(function AlertDialogOverlay2(props, forwardedRef) {
-  var {
-    scope,
-    ...overlayProps
-  } = props;
-  return /* @__PURE__ */jsx(DialogOverlay, {
-    scope: getAlertDialogScope(scope),
-    ...overlayProps,
-    ref: forwardedRef
-  });
+var AlertDialogOverlay = createStyledHOC(styled(DialogOverlayFrame, { displayName: "AlertDialogOverlay" }), function AlertDialogOverlay2(props, forwardedRef) {
+	var { scope, ...overlayProps } = props;
+	return /* @__PURE__ */ jsx(DialogOverlay, {
+		scope: getAlertDialogScope(scope),
+		...overlayProps,
+		ref: forwardedRef
+	});
 });
 var CONTENT_NAME = "AlertDialogContent";
-var {
-  Provider: AlertDialogContextProvider,
-  useStyledContext: useAlertDialogContentContext
-} = createStyledContext({}, "AlertDialogContext");
-var AlertDialogContent = /* @__PURE__ */React.forwardRef(function AlertDialogContent2(props, forwardedRef) {
-  var {
-    scope,
-    children,
-    ...contentProps
-  } = props;
-  var dialogScope = getAlertDialogScope(scope);
-  var contentRef = React.useRef(null);
-  var composedRefs = useComposedRefs(forwardedRef, contentRef);
-  var cancelRef = React.useRef(null);
-  return /* @__PURE__ */jsx(DialogWarningProvider, {
-    contentName: CONTENT_NAME,
-    titleName: TITLE_NAME,
-    docsSlug: "alert-dialog",
-    children: /* @__PURE__ */jsx(AlertDialogContextProvider, {
-      scope,
-      cancelRef,
-      destructiveRef: React.useRef(null),
-      children: /* @__PURE__ */jsxs(DialogContent, {
-        role: "alertdialog",
-        "aria-modal": true,
-        scope: dialogScope,
-        ...contentProps,
-        ref: composedRefs,
-        onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, function (event) {
-          event.preventDefault();
-          if (isWeb) {
-            var _cancelRef_current;
-            (_cancelRef_current = cancelRef.current) === null || _cancelRef_current === void 0 || _cancelRef_current.focus({
-              preventScroll: true
-            });
-          }
-        }),
-        onPointerDownOutside: function (event) {
-          return event.preventDefault();
-        },
-        onInteractOutside: function (event) {
-          return event.preventDefault();
-        },
-        children: [/* @__PURE__ */jsx(Slottable, {
-          children
-        }), process.env.NODE_ENV === "development" && /* @__PURE__ */jsx(DescriptionWarning, {
-          contentRef
-        })]
-      })
-    })
-  });
+var { Provider: AlertDialogContextProvider, useStyledContext: useAlertDialogContentContext } = createStyledContext({}, "AlertDialogContext");
+var AlertDialogContent = createRefComponent(function AlertDialogContent2(props, forwardedRef) {
+	var { scope, children, ...contentProps } = props;
+	var dialogScope = getAlertDialogScope(scope);
+	var contentRef = React.useRef(null);
+	var composedRefs = useComposedRefs(forwardedRef, contentRef);
+	var cancelRef = React.useRef(null);
+	return /* @__PURE__ */ jsx(DialogWarningProvider, {
+		contentName: CONTENT_NAME,
+		titleName: TITLE_NAME,
+		docsSlug: "alert-dialog",
+		children: /* @__PURE__ */ jsx(AlertDialogContextProvider, {
+			scope,
+			cancelRef,
+			destructiveRef: React.useRef(null),
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				role: "alertdialog",
+				"aria-modal": true,
+				scope: dialogScope,
+				...contentProps,
+				ref: composedRefs,
+				onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, function(event) {
+					event.cancel();
+					if (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__ */ jsx(Slottable, { children }), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx(DescriptionWarning, { contentRef })]
+			})
+		})
+	});
 });
 var TITLE_NAME = "AlertDialogTitle";
-var AlertDialogTitle = styled(View, {
-  name: TITLE_NAME
-}).styleable(function AlertDialogTitle2(props, forwardedRef) {
-  var {
-    scope,
-    ...titleProps
-  } = props;
-  return /* @__PURE__ */jsx(DialogTitle, {
-    scope: getAlertDialogScope(scope),
-    ...titleProps,
-    ref: forwardedRef
-  });
+var AlertDialogTitleFrame = styled(View, { displayName: TITLE_NAME });
+markAlertDialogPart(AlertDialogTitleFrame, "title");
+var AlertDialogTitle = createStyledHOC(AlertDialogTitleFrame, function AlertDialogTitle2(props, forwardedRef) {
+	var { scope, ...titleProps } = props;
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		scope: getAlertDialogScope(scope),
+		...titleProps,
+		ref: forwardedRef
+	});
 });
 var DESCRIPTION_NAME = "AlertDialogDescription";
-var AlertDialogDescription = styled(View, {
-  name: DESCRIPTION_NAME
-}).styleable(function AlertDialogDescription2(props, forwardedRef) {
-  var {
-    scope,
-    ...descriptionProps
-  } = props;
-  return /* @__PURE__ */jsx(DialogDescription, {
-    scope: getAlertDialogScope(scope),
-    ...descriptionProps,
-    ref: forwardedRef
-  });
+var AlertDialogDescriptionFrame = styled(View, { displayName: DESCRIPTION_NAME });
+markAlertDialogPart(AlertDialogDescriptionFrame, "description");
+var AlertDialogDescription = createStyledHOC(AlertDialogDescriptionFrame, function AlertDialogDescription2(props, forwardedRef) {
+	var { scope, ...descriptionProps } = props;
+	return /* @__PURE__ */ jsx(DialogDescription, {
+		scope: getAlertDialogScope(scope),
+		...descriptionProps,
+		ref: forwardedRef
+	});
 });
-var ACTION_NAME = "AlertDialogAction";
-var AlertDialogAction = styled(View, {
-  name: ACTION_NAME
-}).styleable(function AlertDialogAction2(props, forwardedRef) {
-  var {
-    scope,
-    ...actionProps
-  } = props;
-  return /* @__PURE__ */jsx(DialogClose, {
-    scope: getAlertDialogScope(scope),
-    ...actionProps,
-    ref: forwardedRef
-  });
+var AlertDialogActionFrame = styled(View, { displayName: "AlertDialogAction" });
+markAlertDialogPart(AlertDialogActionFrame, "action");
+var AlertDialogAction = createStyledHOC(AlertDialogActionFrame, function AlertDialogAction2(props, forwardedRef) {
+	var { scope, ...actionProps } = props;
+	return /* @__PURE__ */ jsx(DialogClose, {
+		scope: getAlertDialogScope(scope),
+		...actionProps,
+		ref: forwardedRef
+	});
 });
-var CANCEL_NAME = "AlertDialogCancel";
-var AlertDialogCancel = styled(View, {
-  name: CANCEL_NAME
-}).styleable(function AlertDialogCancel2(props, forwardedRef) {
-  var {
-    scope,
-    ...cancelProps
-  } = props;
-  var {
-    cancelRef
-  } = useAlertDialogContentContext(scope);
-  var ref = useComposedRefs(forwardedRef, cancelRef);
-  return /* @__PURE__ */jsx(DialogClose, {
-    scope: getAlertDialogScope(scope),
-    ...cancelProps,
-    ref
-  });
+var AlertDialogCancelFrame = styled(View, { displayName: "AlertDialogCancel" });
+markAlertDialogPart(AlertDialogCancelFrame, "cancel");
+var AlertDialogCancel = createStyledHOC(AlertDialogCancelFrame, function AlertDialogCancel2(props, forwardedRef) {
+	var { scope, ...cancelProps } = props;
+	var { cancelRef } = useAlertDialogContentContext(scope);
+	var ref = useComposedRefs(forwardedRef, cancelRef);
+	return /* @__PURE__ */ jsx(DialogClose, {
+		scope: getAlertDialogScope(scope),
+		...cancelProps,
+		ref
+	});
 });
-var DESTRUCTIVE_NAME = "AlertDialogDestructive";
-var AlertDialogDestructive = styled(View, {
-  name: DESTRUCTIVE_NAME
-}).styleable(function AlertDialogDestructive2(props, forwardedRef) {
-  var {
-    scope,
-    ...destructiveProps
-  } = props;
-  var {
-    destructiveRef
-  } = useAlertDialogContentContext(scope);
-  var ref = useComposedRefs(forwardedRef, destructiveRef);
-  return /* @__PURE__ */jsx(DialogClose, {
-    scope: getAlertDialogScope(scope),
-    ...destructiveProps,
-    ref
-  });
+var AlertDialogDestructiveFrame = styled(View, { displayName: "AlertDialogDestructive" });
+markAlertDialogPart(AlertDialogDestructiveFrame, "destructive");
+var AlertDialogDestructive = createStyledHOC(AlertDialogDestructiveFrame, function AlertDialogDestructive2(props, forwardedRef) {
+	var { scope, ...destructiveProps } = props;
+	var { destructiveRef } = useAlertDialogContentContext(scope);
+	var ref = useComposedRefs(forwardedRef, destructiveRef);
+	return /* @__PURE__ */ jsx(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 (!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.
+var DescriptionWarning = function(param) {
+	var { contentRef } = param;
+	if (process.env.NODE_ENV === "development") React.useEffect(function() {
+		var _contentRef_current;
+		if (!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;
+	}, [contentRef]);
+	return null;
 };
-var AlertDialogInner = function (props) {
-  var {
-    scope,
-    native,
-    ...alertDialogProps
-  } = props;
-  var dialogScope = getAlertDialogScope(scope);
-  var [open, setOpen] = 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 name = isTamaguiElement(child) ? child.type.staticConfig.componentName : child.type["displayName"];
-    switch (name) {
-      case TRIGGER_NAME:
-        triggerElement = /* @__PURE__ */React.cloneElement(child, {
-          __native: true
-        });
-        return false;
-      case TITLE_NAME:
-        title = getStringChildren(child);
-        return false;
-      case DESCRIPTION_NAME:
-        description = getStringChildren(child);
-        return false;
-      case ACTION_NAME:
-      case DESTRUCTIVE_NAME:
-      case CANCEL_NAME:
-        var style = name === ACTION_NAME ? "default" : name === DESTRUCTIVE_NAME ? "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;
-    }
-  });
-  useIsomorphicLayoutEffect(function () {
-    if (!open || !native) return;
-    if (title || description) Alert.alert(title, description, buttons);
-  }, [native, open]);
-  if (native) return /* @__PURE__ */React.cloneElement(triggerElement, {
-    __onPress: function () {
-      setOpen(true);
-    }
-  });
-  return /* @__PURE__ */jsx(Dialog, {
-    scope: dialogScope,
-    ...alertDialogProps,
-    modal: true
-  });
+var AlertDialogInner = function(props) {
+	var { scope, native, ...alertDialogProps } = props;
+	var dialogScope = getAlertDialogScope(scope);
+	var [open, setOpen] = 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 = 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;
+		}
+	});
+	useIsomorphicLayoutEffect(function() {
+		if (!open || !native) return;
+		if (title || description) Alert.alert(title, description, buttons);
+	}, [native, open]);
+	if (native) return /* @__PURE__ */ React.cloneElement(triggerElement, { __onPress: function() {
+		setOpen(true);
+	} });
+	return /* @__PURE__ */ jsx(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;
-    }
-  }
+	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 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 = 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;
+
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogDestructive, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
 //# sourceMappingURL=AlertDialog.native.js.map