@tamagui/dialog 1.0.1-rc.1.5 → 1.0.1-rc.3
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/Dialog.js +8 -3
- package/dist/cjs/Dialog.js.map +2 -2
- package/dist/esm/Dialog.js +8 -3
- package/dist/esm/Dialog.js.map +2 -2
- package/dist/jsx/Dialog.js +9 -4
- package/dist/jsx/Dialog.js.map +2 -2
- package/package.json +18 -18
- package/src/Dialog.tsx +7 -7
- package/types/Dialog.d.ts +11 -14
package/dist/cjs/Dialog.js
CHANGED
|
@@ -89,7 +89,8 @@ const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
|
89
89
|
fullscreen: true,
|
|
90
90
|
zIndex: 100,
|
|
91
91
|
...import_core.isWeb && {
|
|
92
|
-
maxHeight: "100vh"
|
|
92
|
+
maxHeight: "100vh",
|
|
93
|
+
position: "fixed"
|
|
93
94
|
}
|
|
94
95
|
});
|
|
95
96
|
const DialogPortal = DialogPortalFrame.extractable(
|
|
@@ -231,7 +232,6 @@ const DialogContentModal = React.forwardRef(
|
|
|
231
232
|
...props,
|
|
232
233
|
context,
|
|
233
234
|
ref: composedRefs,
|
|
234
|
-
trapFocus: context.open,
|
|
235
235
|
disableOutsidePointerEvents: true,
|
|
236
236
|
onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
237
237
|
var _a;
|
|
@@ -358,9 +358,14 @@ const DialogContentImpl = React.forwardRef(
|
|
|
358
358
|
}
|
|
359
359
|
);
|
|
360
360
|
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
361
|
-
const DialogSheetContents = ({
|
|
361
|
+
const DialogSheetContents = ({
|
|
362
|
+
__scopeDialog,
|
|
363
|
+
name,
|
|
364
|
+
...props
|
|
365
|
+
}) => {
|
|
362
366
|
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
363
367
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
|
|
368
|
+
forwardProps: props,
|
|
364
369
|
name: `${context.scopeKey}SheetContents`
|
|
365
370
|
});
|
|
366
371
|
};
|
package/dist/cjs/Dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n MediaQueryKey,\n Slot,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem name={`${context.scopeKey}SheetContents`}>\n {/* until we can use react-native portals natively */}\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({ __scopeDialog }: ScopedProps<{}>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: DialogSheetContents,\n })\n const sheetBreakpoint = when || false\n\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n const scopeId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n\n return (\n <AdaptProvider>\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={scopeKey}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n position: 'fixed' as any,\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem name={`${context.scopeKey}SheetContents`}>\n {/* until we can use react-native portals natively */}\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({\n __scopeDialog,\n name,\n ...props\n}: ScopedProps<{ name: string }>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost forwardProps={props} name={`${context.scopeKey}SheetContents`} />\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: DialogSheetContents,\n })\n const sheetBreakpoint = when || false\n\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n const scopeId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n\n return (\n <AdaptProvider>\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={scopeKey}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Dialog"]
|
|
7
7
|
}
|
package/dist/esm/Dialog.js
CHANGED
|
@@ -59,7 +59,8 @@ const DialogPortalFrame = styled(YStack, {
|
|
|
59
59
|
fullscreen: true,
|
|
60
60
|
zIndex: 100,
|
|
61
61
|
...isWeb && {
|
|
62
|
-
maxHeight: "100vh"
|
|
62
|
+
maxHeight: "100vh",
|
|
63
|
+
position: "fixed"
|
|
63
64
|
}
|
|
64
65
|
});
|
|
65
66
|
const DialogPortal = DialogPortalFrame.extractable(
|
|
@@ -201,7 +202,6 @@ const DialogContentModal = React.forwardRef(
|
|
|
201
202
|
...props,
|
|
202
203
|
context,
|
|
203
204
|
ref: composedRefs,
|
|
204
|
-
trapFocus: context.open,
|
|
205
205
|
disableOutsidePointerEvents: true,
|
|
206
206
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
207
207
|
var _a;
|
|
@@ -328,9 +328,14 @@ const DialogContentImpl = React.forwardRef(
|
|
|
328
328
|
}
|
|
329
329
|
);
|
|
330
330
|
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
331
|
-
const DialogSheetContents = ({
|
|
331
|
+
const DialogSheetContents = ({
|
|
332
|
+
__scopeDialog,
|
|
333
|
+
name,
|
|
334
|
+
...props
|
|
335
|
+
}) => {
|
|
332
336
|
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
333
337
|
return /* @__PURE__ */ jsx(PortalHost, {
|
|
338
|
+
forwardProps: props,
|
|
334
339
|
name: `${context.scopeKey}SheetContents`
|
|
335
340
|
});
|
|
336
341
|
};
|
package/dist/esm/Dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n MediaQueryKey,\n Slot,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem name={`${context.scopeKey}SheetContents`}>\n {/* until we can use react-native portals natively */}\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({ __scopeDialog }: ScopedProps<{}>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: DialogSheetContents,\n })\n const sheetBreakpoint = when || false\n\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n const scopeId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n\n return (\n <AdaptProvider>\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={scopeKey}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n position: 'fixed' as any,\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem name={`${context.scopeKey}SheetContents`}>\n {/* until we can use react-native portals natively */}\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({\n __scopeDialog,\n name,\n ...props\n}: ScopedProps<{ name: string }>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost forwardProps={props} name={`${context.scopeKey}SheetContents`} />\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: DialogSheetContents,\n })\n const sheetBreakpoint = when || false\n\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n const scopeId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n\n return (\n <AdaptProvider>\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={scopeKey}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Dialog"]
|
|
7
7
|
}
|
package/dist/jsx/Dialog.js
CHANGED
|
@@ -49,7 +49,8 @@ const DialogPortalFrame = styled(YStack, {
|
|
|
49
49
|
fullscreen: true,
|
|
50
50
|
zIndex: 100,
|
|
51
51
|
...isWeb && {
|
|
52
|
-
maxHeight: "100vh"
|
|
52
|
+
maxHeight: "100vh",
|
|
53
|
+
position: "fixed"
|
|
53
54
|
}
|
|
54
55
|
});
|
|
55
56
|
const DialogPortal = DialogPortalFrame.extractable(
|
|
@@ -140,7 +141,7 @@ const DialogContentModal = React.forwardRef(
|
|
|
140
141
|
if (content)
|
|
141
142
|
return hideOthers(content);
|
|
142
143
|
}, [context.open]);
|
|
143
|
-
return <DialogContentImpl {...props} context={context} ref={composedRefs}
|
|
144
|
+
return <DialogContentImpl {...props} context={context} ref={composedRefs} disableOutsidePointerEvents onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
144
145
|
event.preventDefault();
|
|
145
146
|
context.triggerRef.current?.focus();
|
|
146
147
|
})} onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
@@ -216,9 +217,13 @@ const DialogContentImpl = React.forwardRef(
|
|
|
216
217
|
}
|
|
217
218
|
);
|
|
218
219
|
const SHEET_CONTENTS_NAME = "DialogSheetContents";
|
|
219
|
-
const DialogSheetContents = ({
|
|
220
|
+
const DialogSheetContents = ({
|
|
221
|
+
__scopeDialog,
|
|
222
|
+
name,
|
|
223
|
+
...props
|
|
224
|
+
}) => {
|
|
220
225
|
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
|
|
221
|
-
return <PortalHost name={`${context.scopeKey}SheetContents`} />;
|
|
226
|
+
return <PortalHost forwardProps={props} name={`${context.scopeKey}SheetContents`} />;
|
|
222
227
|
};
|
|
223
228
|
DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
224
229
|
const TITLE_NAME = "DialogTitle";
|
package/dist/jsx/Dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n MediaQueryKey,\n Slot,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem name={`${context.scopeKey}SheetContents`}>\n {/* until we can use react-native portals natively */}\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({ __scopeDialog }: ScopedProps<{}>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: DialogSheetContents,\n })\n const sheetBreakpoint = when || false\n\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n const scopeId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n\n return (\n <AdaptProvider>\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={scopeKey}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,OAAO,sBAAsB;AACtC,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,
|
|
4
|
+
"sourcesContent": ["import { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContext, createContextScope } from '@tamagui/create-context'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport { PortalHost, PortalItem, PortalItemProps } from '@tamagui/portal'\nimport { RemoveScroll } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport { H2, Paragraph } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nconst DIALOG_NAME = 'Dialog'\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope }\n\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME)\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\n\ninterface DialogProps {\n children?: React.ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\ntype NonNull<A> = Exclude<A, void | null>\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<TamaguiElement>\n contentRef: React.RefObject<TamaguiElement>\n contentId: string\n titleId: string\n descriptionId: string\n onOpenToggle(): void\n open: NonNull<DialogProps['open']>\n onOpenChange: NonNull<DialogProps['onOpenChange']>\n modal: NonNull<DialogProps['modal']>\n allowPinchZoom: NonNull<DialogProps['allowPinchZoom']>\n sheetBreakpoint: any\n scopeKey: string\n}\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger'\n\nconst DialogTriggerFrame = styled(YStack, {\n name: TRIGGER_NAME,\n})\n\ninterface DialogTriggerProps extends YStackProps {}\n\nconst DialogTrigger = React.forwardRef<TamaguiElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n return (\n <DialogTriggerFrame\n tag=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n }\n)\n\nDialogTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal'\n\ntype PortalContextValue = { forceMount?: true }\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n})\n\ntype DialogPortalProps = Omit<PortalItemProps, 'asChild'> &\n YStackProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n }\n\nexport const DialogPortalFrame = styled(YStack, {\n alignItems: 'center',\n justifyContent: 'center',\n fullscreen: true,\n zIndex: 100,\n ...(isWeb && {\n maxHeight: '100vh',\n position: 'fixed' as any,\n }),\n})\n\nconst DialogPortal: React.FC<DialogPortalProps> = DialogPortalFrame.extractable(\n (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, ...frameProps } = props\n const themeName = useThemeName()\n const context = useDialogContext(PORTAL_NAME, __scopeDialog)\n const isShowing = forceMount || context.open\n const contents = <AnimatePresence>{isShowing ? children : null}</AnimatePresence>\n const isSheet = useShowDialogSheet(context)\n if (!context.modal || isSheet) {\n return contents\n }\n return (\n <PortalItem name={`${context.scopeKey}SheetContents`}>\n {/* until we can use react-native portals natively */}\n {/* have to re-propogate context, sketch */}\n <DialogProvider scope={__scopeDialog} {...context}>\n <Theme name={themeName}>\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n <DialogPortalFrame pointerEvents={isShowing ? 'auto' : 'none'} {...frameProps}>\n {contents}\n </DialogPortalFrame>\n </PortalProvider>\n </Theme>\n </DialogProvider>\n </PortalItem>\n )\n }\n)\n\nDialogPortal.displayName = PORTAL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay'\n\nconst DialogOverlayFrame = styled(ThemeableStack, {\n name: OVERLAY_NAME,\n backgrounded: true,\n fullscreen: true,\n})\n\ninterface DialogOverlayProps extends YStackProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogOverlay = React.forwardRef<TamaguiElement, DialogOverlayProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...overlayProps } = props\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog)\n const showSheet = useShowDialogSheet(context)\n\n if (!forceMount) {\n if (!context.modal || showSheet) {\n return null\n }\n }\n\n return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />\n }\n)\n\nDialogOverlay.displayName = OVERLAY_NAME\n\ntype DialogOverlayImplProps = GetProps<typeof DialogOverlayFrame> & {\n context: DialogContextValue\n}\n\nconst DialogOverlayImpl = React.forwardRef<TamaguiElement, DialogOverlayImplProps>(\n (props, forwardedRef) => {\n const { context, ...overlayProps } = props\n\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <DialogOverlayFrame\n data-state={getState(context.open)}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n pointerEvents={context.open ? 'auto' : 'none'}\n {...overlayProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent'\n\nconst DialogContentFrame = styled(ThemeableStack, {\n name: CONTENT_NAME,\n tag: 'dialog',\n position: 'relative',\n backgrounded: true,\n padded: true,\n radiused: true,\n elevate: true,\n\n variants: {\n size: {\n '...size': (val, extras) => {\n return {}\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\ntype DialogContentFrameProps = GetProps<typeof DialogContentFrame>\n\ninterface DialogContentProps\n extends DialogContentFrameProps,\n Omit<DialogContentTypeProps, 'context'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nconst DialogContent = DialogContentFrame.extractable(\n React.forwardRef<TamaguiElement, DialogContentProps>(\n ({ __scopeDialog, ...props }: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog)\n const { forceMount = portalContext.forceMount, ...contentProps } = props\n const context = useDialogContext(CONTENT_NAME, __scopeDialog)\n\n const contents = context.modal ? (\n <DialogContentModal context={context} {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />\n )\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <RemoveScroll\n forwardProps\n enabled={context.open}\n allowPinchZoom={context.allowPinchZoom}\n shards={[context.contentRef]}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <div className=\"_dsp_contents\">{contents}</div>\n </RemoveScroll>\n )\n }\n )\n)\n\nDialogContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n context: DialogContextValue\n}\n\nconst DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n ({ children, context, ...props }: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <DialogContentImpl\n {...props}\n context={context}\n ref={composedRefs}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event['detail'].originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault()\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n >\n {children}\n </DialogContentImpl>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<TamaguiElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const hasInteractedOutsideRef = React.useRef(false)\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) {\n props.context.triggerRef.current?.focus()\n }\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n const target = event.target as HTMLElement\n const trigger = props.context.triggerRef.current\n if (!(trigger instanceof HTMLElement)) return\n const targetIsTrigger = trigger.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplProps = DialogContentFrameProps &\n Omit<DismissableProps, 'onDismiss'> & {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n context: DialogContextValue\n }\n\nconst DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n context,\n ...contentProps\n } = props\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const showSheet = useShowDialogSheet(context)\n\n const contents = (\n <DialogContentFrame\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n />\n )\n\n if (showSheet) {\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {contentProps.children}\n </PortalItem>\n )\n }\n\n if (!isWeb) {\n return contents\n }\n\n return (\n <>\n <FocusScope\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n forceUnmount={!context.open}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <Dismissable\n disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}\n forceUnmount={!context.open}\n onEscapeKeyDown={onEscapeKeyDown}\n onPointerDownOutside={onPointerDownOutside}\n onFocusOutside={onFocusOutside}\n onInteractOutside={onInteractOutside}\n // @ts-ignore\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n >\n {contents}\n </Dismissable>\n </FocusScope>\n {process.env.NODE_ENV === 'development' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * DialogSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'DialogSheetContents'\n\nexport const DialogSheetContents = ({\n __scopeDialog,\n name,\n ...props\n}: ScopedProps<{ name: string }>) => {\n const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)\n return <PortalHost forwardProps={props} name={`${context.scopeKey}SheetContents`} />\n}\n\nDialogSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle'\nconst DialogTitleFrame = styled(H2, {\n name: TITLE_NAME,\n})\n\ntype DialogTitleProps = GetProps<typeof DialogTitleFrame>\n\nconst DialogTitle = React.forwardRef<TamaguiElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props\n const context = useDialogContext(TITLE_NAME, __scopeDialog)\n return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />\n }\n)\n\nDialogTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogDescriptionFrame = styled(Paragraph, {\n name: 'DialogDescription',\n})\n\ntype DialogDescriptionProps = GetProps<typeof DialogDescriptionFrame>\n\nconst DESCRIPTION_NAME = 'DialogDescription'\n\nconst DialogDescription = React.forwardRef<TamaguiElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog)\n return (\n <DialogDescriptionFrame id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />\n )\n }\n)\n\nDialogDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose'\n\ntype DialogCloseProps = YStackProps\n\nconst DialogClose = React.forwardRef<TamaguiElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props\n const context = useDialogContext(CLOSE_NAME, __scopeDialog)\n const isSheet = useShowDialogSheet(context)\n\n if (isSheet) {\n return null\n }\n\n return (\n <YStack\n tag=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nDialogClose.displayName = CLOSE_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning'\n\nconst [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n})\n\ntype TitleWarningProps = { titleId?: string }\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n if (process.env.NODE_ENV === 'development') {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME)\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`\n\n React.useEffect(() => {\n if (!isWeb) return\n if (titleId) {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, titleId])\n }\n\n return null\n}\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<TamaguiElement>\n descriptionId?: string\n}\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n if (process.env.NODE_ENV === 'development') {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME)\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`\n\n React.useEffect(() => {\n if (!isWeb) return\n const contentNode = contentRef.current\n if (!(contentNode instanceof HTMLElement)) {\n return\n }\n const describedById = contentNode.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription) {\n // eslint-disable-next-line no-console\n console.warn(MESSAGE)\n }\n }\n }, [MESSAGE, contentRef, descriptionId])\n }\n\n return null\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DialogInner = React.forwardRef<{ open: (val: boolean) => void }, DialogProps>(function Dialog(\n props: ScopedProps<DialogProps>,\n ref\n) {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n modal = true,\n allowPinchZoom = false,\n } = props\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: DialogSheetContents,\n })\n const sheetBreakpoint = when || false\n\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const contentRef = React.useRef<TamaguiElement>(null)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n })\n\n React.useImperativeHandle(\n ref,\n () => ({\n open: setOpen,\n }),\n [setOpen]\n )\n\n const scopeId = useId()\n const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId\n\n return (\n <AdaptProvider>\n <DialogProvider\n scope={__scopeDialog}\n scopeKey={scopeKey}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId() || ''}\n titleId={useId() || ''}\n descriptionId={useId() || ''}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n allowPinchZoom={allowPinchZoom}\n sheetBreakpoint={sheetBreakpoint}\n >\n <DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>\n {children}\n </DialogSheetController>\n </DialogProvider>\n </AdaptProvider>\n )\n})\n\nconst Dialog = withStaticProperties(DialogInner, {\n Trigger: DialogTrigger,\n Portal: DialogPortal,\n Overlay: DialogOverlay,\n Content: DialogContent,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Sheet: ControlledSheet,\n Adapt,\n})\n\nconst DialogSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = useDialogContext('DialogSheetController', props.__scopeDialog)\n const showSheet = useShowDialogSheet(context)\n const breakpointActive = useSheetBreakpointActive(context)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (context: DialogContextValue) => {\n const media = useMedia()\n return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false\n}\n\nconst useShowDialogSheet = (context: DialogContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context)\n return context.open === false ? false : breakpointActive\n}\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n DialogWarningProvider,\n}\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Dialog"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/dialog",
|
|
3
|
-
"version": "1.0.1-rc.
|
|
3
|
+
"version": "1.0.1-rc.3",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"types": "./types/index.d.ts",
|
|
6
6
|
"main": "dist/cjs",
|
|
@@ -30,22 +30,22 @@
|
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@tamagui/adapt": "^1.0.1-rc.
|
|
34
|
-
"@tamagui/animate-presence": "^1.0.1-rc.
|
|
35
|
-
"@tamagui/aria-hidden": "^1.0.1-rc.
|
|
36
|
-
"@tamagui/compose-refs": "^1.0.1-rc.
|
|
37
|
-
"@tamagui/core": "^1.0.1-rc.
|
|
38
|
-
"@tamagui/create-context": "^1.0.1-rc.
|
|
39
|
-
"@tamagui/dismissable": "^1.0.1-rc.
|
|
40
|
-
"@tamagui/focus-scope": "^1.0.1-rc.
|
|
41
|
-
"@tamagui/polyfill-dev": "^1.0.1-rc.
|
|
42
|
-
"@tamagui/popper": "^1.0.1-rc.
|
|
43
|
-
"@tamagui/portal": "^1.0.1-rc.
|
|
44
|
-
"@tamagui/remove-scroll": "^1.0.1-rc.
|
|
45
|
-
"@tamagui/sheet": "^1.0.1-rc.
|
|
46
|
-
"@tamagui/stacks": "^1.0.1-rc.
|
|
47
|
-
"@tamagui/text": "^1.0.1-rc.
|
|
48
|
-
"@tamagui/use-controllable-state": "^1.0.1-rc.
|
|
33
|
+
"@tamagui/adapt": "^1.0.1-rc.3",
|
|
34
|
+
"@tamagui/animate-presence": "^1.0.1-rc.3",
|
|
35
|
+
"@tamagui/aria-hidden": "^1.0.1-rc.3",
|
|
36
|
+
"@tamagui/compose-refs": "^1.0.1-rc.3",
|
|
37
|
+
"@tamagui/core": "^1.0.1-rc.3",
|
|
38
|
+
"@tamagui/create-context": "^1.0.1-rc.3",
|
|
39
|
+
"@tamagui/dismissable": "^1.0.1-rc.3",
|
|
40
|
+
"@tamagui/focus-scope": "^1.0.1-rc.3",
|
|
41
|
+
"@tamagui/polyfill-dev": "^1.0.1-rc.3",
|
|
42
|
+
"@tamagui/popper": "^1.0.1-rc.3",
|
|
43
|
+
"@tamagui/portal": "^1.0.1-rc.3",
|
|
44
|
+
"@tamagui/remove-scroll": "^1.0.1-rc.3",
|
|
45
|
+
"@tamagui/sheet": "^1.0.1-rc.3",
|
|
46
|
+
"@tamagui/stacks": "^1.0.1-rc.3",
|
|
47
|
+
"@tamagui/text": "^1.0.1-rc.3",
|
|
48
|
+
"@tamagui/use-controllable-state": "^1.0.1-rc.3"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=18",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"react-native": "*"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@tamagui/build": "^1.0.1-rc.
|
|
56
|
+
"@tamagui/build": "^1.0.1-rc.3",
|
|
57
57
|
"@types/react-dom": "^18.0.3",
|
|
58
58
|
"@types/react-native": "^0.69.2",
|
|
59
59
|
"react": ">=18",
|
package/src/Dialog.tsx
CHANGED
|
@@ -4,8 +4,6 @@ import { hideOthers } from '@tamagui/aria-hidden'
|
|
|
4
4
|
import { useComposedRefs } from '@tamagui/compose-refs'
|
|
5
5
|
import {
|
|
6
6
|
GetProps,
|
|
7
|
-
MediaQueryKey,
|
|
8
|
-
Slot,
|
|
9
7
|
TamaguiElement,
|
|
10
8
|
Theme,
|
|
11
9
|
composeEventHandlers,
|
|
@@ -129,6 +127,7 @@ export const DialogPortalFrame = styled(YStack, {
|
|
|
129
127
|
zIndex: 100,
|
|
130
128
|
...(isWeb && {
|
|
131
129
|
maxHeight: '100vh',
|
|
130
|
+
position: 'fixed' as any,
|
|
132
131
|
}),
|
|
133
132
|
})
|
|
134
133
|
|
|
@@ -323,9 +322,6 @@ const DialogContentModal = React.forwardRef<TamaguiElement, DialogContentTypePro
|
|
|
323
322
|
{...props}
|
|
324
323
|
context={context}
|
|
325
324
|
ref={composedRefs}
|
|
326
|
-
// we make sure focus isn't trapped once `DialogContent` has been closed
|
|
327
|
-
// (closed !== unmounted when animating out)
|
|
328
|
-
trapFocus={context.open}
|
|
329
325
|
disableOutsidePointerEvents
|
|
330
326
|
onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
331
327
|
event.preventDefault()
|
|
@@ -505,9 +501,13 @@ const DialogContentImpl = React.forwardRef<TamaguiElement, DialogContentImplProp
|
|
|
505
501
|
|
|
506
502
|
const SHEET_CONTENTS_NAME = 'DialogSheetContents'
|
|
507
503
|
|
|
508
|
-
export const DialogSheetContents = ({
|
|
504
|
+
export const DialogSheetContents = ({
|
|
505
|
+
__scopeDialog,
|
|
506
|
+
name,
|
|
507
|
+
...props
|
|
508
|
+
}: ScopedProps<{ name: string }>) => {
|
|
509
509
|
const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog)
|
|
510
|
-
return <PortalHost name={`${context.scopeKey}SheetContents`}
|
|
510
|
+
return <PortalHost forwardProps={props} name={`${context.scopeKey}SheetContents`} />
|
|
511
511
|
}
|
|
512
512
|
|
|
513
513
|
DialogSheetContents.displayName = SHEET_CONTENTS_NAME
|
package/types/Dialog.d.ts
CHANGED
|
@@ -52,9 +52,7 @@ export declare const DialogPortalFrame: import("@tamagui/core").TamaguiComponent
|
|
|
52
52
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
53
53
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
54
54
|
readonly fullscreen?: boolean | undefined;
|
|
55
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
56
|
-
* @see https://github.com/theKashey/react-remove-scroll#usage
|
|
57
|
-
*/
|
|
55
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
58
56
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
59
57
|
readonly fullscreen?: boolean | undefined;
|
|
60
58
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
@@ -196,7 +194,9 @@ type DialogContentImplProps = DialogContentFrameProps & Omit<DismissableProps, '
|
|
|
196
194
|
context: DialogContextValue;
|
|
197
195
|
};
|
|
198
196
|
export declare const DialogSheetContents: {
|
|
199
|
-
({ __scopeDialog }: ScopedProps<{
|
|
197
|
+
({ __scopeDialog, name, ...props }: ScopedProps<{
|
|
198
|
+
name: string;
|
|
199
|
+
}>): JSX.Element;
|
|
200
200
|
displayName: string;
|
|
201
201
|
};
|
|
202
202
|
declare const DialogTitleFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").TextProps, "children"> & import("@tamagui/core").RNWTextProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").TextStylePropsBase>> & Omit<{}, "size"> & {
|
|
@@ -1767,9 +1767,7 @@ declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("react-na
|
|
|
1767
1767
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
1768
1768
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
1769
1769
|
readonly fullscreen?: boolean | undefined;
|
|
1770
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
1771
|
-
* @see https://github.com/theKashey/react-remove-scroll#usage
|
|
1772
|
-
*/
|
|
1770
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
1773
1771
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
1774
1772
|
readonly fullscreen?: boolean | undefined;
|
|
1775
1773
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
@@ -2554,9 +2552,7 @@ declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAtt
|
|
|
2554
2552
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
2555
2553
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
2556
2554
|
readonly fullscreen?: boolean | undefined;
|
|
2557
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
2558
|
-
* @see https://github.com/theKashey/react-remove-scroll#usage
|
|
2559
|
-
*/
|
|
2555
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
2560
2556
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
2561
2557
|
readonly fullscreen?: boolean | undefined;
|
|
2562
2558
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
@@ -2567,9 +2563,7 @@ declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAtt
|
|
|
2567
2563
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
2568
2564
|
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
2569
2565
|
readonly fullscreen?: boolean | undefined;
|
|
2570
|
-
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
2571
|
-
* @see https://github.com/theKashey/react-remove-scroll#usage
|
|
2572
|
-
*/
|
|
2566
|
+
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
2573
2567
|
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
|
|
2574
2568
|
readonly fullscreen?: boolean | undefined;
|
|
2575
2569
|
readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
|
|
@@ -2611,7 +2605,10 @@ declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAtt
|
|
|
2611
2605
|
}>>, string | number>) & React.RefAttributes<TamaguiElement>>;
|
|
2612
2606
|
};
|
|
2613
2607
|
Adapt: (({ platform, when, children }: import("@tamagui/adapt").AdaptProps) => any) & {
|
|
2614
|
-
Contents:
|
|
2608
|
+
Contents: {
|
|
2609
|
+
(props: any): React.FunctionComponentElement<any>;
|
|
2610
|
+
shouldForwardSpace: boolean;
|
|
2611
|
+
};
|
|
2615
2612
|
};
|
|
2616
2613
|
};
|
|
2617
2614
|
export { createDialogScope, Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, DialogWarningProvider, };
|