@tamagui/toast 1.14.0 → 1.14.2
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/Toast.js +185 -1
- package/dist/cjs/Toast.js.map +2 -2
- package/dist/cjs/ToastAnnounce.js +92 -1
- package/dist/cjs/ToastAnnounce.js.map +2 -2
- package/dist/cjs/ToastImperative.js +110 -1
- package/dist/cjs/ToastImperative.js.map +2 -2
- package/dist/cjs/ToastImpl.js +352 -1
- package/dist/cjs/ToastImpl.js.map +2 -2
- package/dist/cjs/ToastProvider.js +119 -1
- package/dist/cjs/ToastProvider.js.map +2 -2
- package/dist/cjs/ToastViewport.js +312 -1
- package/dist/cjs/ToastViewport.js.map +2 -2
- package/dist/cjs/constants.js +28 -1
- package/dist/cjs/constants.js.map +2 -2
- package/dist/cjs/createNativeToast.js +69 -1
- package/dist/cjs/createNativeToast.js.map +2 -2
- package/dist/cjs/createNativeToast.native.js +43 -1
- package/dist/cjs/createNativeToast.native.js.map +2 -2
- package/dist/cjs/index.js +18 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js +16 -1
- package/dist/cjs/types.js.map +2 -2
- package/dist/esm/Toast.js +163 -1
- package/dist/esm/Toast.js.map +2 -2
- package/dist/esm/Toast.mjs +163 -1
- package/dist/esm/Toast.mjs.map +2 -2
- package/dist/esm/ToastAnnounce.js +63 -1
- package/dist/esm/ToastAnnounce.js.map +2 -2
- package/dist/esm/ToastAnnounce.mjs +63 -1
- package/dist/esm/ToastAnnounce.mjs.map +2 -2
- package/dist/esm/ToastImperative.js +73 -1
- package/dist/esm/ToastImperative.js.map +2 -2
- package/dist/esm/ToastImperative.mjs +73 -1
- package/dist/esm/ToastImperative.mjs.map +2 -2
- package/dist/esm/ToastImpl.js +328 -1
- package/dist/esm/ToastImpl.js.map +2 -2
- package/dist/esm/ToastImpl.mjs +328 -1
- package/dist/esm/ToastImpl.mjs.map +2 -2
- package/dist/esm/ToastProvider.js +80 -1
- package/dist/esm/ToastProvider.js.map +2 -2
- package/dist/esm/ToastProvider.mjs +80 -1
- package/dist/esm/ToastProvider.mjs.map +2 -2
- package/dist/esm/ToastViewport.js +279 -1
- package/dist/esm/ToastViewport.js.map +2 -2
- package/dist/esm/ToastViewport.mjs +279 -1
- package/dist/esm/ToastViewport.mjs.map +2 -2
- package/dist/esm/constants.js +4 -1
- package/dist/esm/constants.js.map +2 -2
- package/dist/esm/constants.mjs +4 -1
- package/dist/esm/constants.mjs.map +2 -2
- package/dist/esm/createNativeToast.js +44 -1
- package/dist/esm/createNativeToast.js.map +2 -2
- package/dist/esm/createNativeToast.mjs +44 -1
- package/dist/esm/createNativeToast.mjs.map +2 -2
- package/dist/esm/createNativeToast.native.js +18 -1
- package/dist/esm/createNativeToast.native.js.map +2 -2
- package/dist/esm/createNativeToast.native.mjs +18 -1
- package/dist/esm/createNativeToast.native.mjs.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/jsx/Toast.js +156 -1
- package/dist/jsx/Toast.js.map +2 -2
- package/dist/jsx/Toast.mjs +156 -1
- package/dist/jsx/Toast.mjs.map +2 -2
- package/dist/jsx/ToastAnnounce.js +59 -1
- package/dist/jsx/ToastAnnounce.js.map +2 -2
- package/dist/jsx/ToastAnnounce.mjs +59 -1
- package/dist/jsx/ToastAnnounce.mjs.map +2 -2
- package/dist/jsx/ToastImperative.js +72 -1
- package/dist/jsx/ToastImperative.js.map +2 -2
- package/dist/jsx/ToastImperative.mjs +72 -1
- package/dist/jsx/ToastImperative.mjs.map +2 -2
- package/dist/jsx/ToastImpl.js +307 -1
- package/dist/jsx/ToastImpl.js.map +2 -2
- package/dist/jsx/ToastImpl.mjs +307 -1
- package/dist/jsx/ToastImpl.mjs.map +2 -2
- package/dist/jsx/ToastProvider.js +75 -1
- package/dist/jsx/ToastProvider.js.map +2 -2
- package/dist/jsx/ToastProvider.mjs +75 -1
- package/dist/jsx/ToastProvider.mjs.map +2 -2
- package/dist/jsx/ToastViewport.js +259 -1
- package/dist/jsx/ToastViewport.js.map +2 -2
- package/dist/jsx/ToastViewport.mjs +259 -1
- package/dist/jsx/ToastViewport.mjs.map +2 -2
- package/dist/jsx/constants.js +4 -1
- package/dist/jsx/constants.js.map +2 -2
- package/dist/jsx/constants.mjs +4 -1
- package/dist/jsx/constants.mjs.map +2 -2
- package/dist/jsx/createNativeToast.js +44 -1
- package/dist/jsx/createNativeToast.js.map +2 -2
- package/dist/jsx/createNativeToast.mjs +44 -1
- package/dist/jsx/createNativeToast.mjs.map +2 -2
- package/dist/jsx/createNativeToast.native.js +18 -1
- package/dist/jsx/createNativeToast.native.js.map +2 -2
- package/dist/jsx/createNativeToast.native.mjs +18 -1
- package/dist/jsx/createNativeToast.native.mjs.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +1 -1
- package/dist/jsx/index.mjs.map +1 -1
- package/package.json +13 -13
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./Toast.js";
|
|
1
|
+
export * from "./Toast.js";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
package/dist/jsx/Toast.js
CHANGED
|
@@ -1,2 +1,157 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
composeEventHandlers,
|
|
3
|
+
styled,
|
|
4
|
+
themeable,
|
|
5
|
+
useEvent,
|
|
6
|
+
useId,
|
|
7
|
+
withStaticProperties
|
|
8
|
+
} from "@tamagui/core";
|
|
9
|
+
import { ThemeableStack } from "@tamagui/stacks";
|
|
10
|
+
import { SizableText } from "@tamagui/text";
|
|
11
|
+
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
12
|
+
import * as React from "react";
|
|
13
|
+
import { TOAST_NAME } from "./constants";
|
|
14
|
+
import { ToastAnnounceExclude } from "./ToastAnnounce";
|
|
15
|
+
import {
|
|
16
|
+
useToast,
|
|
17
|
+
useToastController,
|
|
18
|
+
useToastState
|
|
19
|
+
} from "./ToastImperative.js";
|
|
20
|
+
import {
|
|
21
|
+
ToastImpl,
|
|
22
|
+
ToastImplFrame,
|
|
23
|
+
useToastInteractiveContext
|
|
24
|
+
} from "./ToastImpl";
|
|
25
|
+
import {
|
|
26
|
+
ToastProvider,
|
|
27
|
+
createToastScope
|
|
28
|
+
} from "./ToastProvider";
|
|
29
|
+
import { ToastViewport } from "./ToastViewport";
|
|
30
|
+
const TITLE_NAME = "ToastTitle";
|
|
31
|
+
const ToastTitleFrame = styled(SizableText, {
|
|
32
|
+
name: TITLE_NAME,
|
|
33
|
+
variants: {
|
|
34
|
+
unstyled: {
|
|
35
|
+
false: {
|
|
36
|
+
color: "$color",
|
|
37
|
+
size: "$4"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
defaultVariants: {
|
|
42
|
+
unstyled: false
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const ToastTitle = React.forwardRef(
|
|
46
|
+
(props, forwardedRef) => {
|
|
47
|
+
const { __scopeToast, ...titleProps } = props;
|
|
48
|
+
return <ToastTitleFrame {...titleProps} ref={forwardedRef} />;
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
ToastTitle.displayName = TITLE_NAME;
|
|
52
|
+
const DESCRIPTION_NAME = "ToastDescription";
|
|
53
|
+
const ToastDescriptionFrame = styled(SizableText, {
|
|
54
|
+
name: DESCRIPTION_NAME,
|
|
55
|
+
variants: {
|
|
56
|
+
unstyled: {
|
|
57
|
+
false: {
|
|
58
|
+
color: "$color11",
|
|
59
|
+
size: "$1"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
defaultVariants: {
|
|
64
|
+
unstyled: false
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
const ToastDescription = React.forwardRef(
|
|
68
|
+
(props, forwardedRef) => {
|
|
69
|
+
const { __scopeToast, ...descriptionProps } = props;
|
|
70
|
+
return <ToastDescriptionFrame {...descriptionProps} ref={forwardedRef} />;
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
ToastDescription.displayName = DESCRIPTION_NAME;
|
|
74
|
+
const ACTION_NAME = "ToastAction";
|
|
75
|
+
const ToastAction = React.forwardRef(
|
|
76
|
+
(props, forwardedRef) => {
|
|
77
|
+
const { altText, ...actionProps } = props;
|
|
78
|
+
if (!altText)
|
|
79
|
+
return null;
|
|
80
|
+
return <ToastAnnounceExclude altText={altText} asChild><ToastClose {...actionProps} ref={forwardedRef} /></ToastAnnounceExclude>;
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
ToastAction.propTypes = {
|
|
84
|
+
altText(props) {
|
|
85
|
+
if (!props.altText) {
|
|
86
|
+
return new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
|
|
87
|
+
}
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
ToastAction.displayName = ACTION_NAME;
|
|
92
|
+
const CLOSE_NAME = "ToastClose";
|
|
93
|
+
const ToastCloseFrame = styled(ThemeableStack, {
|
|
94
|
+
name: CLOSE_NAME,
|
|
95
|
+
tag: "button"
|
|
96
|
+
});
|
|
97
|
+
const ToastClose = React.forwardRef(
|
|
98
|
+
(props, forwardedRef) => {
|
|
99
|
+
const { __scopeToast, ...closeProps } = props;
|
|
100
|
+
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
|
|
101
|
+
return <ToastAnnounceExclude asChild><ToastCloseFrame
|
|
102
|
+
accessibilityLabel="Dialog Close"
|
|
103
|
+
{...closeProps}
|
|
104
|
+
ref={forwardedRef}
|
|
105
|
+
onPress={composeEventHandlers(props.onPress, interactiveContext.onClose)}
|
|
106
|
+
/></ToastAnnounceExclude>;
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
ToastClose.displayName = CLOSE_NAME;
|
|
110
|
+
const ToastComponent = React.forwardRef(
|
|
111
|
+
ToastImplFrame.extractable((props, forwardedRef) => {
|
|
112
|
+
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
|
|
113
|
+
const [open, setOpen] = useControllableState({
|
|
114
|
+
prop: openProp,
|
|
115
|
+
defaultProp: defaultOpen ?? true,
|
|
116
|
+
onChange: onOpenChange
|
|
117
|
+
});
|
|
118
|
+
const id = useId();
|
|
119
|
+
const onPause = useEvent(props.onPause);
|
|
120
|
+
const onResume = useEvent(props.onResume);
|
|
121
|
+
const shouldShow = forceMount || open;
|
|
122
|
+
if (!shouldShow)
|
|
123
|
+
return null;
|
|
124
|
+
return <ToastImpl
|
|
125
|
+
id={id}
|
|
126
|
+
open={open}
|
|
127
|
+
{...toastProps}
|
|
128
|
+
ref={forwardedRef}
|
|
129
|
+
onClose={() => setOpen(false)}
|
|
130
|
+
onPause={onPause}
|
|
131
|
+
onResume={onResume}
|
|
132
|
+
onSwipeEnd={composeEventHandlers(props.onSwipeEnd, (event) => {
|
|
133
|
+
setOpen(false);
|
|
134
|
+
})}
|
|
135
|
+
/>;
|
|
136
|
+
})
|
|
137
|
+
);
|
|
138
|
+
ToastComponent.displayName = TOAST_NAME;
|
|
139
|
+
const Toast = withStaticProperties(
|
|
140
|
+
themeable(ToastComponent, ToastImplFrame.staticConfig),
|
|
141
|
+
{
|
|
142
|
+
Title: ToastTitle,
|
|
143
|
+
Description: ToastDescription,
|
|
144
|
+
Action: ToastAction,
|
|
145
|
+
Close: ToastClose
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
export {
|
|
149
|
+
Toast,
|
|
150
|
+
ToastProvider,
|
|
151
|
+
ToastViewport,
|
|
152
|
+
createToastScope,
|
|
153
|
+
useToast,
|
|
154
|
+
useToastController,
|
|
155
|
+
useToastState
|
|
156
|
+
};
|
|
2
157
|
//# sourceMappingURL=Toast.js.map
|
package/dist/jsx/Toast.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Toast.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n composeEventHandlers,\n styled,\n themeable,\n useEvent,\n useId,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounceExclude } from './ToastAnnounce'\nimport {\n ToastNativePlatform,\n ToastNativeValue,\n useToast,\n useToastController,\n useToastState,\n} from './ToastImperative.js'\nimport {\n ToastImpl,\n ToastImplFrame,\n ToastProps,\n useToastInteractiveContext,\n} from './ToastImpl'\nimport {\n ScopedProps,\n ToastProvider,\n ToastProviderProps,\n createToastScope,\n} from './ToastProvider'\nimport { ToastViewport, ToastViewportProps } from './ToastViewport'\n\n/* -------------------------------------------------------------------------------------------------\n * ToastTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'ToastTitle'\n\nconst ToastTitleFrame = styled(SizableText, {\n name: TITLE_NAME,\n variants: {\n unstyled: {\n false: {\n color: '$color',\n size: '$4',\n },\n },\n },\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype PrimitiveDivProps = GetProps<typeof ToastTitleFrame>\ntype ToastTitleProps = PrimitiveDivProps & {}\n\nconst ToastTitle = React.forwardRef<TamaguiElement, ToastTitleProps>(\n (props: ScopedProps<ToastTitleProps>, forwardedRef) => {\n const { __scopeToast, ...titleProps } = props\n return <ToastTitleFrame {...titleProps} ref={forwardedRef} />\n }\n)\n\nToastTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * ToastDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'ToastDescription'\n\nconst ToastDescriptionFrame = styled(SizableText, {\n name: DESCRIPTION_NAME,\n\n variants: {\n unstyled: {\n false: {\n color: '$color11',\n size: '$1',\n },\n },\n },\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ToastDescriptionFrameProps = GetProps<typeof ToastDescriptionFrame>\ntype ToastDescriptionProps = ToastDescriptionFrameProps & {}\n\nconst ToastDescription = React.forwardRef<TamaguiElement, ToastDescriptionProps>(\n (props: ScopedProps<ToastDescriptionProps>, forwardedRef) => {\n const { __scopeToast, ...descriptionProps } = props\n return <ToastDescriptionFrame {...descriptionProps} ref={forwardedRef} />\n }\n)\n\nToastDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * ToastAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'ToastAction'\n\ntype ToastActionProps = ToastCloseProps & {\n /**\n * A short description for an alternate way to carry out the action. For screen reader users\n * who will not be able to navigate to the button easily/quickly.\n * @example <ToastAction altText=\"Goto account settings to updgrade\">Upgrade</ToastAction>\n * @example <ToastAction altText=\"Undo (Alt+U)\">Undo</ToastAction>\n */\n altText: string\n}\n\nconst ToastAction = React.forwardRef<TamaguiElement, ToastActionProps>(\n (props: ScopedProps<ToastActionProps>, forwardedRef) => {\n const { altText, ...actionProps } = props\n if (!altText) return null\n return (\n <ToastAnnounceExclude altText={altText} asChild>\n <ToastClose {...actionProps} ref={forwardedRef} />\n </ToastAnnounceExclude>\n )\n }\n)\n\nToastAction.propTypes = {\n altText(props) {\n if (!props.altText) {\n return new Error(`Missing prop \\`altText\\` expected on \\`${ACTION_NAME}\\``)\n }\n return null\n },\n}\n\nToastAction.displayName = ACTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * ToastClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'ToastClose'\n\nconst ToastCloseFrame = styled(ThemeableStack, {\n name: CLOSE_NAME,\n tag: 'button',\n})\ntype ToastCloseFrameProps = GetProps<typeof ToastCloseFrame>\ntype ToastCloseProps = ToastCloseFrameProps & {}\n\nconst ToastClose = React.forwardRef<TamaguiElement, ToastCloseProps>(\n (props: ScopedProps<ToastCloseProps>, forwardedRef) => {\n const { __scopeToast, ...closeProps } = props\n const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast)\n\n return (\n <ToastAnnounceExclude asChild>\n <ToastCloseFrame\n accessibilityLabel=\"Dialog Close\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, interactiveContext.onClose)}\n />\n </ToastAnnounceExclude>\n )\n }\n)\n\nToastClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Toast\n * -----------------------------------------------------------------------------------------------*/\n\nconst ToastComponent = React.forwardRef<TamaguiElement, ToastProps>(\n ToastImplFrame.extractable((props: ScopedProps<ToastProps>, forwardedRef) => {\n const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? true,\n onChange: onOpenChange,\n })\n\n const id = useId()\n const onPause = useEvent(props.onPause)\n const onResume = useEvent(props.onResume)\n const shouldShow = forceMount || open\n\n if (!shouldShow) return null\n\n return (\n <ToastImpl\n id={id}\n open={open}\n {...toastProps}\n ref={forwardedRef}\n onClose={() => setOpen(false)}\n onPause={onPause}\n onResume={onResume}\n onSwipeEnd={composeEventHandlers(props.onSwipeEnd, (event) => {\n setOpen(false)\n })}\n />\n )\n })\n)\n\nToastComponent.displayName = TOAST_NAME\n\nconst Toast = withStaticProperties(\n themeable(ToastComponent, ToastImplFrame.staticConfig),\n {\n Title: ToastTitle,\n Description: ToastDescription,\n Action: ToastAction,\n Close: ToastClose,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport {\n Toast,\n ToastProvider,\n ToastViewport,\n //\n createToastScope,\n // imperative\n useToast,\n useToastController,\n useToastState,\n}\nexport type {\n ToastActionProps,\n ToastCloseProps,\n ToastDescriptionProps,\n ToastProps,\n ToastProviderProps,\n ToastTitleProps,\n ToastViewportProps,\n // imperative\n ToastNativeValue,\n ToastNativePlatform,\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Toast.mjs
CHANGED
|
@@ -1,2 +1,157 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
composeEventHandlers,
|
|
3
|
+
styled,
|
|
4
|
+
themeable,
|
|
5
|
+
useEvent,
|
|
6
|
+
useId,
|
|
7
|
+
withStaticProperties
|
|
8
|
+
} from "@tamagui/core";
|
|
9
|
+
import { ThemeableStack } from "@tamagui/stacks";
|
|
10
|
+
import { SizableText } from "@tamagui/text";
|
|
11
|
+
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
12
|
+
import * as React from "react";
|
|
13
|
+
import { TOAST_NAME } from "./constants";
|
|
14
|
+
import { ToastAnnounceExclude } from "./ToastAnnounce";
|
|
15
|
+
import {
|
|
16
|
+
useToast,
|
|
17
|
+
useToastController,
|
|
18
|
+
useToastState
|
|
19
|
+
} from "./ToastImperative.js";
|
|
20
|
+
import {
|
|
21
|
+
ToastImpl,
|
|
22
|
+
ToastImplFrame,
|
|
23
|
+
useToastInteractiveContext
|
|
24
|
+
} from "./ToastImpl";
|
|
25
|
+
import {
|
|
26
|
+
ToastProvider,
|
|
27
|
+
createToastScope
|
|
28
|
+
} from "./ToastProvider";
|
|
29
|
+
import { ToastViewport } from "./ToastViewport";
|
|
30
|
+
const TITLE_NAME = "ToastTitle";
|
|
31
|
+
const ToastTitleFrame = styled(SizableText, {
|
|
32
|
+
name: TITLE_NAME,
|
|
33
|
+
variants: {
|
|
34
|
+
unstyled: {
|
|
35
|
+
false: {
|
|
36
|
+
color: "$color",
|
|
37
|
+
size: "$4"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
defaultVariants: {
|
|
42
|
+
unstyled: false
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const ToastTitle = React.forwardRef(
|
|
46
|
+
(props, forwardedRef) => {
|
|
47
|
+
const { __scopeToast, ...titleProps } = props;
|
|
48
|
+
return <ToastTitleFrame {...titleProps} ref={forwardedRef} />;
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
ToastTitle.displayName = TITLE_NAME;
|
|
52
|
+
const DESCRIPTION_NAME = "ToastDescription";
|
|
53
|
+
const ToastDescriptionFrame = styled(SizableText, {
|
|
54
|
+
name: DESCRIPTION_NAME,
|
|
55
|
+
variants: {
|
|
56
|
+
unstyled: {
|
|
57
|
+
false: {
|
|
58
|
+
color: "$color11",
|
|
59
|
+
size: "$1"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
defaultVariants: {
|
|
64
|
+
unstyled: false
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
const ToastDescription = React.forwardRef(
|
|
68
|
+
(props, forwardedRef) => {
|
|
69
|
+
const { __scopeToast, ...descriptionProps } = props;
|
|
70
|
+
return <ToastDescriptionFrame {...descriptionProps} ref={forwardedRef} />;
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
ToastDescription.displayName = DESCRIPTION_NAME;
|
|
74
|
+
const ACTION_NAME = "ToastAction";
|
|
75
|
+
const ToastAction = React.forwardRef(
|
|
76
|
+
(props, forwardedRef) => {
|
|
77
|
+
const { altText, ...actionProps } = props;
|
|
78
|
+
if (!altText)
|
|
79
|
+
return null;
|
|
80
|
+
return <ToastAnnounceExclude altText={altText} asChild><ToastClose {...actionProps} ref={forwardedRef} /></ToastAnnounceExclude>;
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
ToastAction.propTypes = {
|
|
84
|
+
altText(props) {
|
|
85
|
+
if (!props.altText) {
|
|
86
|
+
return new Error(`Missing prop \`altText\` expected on \`${ACTION_NAME}\``);
|
|
87
|
+
}
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
ToastAction.displayName = ACTION_NAME;
|
|
92
|
+
const CLOSE_NAME = "ToastClose";
|
|
93
|
+
const ToastCloseFrame = styled(ThemeableStack, {
|
|
94
|
+
name: CLOSE_NAME,
|
|
95
|
+
tag: "button"
|
|
96
|
+
});
|
|
97
|
+
const ToastClose = React.forwardRef(
|
|
98
|
+
(props, forwardedRef) => {
|
|
99
|
+
const { __scopeToast, ...closeProps } = props;
|
|
100
|
+
const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
|
|
101
|
+
return <ToastAnnounceExclude asChild><ToastCloseFrame
|
|
102
|
+
accessibilityLabel="Dialog Close"
|
|
103
|
+
{...closeProps}
|
|
104
|
+
ref={forwardedRef}
|
|
105
|
+
onPress={composeEventHandlers(props.onPress, interactiveContext.onClose)}
|
|
106
|
+
/></ToastAnnounceExclude>;
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
ToastClose.displayName = CLOSE_NAME;
|
|
110
|
+
const ToastComponent = React.forwardRef(
|
|
111
|
+
ToastImplFrame.extractable((props, forwardedRef) => {
|
|
112
|
+
const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;
|
|
113
|
+
const [open, setOpen] = useControllableState({
|
|
114
|
+
prop: openProp,
|
|
115
|
+
defaultProp: defaultOpen ?? true,
|
|
116
|
+
onChange: onOpenChange
|
|
117
|
+
});
|
|
118
|
+
const id = useId();
|
|
119
|
+
const onPause = useEvent(props.onPause);
|
|
120
|
+
const onResume = useEvent(props.onResume);
|
|
121
|
+
const shouldShow = forceMount || open;
|
|
122
|
+
if (!shouldShow)
|
|
123
|
+
return null;
|
|
124
|
+
return <ToastImpl
|
|
125
|
+
id={id}
|
|
126
|
+
open={open}
|
|
127
|
+
{...toastProps}
|
|
128
|
+
ref={forwardedRef}
|
|
129
|
+
onClose={() => setOpen(false)}
|
|
130
|
+
onPause={onPause}
|
|
131
|
+
onResume={onResume}
|
|
132
|
+
onSwipeEnd={composeEventHandlers(props.onSwipeEnd, (event) => {
|
|
133
|
+
setOpen(false);
|
|
134
|
+
})}
|
|
135
|
+
/>;
|
|
136
|
+
})
|
|
137
|
+
);
|
|
138
|
+
ToastComponent.displayName = TOAST_NAME;
|
|
139
|
+
const Toast = withStaticProperties(
|
|
140
|
+
themeable(ToastComponent, ToastImplFrame.staticConfig),
|
|
141
|
+
{
|
|
142
|
+
Title: ToastTitle,
|
|
143
|
+
Description: ToastDescription,
|
|
144
|
+
Action: ToastAction,
|
|
145
|
+
Close: ToastClose
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
export {
|
|
149
|
+
Toast,
|
|
150
|
+
ToastProvider,
|
|
151
|
+
ToastViewport,
|
|
152
|
+
createToastScope,
|
|
153
|
+
useToast,
|
|
154
|
+
useToastController,
|
|
155
|
+
useToastState
|
|
156
|
+
};
|
|
2
157
|
//# sourceMappingURL=Toast.mjs.map
|
package/dist/jsx/Toast.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Toast.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n GetProps,\n TamaguiElement,\n composeEventHandlers,\n styled,\n themeable,\n useEvent,\n useId,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { SizableText } from '@tamagui/text'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounceExclude } from './ToastAnnounce'\nimport {\n ToastNativePlatform,\n ToastNativeValue,\n useToast,\n useToastController,\n useToastState,\n} from './ToastImperative.js'\nimport {\n ToastImpl,\n ToastImplFrame,\n ToastProps,\n useToastInteractiveContext,\n} from './ToastImpl'\nimport {\n ScopedProps,\n ToastProvider,\n ToastProviderProps,\n createToastScope,\n} from './ToastProvider'\nimport { ToastViewport, ToastViewportProps } from './ToastViewport'\n\n/* -------------------------------------------------------------------------------------------------\n * ToastTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'ToastTitle'\n\nconst ToastTitleFrame = styled(SizableText, {\n name: TITLE_NAME,\n variants: {\n unstyled: {\n false: {\n color: '$color',\n size: '$4',\n },\n },\n },\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype PrimitiveDivProps = GetProps<typeof ToastTitleFrame>\ntype ToastTitleProps = PrimitiveDivProps & {}\n\nconst ToastTitle = React.forwardRef<TamaguiElement, ToastTitleProps>(\n (props: ScopedProps<ToastTitleProps>, forwardedRef) => {\n const { __scopeToast, ...titleProps } = props\n return <ToastTitleFrame {...titleProps} ref={forwardedRef} />\n }\n)\n\nToastTitle.displayName = TITLE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * ToastDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'ToastDescription'\n\nconst ToastDescriptionFrame = styled(SizableText, {\n name: DESCRIPTION_NAME,\n\n variants: {\n unstyled: {\n false: {\n color: '$color11',\n size: '$1',\n },\n },\n },\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ToastDescriptionFrameProps = GetProps<typeof ToastDescriptionFrame>\ntype ToastDescriptionProps = ToastDescriptionFrameProps & {}\n\nconst ToastDescription = React.forwardRef<TamaguiElement, ToastDescriptionProps>(\n (props: ScopedProps<ToastDescriptionProps>, forwardedRef) => {\n const { __scopeToast, ...descriptionProps } = props\n return <ToastDescriptionFrame {...descriptionProps} ref={forwardedRef} />\n }\n)\n\nToastDescription.displayName = DESCRIPTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * ToastAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'ToastAction'\n\ntype ToastActionProps = ToastCloseProps & {\n /**\n * A short description for an alternate way to carry out the action. For screen reader users\n * who will not be able to navigate to the button easily/quickly.\n * @example <ToastAction altText=\"Goto account settings to updgrade\">Upgrade</ToastAction>\n * @example <ToastAction altText=\"Undo (Alt+U)\">Undo</ToastAction>\n */\n altText: string\n}\n\nconst ToastAction = React.forwardRef<TamaguiElement, ToastActionProps>(\n (props: ScopedProps<ToastActionProps>, forwardedRef) => {\n const { altText, ...actionProps } = props\n if (!altText) return null\n return (\n <ToastAnnounceExclude altText={altText} asChild>\n <ToastClose {...actionProps} ref={forwardedRef} />\n </ToastAnnounceExclude>\n )\n }\n)\n\nToastAction.propTypes = {\n altText(props) {\n if (!props.altText) {\n return new Error(`Missing prop \\`altText\\` expected on \\`${ACTION_NAME}\\``)\n }\n return null\n },\n}\n\nToastAction.displayName = ACTION_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * ToastClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'ToastClose'\n\nconst ToastCloseFrame = styled(ThemeableStack, {\n name: CLOSE_NAME,\n tag: 'button',\n})\ntype ToastCloseFrameProps = GetProps<typeof ToastCloseFrame>\ntype ToastCloseProps = ToastCloseFrameProps & {}\n\nconst ToastClose = React.forwardRef<TamaguiElement, ToastCloseProps>(\n (props: ScopedProps<ToastCloseProps>, forwardedRef) => {\n const { __scopeToast, ...closeProps } = props\n const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast)\n\n return (\n <ToastAnnounceExclude asChild>\n <ToastCloseFrame\n accessibilityLabel=\"Dialog Close\"\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, interactiveContext.onClose)}\n />\n </ToastAnnounceExclude>\n )\n }\n)\n\nToastClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Toast\n * -----------------------------------------------------------------------------------------------*/\n\nconst ToastComponent = React.forwardRef<TamaguiElement, ToastProps>(\n ToastImplFrame.extractable((props: ScopedProps<ToastProps>, forwardedRef) => {\n const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? true,\n onChange: onOpenChange,\n })\n\n const id = useId()\n const onPause = useEvent(props.onPause)\n const onResume = useEvent(props.onResume)\n const shouldShow = forceMount || open\n\n if (!shouldShow) return null\n\n return (\n <ToastImpl\n id={id}\n open={open}\n {...toastProps}\n ref={forwardedRef}\n onClose={() => setOpen(false)}\n onPause={onPause}\n onResume={onResume}\n onSwipeEnd={composeEventHandlers(props.onSwipeEnd, (event) => {\n setOpen(false)\n })}\n />\n )\n })\n)\n\nToastComponent.displayName = TOAST_NAME\n\nconst Toast = withStaticProperties(\n themeable(ToastComponent, ToastImplFrame.staticConfig),\n {\n Title: ToastTitle,\n Description: ToastDescription,\n Action: ToastAction,\n Close: ToastClose,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport {\n Toast,\n ToastProvider,\n ToastViewport,\n //\n createToastScope,\n // imperative\n useToast,\n useToastController,\n useToastState,\n}\nexport type {\n ToastActionProps,\n ToastCloseProps,\n ToastDescriptionProps,\n ToastProps,\n ToastProviderProps,\n ToastTitleProps,\n ToastViewportProps,\n // imperative\n ToastNativeValue,\n ToastNativePlatform,\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,60 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
Stack,
|
|
3
|
+
Text,
|
|
4
|
+
styled,
|
|
5
|
+
useEvent,
|
|
6
|
+
useIsomorphicLayoutEffect
|
|
7
|
+
} from "@tamagui/core";
|
|
8
|
+
import { Portal } from "@tamagui/portal";
|
|
9
|
+
import { VisuallyHidden } from "@tamagui/visually-hidden";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import { useToastProviderContext } from "./ToastProvider";
|
|
12
|
+
import { TOAST_NAME } from "./constants";
|
|
13
|
+
const ToastAnnounceExcludeFrame = styled(Stack, {
|
|
14
|
+
name: "ToastAnnounceExclude"
|
|
15
|
+
});
|
|
16
|
+
const ToastAnnounceExclude = React.forwardRef(
|
|
17
|
+
(props, forwardedRef) => {
|
|
18
|
+
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
19
|
+
return <ToastAnnounceExcludeFrame
|
|
20
|
+
data-toast-announce-exclude=""
|
|
21
|
+
data-toast-announce-alt={altText || void 0}
|
|
22
|
+
{...announceExcludeProps}
|
|
23
|
+
ref={forwardedRef}
|
|
24
|
+
/>;
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
const ToastAnnounce = (props) => {
|
|
28
|
+
const { __scopeToast, children, ...announceProps } = props;
|
|
29
|
+
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
30
|
+
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
|
|
31
|
+
const [isAnnounced, setIsAnnounced] = React.useState(false);
|
|
32
|
+
useNextFrame(() => setRenderAnnounceText(true));
|
|
33
|
+
React.useEffect(() => {
|
|
34
|
+
const timer = setTimeout(() => setIsAnnounced(true), 1e3);
|
|
35
|
+
return () => clearTimeout(timer);
|
|
36
|
+
}, []);
|
|
37
|
+
return isAnnounced ? null : <Portal asChild><VisuallyHidden {...announceProps}>{renderAnnounceText && <Text>
|
|
38
|
+
{context.label}
|
|
39
|
+
{" "}
|
|
40
|
+
{children}
|
|
41
|
+
</Text>}</VisuallyHidden></Portal>;
|
|
42
|
+
};
|
|
43
|
+
function useNextFrame(callback = () => {
|
|
44
|
+
}) {
|
|
45
|
+
const fn = useEvent(callback);
|
|
46
|
+
useIsomorphicLayoutEffect(() => {
|
|
47
|
+
let raf1 = 0;
|
|
48
|
+
let raf2 = 0;
|
|
49
|
+
raf1 = requestAnimationFrame(() => raf2 = requestAnimationFrame(fn));
|
|
50
|
+
return () => {
|
|
51
|
+
cancelAnimationFrame(raf1);
|
|
52
|
+
cancelAnimationFrame(raf2);
|
|
53
|
+
};
|
|
54
|
+
}, [fn]);
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
ToastAnnounce,
|
|
58
|
+
ToastAnnounceExclude
|
|
59
|
+
};
|
|
2
60
|
//# sourceMappingURL=ToastAnnounce.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastAnnounce.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n GetProps,\n Stack,\n TamaguiElement,\n Text,\n styled,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Portal } from '@tamagui/portal'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport { ScopedProps, useToastProviderContext } from './ToastProvider'\nimport { TOAST_NAME } from './constants'\n\nconst ToastAnnounceExcludeFrame = styled(Stack, {\n name: 'ToastAnnounceExclude',\n})\ntype ToastAnnounceExcludeFrameProps = GetProps<typeof ToastAnnounceExcludeFrame>\ntype ToastAnnounceExcludeProps = ToastAnnounceExcludeFrameProps & {\n altText?: string\n}\n\nconst ToastAnnounceExclude = React.forwardRef<TamaguiElement, ToastAnnounceExcludeProps>(\n (props: ScopedProps<ToastAnnounceExcludeProps>, forwardedRef) => {\n const { __scopeToast, altText, ...announceExcludeProps } = props\n\n return (\n <ToastAnnounceExcludeFrame\n data-toast-announce-exclude=\"\"\n data-toast-announce-alt={altText || undefined}\n {...announceExcludeProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface ToastAnnounceProps\n extends Omit<GetProps<typeof VisuallyHidden>, 'children'>,\n ScopedProps<{ children: string[] }> {}\n\nconst ToastAnnounce: React.FC<ToastAnnounceProps> = (\n props: ScopedProps<ToastAnnounceProps>\n) => {\n const { __scopeToast, children, ...announceProps } = props\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [renderAnnounceText, setRenderAnnounceText] = React.useState(false)\n const [isAnnounced, setIsAnnounced] = React.useState(false)\n\n // render text content in the next frame to ensure toast is announced in NVDA\n useNextFrame(() => setRenderAnnounceText(true))\n\n // cleanup after announcing\n React.useEffect(() => {\n const timer = setTimeout(() => setIsAnnounced(true), 1000)\n return () => clearTimeout(timer)\n }, [])\n\n return isAnnounced ? null : (\n <Portal asChild>\n <VisuallyHidden {...announceProps}>\n {renderAnnounceText && (\n <Text>\n {context.label} {children}\n </Text>\n )}\n </VisuallyHidden>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useNextFrame(callback = () => {}) {\n const fn = useEvent(callback)\n useIsomorphicLayoutEffect(() => {\n let raf1 = 0\n let raf2 = 0\n raf1 = requestAnimationFrame(() => (raf2 = requestAnimationFrame(fn)))\n return () => {\n cancelAnimationFrame(raf1)\n cancelAnimationFrame(raf2)\n }\n }, [fn])\n}\n\n\nexport {\n ToastAnnounce,\n ToastAnnounceProps,\n ToastAnnounceExclude,\n ToastAnnounceExcludeProps,\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAsB,+BAA+B;AACrD,SAAS,kBAAkB;AAE3B,MAAM,4BAA4B,OAAO,OAAO;AAAA,EAC9C,MAAM;AACR,CAAC;AAMD,MAAM,uBAAuB,MAAM;AAAA,EACjC,CAAC,OAA+C,iBAAiB;AAC/D,UAAM,EAAE,cAAc,SAAS,GAAG,qBAAqB,IAAI;AAE3D,WACE,CAAC;AAAA,MACC,4BAA4B;AAAA,MAC5B,yBAAyB,WAAW;AAAA,UAChC;AAAA,MACJ,KAAK;AAAA,IACP;AAAA,EAEJ;AACF;AAQA,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM,EAAE,cAAc,UAAU,GAAG,cAAc,IAAI;AACrD,QAAM,UAAU,wBAAwB,YAAY,YAAY;AAChE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAS,KAAK;AACxE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAG1D,eAAa,MAAM,sBAAsB,IAAI,CAAC;AAG9C,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,eAAe,IAAI,GAAG,GAAI;AACzD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,cAAc,OACnB,CAAC,OAAO,QACN,CAAC,mBAAmB,gBACjB,sBACC,CAAC;AAAA,KACE,QAAQ;AAAA,KAAM;AAAA,KAAE;AAAA,EACnB,EAFC,MAIL,EANC,eAOH,EARC;AAUL;AAIA,SAAS,aAAa,WAAW,MAAM;AAAC,GAAG;AACzC,QAAM,KAAK,SAAS,QAAQ;AAC5B,4BAA0B,MAAM;AAC9B,QAAI,OAAO;AACX,QAAI,OAAO;AACX,WAAO,sBAAsB,MAAO,OAAO,sBAAsB,EAAE,CAAE;AACrE,WAAO,MAAM;AACX,2BAAqB,IAAI;AACzB,2BAAqB,IAAI;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACT;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,60 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {
|
|
2
|
+
Stack,
|
|
3
|
+
Text,
|
|
4
|
+
styled,
|
|
5
|
+
useEvent,
|
|
6
|
+
useIsomorphicLayoutEffect
|
|
7
|
+
} from "@tamagui/core";
|
|
8
|
+
import { Portal } from "@tamagui/portal";
|
|
9
|
+
import { VisuallyHidden } from "@tamagui/visually-hidden";
|
|
10
|
+
import * as React from "react";
|
|
11
|
+
import { useToastProviderContext } from "./ToastProvider";
|
|
12
|
+
import { TOAST_NAME } from "./constants";
|
|
13
|
+
const ToastAnnounceExcludeFrame = styled(Stack, {
|
|
14
|
+
name: "ToastAnnounceExclude"
|
|
15
|
+
});
|
|
16
|
+
const ToastAnnounceExclude = React.forwardRef(
|
|
17
|
+
(props, forwardedRef) => {
|
|
18
|
+
const { __scopeToast, altText, ...announceExcludeProps } = props;
|
|
19
|
+
return <ToastAnnounceExcludeFrame
|
|
20
|
+
data-toast-announce-exclude=""
|
|
21
|
+
data-toast-announce-alt={altText || void 0}
|
|
22
|
+
{...announceExcludeProps}
|
|
23
|
+
ref={forwardedRef}
|
|
24
|
+
/>;
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
const ToastAnnounce = (props) => {
|
|
28
|
+
const { __scopeToast, children, ...announceProps } = props;
|
|
29
|
+
const context = useToastProviderContext(TOAST_NAME, __scopeToast);
|
|
30
|
+
const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);
|
|
31
|
+
const [isAnnounced, setIsAnnounced] = React.useState(false);
|
|
32
|
+
useNextFrame(() => setRenderAnnounceText(true));
|
|
33
|
+
React.useEffect(() => {
|
|
34
|
+
const timer = setTimeout(() => setIsAnnounced(true), 1e3);
|
|
35
|
+
return () => clearTimeout(timer);
|
|
36
|
+
}, []);
|
|
37
|
+
return isAnnounced ? null : <Portal asChild><VisuallyHidden {...announceProps}>{renderAnnounceText && <Text>
|
|
38
|
+
{context.label}
|
|
39
|
+
{" "}
|
|
40
|
+
{children}
|
|
41
|
+
</Text>}</VisuallyHidden></Portal>;
|
|
42
|
+
};
|
|
43
|
+
function useNextFrame(callback = () => {
|
|
44
|
+
}) {
|
|
45
|
+
const fn = useEvent(callback);
|
|
46
|
+
useIsomorphicLayoutEffect(() => {
|
|
47
|
+
let raf1 = 0;
|
|
48
|
+
let raf2 = 0;
|
|
49
|
+
raf1 = requestAnimationFrame(() => raf2 = requestAnimationFrame(fn));
|
|
50
|
+
return () => {
|
|
51
|
+
cancelAnimationFrame(raf1);
|
|
52
|
+
cancelAnimationFrame(raf2);
|
|
53
|
+
};
|
|
54
|
+
}, [fn]);
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
ToastAnnounce,
|
|
58
|
+
ToastAnnounceExclude
|
|
59
|
+
};
|
|
2
60
|
//# sourceMappingURL=ToastAnnounce.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastAnnounce.tsx"],
|
|
4
4
|
"sourcesContent": ["import {\n GetProps,\n Stack,\n TamaguiElement,\n Text,\n styled,\n useEvent,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Portal } from '@tamagui/portal'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport { ScopedProps, useToastProviderContext } from './ToastProvider'\nimport { TOAST_NAME } from './constants'\n\nconst ToastAnnounceExcludeFrame = styled(Stack, {\n name: 'ToastAnnounceExclude',\n})\ntype ToastAnnounceExcludeFrameProps = GetProps<typeof ToastAnnounceExcludeFrame>\ntype ToastAnnounceExcludeProps = ToastAnnounceExcludeFrameProps & {\n altText?: string\n}\n\nconst ToastAnnounceExclude = React.forwardRef<TamaguiElement, ToastAnnounceExcludeProps>(\n (props: ScopedProps<ToastAnnounceExcludeProps>, forwardedRef) => {\n const { __scopeToast, altText, ...announceExcludeProps } = props\n\n return (\n <ToastAnnounceExcludeFrame\n data-toast-announce-exclude=\"\"\n data-toast-announce-alt={altText || undefined}\n {...announceExcludeProps}\n ref={forwardedRef}\n />\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface ToastAnnounceProps\n extends Omit<GetProps<typeof VisuallyHidden>, 'children'>,\n ScopedProps<{ children: string[] }> {}\n\nconst ToastAnnounce: React.FC<ToastAnnounceProps> = (\n props: ScopedProps<ToastAnnounceProps>\n) => {\n const { __scopeToast, children, ...announceProps } = props\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [renderAnnounceText, setRenderAnnounceText] = React.useState(false)\n const [isAnnounced, setIsAnnounced] = React.useState(false)\n\n // render text content in the next frame to ensure toast is announced in NVDA\n useNextFrame(() => setRenderAnnounceText(true))\n\n // cleanup after announcing\n React.useEffect(() => {\n const timer = setTimeout(() => setIsAnnounced(true), 1000)\n return () => clearTimeout(timer)\n }, [])\n\n return isAnnounced ? null : (\n <Portal asChild>\n <VisuallyHidden {...announceProps}>\n {renderAnnounceText && (\n <Text>\n {context.label} {children}\n </Text>\n )}\n </VisuallyHidden>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useNextFrame(callback = () => {}) {\n const fn = useEvent(callback)\n useIsomorphicLayoutEffect(() => {\n let raf1 = 0\n let raf2 = 0\n raf1 = requestAnimationFrame(() => (raf2 = requestAnimationFrame(fn)))\n return () => {\n cancelAnimationFrame(raf1)\n cancelAnimationFrame(raf2)\n }\n }, [fn])\n}\n\n\nexport {\n ToastAnnounce,\n ToastAnnounceProps,\n ToastAnnounceExclude,\n ToastAnnounceExcludeProps,\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,YAAY,WAAW;AAEvB,SAAsB,+BAA+B;AACrD,SAAS,kBAAkB;AAE3B,MAAM,4BAA4B,OAAO,OAAO;AAAA,EAC9C,MAAM;AACR,CAAC;AAMD,MAAM,uBAAuB,MAAM;AAAA,EACjC,CAAC,OAA+C,iBAAiB;AAC/D,UAAM,EAAE,cAAc,SAAS,GAAG,qBAAqB,IAAI;AAE3D,WACE,CAAC;AAAA,MACC,4BAA4B;AAAA,MAC5B,yBAAyB,WAAW;AAAA,UAChC;AAAA,MACJ,KAAK;AAAA,IACP;AAAA,EAEJ;AACF;AAQA,MAAM,gBAA8C,CAClD,UACG;AACH,QAAM,EAAE,cAAc,UAAU,GAAG,cAAc,IAAI;AACrD,QAAM,UAAU,wBAAwB,YAAY,YAAY;AAChE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,MAAM,SAAS,KAAK;AACxE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAG1D,eAAa,MAAM,sBAAsB,IAAI,CAAC;AAG9C,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM,eAAe,IAAI,GAAG,GAAI;AACzD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SAAO,cAAc,OACnB,CAAC,OAAO,QACN,CAAC,mBAAmB,gBACjB,sBACC,CAAC;AAAA,KACE,QAAQ;AAAA,KAAM;AAAA,KAAE;AAAA,EACnB,EAFC,MAIL,EANC,eAOH,EARC;AAUL;AAIA,SAAS,aAAa,WAAW,MAAM;AAAC,GAAG;AACzC,QAAM,KAAK,SAAS,QAAQ;AAC5B,4BAA0B,MAAM;AAC9B,QAAI,OAAO;AACX,QAAI,OAAO;AACX,WAAO,sBAAsB,MAAO,OAAO,sBAAsB,EAAE,CAAE;AACrE,WAAO,MAAM;AACX,2BAAqB,IAAI;AACzB,2BAAqB,IAAI;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,EAAE,CAAC;AACT;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|