@tamagui/alert-dialog 1.1.8 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AlertDialog.js +54 -77
- package/dist/cjs/AlertDialog.js.map +1 -1
- package/dist/esm/AlertDialog.js +50 -77
- package/dist/esm/AlertDialog.js.map +1 -1
- package/dist/jsx/AlertDialog.js +27 -9
- package/dist/jsx/AlertDialog.js.map +1 -1
- package/package.json +17 -17
package/dist/cjs/AlertDialog.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -58,18 +62,17 @@ const AlertDialogTrigger = React.forwardRef(
|
|
|
58
62
|
(props, forwardedRef) => {
|
|
59
63
|
if (props["__native"]) {
|
|
60
64
|
const { __native, onPress, __onPress, ...rest } = props;
|
|
61
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
NativeAlertDialogTriggerFrame,
|
|
67
|
+
{
|
|
68
|
+
...rest,
|
|
69
|
+
onPress: (0, import_core.composeEventHandlers)(onPress, __onPress)
|
|
70
|
+
}
|
|
71
|
+
);
|
|
65
72
|
}
|
|
66
73
|
const { __scopeAlertDialog, ...triggerProps } = props;
|
|
67
74
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
68
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, {
|
|
69
|
-
...dialogScope,
|
|
70
|
-
...triggerProps,
|
|
71
|
-
ref: forwardedRef
|
|
72
|
-
});
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, { ...dialogScope, ...triggerProps, ref: forwardedRef });
|
|
73
76
|
}
|
|
74
77
|
);
|
|
75
78
|
AlertDialogTrigger.displayName = TRIGGER_NAME;
|
|
@@ -77,10 +80,7 @@ const PORTAL_NAME = "AlertDialogPortal";
|
|
|
77
80
|
const AlertDialogPortal = (props) => {
|
|
78
81
|
const { __scopeAlertDialog, ...portalProps } = props;
|
|
79
82
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
80
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogPortal, {
|
|
81
|
-
...dialogScope,
|
|
82
|
-
...portalProps
|
|
83
|
-
});
|
|
83
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogPortal, { ...dialogScope, ...portalProps });
|
|
84
84
|
};
|
|
85
85
|
AlertDialogPortal.displayName = PORTAL_NAME;
|
|
86
86
|
const OVERLAY_NAME = "AlertDialogOverlay";
|
|
@@ -88,11 +88,7 @@ const AlertDialogOverlay = React.forwardRef(
|
|
|
88
88
|
(props, forwardedRef) => {
|
|
89
89
|
const { __scopeAlertDialog, ...overlayProps } = props;
|
|
90
90
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
91
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, {
|
|
92
|
-
...dialogScope,
|
|
93
|
-
...overlayProps,
|
|
94
|
-
ref: forwardedRef
|
|
95
|
-
});
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogOverlay, { ...dialogScope, ...overlayProps, ref: forwardedRef });
|
|
96
92
|
}
|
|
97
93
|
);
|
|
98
94
|
AlertDialogOverlay.displayName = OVERLAY_NAME;
|
|
@@ -105,41 +101,39 @@ const AlertDialogContent = React.forwardRef(
|
|
|
105
101
|
const contentRef = React.useRef(null);
|
|
106
102
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
107
103
|
const cancelRef = React.useRef(null);
|
|
108
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
cancelRef,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
(
|
|
104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
105
|
+
import_dialog.DialogWarningProvider,
|
|
106
|
+
{
|
|
107
|
+
contentName: CONTENT_NAME,
|
|
108
|
+
titleName: TITLE_NAME,
|
|
109
|
+
docsSlug: "alert-dialog",
|
|
110
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
111
|
+
import_dialog.DialogContent,
|
|
112
|
+
{
|
|
113
|
+
role: "alertdialog",
|
|
114
|
+
...dialogScope,
|
|
115
|
+
...contentProps,
|
|
116
|
+
ref: composedRefs,
|
|
117
|
+
onOpenAutoFocus: (0, import_core.composeEventHandlers)(
|
|
118
|
+
contentProps.onOpenAutoFocus,
|
|
119
|
+
(event) => {
|
|
120
|
+
var _a;
|
|
121
|
+
event.preventDefault();
|
|
122
|
+
if (import_core.isWeb) {
|
|
123
|
+
(_a = cancelRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
|
|
124
|
+
}
|
|
127
125
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
]
|
|
140
|
-
})
|
|
141
|
-
})
|
|
142
|
-
});
|
|
126
|
+
),
|
|
127
|
+
onPointerDownOutside: (event) => event.preventDefault(),
|
|
128
|
+
onInteractOutside: (event) => event.preventDefault(),
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Slottable, { children }),
|
|
131
|
+
process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, { contentRef })
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
) })
|
|
135
|
+
}
|
|
136
|
+
);
|
|
143
137
|
}
|
|
144
138
|
);
|
|
145
139
|
AlertDialogContent.displayName = CONTENT_NAME;
|
|
@@ -148,11 +142,7 @@ const AlertDialogTitle = React.forwardRef(
|
|
|
148
142
|
(props, forwardedRef) => {
|
|
149
143
|
const { __scopeAlertDialog, ...titleProps } = props;
|
|
150
144
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
151
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, {
|
|
152
|
-
...dialogScope,
|
|
153
|
-
...titleProps,
|
|
154
|
-
ref: forwardedRef
|
|
155
|
-
});
|
|
145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, { ...dialogScope, ...titleProps, ref: forwardedRef });
|
|
156
146
|
}
|
|
157
147
|
);
|
|
158
148
|
AlertDialogTitle.displayName = TITLE_NAME;
|
|
@@ -160,11 +150,7 @@ const DESCRIPTION_NAME = "AlertDialogDescription";
|
|
|
160
150
|
const AlertDialogDescription = React.forwardRef((props, forwardedRef) => {
|
|
161
151
|
const { __scopeAlertDialog, ...descriptionProps } = props;
|
|
162
152
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
163
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, {
|
|
164
|
-
...dialogScope,
|
|
165
|
-
...descriptionProps,
|
|
166
|
-
ref: forwardedRef
|
|
167
|
-
});
|
|
153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, { ...dialogScope, ...descriptionProps, ref: forwardedRef });
|
|
168
154
|
});
|
|
169
155
|
AlertDialogDescription.displayName = DESCRIPTION_NAME;
|
|
170
156
|
const ACTION_NAME = "AlertDialogAction";
|
|
@@ -172,11 +158,7 @@ const AlertDialogAction = React.forwardRef(
|
|
|
172
158
|
(props, forwardedRef) => {
|
|
173
159
|
const { __scopeAlertDialog, ...actionProps } = props;
|
|
174
160
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
175
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
|
|
176
|
-
...dialogScope,
|
|
177
|
-
...actionProps,
|
|
178
|
-
ref: forwardedRef
|
|
179
|
-
});
|
|
161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, { ...dialogScope, ...actionProps, ref: forwardedRef });
|
|
180
162
|
}
|
|
181
163
|
);
|
|
182
164
|
AlertDialogAction.displayName = ACTION_NAME;
|
|
@@ -187,11 +169,7 @@ const AlertDialogCancel = React.forwardRef(
|
|
|
187
169
|
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
188
170
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
189
171
|
const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, cancelRef);
|
|
190
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
|
|
191
|
-
...dialogScope,
|
|
192
|
-
...cancelProps,
|
|
193
|
-
ref
|
|
194
|
-
});
|
|
172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, { ...dialogScope, ...cancelProps, ref });
|
|
195
173
|
}
|
|
196
174
|
);
|
|
197
175
|
AlertDialogCancel.displayName = CANCEL_NAME;
|
|
@@ -202,6 +180,8 @@ const DescriptionWarning = ({ contentRef }) => {
|
|
|
202
180
|
if (!import_core.isWeb)
|
|
203
181
|
return;
|
|
204
182
|
const hasDescription = document.getElementById(
|
|
183
|
+
// @ts-ignore
|
|
184
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
205
185
|
(_a = contentRef.current) == null ? void 0 : _a.getAttribute("aria-describedby")
|
|
206
186
|
);
|
|
207
187
|
if (!hasDescription) {
|
|
@@ -263,6 +243,7 @@ const AlertDialogInner = (props) => {
|
|
|
263
243
|
buttons.push({
|
|
264
244
|
style,
|
|
265
245
|
text,
|
|
246
|
+
// @ts-ignore
|
|
266
247
|
onPress
|
|
267
248
|
});
|
|
268
249
|
return false;
|
|
@@ -287,11 +268,7 @@ const AlertDialogInner = (props) => {
|
|
|
287
268
|
});
|
|
288
269
|
}
|
|
289
270
|
}
|
|
290
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog, {
|
|
291
|
-
...dialogScope,
|
|
292
|
-
...alertDialogProps,
|
|
293
|
-
modal: true
|
|
294
|
-
});
|
|
271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog, { ...dialogScope, ...alertDialogProps, modal: true });
|
|
295
272
|
};
|
|
296
273
|
function forEachChildDeep(children, onChild) {
|
|
297
274
|
for (const child of children) {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialog.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/main/packages/react/alert-dialog/src/AlertDialog.tsx\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n Slottable,\n TamaguiElement,\n composeEventHandlers,\n isTamaguiElement,\n isWeb,\n styled,\n useIsomorphicLayoutEffect,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport {\n Dialog,\n DialogClose,\n DialogCloseProps,\n DialogContent,\n DialogContentProps,\n DialogDescription,\n DialogDescriptionProps,\n DialogOverlay,\n DialogOverlayProps,\n DialogPortal,\n DialogPortalProps,\n DialogProps,\n DialogTitle,\n DialogTitleProps,\n DialogTrigger,\n DialogTriggerProps,\n DialogWarningProvider,\n createDialogScope,\n} from '@tamagui/dialog'\nimport { YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Alert } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog'\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope }\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n createDialogScope,\n])\n\nconst useDialogScope = createDialogScope()\n\ntype AlertDialogProps = DialogProps & {\n native?: boolean\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AlertDialogTrigger'\n\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst NativeAlertDialogTriggerFrame = styled(YStack, {\n name: 'DialogTrigger',\n})\n\nconst AlertDialogTrigger = React.forwardRef<TamaguiElement, AlertDialogTriggerProps>(\n (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n if (props['__native']) {\n const { __native, onPress, __onPress, ...rest } = props as any\n return (\n <NativeAlertDialogTriggerFrame\n {...rest}\n onPress={composeEventHandlers(onPress, __onPress)}\n />\n )\n }\n\n const { __scopeAlertDialog, ...triggerProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogTrigger {...dialogScope} {...triggerProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'AlertDialogPortal'\n\ninterface AlertDialogPortalProps extends DialogPortalProps {}\n\nconst AlertDialogPortal: React.FC<AlertDialogPortalProps> = (\n props: ScopedProps<AlertDialogPortalProps>\n) => {\n const { __scopeAlertDialog, ...portalProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogPortal {...dialogScope} {...portalProps} />\n}\n\nAlertDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay'\n\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<TamaguiElement, AlertDialogOverlayProps>(\n (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...overlayProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogOverlay {...dialogScope} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogOverlay.displayName = OVERLAY_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent'\n\ntype AlertDialogContentContextValue = {\n cancelRef: React.MutableRefObject<TamaguiElement | null>\n}\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME)\n\ninterface AlertDialogContentProps\n extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<TamaguiElement, AlertDialogContentProps>(\n (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n const { __scopeAlertDialog, children, ...contentProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n const contentRef = React.useRef<TamaguiElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const cancelRef = React.useRef<TamaguiElement | null>(null)\n\n return (\n <DialogWarningProvider\n contentName={CONTENT_NAME}\n titleName={TITLE_NAME}\n docsSlug=\"alert-dialog\"\n >\n <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n <DialogContent\n // @ts-ignore\n role=\"alertdialog\"\n {...dialogScope}\n {...contentProps}\n ref={composedRefs}\n onOpenAutoFocus={composeEventHandlers(\n contentProps.onOpenAutoFocus,\n (event) => {\n event.preventDefault()\n if (isWeb) {\n // @ts-ignore\n cancelRef.current?.focus({ preventScroll: true })\n }\n }\n )}\n onPointerDownOutside={(event) => event.preventDefault()}\n onInteractOutside={(event) => event.preventDefault()}\n >\n {/**\n * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n * This is because we want the accessibility checks to run only once the content is actually\n * open and that behaviour is already encapsulated in `DialogContent`.\n */}\n <Slottable>{children}</Slottable>\n {process.env.NODE_ENV === 'development' && (\n <DescriptionWarning contentRef={contentRef} />\n )}\n </DialogContent>\n </AlertDialogContentProvider>\n </DialogWarningProvider>\n )\n }\n)\n\nAlertDialogContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle'\n\ntype AlertDialogTitleProps = DialogTitleProps\n\nconst AlertDialogTitle = React.forwardRef<TamaguiElement, AlertDialogTitleProps>(\n (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...titleProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogTitle {...dialogScope} {...titleProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription'\n\ntype AlertDialogDescriptionProps = DialogDescriptionProps\n\nconst AlertDialogDescription = React.forwardRef<\n TamaguiElement,\n AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...descriptionProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />\n})\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction'\n\ntype AlertDialogActionProps = DialogCloseProps\n\nconst AlertDialogAction = React.forwardRef<TamaguiElement, AlertDialogActionProps>(\n (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...actionProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogClose {...dialogScope} {...actionProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogAction.displayName = ACTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel'\n\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<TamaguiElement, AlertDialogCancelProps>(\n (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...cancelProps } = props\n const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog)\n const dialogScope = useDialogScope(__scopeAlertDialog)\n const ref = useComposedRefs(forwardedRef, cancelRef)\n return <DialogClose {...dialogScope} {...cancelProps} ref={ref} />\n }\n)\n\nAlertDialogCancel.displayName = CANCEL_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n if (process.env.NODE_ENV === 'development') {\n React.useEffect(() => {\n if (!isWeb) return\n const hasDescription = document.getElementById(\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n contentRef.current?.getAttribute('aria-describedby')!\n )\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(`\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n \n 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.\n \n 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.\n \n For more information, see https://tamagui.dev/docs/components/alert-dialog`)\n }\n }, [contentRef])\n }\n\n return null\n}\n\nconst AlertDialogInner: React.FC<AlertDialogProps> = (\n props: ScopedProps<AlertDialogProps>\n) => {\n const { __scopeAlertDialog, native, ...alertDialogProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n const [open, setOpen] = useControllableState({\n prop: props.open,\n defaultProp: props.defaultOpen || false,\n onChange: props.onOpenChange,\n transition: true,\n })\n\n let triggerElement: any = null\n let title = ''\n let description = ''\n const buttons: {\n text: string\n onPress: (value?: string | undefined) => void\n style?: 'default' | 'cancel' | 'destructive'\n }[] = []\n\n forEachChildDeep(React.Children.toArray(props.children), (child) => {\n if (!React.isValidElement(child)) return false\n const name = isTamaguiElement(child)\n ? child.type.staticConfig.componentName\n : (child.type['displayName'] as string | undefined)\n switch (name) {\n case TRIGGER_NAME: {\n triggerElement = React.cloneElement(child as any, {\n __native: true,\n })\n return false\n }\n case TITLE_NAME: {\n title = getStringChildren(child)\n return false\n }\n case DESCRIPTION_NAME: {\n description = getStringChildren(child)\n return false\n }\n case ACTION_NAME:\n case CANCEL_NAME: {\n const style = name === ACTION_NAME ? 'default' : 'cancel'\n const text = getStringChildren(child)\n const onPress = () => {\n const childProps = child.props as any\n childProps?.onPress?.({ native: true })\n setOpen(false)\n }\n buttons.push({\n style,\n text,\n // @ts-ignore\n onPress,\n })\n return false\n }\n default: {\n return true\n }\n }\n })\n\n useIsomorphicLayoutEffect(() => {\n if (!open || !native) return\n if (title || description) {\n Alert.alert(title, description, buttons)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [native, open])\n\n if (native) {\n return React.cloneElement(triggerElement, {\n __onPress: () => {\n setOpen(true)\n },\n })\n }\n }\n\n return <Dialog {...dialogScope} {...alertDialogProps} modal />\n}\n\nfunction forEachChildDeep(\n children: React.ReactNode[],\n onChild: (el: React.ReactElement) => boolean\n) {\n for (const child of children) {\n if (!React.isValidElement(child)) continue\n if (!onChild(child)) continue\n if (child.props.children) {\n forEachChildDeep(React.Children.toArray(child.props.children), onChild)\n }\n }\n}\n\nfunction getStringChildren(child: React.ReactElement) {\n let string = ''\n forEachChildDeep(React.Children.toArray(child), (child) => {\n if (typeof child.props.children === 'string') {\n string = child.props.children\n return false\n }\n return true\n })\n return string\n}\n\nconst AlertDialog = withStaticProperties(AlertDialogInner, {\n Trigger: AlertDialogTrigger,\n Portal: AlertDialogPortal,\n Overlay: AlertDialogOverlay,\n Content: AlertDialogContent,\n Action: AlertDialogAction,\n Cancel: AlertDialogCancel,\n Title: AlertDialogTitle,\n Description: AlertDialogDescription,\n})\n\nAlertDialog.displayName = ROOT_NAME\n\nexport {\n createAlertDialogScope,\n //\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogContent,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogTitle,\n AlertDialogDescription,\n}\nexport type {\n AlertDialogProps,\n AlertDialogTriggerProps,\n AlertDialogPortalProps,\n AlertDialogOverlayProps,\n AlertDialogContentProps,\n AlertDialogActionProps,\n AlertDialogCancelProps,\n AlertDialogTitleProps,\n AlertDialogDescriptionProps,\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["child"]
|
|
7
7
|
}
|
package/dist/esm/AlertDialog.js
CHANGED
|
@@ -39,18 +39,17 @@ const AlertDialogTrigger = React.forwardRef(
|
|
|
39
39
|
(props, forwardedRef) => {
|
|
40
40
|
if (props["__native"]) {
|
|
41
41
|
const { __native, onPress, __onPress, ...rest } = props;
|
|
42
|
-
return /* @__PURE__ */ jsx(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
NativeAlertDialogTriggerFrame,
|
|
44
|
+
{
|
|
45
|
+
...rest,
|
|
46
|
+
onPress: composeEventHandlers(onPress, __onPress)
|
|
47
|
+
}
|
|
48
|
+
);
|
|
46
49
|
}
|
|
47
50
|
const { __scopeAlertDialog, ...triggerProps } = props;
|
|
48
51
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
49
|
-
return /* @__PURE__ */ jsx(DialogTrigger, {
|
|
50
|
-
...dialogScope,
|
|
51
|
-
...triggerProps,
|
|
52
|
-
ref: forwardedRef
|
|
53
|
-
});
|
|
52
|
+
return /* @__PURE__ */ jsx(DialogTrigger, { ...dialogScope, ...triggerProps, ref: forwardedRef });
|
|
54
53
|
}
|
|
55
54
|
);
|
|
56
55
|
AlertDialogTrigger.displayName = TRIGGER_NAME;
|
|
@@ -58,10 +57,7 @@ const PORTAL_NAME = "AlertDialogPortal";
|
|
|
58
57
|
const AlertDialogPortal = (props) => {
|
|
59
58
|
const { __scopeAlertDialog, ...portalProps } = props;
|
|
60
59
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
61
|
-
return /* @__PURE__ */ jsx(DialogPortal, {
|
|
62
|
-
...dialogScope,
|
|
63
|
-
...portalProps
|
|
64
|
-
});
|
|
60
|
+
return /* @__PURE__ */ jsx(DialogPortal, { ...dialogScope, ...portalProps });
|
|
65
61
|
};
|
|
66
62
|
AlertDialogPortal.displayName = PORTAL_NAME;
|
|
67
63
|
const OVERLAY_NAME = "AlertDialogOverlay";
|
|
@@ -69,11 +65,7 @@ const AlertDialogOverlay = React.forwardRef(
|
|
|
69
65
|
(props, forwardedRef) => {
|
|
70
66
|
const { __scopeAlertDialog, ...overlayProps } = props;
|
|
71
67
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
72
|
-
return /* @__PURE__ */ jsx(DialogOverlay, {
|
|
73
|
-
...dialogScope,
|
|
74
|
-
...overlayProps,
|
|
75
|
-
ref: forwardedRef
|
|
76
|
-
});
|
|
68
|
+
return /* @__PURE__ */ jsx(DialogOverlay, { ...dialogScope, ...overlayProps, ref: forwardedRef });
|
|
77
69
|
}
|
|
78
70
|
);
|
|
79
71
|
AlertDialogOverlay.displayName = OVERLAY_NAME;
|
|
@@ -86,41 +78,39 @@ const AlertDialogContent = React.forwardRef(
|
|
|
86
78
|
const contentRef = React.useRef(null);
|
|
87
79
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
88
80
|
const cancelRef = React.useRef(null);
|
|
89
|
-
return /* @__PURE__ */ jsx(
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
cancelRef,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
(
|
|
81
|
+
return /* @__PURE__ */ jsx(
|
|
82
|
+
DialogWarningProvider,
|
|
83
|
+
{
|
|
84
|
+
contentName: CONTENT_NAME,
|
|
85
|
+
titleName: TITLE_NAME,
|
|
86
|
+
docsSlug: "alert-dialog",
|
|
87
|
+
children: /* @__PURE__ */ jsx(AlertDialogContentProvider, { scope: __scopeAlertDialog, cancelRef, children: /* @__PURE__ */ jsxs(
|
|
88
|
+
DialogContent,
|
|
89
|
+
{
|
|
90
|
+
role: "alertdialog",
|
|
91
|
+
...dialogScope,
|
|
92
|
+
...contentProps,
|
|
93
|
+
ref: composedRefs,
|
|
94
|
+
onOpenAutoFocus: composeEventHandlers(
|
|
95
|
+
contentProps.onOpenAutoFocus,
|
|
96
|
+
(event) => {
|
|
97
|
+
var _a;
|
|
98
|
+
event.preventDefault();
|
|
99
|
+
if (isWeb) {
|
|
100
|
+
(_a = cancelRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
|
|
101
|
+
}
|
|
108
102
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
]
|
|
121
|
-
})
|
|
122
|
-
})
|
|
123
|
-
});
|
|
103
|
+
),
|
|
104
|
+
onPointerDownOutside: (event) => event.preventDefault(),
|
|
105
|
+
onInteractOutside: (event) => event.preventDefault(),
|
|
106
|
+
children: [
|
|
107
|
+
/* @__PURE__ */ jsx(Slottable, { children }),
|
|
108
|
+
process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx(DescriptionWarning, { contentRef })
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
) })
|
|
112
|
+
}
|
|
113
|
+
);
|
|
124
114
|
}
|
|
125
115
|
);
|
|
126
116
|
AlertDialogContent.displayName = CONTENT_NAME;
|
|
@@ -129,11 +119,7 @@ const AlertDialogTitle = React.forwardRef(
|
|
|
129
119
|
(props, forwardedRef) => {
|
|
130
120
|
const { __scopeAlertDialog, ...titleProps } = props;
|
|
131
121
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
132
|
-
return /* @__PURE__ */ jsx(DialogTitle, {
|
|
133
|
-
...dialogScope,
|
|
134
|
-
...titleProps,
|
|
135
|
-
ref: forwardedRef
|
|
136
|
-
});
|
|
122
|
+
return /* @__PURE__ */ jsx(DialogTitle, { ...dialogScope, ...titleProps, ref: forwardedRef });
|
|
137
123
|
}
|
|
138
124
|
);
|
|
139
125
|
AlertDialogTitle.displayName = TITLE_NAME;
|
|
@@ -141,11 +127,7 @@ const DESCRIPTION_NAME = "AlertDialogDescription";
|
|
|
141
127
|
const AlertDialogDescription = React.forwardRef((props, forwardedRef) => {
|
|
142
128
|
const { __scopeAlertDialog, ...descriptionProps } = props;
|
|
143
129
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
144
|
-
return /* @__PURE__ */ jsx(DialogDescription, {
|
|
145
|
-
...dialogScope,
|
|
146
|
-
...descriptionProps,
|
|
147
|
-
ref: forwardedRef
|
|
148
|
-
});
|
|
130
|
+
return /* @__PURE__ */ jsx(DialogDescription, { ...dialogScope, ...descriptionProps, ref: forwardedRef });
|
|
149
131
|
});
|
|
150
132
|
AlertDialogDescription.displayName = DESCRIPTION_NAME;
|
|
151
133
|
const ACTION_NAME = "AlertDialogAction";
|
|
@@ -153,11 +135,7 @@ const AlertDialogAction = React.forwardRef(
|
|
|
153
135
|
(props, forwardedRef) => {
|
|
154
136
|
const { __scopeAlertDialog, ...actionProps } = props;
|
|
155
137
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
156
|
-
return /* @__PURE__ */ jsx(DialogClose, {
|
|
157
|
-
...dialogScope,
|
|
158
|
-
...actionProps,
|
|
159
|
-
ref: forwardedRef
|
|
160
|
-
});
|
|
138
|
+
return /* @__PURE__ */ jsx(DialogClose, { ...dialogScope, ...actionProps, ref: forwardedRef });
|
|
161
139
|
}
|
|
162
140
|
);
|
|
163
141
|
AlertDialogAction.displayName = ACTION_NAME;
|
|
@@ -168,11 +146,7 @@ const AlertDialogCancel = React.forwardRef(
|
|
|
168
146
|
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
169
147
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
170
148
|
const ref = useComposedRefs(forwardedRef, cancelRef);
|
|
171
|
-
return /* @__PURE__ */ jsx(DialogClose, {
|
|
172
|
-
...dialogScope,
|
|
173
|
-
...cancelProps,
|
|
174
|
-
ref
|
|
175
|
-
});
|
|
149
|
+
return /* @__PURE__ */ jsx(DialogClose, { ...dialogScope, ...cancelProps, ref });
|
|
176
150
|
}
|
|
177
151
|
);
|
|
178
152
|
AlertDialogCancel.displayName = CANCEL_NAME;
|
|
@@ -183,6 +157,8 @@ const DescriptionWarning = ({ contentRef }) => {
|
|
|
183
157
|
if (!isWeb)
|
|
184
158
|
return;
|
|
185
159
|
const hasDescription = document.getElementById(
|
|
160
|
+
// @ts-ignore
|
|
161
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
186
162
|
(_a = contentRef.current) == null ? void 0 : _a.getAttribute("aria-describedby")
|
|
187
163
|
);
|
|
188
164
|
if (!hasDescription) {
|
|
@@ -244,6 +220,7 @@ const AlertDialogInner = (props) => {
|
|
|
244
220
|
buttons.push({
|
|
245
221
|
style,
|
|
246
222
|
text,
|
|
223
|
+
// @ts-ignore
|
|
247
224
|
onPress
|
|
248
225
|
});
|
|
249
226
|
return false;
|
|
@@ -268,11 +245,7 @@ const AlertDialogInner = (props) => {
|
|
|
268
245
|
});
|
|
269
246
|
}
|
|
270
247
|
}
|
|
271
|
-
return /* @__PURE__ */ jsx(Dialog, {
|
|
272
|
-
...dialogScope,
|
|
273
|
-
...alertDialogProps,
|
|
274
|
-
modal: true
|
|
275
|
-
});
|
|
248
|
+
return /* @__PURE__ */ jsx(Dialog, { ...dialogScope, ...alertDialogProps, modal: true });
|
|
276
249
|
};
|
|
277
250
|
function forEachChildDeep(children, onChild) {
|
|
278
251
|
for (const child of children) {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialog.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/main/packages/react/alert-dialog/src/AlertDialog.tsx\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n Slottable,\n TamaguiElement,\n composeEventHandlers,\n isTamaguiElement,\n isWeb,\n styled,\n useIsomorphicLayoutEffect,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport {\n Dialog,\n DialogClose,\n DialogCloseProps,\n DialogContent,\n DialogContentProps,\n DialogDescription,\n DialogDescriptionProps,\n DialogOverlay,\n DialogOverlayProps,\n DialogPortal,\n DialogPortalProps,\n DialogProps,\n DialogTitle,\n DialogTitleProps,\n DialogTrigger,\n DialogTriggerProps,\n DialogWarningProvider,\n createDialogScope,\n} from '@tamagui/dialog'\nimport { YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Alert } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog'\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope }\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n createDialogScope,\n])\n\nconst useDialogScope = createDialogScope()\n\ntype AlertDialogProps = DialogProps & {\n native?: boolean\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AlertDialogTrigger'\n\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst NativeAlertDialogTriggerFrame = styled(YStack, {\n name: 'DialogTrigger',\n})\n\nconst AlertDialogTrigger = React.forwardRef<TamaguiElement, AlertDialogTriggerProps>(\n (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n if (props['__native']) {\n const { __native, onPress, __onPress, ...rest } = props as any\n return (\n <NativeAlertDialogTriggerFrame\n {...rest}\n onPress={composeEventHandlers(onPress, __onPress)}\n />\n )\n }\n\n const { __scopeAlertDialog, ...triggerProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogTrigger {...dialogScope} {...triggerProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'AlertDialogPortal'\n\ninterface AlertDialogPortalProps extends DialogPortalProps {}\n\nconst AlertDialogPortal: React.FC<AlertDialogPortalProps> = (\n props: ScopedProps<AlertDialogPortalProps>\n) => {\n const { __scopeAlertDialog, ...portalProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogPortal {...dialogScope} {...portalProps} />\n}\n\nAlertDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay'\n\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<TamaguiElement, AlertDialogOverlayProps>(\n (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...overlayProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogOverlay {...dialogScope} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogOverlay.displayName = OVERLAY_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent'\n\ntype AlertDialogContentContextValue = {\n cancelRef: React.MutableRefObject<TamaguiElement | null>\n}\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME)\n\ninterface AlertDialogContentProps\n extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<TamaguiElement, AlertDialogContentProps>(\n (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n const { __scopeAlertDialog, children, ...contentProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n const contentRef = React.useRef<TamaguiElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const cancelRef = React.useRef<TamaguiElement | null>(null)\n\n return (\n <DialogWarningProvider\n contentName={CONTENT_NAME}\n titleName={TITLE_NAME}\n docsSlug=\"alert-dialog\"\n >\n <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n <DialogContent\n // @ts-ignore\n role=\"alertdialog\"\n {...dialogScope}\n {...contentProps}\n ref={composedRefs}\n onOpenAutoFocus={composeEventHandlers(\n contentProps.onOpenAutoFocus,\n (event) => {\n event.preventDefault()\n if (isWeb) {\n // @ts-ignore\n cancelRef.current?.focus({ preventScroll: true })\n }\n }\n )}\n onPointerDownOutside={(event) => event.preventDefault()}\n onInteractOutside={(event) => event.preventDefault()}\n >\n {/**\n * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n * This is because we want the accessibility checks to run only once the content is actually\n * open and that behaviour is already encapsulated in `DialogContent`.\n */}\n <Slottable>{children}</Slottable>\n {process.env.NODE_ENV === 'development' && (\n <DescriptionWarning contentRef={contentRef} />\n )}\n </DialogContent>\n </AlertDialogContentProvider>\n </DialogWarningProvider>\n )\n }\n)\n\nAlertDialogContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle'\n\ntype AlertDialogTitleProps = DialogTitleProps\n\nconst AlertDialogTitle = React.forwardRef<TamaguiElement, AlertDialogTitleProps>(\n (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...titleProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogTitle {...dialogScope} {...titleProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription'\n\ntype AlertDialogDescriptionProps = DialogDescriptionProps\n\nconst AlertDialogDescription = React.forwardRef<\n TamaguiElement,\n AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...descriptionProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />\n})\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction'\n\ntype AlertDialogActionProps = DialogCloseProps\n\nconst AlertDialogAction = React.forwardRef<TamaguiElement, AlertDialogActionProps>(\n (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...actionProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogClose {...dialogScope} {...actionProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogAction.displayName = ACTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel'\n\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<TamaguiElement, AlertDialogCancelProps>(\n (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...cancelProps } = props\n const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog)\n const dialogScope = useDialogScope(__scopeAlertDialog)\n const ref = useComposedRefs(forwardedRef, cancelRef)\n return <DialogClose {...dialogScope} {...cancelProps} ref={ref} />\n }\n)\n\nAlertDialogCancel.displayName = CANCEL_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n if (process.env.NODE_ENV === 'development') {\n React.useEffect(() => {\n if (!isWeb) return\n const hasDescription = document.getElementById(\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n contentRef.current?.getAttribute('aria-describedby')!\n )\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(`\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n \n 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.\n \n 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.\n \n For more information, see https://tamagui.dev/docs/components/alert-dialog`)\n }\n }, [contentRef])\n }\n\n return null\n}\n\nconst AlertDialogInner: React.FC<AlertDialogProps> = (\n props: ScopedProps<AlertDialogProps>\n) => {\n const { __scopeAlertDialog, native, ...alertDialogProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n const [open, setOpen] = useControllableState({\n prop: props.open,\n defaultProp: props.defaultOpen || false,\n onChange: props.onOpenChange,\n transition: true,\n })\n\n let triggerElement: any = null\n let title = ''\n let description = ''\n const buttons: {\n text: string\n onPress: (value?: string | undefined) => void\n style?: 'default' | 'cancel' | 'destructive'\n }[] = []\n\n forEachChildDeep(React.Children.toArray(props.children), (child) => {\n if (!React.isValidElement(child)) return false\n const name = isTamaguiElement(child)\n ? child.type.staticConfig.componentName\n : (child.type['displayName'] as string | undefined)\n switch (name) {\n case TRIGGER_NAME: {\n triggerElement = React.cloneElement(child as any, {\n __native: true,\n })\n return false\n }\n case TITLE_NAME: {\n title = getStringChildren(child)\n return false\n }\n case DESCRIPTION_NAME: {\n description = getStringChildren(child)\n return false\n }\n case ACTION_NAME:\n case CANCEL_NAME: {\n const style = name === ACTION_NAME ? 'default' : 'cancel'\n const text = getStringChildren(child)\n const onPress = () => {\n const childProps = child.props as any\n childProps?.onPress?.({ native: true })\n setOpen(false)\n }\n buttons.push({\n style,\n text,\n // @ts-ignore\n onPress,\n })\n return false\n }\n default: {\n return true\n }\n }\n })\n\n useIsomorphicLayoutEffect(() => {\n if (!open || !native) return\n if (title || description) {\n Alert.alert(title, description, buttons)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [native, open])\n\n if (native) {\n return React.cloneElement(triggerElement, {\n __onPress: () => {\n setOpen(true)\n },\n })\n }\n }\n\n return <Dialog {...dialogScope} {...alertDialogProps} modal />\n}\n\nfunction forEachChildDeep(\n children: React.ReactNode[],\n onChild: (el: React.ReactElement) => boolean\n) {\n for (const child of children) {\n if (!React.isValidElement(child)) continue\n if (!onChild(child)) continue\n if (child.props.children) {\n forEachChildDeep(React.Children.toArray(child.props.children), onChild)\n }\n }\n}\n\nfunction getStringChildren(child: React.ReactElement) {\n let string = ''\n forEachChildDeep(React.Children.toArray(child), (child) => {\n if (typeof child.props.children === 'string') {\n string = child.props.children\n return false\n }\n return true\n })\n return string\n}\n\nconst AlertDialog = withStaticProperties(AlertDialogInner, {\n Trigger: AlertDialogTrigger,\n Portal: AlertDialogPortal,\n Overlay: AlertDialogOverlay,\n Content: AlertDialogContent,\n Action: AlertDialogAction,\n Cancel: AlertDialogCancel,\n Title: AlertDialogTitle,\n Description: AlertDialogDescription,\n})\n\nAlertDialog.displayName = ROOT_NAME\n\nexport {\n createAlertDialogScope,\n //\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogContent,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogTitle,\n AlertDialogDescription,\n}\nexport type {\n AlertDialogProps,\n AlertDialogTriggerProps,\n AlertDialogPortalProps,\n AlertDialogOverlayProps,\n AlertDialogContentProps,\n AlertDialogActionProps,\n AlertDialogCancelProps,\n AlertDialogTitleProps,\n AlertDialogDescriptionProps,\n}\n"],
|
|
5
|
-
"mappings": "AA0EQ,cAkFE,YAlFF;AAvER,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAGA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,YAAY,WAAW;AACvB,SAAS,aAAa;AAMtB,MAAM,YAAY;AAGlB,MAAM,CAAC,0BAA0B,sBAAsB,IAAI,mBAAmB,WAAW;AAAA,EACvF;AACF,CAAC;AAED,MAAM,iBAAiB,kBAAkB;AAUzC,MAAM,eAAe;AAIrB,MAAM,gCAAgC,OAAO,QAAQ;AAAA,EACnD,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAAI,MAAM,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["child"]
|
|
7
7
|
}
|
package/dist/jsx/AlertDialog.js
CHANGED
|
@@ -38,7 +38,10 @@ const AlertDialogTrigger = React.forwardRef(
|
|
|
38
38
|
(props, forwardedRef) => {
|
|
39
39
|
if (props["__native"]) {
|
|
40
40
|
const { __native, onPress, __onPress, ...rest } = props;
|
|
41
|
-
return <NativeAlertDialogTriggerFrame
|
|
41
|
+
return <NativeAlertDialogTriggerFrame
|
|
42
|
+
{...rest}
|
|
43
|
+
onPress={composeEventHandlers(onPress, __onPress)}
|
|
44
|
+
/>;
|
|
42
45
|
}
|
|
43
46
|
const { __scopeAlertDialog, ...triggerProps } = props;
|
|
44
47
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
@@ -71,15 +74,27 @@ const AlertDialogContent = React.forwardRef(
|
|
|
71
74
|
const contentRef = React.useRef(null);
|
|
72
75
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
73
76
|
const cancelRef = React.useRef(null);
|
|
74
|
-
return <DialogWarningProvider
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
return <DialogWarningProvider
|
|
78
|
+
contentName={CONTENT_NAME}
|
|
79
|
+
titleName={TITLE_NAME}
|
|
80
|
+
docsSlug="alert-dialog"
|
|
81
|
+
><AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}><DialogContent
|
|
82
|
+
role="alertdialog"
|
|
83
|
+
{...dialogScope}
|
|
84
|
+
{...contentProps}
|
|
85
|
+
ref={composedRefs}
|
|
86
|
+
onOpenAutoFocus={composeEventHandlers(
|
|
87
|
+
contentProps.onOpenAutoFocus,
|
|
88
|
+
(event) => {
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
if (isWeb) {
|
|
91
|
+
cancelRef.current?.focus({ preventScroll: true });
|
|
92
|
+
}
|
|
80
93
|
}
|
|
81
|
-
}
|
|
82
|
-
|
|
94
|
+
)}
|
|
95
|
+
onPointerDownOutside={(event) => event.preventDefault()}
|
|
96
|
+
onInteractOutside={(event) => event.preventDefault()}
|
|
97
|
+
>
|
|
83
98
|
<Slottable>{children}</Slottable>
|
|
84
99
|
{process.env.NODE_ENV === "development" && <DescriptionWarning contentRef={contentRef} />}
|
|
85
100
|
</DialogContent></AlertDialogContentProvider></DialogWarningProvider>;
|
|
@@ -128,6 +143,8 @@ const DescriptionWarning = ({ contentRef }) => {
|
|
|
128
143
|
if (!isWeb)
|
|
129
144
|
return;
|
|
130
145
|
const hasDescription = document.getElementById(
|
|
146
|
+
// @ts-ignore
|
|
147
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
131
148
|
contentRef.current?.getAttribute("aria-describedby")
|
|
132
149
|
);
|
|
133
150
|
if (!hasDescription) {
|
|
@@ -188,6 +205,7 @@ const AlertDialogInner = (props) => {
|
|
|
188
205
|
buttons.push({
|
|
189
206
|
style,
|
|
190
207
|
text,
|
|
208
|
+
// @ts-ignore
|
|
191
209
|
onPress
|
|
192
210
|
});
|
|
193
211
|
return false;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialog.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/main/packages/react/alert-dialog/src/AlertDialog.tsx\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n Slottable,\n TamaguiElement,\n composeEventHandlers,\n isTamaguiElement,\n isWeb,\n styled,\n useIsomorphicLayoutEffect,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport {\n Dialog,\n DialogClose,\n DialogCloseProps,\n DialogContent,\n DialogContentProps,\n DialogDescription,\n DialogDescriptionProps,\n DialogOverlay,\n DialogOverlayProps,\n DialogPortal,\n DialogPortalProps,\n DialogProps,\n DialogTitle,\n DialogTitleProps,\n DialogTrigger,\n DialogTriggerProps,\n DialogWarningProvider,\n createDialogScope,\n} from '@tamagui/dialog'\nimport { YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Alert } from 'react-native'\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog'\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope }\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n createDialogScope,\n])\n\nconst useDialogScope = createDialogScope()\n\ntype AlertDialogProps = DialogProps & {\n native?: boolean\n}\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AlertDialogTrigger'\n\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst NativeAlertDialogTriggerFrame = styled(YStack, {\n name: 'DialogTrigger',\n})\n\nconst AlertDialogTrigger = React.forwardRef<TamaguiElement, AlertDialogTriggerProps>(\n (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n if (props['__native']) {\n const { __native, onPress, __onPress, ...rest } = props as any\n return (\n <NativeAlertDialogTriggerFrame\n {...rest}\n onPress={composeEventHandlers(onPress, __onPress)}\n />\n )\n }\n\n const { __scopeAlertDialog, ...triggerProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogTrigger {...dialogScope} {...triggerProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'AlertDialogPortal'\n\ninterface AlertDialogPortalProps extends DialogPortalProps {}\n\nconst AlertDialogPortal: React.FC<AlertDialogPortalProps> = (\n props: ScopedProps<AlertDialogPortalProps>\n) => {\n const { __scopeAlertDialog, ...portalProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogPortal {...dialogScope} {...portalProps} />\n}\n\nAlertDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay'\n\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<TamaguiElement, AlertDialogOverlayProps>(\n (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...overlayProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogOverlay {...dialogScope} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogOverlay.displayName = OVERLAY_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent'\n\ntype AlertDialogContentContextValue = {\n cancelRef: React.MutableRefObject<TamaguiElement | null>\n}\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME)\n\ninterface AlertDialogContentProps\n extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst AlertDialogContent = React.forwardRef<TamaguiElement, AlertDialogContentProps>(\n (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n const { __scopeAlertDialog, children, ...contentProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n const contentRef = React.useRef<TamaguiElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const cancelRef = React.useRef<TamaguiElement | null>(null)\n\n return (\n <DialogWarningProvider\n contentName={CONTENT_NAME}\n titleName={TITLE_NAME}\n docsSlug=\"alert-dialog\"\n >\n <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n <DialogContent\n // @ts-ignore\n role=\"alertdialog\"\n {...dialogScope}\n {...contentProps}\n ref={composedRefs}\n onOpenAutoFocus={composeEventHandlers(\n contentProps.onOpenAutoFocus,\n (event) => {\n event.preventDefault()\n if (isWeb) {\n // @ts-ignore\n cancelRef.current?.focus({ preventScroll: true })\n }\n }\n )}\n onPointerDownOutside={(event) => event.preventDefault()}\n onInteractOutside={(event) => event.preventDefault()}\n >\n {/**\n * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n * This is because we want the accessibility checks to run only once the content is actually\n * open and that behaviour is already encapsulated in `DialogContent`.\n */}\n <Slottable>{children}</Slottable>\n {process.env.NODE_ENV === 'development' && (\n <DescriptionWarning contentRef={contentRef} />\n )}\n </DialogContent>\n </AlertDialogContentProvider>\n </DialogWarningProvider>\n )\n }\n)\n\nAlertDialogContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle'\n\ntype AlertDialogTitleProps = DialogTitleProps\n\nconst AlertDialogTitle = React.forwardRef<TamaguiElement, AlertDialogTitleProps>(\n (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...titleProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogTitle {...dialogScope} {...titleProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription'\n\ntype AlertDialogDescriptionProps = DialogDescriptionProps\n\nconst AlertDialogDescription = React.forwardRef<\n TamaguiElement,\n AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...descriptionProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />\n})\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction'\n\ntype AlertDialogActionProps = DialogCloseProps\n\nconst AlertDialogAction = React.forwardRef<TamaguiElement, AlertDialogActionProps>(\n (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...actionProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n return <DialogClose {...dialogScope} {...actionProps} ref={forwardedRef} />\n }\n)\n\nAlertDialogAction.displayName = ACTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel'\n\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<TamaguiElement, AlertDialogCancelProps>(\n (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n const { __scopeAlertDialog, ...cancelProps } = props\n const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog)\n const dialogScope = useDialogScope(__scopeAlertDialog)\n const ref = useComposedRefs(forwardedRef, cancelRef)\n return <DialogClose {...dialogScope} {...cancelProps} ref={ref} />\n }\n)\n\nAlertDialogCancel.displayName = CANCEL_NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n if (process.env.NODE_ENV === 'development') {\n React.useEffect(() => {\n if (!isWeb) return\n const hasDescription = document.getElementById(\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain\n contentRef.current?.getAttribute('aria-describedby')!\n )\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(`\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n \n 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.\n \n 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.\n \n For more information, see https://tamagui.dev/docs/components/alert-dialog`)\n }\n }, [contentRef])\n }\n\n return null\n}\n\nconst AlertDialogInner: React.FC<AlertDialogProps> = (\n props: ScopedProps<AlertDialogProps>\n) => {\n const { __scopeAlertDialog, native, ...alertDialogProps } = props\n const dialogScope = useDialogScope(__scopeAlertDialog)\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n const [open, setOpen] = useControllableState({\n prop: props.open,\n defaultProp: props.defaultOpen || false,\n onChange: props.onOpenChange,\n transition: true,\n })\n\n let triggerElement: any = null\n let title = ''\n let description = ''\n const buttons: {\n text: string\n onPress: (value?: string | undefined) => void\n style?: 'default' | 'cancel' | 'destructive'\n }[] = []\n\n forEachChildDeep(React.Children.toArray(props.children), (child) => {\n if (!React.isValidElement(child)) return false\n const name = isTamaguiElement(child)\n ? child.type.staticConfig.componentName\n : (child.type['displayName'] as string | undefined)\n switch (name) {\n case TRIGGER_NAME: {\n triggerElement = React.cloneElement(child as any, {\n __native: true,\n })\n return false\n }\n case TITLE_NAME: {\n title = getStringChildren(child)\n return false\n }\n case DESCRIPTION_NAME: {\n description = getStringChildren(child)\n return false\n }\n case ACTION_NAME:\n case CANCEL_NAME: {\n const style = name === ACTION_NAME ? 'default' : 'cancel'\n const text = getStringChildren(child)\n const onPress = () => {\n const childProps = child.props as any\n childProps?.onPress?.({ native: true })\n setOpen(false)\n }\n buttons.push({\n style,\n text,\n // @ts-ignore\n onPress,\n })\n return false\n }\n default: {\n return true\n }\n }\n })\n\n useIsomorphicLayoutEffect(() => {\n if (!open || !native) return\n if (title || description) {\n Alert.alert(title, description, buttons)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [native, open])\n\n if (native) {\n return React.cloneElement(triggerElement, {\n __onPress: () => {\n setOpen(true)\n },\n })\n }\n }\n\n return <Dialog {...dialogScope} {...alertDialogProps} modal />\n}\n\nfunction forEachChildDeep(\n children: React.ReactNode[],\n onChild: (el: React.ReactElement) => boolean\n) {\n for (const child of children) {\n if (!React.isValidElement(child)) continue\n if (!onChild(child)) continue\n if (child.props.children) {\n forEachChildDeep(React.Children.toArray(child.props.children), onChild)\n }\n }\n}\n\nfunction getStringChildren(child: React.ReactElement) {\n let string = ''\n forEachChildDeep(React.Children.toArray(child), (child) => {\n if (typeof child.props.children === 'string') {\n string = child.props.children\n return false\n }\n return true\n })\n return string\n}\n\nconst AlertDialog = withStaticProperties(AlertDialogInner, {\n Trigger: AlertDialogTrigger,\n Portal: AlertDialogPortal,\n Overlay: AlertDialogOverlay,\n Content: AlertDialogContent,\n Action: AlertDialogAction,\n Cancel: AlertDialogCancel,\n Title: AlertDialogTitle,\n Description: AlertDialogDescription,\n})\n\nAlertDialog.displayName = ROOT_NAME\n\nexport {\n createAlertDialogScope,\n //\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogContent,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogTitle,\n AlertDialogDescription,\n}\nexport type {\n AlertDialogProps,\n AlertDialogTriggerProps,\n AlertDialogPortalProps,\n AlertDialogOverlayProps,\n AlertDialogContentProps,\n AlertDialogActionProps,\n AlertDialogCancelProps,\n AlertDialogTitleProps,\n AlertDialogDescriptionProps,\n}\n"],
|
|
5
|
-
"mappings": "AAGA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAGA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,YAAY,WAAW;AACvB,SAAS,aAAa;AAMtB,MAAM,YAAY;AAGlB,MAAM,CAAC,0BAA0B,sBAAsB,IAAI,mBAAmB,WAAW;AAAA,EACvF;AACF,CAAC;AAED,MAAM,iBAAiB,kBAAkB;AAUzC,MAAM,eAAe;AAIrB,MAAM,gCAAgC,OAAO,QAAQ;AAAA,EACnD,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAAI,MAAM,
|
|
5
|
+
"mappings": "AAGA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAEA;AAAA,EAGA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,YAAY,WAAW;AACvB,SAAS,aAAa;AAMtB,MAAM,YAAY;AAGlB,MAAM,CAAC,0BAA0B,sBAAsB,IAAI,mBAAmB,WAAW;AAAA,EACvF;AACF,CAAC;AAED,MAAM,iBAAiB,kBAAkB;AAUzC,MAAM,eAAe;AAIrB,MAAM,gCAAgC,OAAO,QAAQ;AAAA,EACnD,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAAI,MAAM,UAAU,GAAG;AACrB,YAAM,EAAE,UAAU,SAAS,WAAW,GAAG,KAAK,IAAI;AAClD,aACE,CAAC;AAAA,YACK;AAAA,QACJ,SAAS,qBAAqB,SAAS,SAAS;AAAA,MAClD;AAAA,IAEJ;AAEA,UAAM,EAAE,oBAAoB,GAAG,aAAa,IAAI;AAChD,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,CAAC,kBAAkB,iBAAiB,cAAc,KAAK,cAAc;AAAA,EAC9E;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,cAAc;AAIpB,MAAM,oBAAsD,CAC1D,UACG;AACH,QAAM,EAAE,oBAAoB,GAAG,YAAY,IAAI;AAC/C,QAAM,cAAc,eAAe,kBAAkB;AACrD,SAAO,CAAC,iBAAiB,iBAAiB,aAAa;AACzD;AAEA,kBAAkB,cAAc;AAMhC,MAAM,eAAe;AAIrB,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,oBAAoB,GAAG,aAAa,IAAI;AAChD,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,CAAC,kBAAkB,iBAAiB,cAAc,KAAK,cAAc;AAAA,EAC9E;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,eAAe;AAMrB,MAAM,CAAC,4BAA4B,4BAA4B,IAC7D,yBAAyD,YAAY;AAKvE,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,oBAAoB,UAAU,GAAG,aAAa,IAAI;AAC1D,UAAM,cAAc,eAAe,kBAAkB;AACrD,UAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,UAAM,eAAe,gBAAgB,cAAc,UAAU;AAC7D,UAAM,YAAY,MAAM,OAA8B,IAAI;AAE1D,WACE,CAAC;AAAA,MACC,aAAa;AAAA,MACb,WAAW;AAAA,MACX,SAAS;AAAA,KAET,CAAC,2BAA2B,OAAO,oBAAoB,WAAW,WAChE,CAAC;AAAA,MAEC,KAAK;AAAA,UACD;AAAA,UACA;AAAA,MACJ,KAAK;AAAA,MACL,iBAAiB;AAAA,QACf,aAAa;AAAA,QACb,CAAC,UAAU;AACT,gBAAM,eAAe;AACrB,cAAI,OAAO;AAET,sBAAU,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,MACA,sBAAsB,CAAC,UAAU,MAAM,eAAe;AAAA,MACtD,mBAAmB,CAAC,UAAU,MAAM,eAAe;AAAA;AAAA,MAQnD,CAAC,WAAW,SAAS,EAApB;AAAA,OACA,QAAQ,IAAI,aAAa,iBACxB,CAAC,mBAAmB,YAAY,YAAY;AAAA,IAEhD,EA7BC,cA8BH,EA/BC,2BAgCH,EArCC;AAAA,EAuCL;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,aAAa;AAInB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAA2C,iBAAiB;AAC3D,UAAM,EAAE,oBAAoB,GAAG,WAAW,IAAI;AAC9C,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,CAAC,gBAAgB,iBAAiB,YAAY,KAAK,cAAc;AAAA,EAC1E;AACF;AAEA,iBAAiB,cAAc;AAM/B,MAAM,mBAAmB;AAIzB,MAAM,yBAAyB,MAAM,WAGnC,CAAC,OAAiD,iBAAiB;AACnE,QAAM,EAAE,oBAAoB,GAAG,iBAAiB,IAAI;AACpD,QAAM,cAAc,eAAe,kBAAkB;AACrD,SAAO,CAAC,sBAAsB,iBAAiB,kBAAkB,KAAK,cAAc;AACtF,CAAC;AAED,uBAAuB,cAAc;AAMrC,MAAM,cAAc;AAIpB,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,oBAAoB,GAAG,YAAY,IAAI;AAC/C,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,CAAC,gBAAgB,iBAAiB,aAAa,KAAK,cAAc;AAAA,EAC3E;AACF;AAEA,kBAAkB,cAAc;AAMhC,MAAM,cAAc;AAIpB,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,oBAAoB,GAAG,YAAY,IAAI;AAC/C,UAAM,EAAE,UAAU,IAAI,6BAA6B,aAAa,kBAAkB;AAClF,UAAM,cAAc,eAAe,kBAAkB;AACrD,UAAM,MAAM,gBAAgB,cAAc,SAAS;AACnD,WAAO,CAAC,gBAAgB,iBAAiB,aAAa,KAAK,KAAK;AAAA,EAClE;AACF;AAEA,kBAAkB,cAAc;AAQhC,MAAM,qBAAwD,CAAC,EAAE,WAAW,MAAM;AAChF,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAO;AACZ,YAAM,iBAAiB,SAAS;AAAA;AAAA;AAAA,QAG9B,WAAW,SAAS,aAAa,kBAAkB;AAAA,MACrD;AACA,UAAI,CAAC,gBAAgB;AAEnB,gBAAQ,KAAK,KAAK;AAAA;AAAA,6CAEmB,iCAAiC;AAAA;AAAA,oKAEsF;AAAA;AAAA,mFAEjF;AAAA,MAC7E;AAAA,IACF,GAAG,CAAC,UAAU,CAAC;AAAA,EACjB;AAEA,SAAO;AACT;AAEA,MAAM,mBAA+C,CACnD,UACG;AACH,QAAM,EAAE,oBAAoB,QAAQ,GAAG,iBAAiB,IAAI;AAC5D,QAAM,cAAc,eAAe,kBAAkB;AAErD,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,UAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,MAC3C,MAAM,MAAM;AAAA,MACZ,aAAa,MAAM,eAAe;AAAA,MAClC,UAAU,MAAM;AAAA,MAChB,YAAY;AAAA,IACd,CAAC;AAED,QAAI,iBAAsB;AAC1B,QAAI,QAAQ;AACZ,QAAI,cAAc;AAClB,UAAM,UAIA,CAAC;AAEP,qBAAiB,MAAM,SAAS,QAAQ,MAAM,QAAQ,GAAG,CAAC,UAAU;AAClE,UAAI,CAAC,MAAM,eAAe,KAAK;AAAG,eAAO;AACzC,YAAM,OAAO,iBAAiB,KAAK,IAC/B,MAAM,KAAK,aAAa,gBACvB,MAAM,KAAK,aAAa;AAC7B,cAAQ,MAAM;AAAA,QACZ,KAAK,cAAc;AACjB,2BAAiB,MAAM,aAAa,OAAc;AAAA,YAChD,UAAU;AAAA,UACZ,CAAC;AACD,iBAAO;AAAA,QACT;AAAA,QACA,KAAK,YAAY;AACf,kBAAQ,kBAAkB,KAAK;AAC/B,iBAAO;AAAA,QACT;AAAA,QACA,KAAK,kBAAkB;AACrB,wBAAc,kBAAkB,KAAK;AACrC,iBAAO;AAAA,QACT;AAAA,QACA,KAAK;AAAA,QACL,KAAK,aAAa;AAChB,gBAAM,QAAQ,SAAS,cAAc,YAAY;AACjD,gBAAM,OAAO,kBAAkB,KAAK;AACpC,gBAAM,UAAU,MAAM;AACpB,kBAAM,aAAa,MAAM;AACzB,wBAAY,UAAU,EAAE,QAAQ,KAAK,CAAC;AACtC,oBAAQ,KAAK;AAAA,UACf;AACA,kBAAQ,KAAK;AAAA,YACX;AAAA,YACA;AAAA;AAAA,YAEA;AAAA,UACF,CAAC;AACD,iBAAO;AAAA,QACT;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,CAAC;AAED,8BAA0B,MAAM;AAC9B,UAAI,CAAC,QAAQ,CAAC;AAAQ;AACtB,UAAI,SAAS,aAAa;AACxB,cAAM,MAAM,OAAO,aAAa,OAAO;AAAA,MACzC;AAAA,IAEF,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAI,QAAQ;AACV,aAAO,MAAM,aAAa,gBAAgB;AAAA,QACxC,WAAW,MAAM;AACf,kBAAQ,IAAI;AAAA,QACd;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO,CAAC,WAAW,iBAAiB,kBAAkB,MAAM;AAC9D;AAEA,SAAS,iBACP,UACA,SACA;AACA,aAAW,SAAS,UAAU;AAC5B,QAAI,CAAC,MAAM,eAAe,KAAK;AAAG;AAClC,QAAI,CAAC,QAAQ,KAAK;AAAG;AACrB,QAAI,MAAM,MAAM,UAAU;AACxB,uBAAiB,MAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,GAAG,OAAO;AAAA,IACxE;AAAA,EACF;AACF;AAEA,SAAS,kBAAkB,OAA2B;AACpD,MAAI,SAAS;AACb,mBAAiB,MAAM,SAAS,QAAQ,KAAK,GAAG,CAACA,WAAU;AACzD,QAAI,OAAOA,OAAM,MAAM,aAAa,UAAU;AAC5C,eAASA,OAAM,MAAM;AACrB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;AAEA,MAAM,cAAc,qBAAqB,kBAAkB;AAAA,EACzD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,CAAC;AAED,YAAY,cAAc;",
|
|
6
6
|
"names": ["child"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/alert-dialog",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"types": "./types/index.d.ts",
|
|
6
6
|
"main": "dist/cjs",
|
|
@@ -21,21 +21,21 @@
|
|
|
21
21
|
"clean:build": "tamagui-build clean:build"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@tamagui/animate-presence": "^1.1.
|
|
25
|
-
"@tamagui/aria-hidden": "^1.1.
|
|
26
|
-
"@tamagui/compose-refs": "^1.1.
|
|
27
|
-
"@tamagui/core": "^1.1.
|
|
28
|
-
"@tamagui/create-context": "^1.1.
|
|
29
|
-
"@tamagui/dialog": "^1.1.
|
|
30
|
-
"@tamagui/dismissable": "^1.1.
|
|
31
|
-
"@tamagui/focus-scope": "^1.1.
|
|
32
|
-
"@tamagui/polyfill-dev": "^1.1.
|
|
33
|
-
"@tamagui/popper": "^1.1.
|
|
34
|
-
"@tamagui/portal": "^1.1.
|
|
35
|
-
"@tamagui/remove-scroll": "^1.1.
|
|
36
|
-
"@tamagui/stacks": "^1.1.
|
|
37
|
-
"@tamagui/text": "^1.1.
|
|
38
|
-
"@tamagui/use-controllable-state": "^1.1.
|
|
24
|
+
"@tamagui/animate-presence": "^1.1.9",
|
|
25
|
+
"@tamagui/aria-hidden": "^1.1.9",
|
|
26
|
+
"@tamagui/compose-refs": "^1.1.9",
|
|
27
|
+
"@tamagui/core": "^1.1.9",
|
|
28
|
+
"@tamagui/create-context": "^1.1.9",
|
|
29
|
+
"@tamagui/dialog": "^1.1.9",
|
|
30
|
+
"@tamagui/dismissable": "^1.1.9",
|
|
31
|
+
"@tamagui/focus-scope": "^1.1.9",
|
|
32
|
+
"@tamagui/polyfill-dev": "^1.1.9",
|
|
33
|
+
"@tamagui/popper": "^1.1.9",
|
|
34
|
+
"@tamagui/portal": "^1.1.9",
|
|
35
|
+
"@tamagui/remove-scroll": "^1.1.9",
|
|
36
|
+
"@tamagui/stacks": "^1.1.9",
|
|
37
|
+
"@tamagui/text": "^1.1.9",
|
|
38
|
+
"@tamagui/use-controllable-state": "^1.1.9"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "*",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-native": "*"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@tamagui/build": "^1.1.
|
|
46
|
+
"@tamagui/build": "^1.1.9",
|
|
47
47
|
"react": "^18.2.0",
|
|
48
48
|
"react-dom": "^18.2.0",
|
|
49
49
|
"react-native": "*"
|