@tamagui/alert-dialog 1.0.1-rc.7 → 1.0.1-rc.8
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 +4 -8
- package/dist/cjs/AlertDialog.js.map +2 -2
- package/dist/esm/AlertDialog.js +4 -8
- package/dist/esm/AlertDialog.js.map +2 -2
- package/dist/jsx/AlertDialog.js +4 -8
- package/dist/jsx/AlertDialog.js.map +2 -2
- package/package.json +17 -17
- package/src/AlertDialog.tsx +16 -22
package/dist/cjs/AlertDialog.js
CHANGED
|
@@ -46,10 +46,9 @@ var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
|
46
46
|
var React = __toESM(require("react"));
|
|
47
47
|
var import_react_native = require("react-native");
|
|
48
48
|
const ROOT_NAME = "AlertDialog";
|
|
49
|
-
const [createAlertDialogContext, createAlertDialogScope] = (0, import_create_context.createContextScope)(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
);
|
|
49
|
+
const [createAlertDialogContext, createAlertDialogScope] = (0, import_create_context.createContextScope)(ROOT_NAME, [
|
|
50
|
+
import_dialog.createDialogScope
|
|
51
|
+
]);
|
|
53
52
|
const useDialogScope = (0, import_dialog.createDialogScope)();
|
|
54
53
|
const TRIGGER_NAME = "AlertDialogTrigger";
|
|
55
54
|
const NativeAlertDialogTriggerFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
@@ -185,10 +184,7 @@ const CANCEL_NAME = "AlertDialogCancel";
|
|
|
185
184
|
const AlertDialogCancel = React.forwardRef(
|
|
186
185
|
(props, forwardedRef) => {
|
|
187
186
|
const { __scopeAlertDialog, ...cancelProps } = props;
|
|
188
|
-
const { cancelRef } = useAlertDialogContentContext(
|
|
189
|
-
CANCEL_NAME,
|
|
190
|
-
__scopeAlertDialog
|
|
191
|
-
);
|
|
187
|
+
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
192
188
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
193
189
|
const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, cancelRef);
|
|
194
190
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogClose, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialog.tsx"],
|
|
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 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(\n 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 (\n <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />\n )\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(\n CANCEL_NAME,\n __scopeAlertDialog,\n )\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 React.useLayoutEffect(() => {\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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 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 React.useLayoutEffect(() => {\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyEQ;AAtER,0BAAgC;AAChC,kBAQO;AACP,4BAA0C;AAC1C,oBAmBO;AACP,oBAAuB;AACvB,oCAAqC;AACrC,YAAuB;AACvB,0BAAsB;AAMtB,MAAM,YAAY;AAGlB,MAAM,CAAC,0BAA0B,sBAAsB,QAAI,0CAAmB,WAAW;AAAA,EACvF;AACF,CAAC;AAED,MAAM,qBAAiB,iCAAkB;AAUzC,MAAM,eAAe;AAIrB,MAAM,oCAAgC,oBAAO,sBAAQ;AAAA,EACnD,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAAI,MAAM,aAAa;AACrB,YAAM,EAAE,UAAU,SAAS,cAAc,KAAK,IAAI;AAClD,aACE,4CAAC;AAAA,QACE,GAAG;AAAA,QACJ,aAAS,kCAAqB,SAAS,SAAS;AAAA,OAClD;AAAA,IAEJ;AAEA,UAAM,EAAE,uBAAuB,aAAa,IAAI;AAChD,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,4CAAC;AAAA,MAAe,GAAG;AAAA,MAAc,GAAG;AAAA,MAAc,KAAK;AAAA,KAAc;AAAA,EAC9E;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,cAAc;AAIpB,MAAM,oBAAsD,CAC1D,UACG;AACH,QAAM,EAAE,uBAAuB,YAAY,IAAI;AAC/C,QAAM,cAAc,eAAe,kBAAkB;AACrD,SAAO,4CAAC;AAAA,IAAc,GAAG;AAAA,IAAc,GAAG;AAAA,GAAa;AACzD;AAEA,kBAAkB,cAAc;AAMhC,MAAM,eAAe;AAIrB,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,OAA6C,iBAAiB;AAC7D,UAAM,EAAE,uBAAuB,aAAa,IAAI;AAChD,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,4CAAC;AAAA,MAAe,GAAG;AAAA,MAAc,GAAG;AAAA,MAAc,KAAK;AAAA,KAAc;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,aAAa,aAAa,IAAI;AAC1D,UAAM,cAAc,eAAe,kBAAkB;AACrD,UAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,UAAM,mBAAe,qCAAgB,cAAc,UAAU;AAC7D,UAAM,YAAY,MAAM,OAA8B,IAAI;AAE1D,WACE,4CAAC;AAAA,MACC,aAAa;AAAA,MACb,WAAW;AAAA,MACX,UAAS;AAAA,MAET,sDAAC;AAAA,QAA2B,OAAO;AAAA,QAAoB;AAAA,QACrD,uDAAC;AAAA,UAEC,MAAK;AAAA,UACJ,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,qBAAiB;AAAA,YACf,aAAa;AAAA,YACb,CAAC,UAAU;AAnKzB;AAoKgB,oBAAM,eAAe;AACrB,kBAAI,mBAAO;AAET,gCAAU,YAAV,mBAAmB,MAAM,EAAE,eAAe,KAAK;AAAA,cACjD;AAAA,YACF;AAAA,UACF;AAAA,UACA,sBAAsB,CAAC,UAAU,MAAM,eAAe;AAAA,UACtD,mBAAmB,CAAC,UAAU,MAAM,eAAe;AAAA,UAQnD;AAAA,wDAAC;AAAA,cAAW;AAAA,aAAS;AAAA,YACpB,QAAQ,IAAI,aAAa,iBACxB,4CAAC;AAAA,cAAmB;AAAA,aAAwB;AAAA;AAAA,SAEhD;AAAA,OACF;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,aAAa;AAInB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAA2C,iBAAiB;AAC3D,UAAM,EAAE,uBAAuB,WAAW,IAAI;AAC9C,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,4CAAC;AAAA,MAAa,GAAG;AAAA,MAAc,GAAG;AAAA,MAAY,KAAK;AAAA,KAAc;AAAA,EAC1E;AACF;AAEA,iBAAiB,cAAc;AAM/B,MAAM,mBAAmB;AAIzB,MAAM,yBAAyB,MAAM,WAGnC,CAAC,OAAiD,iBAAiB;AACnE,QAAM,EAAE,uBAAuB,iBAAiB,IAAI;AACpD,QAAM,cAAc,eAAe,kBAAkB;AACrD,SAAO,4CAAC;AAAA,IAAmB,GAAG;AAAA,IAAc,GAAG;AAAA,IAAkB,KAAK;AAAA,GAAc;AACtF,CAAC;AAED,uBAAuB,cAAc;AAMrC,MAAM,cAAc;AAIpB,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,uBAAuB,YAAY,IAAI;AAC/C,UAAM,cAAc,eAAe,kBAAkB;AACrD,WAAO,4CAAC;AAAA,MAAa,GAAG;AAAA,MAAc,GAAG;AAAA,MAAa,KAAK;AAAA,KAAc;AAAA,EAC3E;AACF;AAEA,kBAAkB,cAAc;AAMhC,MAAM,cAAc;AAIpB,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM,EAAE,uBAAuB,YAAY,IAAI;AAC/C,UAAM,EAAE,UAAU,IAAI,6BAA6B,aAAa,kBAAkB;AAClF,UAAM,cAAc,eAAe,kBAAkB;AACrD,UAAM,UAAM,qCAAgB,cAAc,SAAS;AACnD,WAAO,4CAAC;AAAA,MAAa,GAAG;AAAA,MAAc,GAAG;AAAA,MAAa;AAAA,KAAU;AAAA,EAClE;AACF;AAEA,kBAAkB,cAAc;AAQhC,MAAM,qBAAwD,CAAC,EAAE,WAAW,MAAM;AAChF,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,UAAU,MAAM;AApR1B;AAqRM,UAAI,CAAC;AAAO;AACZ,YAAM,iBAAiB,SAAS;AAAA,SAG9B,gBAAW,YAAX,mBAAoB,aAAa;AAAA,MACnC;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,WAAW,iBAAiB,IAAI;AAC5D,QAAM,cAAc,eAAe,kBAAkB;AAErD,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,UAAM,CAAC,MAAM,OAAO,QAAI,oDAAqB;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,WAAO,8BAAiB,KAAK,IAC/B,MAAM,KAAK,aAAa,gBACvB,MAAM,KAAK;AAChB,cAAQ;AAAA,aACD,cAAc;AACjB,2BAAiB,MAAM,aAAa,OAAc;AAAA,YAChD,UAAU;AAAA,UACZ,CAAC;AACD,iBAAO;AAAA,QACT;AAAA,aACK,YAAY;AACf,kBAAQ,kBAAkB,KAAK;AAC/B,iBAAO;AAAA,QACT;AAAA,aACK,kBAAkB;AACrB,wBAAc,kBAAkB,KAAK;AACrC,iBAAO;AAAA,QACT;AAAA,aACK;AAAA,aACA,aAAa;AAChB,gBAAM,QAAQ,SAAS,cAAc,YAAY;AACjD,gBAAM,OAAO,kBAAkB,KAAK;AACpC,gBAAM,UAAU,MAAM;AA1VhC;AA2VY,kBAAM,aAAa,MAAM;AACzB,2DAAY,YAAZ,oCAAsB,EAAE,QAAQ,KAAK;AACrC,oBAAQ,KAAK;AAAA,UACf;AACA,kBAAQ,KAAK;AAAA,YACX;AAAA,YACA;AAAA,YAEA;AAAA,UACF,CAAC;AACD,iBAAO;AAAA,QACT;AAAA,iBACS;AACP,iBAAO;AAAA,QACT;AAAA;AAAA,IAEJ,CAAC;AAED,UAAM,gBAAgB,MAAM;AAC1B,UAAI,CAAC,QAAQ,CAAC;AAAQ;AACtB,UAAI,SAAS,aAAa;AACxB,kCAAM,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,4CAAC;AAAA,IAAQ,GAAG;AAAA,IAAc,GAAG;AAAA,IAAkB,OAAK;AAAA,GAAC;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,kBAAc,kCAAqB,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/dist/esm/AlertDialog.js
CHANGED
|
@@ -26,10 +26,9 @@ import { useControllableState } from "@tamagui/use-controllable-state";
|
|
|
26
26
|
import * as React from "react";
|
|
27
27
|
import { Alert } from "react-native";
|
|
28
28
|
const ROOT_NAME = "AlertDialog";
|
|
29
|
-
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
);
|
|
29
|
+
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
|
|
30
|
+
createDialogScope
|
|
31
|
+
]);
|
|
33
32
|
const useDialogScope = createDialogScope();
|
|
34
33
|
const TRIGGER_NAME = "AlertDialogTrigger";
|
|
35
34
|
const NativeAlertDialogTriggerFrame = styled(YStack, {
|
|
@@ -165,10 +164,7 @@ const CANCEL_NAME = "AlertDialogCancel";
|
|
|
165
164
|
const AlertDialogCancel = React.forwardRef(
|
|
166
165
|
(props, forwardedRef) => {
|
|
167
166
|
const { __scopeAlertDialog, ...cancelProps } = props;
|
|
168
|
-
const { cancelRef } = useAlertDialogContentContext(
|
|
169
|
-
CANCEL_NAME,
|
|
170
|
-
__scopeAlertDialog
|
|
171
|
-
);
|
|
167
|
+
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
172
168
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
173
169
|
const ref = useComposedRefs(forwardedRef, cancelRef);
|
|
174
170
|
return /* @__PURE__ */ jsx(DialogClose, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialog.tsx"],
|
|
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 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(\n 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 (\n <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />\n )\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(\n CANCEL_NAME,\n __scopeAlertDialog,\n )\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 React.useLayoutEffect(() => {\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": "
|
|
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 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 React.useLayoutEffect(() => {\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": "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",
|
|
6
6
|
"names": ["child"]
|
|
7
7
|
}
|
package/dist/jsx/AlertDialog.js
CHANGED
|
@@ -25,10 +25,9 @@ import { useControllableState } from "@tamagui/use-controllable-state";
|
|
|
25
25
|
import * as React from "react";
|
|
26
26
|
import { Alert } from "react-native";
|
|
27
27
|
const ROOT_NAME = "AlertDialog";
|
|
28
|
-
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
);
|
|
28
|
+
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
|
|
29
|
+
createDialogScope
|
|
30
|
+
]);
|
|
32
31
|
const useDialogScope = createDialogScope();
|
|
33
32
|
const TRIGGER_NAME = "AlertDialogTrigger";
|
|
34
33
|
const NativeAlertDialogTriggerFrame = styled(YStack, {
|
|
@@ -115,10 +114,7 @@ const CANCEL_NAME = "AlertDialogCancel";
|
|
|
115
114
|
const AlertDialogCancel = React.forwardRef(
|
|
116
115
|
(props, forwardedRef) => {
|
|
117
116
|
const { __scopeAlertDialog, ...cancelProps } = props;
|
|
118
|
-
const { cancelRef } = useAlertDialogContentContext(
|
|
119
|
-
CANCEL_NAME,
|
|
120
|
-
__scopeAlertDialog
|
|
121
|
-
);
|
|
117
|
+
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
|
|
122
118
|
const dialogScope = useDialogScope(__scopeAlertDialog);
|
|
123
119
|
const ref = useComposedRefs(forwardedRef, cancelRef);
|
|
124
120
|
return <DialogClose {...dialogScope} {...cancelProps} ref={ref} />;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AlertDialog.tsx"],
|
|
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 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(\n 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 (\n <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />\n )\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(\n CANCEL_NAME,\n __scopeAlertDialog,\n )\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 React.useLayoutEffect(() => {\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,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;AAAA,
|
|
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 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 React.useLayoutEffect(() => {\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": "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",
|
|
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.0.1-rc.
|
|
3
|
+
"version": "1.0.1-rc.8",
|
|
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.0.1-rc.
|
|
25
|
-
"@tamagui/aria-hidden": "^1.0.1-rc.
|
|
26
|
-
"@tamagui/compose-refs": "^1.0.1-rc.
|
|
27
|
-
"@tamagui/core": "^1.0.1-rc.
|
|
28
|
-
"@tamagui/create-context": "^1.0.1-rc.
|
|
29
|
-
"@tamagui/dialog": "^1.0.1-rc.
|
|
30
|
-
"@tamagui/dismissable": "^1.0.1-rc.
|
|
31
|
-
"@tamagui/focus-scope": "^1.0.1-rc.
|
|
32
|
-
"@tamagui/polyfill-dev": "^1.0.1-rc.
|
|
33
|
-
"@tamagui/popper": "^1.0.1-rc.
|
|
34
|
-
"@tamagui/portal": "^1.0.1-rc.
|
|
35
|
-
"@tamagui/remove-scroll": "^1.0.1-rc.
|
|
36
|
-
"@tamagui/stacks": "^1.0.1-rc.
|
|
37
|
-
"@tamagui/text": "^1.0.1-rc.
|
|
38
|
-
"@tamagui/use-controllable-state": "^1.0.1-rc.
|
|
24
|
+
"@tamagui/animate-presence": "^1.0.1-rc.8",
|
|
25
|
+
"@tamagui/aria-hidden": "^1.0.1-rc.8",
|
|
26
|
+
"@tamagui/compose-refs": "^1.0.1-rc.8",
|
|
27
|
+
"@tamagui/core": "^1.0.1-rc.8",
|
|
28
|
+
"@tamagui/create-context": "^1.0.1-rc.8",
|
|
29
|
+
"@tamagui/dialog": "^1.0.1-rc.8",
|
|
30
|
+
"@tamagui/dismissable": "^1.0.1-rc.8",
|
|
31
|
+
"@tamagui/focus-scope": "^1.0.1-rc.8",
|
|
32
|
+
"@tamagui/polyfill-dev": "^1.0.1-rc.8",
|
|
33
|
+
"@tamagui/popper": "^1.0.1-rc.8",
|
|
34
|
+
"@tamagui/portal": "^1.0.1-rc.8",
|
|
35
|
+
"@tamagui/remove-scroll": "^1.0.1-rc.8",
|
|
36
|
+
"@tamagui/stacks": "^1.0.1-rc.8",
|
|
37
|
+
"@tamagui/text": "^1.0.1-rc.8",
|
|
38
|
+
"@tamagui/use-controllable-state": "^1.0.1-rc.8"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "^18.2.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-native": "*"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@tamagui/build": "^1.0.1-rc.
|
|
46
|
+
"@tamagui/build": "^1.0.1-rc.8",
|
|
47
47
|
"react": "^18.2.0",
|
|
48
48
|
"react-dom": "^18.2.0",
|
|
49
49
|
"react-native": "*"
|
package/src/AlertDialog.tsx
CHANGED
|
@@ -44,10 +44,9 @@ import { Alert } from 'react-native'
|
|
|
44
44
|
const ROOT_NAME = 'AlertDialog'
|
|
45
45
|
|
|
46
46
|
type ScopedProps<P> = P & { __scopeAlertDialog?: Scope }
|
|
47
|
-
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
)
|
|
47
|
+
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
|
|
48
|
+
createDialogScope,
|
|
49
|
+
])
|
|
51
50
|
|
|
52
51
|
const useDialogScope = createDialogScope()
|
|
53
52
|
|
|
@@ -82,7 +81,7 @@ const AlertDialogTrigger = React.forwardRef<TamaguiElement, AlertDialogTriggerPr
|
|
|
82
81
|
const { __scopeAlertDialog, ...triggerProps } = props
|
|
83
82
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
84
83
|
return <DialogTrigger {...dialogScope} {...triggerProps} ref={forwardedRef} />
|
|
85
|
-
}
|
|
84
|
+
}
|
|
86
85
|
)
|
|
87
86
|
|
|
88
87
|
AlertDialogTrigger.displayName = TRIGGER_NAME
|
|
@@ -96,7 +95,7 @@ const PORTAL_NAME = 'AlertDialogPortal'
|
|
|
96
95
|
interface AlertDialogPortalProps extends DialogPortalProps {}
|
|
97
96
|
|
|
98
97
|
const AlertDialogPortal: React.FC<AlertDialogPortalProps> = (
|
|
99
|
-
props: ScopedProps<AlertDialogPortalProps
|
|
98
|
+
props: ScopedProps<AlertDialogPortalProps>
|
|
100
99
|
) => {
|
|
101
100
|
const { __scopeAlertDialog, ...portalProps } = props
|
|
102
101
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
@@ -118,7 +117,7 @@ const AlertDialogOverlay = React.forwardRef<TamaguiElement, AlertDialogOverlayPr
|
|
|
118
117
|
const { __scopeAlertDialog, ...overlayProps } = props
|
|
119
118
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
120
119
|
return <DialogOverlay {...dialogScope} {...overlayProps} ref={forwardedRef} />
|
|
121
|
-
}
|
|
120
|
+
}
|
|
122
121
|
)
|
|
123
122
|
|
|
124
123
|
AlertDialogOverlay.displayName = OVERLAY_NAME
|
|
@@ -168,7 +167,7 @@ const AlertDialogContent = React.forwardRef<TamaguiElement, AlertDialogContentPr
|
|
|
168
167
|
// @ts-ignore
|
|
169
168
|
cancelRef.current?.focus({ preventScroll: true })
|
|
170
169
|
}
|
|
171
|
-
}
|
|
170
|
+
}
|
|
172
171
|
)}
|
|
173
172
|
onPointerDownOutside={(event) => event.preventDefault()}
|
|
174
173
|
onInteractOutside={(event) => event.preventDefault()}
|
|
@@ -187,7 +186,7 @@ const AlertDialogContent = React.forwardRef<TamaguiElement, AlertDialogContentPr
|
|
|
187
186
|
</AlertDialogContentProvider>
|
|
188
187
|
</DialogWarningProvider>
|
|
189
188
|
)
|
|
190
|
-
}
|
|
189
|
+
}
|
|
191
190
|
)
|
|
192
191
|
|
|
193
192
|
AlertDialogContent.displayName = CONTENT_NAME
|
|
@@ -205,7 +204,7 @@ const AlertDialogTitle = React.forwardRef<TamaguiElement, AlertDialogTitleProps>
|
|
|
205
204
|
const { __scopeAlertDialog, ...titleProps } = props
|
|
206
205
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
207
206
|
return <DialogTitle {...dialogScope} {...titleProps} ref={forwardedRef} />
|
|
208
|
-
}
|
|
207
|
+
}
|
|
209
208
|
)
|
|
210
209
|
|
|
211
210
|
AlertDialogTitle.displayName = TITLE_NAME
|
|
@@ -224,9 +223,7 @@ const AlertDialogDescription = React.forwardRef<
|
|
|
224
223
|
>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {
|
|
225
224
|
const { __scopeAlertDialog, ...descriptionProps } = props
|
|
226
225
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
227
|
-
return
|
|
228
|
-
<DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />
|
|
229
|
-
)
|
|
226
|
+
return <DialogDescription {...dialogScope} {...descriptionProps} ref={forwardedRef} />
|
|
230
227
|
})
|
|
231
228
|
|
|
232
229
|
AlertDialogDescription.displayName = DESCRIPTION_NAME
|
|
@@ -244,7 +241,7 @@ const AlertDialogAction = React.forwardRef<TamaguiElement, AlertDialogActionProp
|
|
|
244
241
|
const { __scopeAlertDialog, ...actionProps } = props
|
|
245
242
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
246
243
|
return <DialogClose {...dialogScope} {...actionProps} ref={forwardedRef} />
|
|
247
|
-
}
|
|
244
|
+
}
|
|
248
245
|
)
|
|
249
246
|
|
|
250
247
|
AlertDialogAction.displayName = ACTION_NAME
|
|
@@ -260,14 +257,11 @@ interface AlertDialogCancelProps extends DialogCloseProps {}
|
|
|
260
257
|
const AlertDialogCancel = React.forwardRef<TamaguiElement, AlertDialogCancelProps>(
|
|
261
258
|
(props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {
|
|
262
259
|
const { __scopeAlertDialog, ...cancelProps } = props
|
|
263
|
-
const { cancelRef } = useAlertDialogContentContext(
|
|
264
|
-
CANCEL_NAME,
|
|
265
|
-
__scopeAlertDialog,
|
|
266
|
-
)
|
|
260
|
+
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog)
|
|
267
261
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
268
262
|
const ref = useComposedRefs(forwardedRef, cancelRef)
|
|
269
263
|
return <DialogClose {...dialogScope} {...cancelProps} ref={ref} />
|
|
270
|
-
}
|
|
264
|
+
}
|
|
271
265
|
)
|
|
272
266
|
|
|
273
267
|
AlertDialogCancel.displayName = CANCEL_NAME
|
|
@@ -285,7 +279,7 @@ const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) =
|
|
|
285
279
|
const hasDescription = document.getElementById(
|
|
286
280
|
// @ts-ignore
|
|
287
281
|
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
288
|
-
contentRef.current?.getAttribute('aria-describedby')
|
|
282
|
+
contentRef.current?.getAttribute('aria-describedby')!
|
|
289
283
|
)
|
|
290
284
|
if (!hasDescription) {
|
|
291
285
|
// eslint-disable-next-line no-console
|
|
@@ -304,7 +298,7 @@ const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) =
|
|
|
304
298
|
}
|
|
305
299
|
|
|
306
300
|
const AlertDialogInner: React.FC<AlertDialogProps> = (
|
|
307
|
-
props: ScopedProps<AlertDialogProps
|
|
301
|
+
props: ScopedProps<AlertDialogProps>
|
|
308
302
|
) => {
|
|
309
303
|
const { __scopeAlertDialog, native, ...alertDialogProps } = props
|
|
310
304
|
const dialogScope = useDialogScope(__scopeAlertDialog)
|
|
@@ -391,7 +385,7 @@ const AlertDialogInner: React.FC<AlertDialogProps> = (
|
|
|
391
385
|
|
|
392
386
|
function forEachChildDeep(
|
|
393
387
|
children: React.ReactNode[],
|
|
394
|
-
onChild: (el: React.ReactElement) => boolean
|
|
388
|
+
onChild: (el: React.ReactElement) => boolean
|
|
395
389
|
) {
|
|
396
390
|
for (const child of children) {
|
|
397
391
|
if (!React.isValidElement(child)) continue
|