@tamagui/toast 1.13.2 → 1.13.4
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 +1 -181
- package/dist/cjs/Toast.js.map +3 -3
- package/dist/cjs/ToastAnnounce.js +1 -92
- package/dist/cjs/ToastAnnounce.js.map +2 -2
- package/dist/cjs/ToastImperative.js +1 -110
- package/dist/cjs/ToastImperative.js.map +2 -2
- package/dist/cjs/ToastImpl.js +1 -352
- package/dist/cjs/ToastImpl.js.map +2 -2
- package/dist/cjs/ToastProvider.js +1 -119
- package/dist/cjs/ToastProvider.js.map +2 -2
- package/dist/cjs/ToastViewport.js +1 -312
- package/dist/cjs/ToastViewport.js.map +2 -2
- package/dist/cjs/constants.js +1 -28
- package/dist/cjs/constants.js.map +2 -2
- package/dist/cjs/createNativeToast.js +1 -69
- package/dist/cjs/createNativeToast.js.map +2 -2
- package/dist/cjs/createNativeToast.native.js +1 -43
- package/dist/cjs/createNativeToast.native.js.map +2 -2
- package/dist/cjs/index.js +1 -18
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/types.js +1 -16
- package/dist/cjs/types.js.map +2 -2
- package/dist/esm/Toast.js +1 -157
- package/dist/esm/Toast.js.map +3 -3
- package/dist/esm/Toast.mjs +1 -157
- package/dist/esm/Toast.mjs.map +3 -3
- package/dist/esm/ToastAnnounce.js +1 -63
- package/dist/esm/ToastAnnounce.js.map +2 -2
- package/dist/esm/ToastAnnounce.mjs +1 -63
- package/dist/esm/ToastAnnounce.mjs.map +2 -2
- package/dist/esm/ToastImperative.js +1 -73
- package/dist/esm/ToastImperative.js.map +2 -2
- package/dist/esm/ToastImperative.mjs +1 -73
- package/dist/esm/ToastImperative.mjs.map +2 -2
- package/dist/esm/ToastImpl.js +1 -328
- package/dist/esm/ToastImpl.js.map +2 -2
- package/dist/esm/ToastImpl.mjs +1 -328
- package/dist/esm/ToastImpl.mjs.map +2 -2
- package/dist/esm/ToastProvider.js +1 -80
- package/dist/esm/ToastProvider.js.map +2 -2
- package/dist/esm/ToastProvider.mjs +1 -80
- package/dist/esm/ToastProvider.mjs.map +2 -2
- package/dist/esm/ToastViewport.js +1 -279
- package/dist/esm/ToastViewport.js.map +2 -2
- package/dist/esm/ToastViewport.mjs +1 -279
- package/dist/esm/ToastViewport.mjs.map +2 -2
- package/dist/esm/constants.js +1 -4
- package/dist/esm/constants.js.map +2 -2
- package/dist/esm/constants.mjs +1 -4
- package/dist/esm/constants.mjs.map +2 -2
- package/dist/esm/createNativeToast.js +1 -44
- package/dist/esm/createNativeToast.js.map +2 -2
- package/dist/esm/createNativeToast.mjs +1 -44
- package/dist/esm/createNativeToast.mjs.map +2 -2
- package/dist/esm/createNativeToast.native.js +1 -18
- package/dist/esm/createNativeToast.native.js.map +2 -2
- package/dist/esm/createNativeToast.native.mjs +1 -18
- 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 +1 -150
- package/dist/jsx/Toast.js.map +3 -3
- package/dist/jsx/Toast.mjs +1 -150
- package/dist/jsx/Toast.mjs.map +3 -3
- package/dist/jsx/ToastAnnounce.js +1 -59
- package/dist/jsx/ToastAnnounce.js.map +2 -2
- package/dist/jsx/ToastAnnounce.mjs +1 -59
- package/dist/jsx/ToastAnnounce.mjs.map +2 -2
- package/dist/jsx/ToastImperative.js +1 -72
- package/dist/jsx/ToastImperative.js.map +2 -2
- package/dist/jsx/ToastImperative.mjs +1 -72
- package/dist/jsx/ToastImperative.mjs.map +2 -2
- package/dist/jsx/ToastImpl.js +1 -307
- package/dist/jsx/ToastImpl.js.map +2 -2
- package/dist/jsx/ToastImpl.mjs +1 -307
- package/dist/jsx/ToastImpl.mjs.map +2 -2
- package/dist/jsx/ToastProvider.js +1 -75
- package/dist/jsx/ToastProvider.js.map +2 -2
- package/dist/jsx/ToastProvider.mjs +1 -75
- package/dist/jsx/ToastProvider.mjs.map +2 -2
- package/dist/jsx/ToastViewport.js +1 -259
- package/dist/jsx/ToastViewport.js.map +2 -2
- package/dist/jsx/ToastViewport.mjs +1 -259
- package/dist/jsx/ToastViewport.mjs.map +2 -2
- package/dist/jsx/constants.js +1 -4
- package/dist/jsx/constants.js.map +2 -2
- package/dist/jsx/constants.mjs +1 -4
- package/dist/jsx/constants.mjs.map +2 -2
- package/dist/jsx/createNativeToast.js +1 -44
- package/dist/jsx/createNativeToast.js.map +2 -2
- package/dist/jsx/createNativeToast.mjs +1 -44
- package/dist/jsx/createNativeToast.mjs.map +2 -2
- package/dist/jsx/createNativeToast.native.js +1 -18
- package/dist/jsx/createNativeToast.native.js.map +2 -2
- package/dist/jsx/createNativeToast.native.mjs +1 -18
- 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/src/Toast.tsx +9 -1
- package/types/Toast.d.ts +2 -2
- package/types/Toast.d.ts.map +1 -1
|
@@ -1,81 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { createCollection } from "@tamagui/collection";
|
|
3
|
-
import { useId } from "@tamagui/core";
|
|
4
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import { ToastImperativeProvider } from "./ToastImperative";
|
|
7
|
-
const PROVIDER_NAME = "ToastProvider";
|
|
8
|
-
const [Collection, useCollection, createCollectionScope] = createCollection("Toast");
|
|
9
|
-
const [createToastContext, createToastScope] = createContextScope("Toast", [
|
|
10
|
-
createCollectionScope
|
|
11
|
-
]);
|
|
12
|
-
const [ToastProviderProvider, useToastProviderContext] = createToastContext(PROVIDER_NAME);
|
|
13
|
-
const ToastProvider = (props) => {
|
|
14
|
-
const {
|
|
15
|
-
__scopeToast,
|
|
16
|
-
id: providedId,
|
|
17
|
-
burntOptions,
|
|
18
|
-
native,
|
|
19
|
-
notificationOptions,
|
|
20
|
-
label = "Notification",
|
|
21
|
-
duration = 5e3,
|
|
22
|
-
swipeDirection = "right",
|
|
23
|
-
swipeThreshold = 50,
|
|
24
|
-
children
|
|
25
|
-
} = props;
|
|
26
|
-
const id = providedId ?? useId();
|
|
27
|
-
const [viewport, setViewport] = React.useState(null);
|
|
28
|
-
const [toastCount, setToastCount] = React.useState(0);
|
|
29
|
-
const isFocusedToastEscapeKeyDownRef = React.useRef(false);
|
|
30
|
-
const isClosePausedRef = React.useRef(false);
|
|
31
|
-
const options = React.useMemo(() => {
|
|
32
|
-
return {
|
|
33
|
-
duration,
|
|
34
|
-
burntOptions,
|
|
35
|
-
native,
|
|
36
|
-
notificationOptions
|
|
37
|
-
};
|
|
38
|
-
}, [JSON.stringify([duration, burntOptions, native, notificationOptions])]);
|
|
39
|
-
return /* @__PURE__ */ jsx(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ jsx(
|
|
40
|
-
ToastProviderProvider,
|
|
41
|
-
{
|
|
42
|
-
scope: __scopeToast,
|
|
43
|
-
id,
|
|
44
|
-
label,
|
|
45
|
-
duration,
|
|
46
|
-
swipeDirection,
|
|
47
|
-
swipeThreshold,
|
|
48
|
-
toastCount,
|
|
49
|
-
viewport,
|
|
50
|
-
onViewportChange: setViewport,
|
|
51
|
-
onToastAdd: React.useCallback(() => {
|
|
52
|
-
setToastCount((prevCount) => prevCount + 1);
|
|
53
|
-
}, []),
|
|
54
|
-
onToastRemove: React.useCallback(() => {
|
|
55
|
-
setToastCount((prevCount) => prevCount - 1);
|
|
56
|
-
}, []),
|
|
57
|
-
isFocusedToastEscapeKeyDownRef,
|
|
58
|
-
isClosePausedRef,
|
|
59
|
-
children: /* @__PURE__ */ jsx(ToastImperativeProvider, { options, children })
|
|
60
|
-
}
|
|
61
|
-
) });
|
|
62
|
-
};
|
|
63
|
-
ToastProvider.propTypes = {
|
|
64
|
-
label(props) {
|
|
65
|
-
if (props.label && typeof props.label === "string" && !props.label.trim()) {
|
|
66
|
-
const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`;
|
|
67
|
-
return new Error(error);
|
|
68
|
-
}
|
|
69
|
-
return null;
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
ToastProvider.displayName = PROVIDER_NAME;
|
|
73
|
-
export {
|
|
74
|
-
Collection,
|
|
75
|
-
ToastProvider,
|
|
76
|
-
createToastContext,
|
|
77
|
-
createToastScope,
|
|
78
|
-
useCollection,
|
|
79
|
-
useToastProviderContext
|
|
80
|
-
};
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{createCollection as D}from"@tamagui/collection";import{useId as E}from"@tamagui/core";import{createContextScope as O}from"@tamagui/create-context";import*as e from"react";import{ToastImperativeProvider as x}from"./ToastImperative";const s="ToastProvider",[u,N,V]=D("Toast"),[T,I]=O("Toast",[V]),[_,F]=T(s),a=o=>{const{__scopeToast:t,id:m,burntOptions:p,native:l,notificationOptions:c,label:v="Notification",duration:i=5e3,swipeDirection:P="right",swipeThreshold:f=50,children:b}=o,w=m??E(),[C,R]=e.useState(null),[g,d]=e.useState(0),h=e.useRef(!1),S=e.useRef(!1),y=e.useMemo(()=>({duration:i,burntOptions:p,native:l,notificationOptions:c}),[JSON.stringify([i,p,l,c])]);return n(u.Provider,{scope:t,children:n(_,{scope:t,id:w,label:v,duration:i,swipeDirection:P,swipeThreshold:f,toastCount:g,viewport:C,onViewportChange:R,onToastAdd:e.useCallback(()=>{d(r=>r+1)},[]),onToastRemove:e.useCallback(()=>{d(r=>r-1)},[]),isFocusedToastEscapeKeyDownRef:h,isClosePausedRef:S,children:n(x,{options:y,children:b})})})};a.propTypes={label(o){if(o.label&&typeof o.label=="string"&&!o.label.trim()){const t=`Invalid prop \`label\` supplied to \`${s}\`. Expected non-empty \`string\`.`;return new Error(t)}return null}},a.displayName=s;export{u as Collection,a as ToastProvider,T as createToastContext,I as createToastScope,N as useCollection,F as useToastProviderContext};
|
|
81
2
|
//# sourceMappingURL=ToastProvider.mjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastProvider.tsx"],
|
|
4
4
|
"sourcesContent": ["import { createCollection } from '@tamagui/collection'\nimport { TamaguiElement, useId } from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport * as React from 'react'\n\nimport { ToastImperativeProvider, ToastNativeValue } from './ToastImperative'\nimport { BurntToastOptions } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider'\n\nconst [Collection, useCollection, createCollectionScope] =\n createCollection<TamaguiElement>('Toast')\n\ntype SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'\ntype ToastProviderContextValue = {\n id: string\n label: string\n duration: number\n swipeDirection: SwipeDirection\n swipeThreshold: number\n toastCount: number\n viewport: TamaguiElement | null\n onViewportChange(viewport: TamaguiElement): void\n onToastAdd(): void\n onToastRemove(): void\n isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>\n isClosePausedRef: React.MutableRefObject<boolean>\n}\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope }\nconst [createToastContext, createToastScope] = createContextScope('Toast', [\n createCollectionScope,\n])\nconst [ToastProviderProvider, useToastProviderContext] =\n createToastContext<ToastProviderContextValue>(PROVIDER_NAME)\n\ninterface ToastProviderProps {\n children?: React.ReactNode\n /**\n * An author-localized label for each toast. Used to help screen reader users\n * associate the interruption with a toast.\n * @defaultValue 'Notification'\n */\n label?: string\n /**\n * Time in milliseconds that each toast should remain visible for.\n * @defaultValue 5000\n */\n duration?: number\n /**\n * Direction of pointer swipe that should close the toast.\n * @defaultValue 'right'\n */\n swipeDirection?: SwipeDirection\n /**\n * Distance in pixels that the swipe must pass before a close is triggered.\n * @defaultValue 50\n */\n swipeThreshold?: number\n /**\n * @defaultValue unique generated identifier\n */\n id?: string\n /**\n * Will show a native toast if is true or is set to the current platform. On iOS, it wraps `SPIndicator` and `SPAlert`. On Android, it wraps `ToastAndroid`. On web, it wraps Notification API. Mobile's native features are handled by `burnt`.\n * Only works with the imperative `useToast` hook.\n */\n native?: ToastNativeValue\n /**\n * Options for the burnt package if you're using native toasts on mobile\n */\n burntOptions?: Omit<BurntToastOptions, 'title' | 'message' | 'duration'>\n /**\n * Options for the notification API if you're using native toasts on web\n */\n notificationOptions?: NotificationOptions\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (\n props: ScopedProps<ToastProviderProps>\n) => {\n const {\n __scopeToast,\n id: providedId,\n burntOptions,\n native,\n notificationOptions,\n label = 'Notification',\n duration = 5000,\n swipeDirection = 'right',\n swipeThreshold = 50,\n children,\n } = props\n const id = providedId ?? useId()\n const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)\n const [toastCount, setToastCount] = React.useState(0)\n const isFocusedToastEscapeKeyDownRef = React.useRef(false)\n const isClosePausedRef = React.useRef(false)\n\n // memo context to avoid expensive re-renders\n const options = React.useMemo(() => {\n return {\n duration,\n burntOptions,\n native,\n notificationOptions,\n }\n // nested simple object so JSON.stringify\n }, [JSON.stringify([duration, burntOptions, native, notificationOptions])])\n\n return (\n <Collection.Provider scope={__scopeToast}>\n <ToastProviderProvider\n scope={__scopeToast}\n id={id}\n label={label}\n duration={duration}\n swipeDirection={swipeDirection}\n swipeThreshold={swipeThreshold}\n toastCount={toastCount}\n viewport={viewport}\n onViewportChange={setViewport}\n onToastAdd={React.useCallback(() => {\n setToastCount((prevCount) => prevCount + 1)\n }, [])}\n onToastRemove={React.useCallback(() => {\n setToastCount((prevCount) => prevCount - 1)\n }, [])}\n isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n isClosePausedRef={isClosePausedRef}\n >\n <ToastImperativeProvider options={options}>{children}</ToastImperativeProvider>\n </ToastProviderProvider>\n </Collection.Provider>\n )\n}\n\nToastProvider.propTypes = {\n label(props) {\n if (props.label && typeof props.label === 'string' && !props.label.trim()) {\n const error = `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\nToastProvider.displayName = PROVIDER_NAME\n\nexport {\n Collection,\n ToastProvider,\n createToastContext,\n createToastScope,\n useCollection,\n useToastProviderContext,\n}\nexport type { ScopedProps, SwipeDirection, ToastProviderProps }\n"],
|
|
5
|
-
"mappings": "AAwIQ
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAwIQ,cAAAA,MAAA,oBAxIR,OAAS,oBAAAC,MAAwB,sBACjC,OAAyB,SAAAC,MAAa,gBAEtC,OAAS,sBAAAC,MAA0B,0BACnC,UAAYC,MAAW,QAEvB,OAAS,2BAAAC,MAAiD,oBAO1D,MAAMC,EAAgB,gBAEhB,CAACC,EAAYC,EAAeC,CAAqB,EACrDR,EAAiC,OAAO,EAmBpC,CAACS,EAAoBC,CAAgB,EAAIR,EAAmB,QAAS,CACzEM,CACF,CAAC,EACK,CAACG,EAAuBC,CAAuB,EACnDH,EAA8CJ,CAAa,EA4CvDQ,EACJC,GACG,CACH,KAAM,CACJ,aAAAC,EACA,GAAIC,EACJ,aAAAC,EACA,OAAAC,EACA,oBAAAC,EACA,MAAAC,EAAQ,eACR,SAAAC,EAAW,IACX,eAAAC,EAAiB,QACjB,eAAAC,EAAiB,GACjB,SAAAC,CACF,EAAIV,EACEW,EAAKT,GAAcf,EAAM,EACzB,CAACyB,EAAUC,CAAW,EAAIxB,EAAM,SAAgC,IAAI,EACpE,CAACyB,EAAYC,CAAa,EAAI1B,EAAM,SAAS,CAAC,EAC9C2B,EAAiC3B,EAAM,OAAO,EAAK,EACnD4B,EAAmB5B,EAAM,OAAO,EAAK,EAGrC6B,EAAU7B,EAAM,QAAQ,KACrB,CACL,SAAAkB,EACA,aAAAJ,EACA,OAAAC,EACA,oBAAAC,CACF,GAEC,CAAC,KAAK,UAAU,CAACE,EAAUJ,EAAcC,EAAQC,CAAmB,CAAC,CAAC,CAAC,EAE1E,OACEpB,EAACO,EAAW,SAAX,CAAoB,MAAOS,EAC1B,SAAAhB,EAACY,EAAA,CACC,MAAOI,EACP,GAAIU,EACJ,MAAOL,EACP,SAAUC,EACV,eAAgBC,EAChB,eAAgBC,EAChB,WAAYK,EACZ,SAAUF,EACV,iBAAkBC,EAClB,WAAYxB,EAAM,YAAY,IAAM,CAClC0B,EAAeI,GAAcA,EAAY,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,cAAe9B,EAAM,YAAY,IAAM,CACrC0B,EAAeI,GAAcA,EAAY,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,+BAAgCH,EAChC,iBAAkBC,EAElB,SAAAhC,EAACK,EAAA,CAAwB,QAAS4B,EAAU,SAAAR,EAAS,EACvD,EACF,CAEJ,EAEAX,EAAc,UAAY,CACxB,MAAMC,EAAO,CACX,GAAIA,EAAM,OAAS,OAAOA,EAAM,OAAU,UAAY,CAACA,EAAM,MAAM,KAAK,EAAG,CACzE,MAAMoB,EAAQ,wCAAwC7B,sCACtD,OAAO,IAAI,MAAM6B,CAAK,CACxB,CACA,OAAO,IACT,CACF,EAEArB,EAAc,YAAcR",
|
|
6
|
+
"names": ["jsx", "createCollection", "useId", "createContextScope", "React", "ToastImperativeProvider", "PROVIDER_NAME", "Collection", "useCollection", "createCollectionScope", "createToastContext", "createToastScope", "ToastProviderProvider", "useToastProviderContext", "ToastProvider", "props", "__scopeToast", "providedId", "burntOptions", "native", "notificationOptions", "label", "duration", "swipeDirection", "swipeThreshold", "children", "id", "viewport", "setViewport", "toastCount", "setToastCount", "isFocusedToastEscapeKeyDownRef", "isClosePausedRef", "options", "prevCount", "error"]
|
|
7
7
|
}
|
|
@@ -1,280 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
3
|
-
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
|
-
import { isWeb, styled } from "@tamagui/core";
|
|
5
|
-
import { PortalHost } from "@tamagui/portal";
|
|
6
|
-
import { YStack } from "@tamagui/stacks";
|
|
7
|
-
import { VisuallyHidden } from "@tamagui/visually-hidden";
|
|
8
|
-
import * as React from "react";
|
|
9
|
-
import {
|
|
10
|
-
Collection,
|
|
11
|
-
useCollection,
|
|
12
|
-
useToastProviderContext
|
|
13
|
-
} from "./ToastProvider";
|
|
14
|
-
const VIEWPORT_NAME = "ToastViewport";
|
|
15
|
-
const VIEWPORT_DEFAULT_HOTKEY = ["F8"];
|
|
16
|
-
const VIEWPORT_PAUSE = "toast.viewportPause";
|
|
17
|
-
const VIEWPORT_RESUME = "toast.viewportResume";
|
|
18
|
-
const ToastViewportWrapperFrame = styled(YStack, {
|
|
19
|
-
name: "ViewportWrapper",
|
|
20
|
-
pointerEvents: "box-none",
|
|
21
|
-
top: 0,
|
|
22
|
-
bottom: 0,
|
|
23
|
-
left: 0,
|
|
24
|
-
right: 0,
|
|
25
|
-
// @ts-ignore
|
|
26
|
-
position: isWeb ? "fixed" : "absolute",
|
|
27
|
-
maxWidth: "100%",
|
|
28
|
-
tabIndex: 0,
|
|
29
|
-
zIndex: 1e5
|
|
30
|
-
});
|
|
31
|
-
const ToastViewportFrame = styled(YStack, {
|
|
32
|
-
name: VIEWPORT_NAME,
|
|
33
|
-
pointerEvents: "box-none",
|
|
34
|
-
// @ts-ignore
|
|
35
|
-
position: isWeb ? "fixed" : "absolute",
|
|
36
|
-
maxWidth: "100%"
|
|
37
|
-
});
|
|
38
|
-
const ToastViewport = React.forwardRef(
|
|
39
|
-
(props, forwardedRef) => {
|
|
40
|
-
const {
|
|
41
|
-
__scopeToast,
|
|
42
|
-
hotkey = VIEWPORT_DEFAULT_HOTKEY,
|
|
43
|
-
label = "Notifications ({hotkey})",
|
|
44
|
-
name,
|
|
45
|
-
multipleToasts,
|
|
46
|
-
...viewportProps
|
|
47
|
-
} = props;
|
|
48
|
-
const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);
|
|
49
|
-
const getItems = useCollection(__scopeToast);
|
|
50
|
-
const headFocusProxyRef = React.useRef(null);
|
|
51
|
-
const tailFocusProxyRef = React.useRef(null);
|
|
52
|
-
const wrapperRef = React.useRef(null);
|
|
53
|
-
const ref = React.useRef(null);
|
|
54
|
-
const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
|
|
55
|
-
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
56
|
-
const hasToasts = context.toastCount > 0;
|
|
57
|
-
React.useEffect(() => {
|
|
58
|
-
if (!isWeb)
|
|
59
|
-
return;
|
|
60
|
-
if (context.toastCount === 0)
|
|
61
|
-
return;
|
|
62
|
-
const handleKeyDown = (event) => {
|
|
63
|
-
var _a;
|
|
64
|
-
const isHotkeyPressed = hotkey.every(
|
|
65
|
-
(key) => event[key] || event.code === key
|
|
66
|
-
);
|
|
67
|
-
if (isHotkeyPressed)
|
|
68
|
-
(_a = ref.current) == null ? void 0 : _a.focus();
|
|
69
|
-
};
|
|
70
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
71
|
-
return () => {
|
|
72
|
-
document.removeEventListener("keydown", handleKeyDown);
|
|
73
|
-
};
|
|
74
|
-
}, [hotkey, context.toastCount]);
|
|
75
|
-
React.useEffect(() => {
|
|
76
|
-
if (!isWeb)
|
|
77
|
-
return;
|
|
78
|
-
if (context.toastCount === 0)
|
|
79
|
-
return;
|
|
80
|
-
const wrapper = wrapperRef.current;
|
|
81
|
-
const viewport = ref.current;
|
|
82
|
-
if (hasToasts && wrapper && viewport) {
|
|
83
|
-
const handlePause = () => {
|
|
84
|
-
if (!context.isClosePausedRef.current) {
|
|
85
|
-
const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);
|
|
86
|
-
viewport.dispatchEvent(pauseEvent);
|
|
87
|
-
context.isClosePausedRef.current = true;
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
const handleResume = () => {
|
|
91
|
-
if (context.isClosePausedRef.current) {
|
|
92
|
-
const resumeEvent = new CustomEvent(VIEWPORT_RESUME);
|
|
93
|
-
viewport.dispatchEvent(resumeEvent);
|
|
94
|
-
context.isClosePausedRef.current = false;
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
const handleFocusOutResume = (event) => {
|
|
98
|
-
const isFocusMovingOutside = !wrapper.contains(
|
|
99
|
-
event.relatedTarget
|
|
100
|
-
);
|
|
101
|
-
if (isFocusMovingOutside)
|
|
102
|
-
handleResume();
|
|
103
|
-
};
|
|
104
|
-
const handlePointerLeaveResume = () => {
|
|
105
|
-
const isFocusInside = wrapper.contains(document.activeElement);
|
|
106
|
-
if (!isFocusInside)
|
|
107
|
-
handleResume();
|
|
108
|
-
};
|
|
109
|
-
wrapper.addEventListener("focusin", handlePause);
|
|
110
|
-
wrapper.addEventListener("focusout", handleFocusOutResume);
|
|
111
|
-
wrapper.addEventListener("pointermove", handlePause);
|
|
112
|
-
wrapper.addEventListener("pointerleave", handlePointerLeaveResume);
|
|
113
|
-
window.addEventListener("blur", handlePause);
|
|
114
|
-
window.addEventListener("focus", handleResume);
|
|
115
|
-
return () => {
|
|
116
|
-
wrapper.removeEventListener("focusin", handlePause);
|
|
117
|
-
wrapper.removeEventListener("focusout", handleFocusOutResume);
|
|
118
|
-
wrapper.removeEventListener("pointermove", handlePause);
|
|
119
|
-
wrapper.removeEventListener("pointerleave", handlePointerLeaveResume);
|
|
120
|
-
window.removeEventListener("blur", handlePause);
|
|
121
|
-
window.removeEventListener("focus", handleResume);
|
|
122
|
-
};
|
|
123
|
-
}
|
|
124
|
-
}, [hasToasts, context.isClosePausedRef, context.toastCount]);
|
|
125
|
-
const getSortedTabbableCandidates = React.useCallback(
|
|
126
|
-
({ tabbingDirection }) => {
|
|
127
|
-
const toastItems = getItems();
|
|
128
|
-
const tabbableCandidates = toastItems.map((toastItem) => {
|
|
129
|
-
const toastNode = toastItem.ref.current;
|
|
130
|
-
const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];
|
|
131
|
-
return tabbingDirection === "forwards" ? toastTabbableCandidates : toastTabbableCandidates.reverse();
|
|
132
|
-
});
|
|
133
|
-
return (tabbingDirection === "forwards" ? tabbableCandidates.reverse() : tabbableCandidates).flat();
|
|
134
|
-
},
|
|
135
|
-
[getItems]
|
|
136
|
-
);
|
|
137
|
-
React.useEffect(() => {
|
|
138
|
-
if (!isWeb)
|
|
139
|
-
return;
|
|
140
|
-
if (context.toastCount === 0)
|
|
141
|
-
return;
|
|
142
|
-
const viewport = ref.current;
|
|
143
|
-
if (viewport) {
|
|
144
|
-
const handleKeyDown = (event) => {
|
|
145
|
-
var _a, _b, _c;
|
|
146
|
-
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
147
|
-
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
148
|
-
if (isTabKey) {
|
|
149
|
-
const focusedElement = document.activeElement;
|
|
150
|
-
const isTabbingBackwards = event.shiftKey;
|
|
151
|
-
const targetIsViewport = event.target === viewport;
|
|
152
|
-
if (targetIsViewport && isTabbingBackwards) {
|
|
153
|
-
(_a = headFocusProxyRef.current) == null ? void 0 : _a.focus();
|
|
154
|
-
return;
|
|
155
|
-
}
|
|
156
|
-
const tabbingDirection = isTabbingBackwards ? "backwards" : "forwards";
|
|
157
|
-
const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });
|
|
158
|
-
const index = sortedCandidates.findIndex(
|
|
159
|
-
(candidate) => candidate === focusedElement
|
|
160
|
-
);
|
|
161
|
-
if (focusFirst(sortedCandidates.slice(index + 1))) {
|
|
162
|
-
event.preventDefault();
|
|
163
|
-
} else {
|
|
164
|
-
isTabbingBackwards ? (_b = headFocusProxyRef.current) == null ? void 0 : _b.focus() : (_c = tailFocusProxyRef.current) == null ? void 0 : _c.focus();
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
viewport.addEventListener("keydown", handleKeyDown);
|
|
169
|
-
return () => viewport.removeEventListener("keydown", handleKeyDown);
|
|
170
|
-
}
|
|
171
|
-
}, [getItems, getSortedTabbableCandidates, context.toastCount]);
|
|
172
|
-
return /* @__PURE__ */ jsxs(
|
|
173
|
-
ToastViewportWrapperFrame,
|
|
174
|
-
{
|
|
175
|
-
ref: wrapperRef,
|
|
176
|
-
role: "region",
|
|
177
|
-
"aria-label": label.replace("{hotkey}", hotkeyLabel),
|
|
178
|
-
tabIndex: -1,
|
|
179
|
-
children: [
|
|
180
|
-
hasToasts && /* @__PURE__ */ jsx(
|
|
181
|
-
FocusProxy,
|
|
182
|
-
{
|
|
183
|
-
ref: headFocusProxyRef,
|
|
184
|
-
onFocusFromOutsideViewport: () => {
|
|
185
|
-
const tabbableCandidates = getSortedTabbableCandidates({
|
|
186
|
-
tabbingDirection: "forwards"
|
|
187
|
-
});
|
|
188
|
-
focusFirst(tabbableCandidates);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
),
|
|
192
|
-
/* @__PURE__ */ jsx(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ jsx(ToastViewportFrame, { ref: composedRefs, ...viewportProps, children: /* @__PURE__ */ jsx(
|
|
193
|
-
PortalHost,
|
|
194
|
-
{
|
|
195
|
-
render: (children) => /* @__PURE__ */ jsx(AnimatePresence, { exitBeforeEnter: !multipleToasts, children }),
|
|
196
|
-
name: name ?? "default"
|
|
197
|
-
}
|
|
198
|
-
) }) }),
|
|
199
|
-
hasToasts && /* @__PURE__ */ jsx(
|
|
200
|
-
FocusProxy,
|
|
201
|
-
{
|
|
202
|
-
ref: tailFocusProxyRef,
|
|
203
|
-
onFocusFromOutsideViewport: () => {
|
|
204
|
-
const tabbableCandidates = getSortedTabbableCandidates({
|
|
205
|
-
tabbingDirection: "backwards"
|
|
206
|
-
});
|
|
207
|
-
focusFirst(tabbableCandidates);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
)
|
|
211
|
-
]
|
|
212
|
-
}
|
|
213
|
-
);
|
|
214
|
-
}
|
|
215
|
-
);
|
|
216
|
-
ToastViewport.displayName = VIEWPORT_NAME;
|
|
217
|
-
const FOCUS_PROXY_NAME = "ToastFocusProxy";
|
|
218
|
-
const FocusProxy = React.forwardRef(
|
|
219
|
-
(props, forwardedRef) => {
|
|
220
|
-
const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
|
|
221
|
-
const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
|
|
222
|
-
return /* @__PURE__ */ jsx(
|
|
223
|
-
VisuallyHidden,
|
|
224
|
-
{
|
|
225
|
-
"aria-hidden": true,
|
|
226
|
-
tabIndex: 0,
|
|
227
|
-
...proxyProps,
|
|
228
|
-
ref: forwardedRef,
|
|
229
|
-
position: isWeb ? "fixed" : "absolute",
|
|
230
|
-
onFocus: (event) => {
|
|
231
|
-
var _a;
|
|
232
|
-
if (!isWeb)
|
|
233
|
-
return;
|
|
234
|
-
const prevFocusedElement = event.relatedTarget;
|
|
235
|
-
const isFocusFromOutsideViewport = !((_a = context.viewport) == null ? void 0 : _a.contains(
|
|
236
|
-
prevFocusedElement
|
|
237
|
-
));
|
|
238
|
-
if (isFocusFromOutsideViewport)
|
|
239
|
-
onFocusFromOutsideViewport();
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
);
|
|
243
|
-
}
|
|
244
|
-
);
|
|
245
|
-
FocusProxy.displayName = FOCUS_PROXY_NAME;
|
|
246
|
-
function focusFirst(candidates) {
|
|
247
|
-
if (!isWeb)
|
|
248
|
-
return;
|
|
249
|
-
const previouslyFocusedElement = document.activeElement;
|
|
250
|
-
return candidates.some((candidate) => {
|
|
251
|
-
if (candidate === previouslyFocusedElement)
|
|
252
|
-
return true;
|
|
253
|
-
candidate.focus();
|
|
254
|
-
return document.activeElement !== previouslyFocusedElement;
|
|
255
|
-
});
|
|
256
|
-
}
|
|
257
|
-
function getTabbableCandidates(container) {
|
|
258
|
-
if (!isWeb)
|
|
259
|
-
return [];
|
|
260
|
-
const containerHtml = container;
|
|
261
|
-
const nodes = [];
|
|
262
|
-
const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {
|
|
263
|
-
acceptNode: (node) => {
|
|
264
|
-
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
265
|
-
if (node.disabled || node.hidden || isHiddenInput)
|
|
266
|
-
return NodeFilter.FILTER_SKIP;
|
|
267
|
-
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
268
|
-
}
|
|
269
|
-
});
|
|
270
|
-
while (walker.nextNode())
|
|
271
|
-
nodes.push(walker.currentNode);
|
|
272
|
-
return nodes;
|
|
273
|
-
}
|
|
274
|
-
export {
|
|
275
|
-
ToastViewport,
|
|
276
|
-
VIEWPORT_DEFAULT_HOTKEY,
|
|
277
|
-
VIEWPORT_PAUSE,
|
|
278
|
-
VIEWPORT_RESUME
|
|
279
|
-
};
|
|
1
|
+
import{jsx as E,jsxs as ee}from"react/jsx-runtime";import{AnimatePresence as z}from"@tamagui/animate-presence";import{useComposedRefs as B}from"@tamagui/compose-refs";import{isWeb as d,styled as k}from"@tamagui/core";import{PortalHost as X}from"@tamagui/portal";import{YStack as O}from"@tamagui/stacks";import{VisuallyHidden as j}from"@tamagui/visually-hidden";import*as i from"react";import{Collection as q,useCollection as J,useToastProviderContext as M}from"./ToastProvider";const L="ToastViewport",N=["F8"],K="toast.viewportPause",_="toast.viewportResume",Q=k(O,{name:"ViewportWrapper",pointerEvents:"box-none",top:0,bottom:0,left:0,right:0,position:d?"fixed":"absolute",maxWidth:"100%",tabIndex:0,zIndex:1e5}),Z=k(O,{name:L,pointerEvents:"box-none",position:d?"fixed":"absolute",maxWidth:"100%"}),S=i.forwardRef((f,l)=>{const{__scopeToast:s,hotkey:p=N,label:a="Notifications ({hotkey})",name:v,multipleToasts:P,...F}=f,o=M(L,s),w=J(s),g=i.useRef(null),C=i.useRef(null),I=i.useRef(null),y=i.useRef(null),W=B(l,y,o.onViewportChange),A=p.join("+").replace(/Key/g,"").replace(/Digit/g,""),b=o.toastCount>0;i.useEffect(()=>{if(!d||o.toastCount===0)return;const e=r=>{var n;p.every(c=>r[c]||r.code===c)&&((n=y.current)==null||n.focus())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[p,o.toastCount]),i.useEffect(()=>{if(!d||o.toastCount===0)return;const e=I.current,r=y.current;if(b&&e&&r){const t=()=>{if(!o.isClosePausedRef.current){const u=new CustomEvent(K);r.dispatchEvent(u),o.isClosePausedRef.current=!0}},n=()=>{if(o.isClosePausedRef.current){const u=new CustomEvent(_);r.dispatchEvent(u),o.isClosePausedRef.current=!1}},c=u=>{!e.contains(u.relatedTarget)&&n()},m=()=>{e.contains(document.activeElement)||n()};return e.addEventListener("focusin",t),e.addEventListener("focusout",c),e.addEventListener("pointermove",t),e.addEventListener("pointerleave",m),window.addEventListener("blur",t),window.addEventListener("focus",n),()=>{e.removeEventListener("focusin",t),e.removeEventListener("focusout",c),e.removeEventListener("pointermove",t),e.removeEventListener("pointerleave",m),window.removeEventListener("blur",t),window.removeEventListener("focus",n)}}},[b,o.isClosePausedRef,o.toastCount]);const T=i.useCallback(({tabbingDirection:e})=>{const t=w().map(n=>{const c=n.ref.current,m=[c,...$(c)];return e==="forwards"?m:m.reverse()});return(e==="forwards"?t.reverse():t).flat()},[w]);return i.useEffect(()=>{if(!d||o.toastCount===0)return;const e=y.current;if(e){const r=t=>{var m,u,h;const n=t.altKey||t.ctrlKey||t.metaKey;if(t.key==="Tab"&&!n){const U=document.activeElement,x=t.shiftKey;if(t.target===e&&x){(m=g.current)==null||m.focus();return}const H=T({tabbingDirection:x?"backwards":"forwards"}),G=H.findIndex(Y=>Y===U);V(H.slice(G+1))?t.preventDefault():x?(u=g.current)==null||u.focus():(h=C.current)==null||h.focus()}};return e.addEventListener("keydown",r),()=>e.removeEventListener("keydown",r)}},[w,T,o.toastCount]),ee(Q,{ref:I,role:"region","aria-label":a.replace("{hotkey}",A),tabIndex:-1,children:[b&&E(R,{ref:g,onFocusFromOutsideViewport:()=>{const e=T({tabbingDirection:"forwards"});V(e)}}),E(q.Slot,{scope:s,children:E(Z,{ref:W,...F,children:E(X,{render:e=>E(z,{exitBeforeEnter:!P,children:e}),name:v??"default"})})}),b&&E(R,{ref:C,onFocusFromOutsideViewport:()=>{const e=T({tabbingDirection:"backwards"});V(e)}})]})});S.displayName=L;const D="ToastFocusProxy",R=i.forwardRef((f,l)=>{const{__scopeToast:s,onFocusFromOutsideViewport:p,...a}=f,v=M(D,s);return E(j,{"aria-hidden":!0,tabIndex:0,...a,ref:l,position:d?"fixed":"absolute",onFocus:P=>{var w;if(!d)return;const F=P.relatedTarget;!((w=v.viewport)!=null&&w.contains(F))&&p()}})});R.displayName=D;function V(f){if(!d)return;const l=document.activeElement;return f.some(s=>s===l?!0:(s.focus(),document.activeElement!==l))}function $(f){if(!d)return[];const l=f,s=[],p=document.createTreeWalker(l,NodeFilter.SHOW_ELEMENT,{acceptNode:a=>{const v=a.tagName==="INPUT"&&a.type==="hidden";return a.disabled||a.hidden||v?NodeFilter.FILTER_SKIP:a.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});for(;p.nextNode();)s.push(p.currentNode);return s}export{S as ToastViewport,N as VIEWPORT_DEFAULT_HOTKEY,K as VIEWPORT_PAUSE,_ as VIEWPORT_RESUME};
|
|
280
2
|
//# sourceMappingURL=ToastViewport.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastViewport.tsx"],
|
|
4
4
|
"sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { GetProps, TamaguiElement, isWeb, styled } from '@tamagui/core'\nimport { PortalHost } from '@tamagui/portal'\nimport { YStack } from '@tamagui/stacks'\nimport { VisuallyHidden } from '@tamagui/visually-hidden'\nimport * as React from 'react'\n\nimport {\n Collection,\n ScopedProps,\n useCollection,\n useToastProviderContext,\n} from './ToastProvider'\n\nconst VIEWPORT_NAME = 'ToastViewport'\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8']\nconst VIEWPORT_PAUSE = 'toast.viewportPause'\nconst VIEWPORT_RESUME = 'toast.viewportResume'\n\nconst ToastViewportWrapperFrame = styled(YStack, {\n name: 'ViewportWrapper',\n pointerEvents: 'box-none',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n // @ts-ignore\n position: isWeb ? 'fixed' : 'absolute',\n maxWidth: '100%',\n tabIndex: 0,\n zIndex: 100000,\n})\n\nconst ToastViewportFrame = styled(YStack, {\n name: VIEWPORT_NAME,\n pointerEvents: 'box-none',\n // @ts-ignore\n position: isWeb ? 'fixed' : 'absolute',\n maxWidth: '100%',\n})\ntype ToastViewportFrameProps = GetProps<typeof ToastViewportFrame>\ntype ToastViewportProps = ToastViewportFrameProps & {\n /**\n * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n * @defaultValue ['F8']\n */\n hotkey?: string[]\n /**\n * An author-localized label for the toast viewport to provide context for screen reader users\n * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n * @defaultValue 'Notifications ({hotkey})'\n */\n label?: string\n /**\n * Used to reference the viewport if you want to have multiple viewports in the same provider.\n */\n name?: string\n /**\n * Pass this when you want to have multiple/duplicated toasts.\n */\n multipleToasts?: boolean\n}\n\nconst ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(\n (props: ScopedProps<ToastViewportProps>, forwardedRef) => {\n const {\n __scopeToast,\n hotkey = VIEWPORT_DEFAULT_HOTKEY,\n label = 'Notifications ({hotkey})',\n name,\n multipleToasts,\n ...viewportProps\n } = props\n const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast)\n const getItems = useCollection(__scopeToast)\n const headFocusProxyRef = React.useRef<FocusProxyElement>(null)\n const tailFocusProxyRef = React.useRef<FocusProxyElement>(null)\n const wrapperRef = React.useRef<HTMLDivElement>(null)\n const ref = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange)\n const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '')\n const hasToasts = context.toastCount > 0\n\n React.useEffect(() => {\n if (!isWeb) return\n if (context.toastCount === 0) return\n const handleKeyDown = (event: KeyboardEvent) => {\n // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n // for example, `event.key` for `Control+Alt+t` is `\u2020` and `t !== \u2020`\n const isHotkeyPressed = hotkey.every(\n (key) => (event as any)[key] || event.code === key\n )\n if (isHotkeyPressed) ref.current?.focus()\n }\n document.addEventListener('keydown', handleKeyDown)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n }\n }, [hotkey, context.toastCount])\n\n React.useEffect(() => {\n if (!isWeb) return\n if (context.toastCount === 0) return\n const wrapper = wrapperRef.current\n const viewport = ref.current\n if (hasToasts && wrapper && viewport) {\n const handlePause = () => {\n if (!context.isClosePausedRef.current) {\n const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)\n viewport.dispatchEvent(pauseEvent)\n context.isClosePausedRef.current = true\n }\n }\n\n const handleResume = () => {\n if (context.isClosePausedRef.current) {\n const resumeEvent = new CustomEvent(VIEWPORT_RESUME)\n viewport.dispatchEvent(resumeEvent)\n context.isClosePausedRef.current = false\n }\n }\n\n const handleFocusOutResume = (event: FocusEvent) => {\n const isFocusMovingOutside = !wrapper.contains(\n event.relatedTarget as HTMLElement\n )\n if (isFocusMovingOutside) handleResume()\n }\n\n const handlePointerLeaveResume = () => {\n const isFocusInside = wrapper.contains(document.activeElement)\n if (!isFocusInside) handleResume()\n }\n // Toasts are not in the viewport React tree so we need to bind DOM events\n\n wrapper.addEventListener('focusin', handlePause)\n wrapper.addEventListener('focusout', handleFocusOutResume)\n wrapper.addEventListener('pointermove', handlePause)\n wrapper.addEventListener('pointerleave', handlePointerLeaveResume)\n window.addEventListener('blur', handlePause)\n window.addEventListener('focus', handleResume)\n return () => {\n wrapper.removeEventListener('focusin', handlePause)\n wrapper.removeEventListener('focusout', handleFocusOutResume)\n wrapper.removeEventListener('pointermove', handlePause)\n wrapper.removeEventListener('pointerleave', handlePointerLeaveResume)\n window.removeEventListener('blur', handlePause)\n window.removeEventListener('focus', handleResume)\n }\n }\n }, [hasToasts, context.isClosePausedRef, context.toastCount])\n\n const getSortedTabbableCandidates = React.useCallback(\n ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n const toastItems = getItems()\n const tabbableCandidates = toastItems.map((toastItem) => {\n const toastNode = toastItem.ref.current!\n const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)]\n return tabbingDirection === 'forwards'\n ? toastTabbableCandidates\n : toastTabbableCandidates.reverse()\n })\n return (\n tabbingDirection === 'forwards'\n ? tabbableCandidates.reverse()\n : tabbableCandidates\n ).flat()\n },\n [getItems]\n )\n\n React.useEffect(() => {\n if (!isWeb) return\n if (context.toastCount === 0) return\n\n const viewport = ref.current\n // We programmatically manage tabbing as we are unable to influence\n // the source order with portals, this allows us to reverse the\n // tab order so that it runs from most recent toast to least\n if (viewport) {\n const handleKeyDown = (event: KeyboardEvent) => {\n const isMetaKey = event.altKey || event.ctrlKey || event.metaKey\n const isTabKey = event.key === 'Tab' && !isMetaKey\n\n if (isTabKey) {\n const focusedElement = document.activeElement\n const isTabbingBackwards = event.shiftKey\n const targetIsViewport = event.target === viewport\n\n // If we're back tabbing after jumping to the viewport then we simply\n // proxy focus out to the preceding document\n if (targetIsViewport && isTabbingBackwards) {\n headFocusProxyRef.current?.focus()\n return\n }\n\n const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards'\n const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection })\n const index = sortedCandidates.findIndex(\n (candidate) => candidate === focusedElement\n )\n if (focusFirst(sortedCandidates.slice(index + 1))) {\n event.preventDefault()\n } else {\n // If we can't focus that means we're at the edges so we\n // proxy to the corresponding exit point and let the browser handle\n // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n isTabbingBackwards\n ? headFocusProxyRef.current?.focus()\n : tailFocusProxyRef.current?.focus()\n }\n }\n }\n\n // Toasts are not in the viewport React tree so we need to bind DOM events\n viewport.addEventListener('keydown', handleKeyDown)\n return () => viewport.removeEventListener('keydown', handleKeyDown)\n }\n }, [getItems, getSortedTabbableCandidates, context.toastCount])\n\n return (\n <ToastViewportWrapperFrame\n ref={wrapperRef}\n role=\"region\"\n aria-label={label.replace('{hotkey}', hotkeyLabel)}\n // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume\n tabIndex={-1}\n // // incase list has size when empty (e.g. padding), we remove pointer events so\n // // it doesn't prevent interactions with page elements that it overlays\n // pointerEvents={hasToasts ? undefined : 'none'}\n >\n {hasToasts && (\n <FocusProxy\n ref={headFocusProxyRef}\n onFocusFromOutsideViewport={() => {\n const tabbableCandidates = getSortedTabbableCandidates({\n tabbingDirection: 'forwards',\n })\n focusFirst(tabbableCandidates)\n }}\n />\n )}\n {/**\n * tabindex on the the list so that it can be focused when items are removed. we focus\n * the list instead of the viewport so it announces number of items remaining.\n */}\n <Collection.Slot scope={__scopeToast}>\n <ToastViewportFrame ref={composedRefs} {...viewportProps}>\n <PortalHost\n render={(children) => (\n <AnimatePresence exitBeforeEnter={!multipleToasts}>\n {children}\n </AnimatePresence>\n )}\n name={name ?? 'default'}\n />\n </ToastViewportFrame>\n </Collection.Slot>\n {hasToasts && (\n <FocusProxy\n ref={tailFocusProxyRef}\n onFocusFromOutsideViewport={() => {\n const tabbableCandidates = getSortedTabbableCandidates({\n tabbingDirection: 'backwards',\n })\n focusFirst(tabbableCandidates)\n }}\n />\n )}\n </ToastViewportWrapperFrame>\n )\n }\n)\n\nToastViewport.displayName = VIEWPORT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy'\n\ntype FocusProxyElement = React.ElementRef<typeof VisuallyHidden>\ntype VisuallyHiddenProps = GetProps<typeof VisuallyHidden>\ninterface FocusProxyProps extends VisuallyHiddenProps {\n onFocusFromOutsideViewport(): void\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n (props, forwardedRef) => {\n const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props\n const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast)\n\n return (\n <VisuallyHidden\n aria-hidden\n tabIndex={0}\n {...proxyProps}\n ref={forwardedRef}\n // Avoid page scrolling when focus is on the focus proxy\n position={isWeb ? ('fixed' as any) : 'absolute'}\n onFocus={(event) => {\n if (!isWeb) return\n const prevFocusedElement = event.relatedTarget as HTMLElement | null\n const isFocusFromOutsideViewport = !(context.viewport as HTMLElement)?.contains(\n prevFocusedElement\n )\n if (isFocusFromOutsideViewport) onFocusFromOutsideViewport()\n }}\n />\n )\n }\n)\n\nFocusProxy.displayName = FOCUS_PROXY_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction focusFirst(candidates: TamaguiElement[]) {\n if (!isWeb) return\n const previouslyFocusedElement = document.activeElement\n return candidates.some((candidate) => {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === previouslyFocusedElement) return true\n candidate.focus()\n return document.activeElement !== previouslyFocusedElement\n })\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: TamaguiElement) {\n if (!isWeb) return []\n const containerHtml = container as HTMLElement\n const nodes: HTMLElement[] = []\n const walker = document.createTreeWalker(containerHtml, NodeFilter.SHOW_ELEMENT, {\n acceptNode: (node: any) => {\n const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP\n // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n // runtime's understanding of tabbability, so this automatically accounts\n // for any kind of element that could be tabbed to.\n return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP\n },\n })\n while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n // we do not take into account the order of nodes with positive `tabIndex` as it\n // hinders accessibility to have tab order different from visual order.\n return nodes\n}\n\nexport {\n ToastViewport,\n ToastViewportProps,\n VIEWPORT_DEFAULT_HOTKEY,\n VIEWPORT_PAUSE,\n VIEWPORT_RESUME,\n}\n"],
|
|
5
|
-
"mappings": "AA8NM,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "AnimatePresence", "useComposedRefs", "isWeb", "styled", "PortalHost", "YStack", "VisuallyHidden", "React", "Collection", "useCollection", "useToastProviderContext", "VIEWPORT_NAME", "VIEWPORT_DEFAULT_HOTKEY", "VIEWPORT_PAUSE", "VIEWPORT_RESUME", "ToastViewportWrapperFrame", "ToastViewportFrame", "ToastViewport", "props", "forwardedRef", "__scopeToast", "hotkey", "label", "name", "multipleToasts", "viewportProps", "context", "getItems", "headFocusProxyRef", "tailFocusProxyRef", "wrapperRef", "ref", "composedRefs", "hotkeyLabel", "hasToasts", "handleKeyDown", "event", "_a", "key", "wrapper", "viewport", "handlePause", "pauseEvent", "handleResume", "resumeEvent", "handleFocusOutResume", "handlePointerLeaveResume", "getSortedTabbableCandidates", "tabbingDirection", "tabbableCandidates", "toastItem", "toastNode", "toastTabbableCandidates", "getTabbableCandidates", "_b", "_c", "isMetaKey", "focusedElement", "isTabbingBackwards", "sortedCandidates", "index", "candidate", "focusFirst", "FocusProxy", "children", "FOCUS_PROXY_NAME", "onFocusFromOutsideViewport", "proxyProps", "prevFocusedElement", "candidates", "previouslyFocusedElement", "container", "containerHtml", "nodes", "walker", "node", "isHiddenInput"]
|
|
7
7
|
}
|