@radix-ui/react-toast
Advanced tools
Comparing version 0.1.2-rc.12 to 0.1.2-rc.13
@@ -1,2 +0,576 @@ | ||
var e,t=require("@radix-ui/react-visually-hidden").VisuallyHidden,r=require("@radix-ui/react-use-layout-effect").useLayoutEffect,o=require("@radix-ui/react-use-controllable-state").useControllableState,n=require("@radix-ui/react-use-callback-ref").useCallbackRef,s=require("@radix-ui/react-primitive").Primitive,a=require("@radix-ui/react-presence").Presence,i=require("@radix-ui/react-portal").UnstablePortal,c=f({},require("@radix-ui/react-dismissable-layer")),u=require("@radix-ui/react-context").createContextScope,l=require("@radix-ui/react-compose-refs").useComposedRefs,d=require("@radix-ui/primitive").composeEventHandlers,p=f({},require("react-dom")),w=f({},require("react")),v=(e=require("@babel/runtime/helpers/extends"))&&e.__esModule?e.default:e;function f(e,t){return Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e}const[m,E]=u("Toast");exports.createToastScope=E;const[T,y]=m("ToastProvider"),x=e=>{const{__scopeToast:t,label:r="Notification",duration:o=5e3,swipeDirection:n="right",swipeThreshold:s=50,children:a}=e,[i,c]=w.useState(null),[u,l]=w.useState(0),d=w.useRef(!1),p=w.useRef(!1);/*#__PURE__*/return w.createElement(T,{scope:t,label:r,duration:o,swipeDirection:n,swipeThreshold:s,toastCount:u,viewport:i,onViewportChange:c,onToastAdd:w.useCallback((()=>l((e=>e+1))),[]),onToastRemove:w.useCallback((()=>l((e=>e-1))),[]),isFocusedToastEscapeKeyDownRef:d,isClosePausedRef:p},a)};exports.ToastProvider=x;const g=["F8"],b=/*#__PURE__*/w.forwardRef(((e,t)=>{const{__scopeToast:r,hotkey:o=g,label:n="Notifications ({hotkey})",...a}=e,i=y("ToastViewport",r),u=w.useRef(null),d=w.useRef(null),p=l(t,d,i.onViewportChange),f=o.join("+").replace(/Key/g,"").replace(/Digit/g,"");return w.useEffect((()=>{const e=e=>{var t;o.every((t=>e[t]||e.code===t))&&(null===(t=d.current)||void 0===t||t.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)}),[o]),w.useEffect((()=>{const e=u.current,t=d.current;if(e&&t){const r=()=>{const e=new Event("toast.viewportPause");t.dispatchEvent(e),i.isClosePausedRef.current=!0},o=()=>{const e=new Event("toast.viewportResume");t.dispatchEvent(e),i.isClosePausedRef.current=!1};return e.addEventListener("focusin",r),e.addEventListener("focusout",o),e.addEventListener("pointerenter",r),e.addEventListener("pointerleave",o),window.addEventListener("blur",r),window.addEventListener("focus",o),()=>{e.removeEventListener("focusin",r),e.removeEventListener("focusout",o),e.removeEventListener("pointerenter",r),e.removeEventListener("pointerleave",o),window.removeEventListener("blur",r),window.removeEventListener("focus",o)}}}),[i.isClosePausedRef]),w.useEffect((()=>{const e=d.current;if(e){const t=new Set,r=new MutationObserver((r=>{const o=r.map((e=>Array.from(e.addedNodes))).reduce(((e,t)=>e.concat(t)));o.forEach((r=>{t.has(r)?t.delete(r):(e.prepend(r),t.add(r))}))}));return r.observe(e,{childList:!0}),()=>r.disconnect()}}),[]),/*#__PURE__*/w.createElement(c.Branch,{ref:u,role:"region","aria-label":n.replace("{hotkey}",f),tabIndex:-1,style:{pointerEvents:i.toastCount>0?void 0:"none"}},/*#__PURE__*/w.createElement(s.ol,v({tabIndex:-1},a,{ref:p})))}));exports.ToastViewport=b;const h=/*#__PURE__*/w.forwardRef(((e,t)=>{const{forceMount:r,open:n,defaultOpen:s,onOpenChange:i,...c}=e,[u=!0,l]=o({prop:n,defaultProp:s,onChange:i});/*#__PURE__*/return w.createElement(a,{present:r||u},/*#__PURE__*/w.createElement(R,v({open:u},c,{ref:t,onClose:()=>l(!1),onSwipeStart:d(e.onSwipeStart,(e=>{e.currentTarget.setAttribute("data-swipe","start")})),onSwipeMove:d(e.onSwipeMove,(e=>{const{x:t,y:r}=e.detail.delta;e.currentTarget.setAttribute("data-swipe","move"),e.currentTarget.style.setProperty("--radix-toast-swipe-move-x",`${t}px`),e.currentTarget.style.setProperty("--radix-toast-swipe-move-y",`${r}px`)})),onSwipeCancel:d(e.onSwipeCancel,(e=>{e.currentTarget.setAttribute("data-swipe","cancel"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"),e.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-end-y")})),onSwipeEnd:d(e.onSwipeEnd,(e=>{const{x:t,y:r}=e.detail.delta;e.currentTarget.setAttribute("data-swipe","end"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"),e.currentTarget.style.setProperty("--radix-toast-swipe-end-x",`${t}px`),e.currentTarget.style.setProperty("--radix-toast-swipe-end-y",`${r}px`),l(!1)}))})))}));exports.Toast=h;const[C,P]=m("Toast",{isInteractive:!1,onClose(){}}),R=/*#__PURE__*/w.forwardRef(((e,t)=>{const{__scopeToast:r,type:o="foreground",duration:a,open:i,onClose:u,onEscapeKeyDown:f,onSwipeStart:m,onSwipeMove:E,onSwipeCancel:T,onSwipeEnd:x,...g}=e,b=y("Toast",r),h=w.useRef(null),P=l(t,h),R=w.useRef(null),D=w.useRef(null),L=a||b.duration,_=w.useRef(0),k=w.useRef(L),A=w.useRef(0),{onToastAdd:F,onToastRemove:I}=b,K=n((()=>{var e,t;(null===(e=h.current)||void 0===e?void 0:e.contains(document.activeElement))&&(null===(t=b.viewport)||void 0===t||t.focus()),u()})),V=w.useCallback((e=>{e&&e!==1/0&&(window.clearTimeout(A.current),_.current=(new Date).getTime(),A.current=window.setTimeout(K,e))}),[K]);return w.useEffect((()=>{const e=b.viewport;if(e){const t=()=>{V(k.current)},r=()=>{const e=(new Date).getTime()-_.current;k.current=k.current-e,window.clearTimeout(A.current)};return e.addEventListener("toast.viewportPause",r),e.addEventListener("toast.viewportResume",t),()=>{e.removeEventListener("toast.viewportPause",r),e.removeEventListener("toast.viewportResume",t)}}}),[b.viewport,L,V]),w.useEffect((()=>{i&&!b.isClosePausedRef.current&&V(L)}),[i,L,b.isClosePausedRef,V]),w.useEffect((()=>(F(),()=>I())),[F,I]),b.viewport?/*#__PURE__*/w.createElement(w.Fragment,null,/*#__PURE__*/w.createElement(S,{__scopeToast:r,role:"status","aria-live":"foreground"===o?"assertive":"polite","aria-atomic":!0},e.children),/*#__PURE__*/w.createElement(C,{scope:r,isInteractive:!0,onClose:K},/*#__PURE__*/p.createPortal(/*#__PURE__*/w.createElement(c.Root,{asChild:!0,onEscapeKeyDown:d(f,(()=>{b.isFocusedToastEscapeKeyDownRef.current||K(),b.isFocusedToastEscapeKeyDownRef.current=!1}))},/*#__PURE__*/w.createElement(s.li,v({role:"status","aria-live":"off","aria-atomic":!0,tabIndex:0,"data-state":i?"open":"closed","data-swipe-direction":b.swipeDirection},g,{ref:P,style:{userSelect:"none",touchAction:"none",...e.style},onKeyDown:d(e.onKeyDown,(e=>{"Escape"===e.key&&(null==f||f(e.nativeEvent),e.nativeEvent.defaultPrevented||(b.isFocusedToastEscapeKeyDownRef.current=!0,K()))})),onPointerDown:d(e.onPointerDown,(e=>{0===e.button&&(R.current={x:e.clientX,y:e.clientY})})),onPointerMove:d(e.onPointerMove,(e=>{if(!R.current)return;const t=e.clientX-R.current.x,r=e.clientY-R.current.y,o=Boolean(D.current),n=["left","right"].includes(b.swipeDirection),s=["left","up"].includes(b.swipeDirection)?Math.min:Math.max,a=n?s(0,t):0,i=n?0:s(0,r),c="touch"===e.pointerType?10:2,u={x:a,y:i},l={originalEvent:e,delta:u};o?(D.current=u,M("toast.swipeMove",E,l)):q(u,b.swipeDirection,c)?(D.current=u,M("toast.swipeStart",m,l),e.target.setPointerCapture(e.pointerId)):(Math.abs(t)>c||Math.abs(r)>c)&&(R.current=null)})),onPointerUp:d(e.onPointerUp,(e=>{const t=D.current;if(e.target.releasePointerCapture(e.pointerId),D.current=null,R.current=null,t){const r=e.currentTarget,o={originalEvent:e,delta:t};q(t,b.swipeDirection,b.swipeThreshold)?M("toast.swipeEnd",x,o):M("toast.swipeCancel",T,o),r.addEventListener("click",(e=>e.preventDefault()),{once:!0})}}))}))),b.viewport))):null}));R.propTypes={type(e){if(e.type&&!["foreground","background"].includes(e.type)){throw new Error("Invalid prop `type` supplied to `Toast`. Expected `foreground | background`.")}return null}};const S=e=>{const{__scopeToast:o,...s}=e,a=y("Toast",o),[c,u]=w.useState(!1),[l,d]=w.useState(!1);return function(e=(()=>{})){const t=n(e);r((()=>{let e=0,r=0;return e=window.requestAnimationFrame((()=>r=window.requestAnimationFrame(t))),()=>{window.cancelAnimationFrame(e),window.cancelAnimationFrame(r)}}),[t])}((()=>u(!0))),w.useEffect((()=>{const e=window.setTimeout((()=>d(!0)),1e3);return()=>window.clearTimeout(e)}),[]),l?null:/*#__PURE__*/w.createElement(i,{asChild:!0},/*#__PURE__*/w.createElement(t,{asChild:!0},/*#__PURE__*/w.createElement("div",s,c&&/*#__PURE__*/w.createElement(w.Fragment,null,a.label," ",e.children))))},D=/*#__PURE__*/w.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e;/*#__PURE__*/return w.createElement(s.div,v({},o,{ref:t}))}));exports.ToastTitle=D;const L=/*#__PURE__*/w.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e;/*#__PURE__*/return w.createElement(s.div,v({},o,{ref:t}))}));exports.ToastDescription=L;const _=/*#__PURE__*/w.forwardRef(((e,t)=>{const{altText:r,...o}=e,n=P("ToastAction",e.__scopeToast);return r?n.isInteractive?/*#__PURE__*/w.createElement(k,v({},o,{ref:t})):/*#__PURE__*/w.createElement("span",null,r):null}));exports.ToastAction=_,_.propTypes={altText(e){if(!e.altText)throw new Error("Missing prop `altText` expected on `ToastAction`");return null}};const k=/*#__PURE__*/w.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e,n=P("ToastClose",r);return n.isInteractive?/*#__PURE__*/w.createElement(s.button,v({type:"button"},o,{ref:t,onClick:d(e.onClick,n.onClose)})):null}));function M(e,t,r){const o=r.originalEvent.currentTarget,n=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r});t&&o.addEventListener(e,t,{once:!0}),o.dispatchEvent(n)}exports.ToastClose=k;const q=(e,t,r=0)=>{const o=Math.abs(e.x),n=Math.abs(e.y),s=o>n;return"left"===t||"right"===t?s&&o>r:!s&&n>r};const A=x;exports.Provider=A;const F=b;exports.Viewport=F;const I=h;exports.Root=I;const K=D;exports.Title=K;const V=L;exports.Description=V;const O=_;exports.Action=O;const $=k;exports.Close=$; | ||
var $iTyic$babelruntimehelpersextends = require("@babel/runtime/helpers/extends"); | ||
var $iTyic$react = require("react"); | ||
var $iTyic$reactdom = require("react-dom"); | ||
var $iTyic$radixuiprimitive = require("@radix-ui/primitive"); | ||
var $iTyic$radixuireactcomposerefs = require("@radix-ui/react-compose-refs"); | ||
var $iTyic$radixuireactcontext = require("@radix-ui/react-context"); | ||
var $iTyic$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer"); | ||
var $iTyic$radixuireactportal = require("@radix-ui/react-portal"); | ||
var $iTyic$radixuireactpresence = require("@radix-ui/react-presence"); | ||
var $iTyic$radixuireactprimitive = require("@radix-ui/react-primitive"); | ||
var $iTyic$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref"); | ||
var $iTyic$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state"); | ||
var $iTyic$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect"); | ||
var $iTyic$radixuireactvisuallyhidden = require("@radix-ui/react-visually-hidden"); | ||
function $parcel$exportWildcard(dest, source) { | ||
Object.keys(source).forEach(function(key) { | ||
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) { | ||
return; | ||
} | ||
Object.defineProperty(dest, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return source[key]; | ||
} | ||
}); | ||
}); | ||
return dest; | ||
} | ||
function $parcel$interopDefault(a) { | ||
return a && a.__esModule ? a.default : a; | ||
} | ||
function $parcel$export(e, n, v, s) { | ||
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
} | ||
var $9208a85b3e79d33f$exports = {}; | ||
$parcel$export($9208a85b3e79d33f$exports, "createToastScope", () => $9208a85b3e79d33f$export$8a359da18fbc9073); | ||
$parcel$export($9208a85b3e79d33f$exports, "ToastProvider", () => $9208a85b3e79d33f$export$f5d03d415824e0e); | ||
$parcel$export($9208a85b3e79d33f$exports, "ToastViewport", () => $9208a85b3e79d33f$export$6192c2425ecfd989); | ||
$parcel$export($9208a85b3e79d33f$exports, "Toast", () => $9208a85b3e79d33f$export$8d8dc7d5f743331b); | ||
$parcel$export($9208a85b3e79d33f$exports, "ToastTitle", () => $9208a85b3e79d33f$export$16d42d7c29b95a4); | ||
$parcel$export($9208a85b3e79d33f$exports, "ToastDescription", () => $9208a85b3e79d33f$export$ecddd96c53621d9a); | ||
$parcel$export($9208a85b3e79d33f$exports, "ToastAction", () => $9208a85b3e79d33f$export$3019feecfda683d2); | ||
$parcel$export($9208a85b3e79d33f$exports, "ToastClose", () => $9208a85b3e79d33f$export$811e70f61c205839); | ||
$parcel$export($9208a85b3e79d33f$exports, "Provider", () => $9208a85b3e79d33f$export$2881499e37b75b9a); | ||
$parcel$export($9208a85b3e79d33f$exports, "Viewport", () => $9208a85b3e79d33f$export$d5c6c08dc2d3ca7); | ||
$parcel$export($9208a85b3e79d33f$exports, "Root", () => $9208a85b3e79d33f$export$be92b6f5f03c0fe9); | ||
$parcel$export($9208a85b3e79d33f$exports, "Title", () => $9208a85b3e79d33f$export$f99233281efd08a0); | ||
$parcel$export($9208a85b3e79d33f$exports, "Description", () => $9208a85b3e79d33f$export$393edc798c47379d); | ||
$parcel$export($9208a85b3e79d33f$exports, "Action", () => $9208a85b3e79d33f$export$e19cd5f9376f8cee); | ||
$parcel$export($9208a85b3e79d33f$exports, "Close", () => $9208a85b3e79d33f$export$f39c2d165cd861fe); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastProvider | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$PROVIDER_NAME = 'ToastProvider'; | ||
const [$9208a85b3e79d33f$var$createToastContext, $9208a85b3e79d33f$export$8a359da18fbc9073] = $iTyic$radixuireactcontext.createContextScope('Toast'); | ||
const [$9208a85b3e79d33f$var$ToastProviderProvider, $9208a85b3e79d33f$var$useToastProviderContext] = $9208a85b3e79d33f$var$createToastContext($9208a85b3e79d33f$var$PROVIDER_NAME); | ||
const $9208a85b3e79d33f$export$f5d03d415824e0e = (props)=>{ | ||
const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children } = props; | ||
const [viewport, setViewport] = $iTyic$react.useState(null); | ||
const [toastCount, setToastCount] = $iTyic$react.useState(0); | ||
const isFocusedToastEscapeKeyDownRef = $iTyic$react.useRef(false); | ||
const isClosePausedRef = $iTyic$react.useRef(false); | ||
return /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastProviderProvider, { | ||
scope: __scopeToast, | ||
label: label, | ||
duration: duration, | ||
swipeDirection: swipeDirection, | ||
swipeThreshold: swipeThreshold, | ||
toastCount: toastCount, | ||
viewport: viewport, | ||
onViewportChange: setViewport, | ||
onToastAdd: $iTyic$react.useCallback(()=>setToastCount((prevCount)=>prevCount + 1 | ||
) | ||
, []), | ||
onToastRemove: $iTyic$react.useCallback(()=>setToastCount((prevCount)=>prevCount - 1 | ||
) | ||
, []), | ||
isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef, | ||
isClosePausedRef: isClosePausedRef | ||
}, children); | ||
}; | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$f5d03d415824e0e, { | ||
displayName: $9208a85b3e79d33f$var$PROVIDER_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastViewport | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$VIEWPORT_NAME = 'ToastViewport'; | ||
const $9208a85b3e79d33f$var$VIEWPORT_DEFAULT_HOTKEY = [ | ||
'F8' | ||
]; | ||
const $9208a85b3e79d33f$var$VIEWPORT_PAUSE = 'toast.viewportPause'; | ||
const $9208a85b3e79d33f$var$VIEWPORT_RESUME = 'toast.viewportResume'; | ||
const $9208a85b3e79d33f$export$6192c2425ecfd989 = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , hotkey: hotkey = $9208a85b3e79d33f$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props; | ||
const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$VIEWPORT_NAME, __scopeToast); | ||
const wrapperRef = $iTyic$react.useRef(null); | ||
const ref = $iTyic$react.useRef(null); | ||
const composedRefs = $iTyic$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onViewportChange); | ||
const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, ''); | ||
$iTyic$react.useEffect(()=>{ | ||
const handleKeyDown = (event)=>{ | ||
var _ref$current; | ||
// we use `event.code` as it is consistent regardless of meta keys that were pressed. | ||
// for example, `event.key` for `Control+Alt+t` is `†` and `t !== †` | ||
const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key | ||
); | ||
if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus(); | ||
}; | ||
document.addEventListener('keydown', handleKeyDown); | ||
return ()=>document.removeEventListener('keydown', handleKeyDown) | ||
; | ||
}, [ | ||
hotkey | ||
]); | ||
$iTyic$react.useEffect(()=>{ | ||
const wrapper = wrapperRef.current; | ||
const viewport = ref.current; | ||
if (wrapper && viewport) { | ||
const handlePause = ()=>{ | ||
const pauseEvent = new Event($9208a85b3e79d33f$var$VIEWPORT_PAUSE); | ||
viewport.dispatchEvent(pauseEvent); | ||
context.isClosePausedRef.current = true; | ||
}; | ||
const handleResume = ()=>{ | ||
const resumeEvent = new Event($9208a85b3e79d33f$var$VIEWPORT_RESUME); | ||
viewport.dispatchEvent(resumeEvent); | ||
context.isClosePausedRef.current = false; | ||
}; // Toasts are not in the viewport React tree so we need to bind DOM events | ||
wrapper.addEventListener('focusin', handlePause); | ||
wrapper.addEventListener('focusout', handleResume); | ||
wrapper.addEventListener('pointerenter', handlePause); | ||
wrapper.addEventListener('pointerleave', handleResume); | ||
window.addEventListener('blur', handlePause); | ||
window.addEventListener('focus', handleResume); | ||
return ()=>{ | ||
wrapper.removeEventListener('focusin', handlePause); | ||
wrapper.removeEventListener('focusout', handleResume); | ||
wrapper.removeEventListener('pointerenter', handlePause); | ||
wrapper.removeEventListener('pointerleave', handleResume); | ||
window.removeEventListener('blur', handlePause); | ||
window.removeEventListener('focus', handleResume); | ||
}; | ||
} | ||
}, [ | ||
context.isClosePausedRef | ||
]); | ||
$iTyic$react.useEffect(()=>{ | ||
const viewport = ref.current; // Re-order DOM so most recent toasts are at top of DOM structure to improve tab order | ||
if (viewport) { | ||
const prepended = new Set(); | ||
const observer = new MutationObserver((mutations)=>{ | ||
const addedNodes = mutations.map((mutation)=>Array.from(mutation.addedNodes) | ||
).reduce((a, b)=>a.concat(b) | ||
); | ||
addedNodes.forEach((node)=>{ | ||
// mutation will immediately fire again when we prepend so we only prepend if | ||
// it hasn't just prepended. | ||
if (!prepended.has(node)) { | ||
viewport.prepend(node); | ||
prepended.add(node); | ||
} else // this else catches the case where the mutation fires immediately after prepend. | ||
// we remove from cache after it prepends to allow observer to catch future updates | ||
// to DOM order, e.g. if `key` changes for a toast and is reportalled to bottom. | ||
prepended.delete(node); | ||
}); | ||
}); | ||
observer.observe(viewport, { | ||
childList: true | ||
}); | ||
return ()=>observer.disconnect() | ||
; | ||
} | ||
}, []); | ||
return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Branch, { | ||
ref: wrapperRef, | ||
role: "region", | ||
"aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume | ||
, | ||
tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so | ||
, | ||
style: { | ||
pointerEvents: context.toastCount > 0 ? undefined : 'none' | ||
} | ||
}, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.ol, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({ | ||
tabIndex: -1 | ||
}, viewportProps, { | ||
ref: composedRefs | ||
}))); | ||
}); | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$6192c2425ecfd989, { | ||
displayName: $9208a85b3e79d33f$var$VIEWPORT_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* Toast | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$TOAST_NAME = 'Toast'; | ||
const $9208a85b3e79d33f$var$TOAST_SWIPE_START = 'toast.swipeStart'; | ||
const $9208a85b3e79d33f$var$TOAST_SWIPE_MOVE = 'toast.swipeMove'; | ||
const $9208a85b3e79d33f$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel'; | ||
const $9208a85b3e79d33f$var$TOAST_SWIPE_END = 'toast.swipeEnd'; | ||
const $9208a85b3e79d33f$export$8d8dc7d5f743331b = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props; | ||
const [open = true, setOpen] = $iTyic$radixuireactusecontrollablestate.useControllableState({ | ||
prop: openProp, | ||
defaultProp: defaultOpen, | ||
onChange: onOpenChange | ||
}); | ||
return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactpresence.Presence, { | ||
present: forceMount || open | ||
}, /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastImpl, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({ | ||
open: open | ||
}, toastProps, { | ||
ref: forwardedRef, | ||
onClose: ()=>setOpen(false) | ||
, | ||
onSwipeStart: $iTyic$radixuiprimitive.composeEventHandlers(props.onSwipeStart, (event)=>{ | ||
event.currentTarget.setAttribute('data-swipe', 'start'); | ||
}), | ||
onSwipeMove: $iTyic$radixuiprimitive.composeEventHandlers(props.onSwipeMove, (event)=>{ | ||
const { x: x , y: y } = event.detail.delta; | ||
event.currentTarget.setAttribute('data-swipe', 'move'); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`); | ||
}), | ||
onSwipeCancel: $iTyic$radixuiprimitive.composeEventHandlers(props.onSwipeCancel, (event)=>{ | ||
event.currentTarget.setAttribute('data-swipe', 'cancel'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y'); | ||
}), | ||
onSwipeEnd: $iTyic$radixuiprimitive.composeEventHandlers(props.onSwipeEnd, (event)=>{ | ||
const { x: x , y: y } = event.detail.delta; | ||
event.currentTarget.setAttribute('data-swipe', 'end'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y'); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`); | ||
setOpen(false); | ||
}) | ||
}))); | ||
}); | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$8d8dc7d5f743331b, { | ||
displayName: $9208a85b3e79d33f$var$TOAST_NAME | ||
}); | ||
/* -----------------------------------------------------------------------------------------------*/ const [$9208a85b3e79d33f$var$ToastInteractiveProvider, $9208a85b3e79d33f$var$useToastInteractiveContext] = $9208a85b3e79d33f$var$createToastContext($9208a85b3e79d33f$var$TOAST_NAME, { | ||
isInteractive: false, | ||
onClose () {} | ||
}); | ||
const $9208a85b3e79d33f$var$ToastImpl = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props; | ||
const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$TOAST_NAME, __scopeToast); | ||
const ref = $iTyic$react.useRef(null); | ||
const composedRefs = $iTyic$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref); | ||
const pointerStartRef = $iTyic$react.useRef(null); | ||
const swipeDeltaRef = $iTyic$react.useRef(null); | ||
const duration1 = durationProp || context.duration; | ||
const closeTimerStartTimeRef = $iTyic$react.useRef(0); | ||
const closeTimerRemainingTimeRef = $iTyic$react.useRef(duration1); | ||
const closeTimerRef = $iTyic$react.useRef(0); | ||
const { onToastAdd: onToastAdd , onToastRemove: onToastRemove } = context; | ||
const handleClose = $iTyic$radixuireactusecallbackref.useCallbackRef(()=>{ | ||
var _ref$current2, _context$viewport; | ||
// focus viewport if focus is within toast to read the remaining toast | ||
// count to SR users and ensure focus isn't lost | ||
const isFocusInToast = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(document.activeElement); | ||
if (isFocusInToast) (_context$viewport = context.viewport) === null || _context$viewport === void 0 || _context$viewport.focus(); | ||
onClose(); | ||
}); | ||
const startTimer = $iTyic$react.useCallback((duration)=>{ | ||
if (!duration || duration === Infinity) return; | ||
window.clearTimeout(closeTimerRef.current); | ||
closeTimerStartTimeRef.current = new Date().getTime(); | ||
closeTimerRef.current = window.setTimeout(handleClose, duration); | ||
}, [ | ||
handleClose | ||
]); | ||
$iTyic$react.useEffect(()=>{ | ||
const viewport = context.viewport; | ||
if (viewport) { | ||
const handleResume = ()=>{ | ||
startTimer(closeTimerRemainingTimeRef.current); | ||
}; | ||
const handlePause = ()=>{ | ||
const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current; | ||
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime; | ||
window.clearTimeout(closeTimerRef.current); | ||
}; | ||
viewport.addEventListener($9208a85b3e79d33f$var$VIEWPORT_PAUSE, handlePause); | ||
viewport.addEventListener($9208a85b3e79d33f$var$VIEWPORT_RESUME, handleResume); | ||
return ()=>{ | ||
viewport.removeEventListener($9208a85b3e79d33f$var$VIEWPORT_PAUSE, handlePause); | ||
viewport.removeEventListener($9208a85b3e79d33f$var$VIEWPORT_RESUME, handleResume); | ||
}; | ||
} | ||
}, [ | ||
context.viewport, | ||
duration1, | ||
startTimer | ||
]); // start timer when toast opens or duration changes. | ||
// we include `open` in deps because closed !== unmounted when animating | ||
// so it could reopen before being completely unmounted | ||
$iTyic$react.useEffect(()=>{ | ||
if (open && !context.isClosePausedRef.current) startTimer(duration1); | ||
}, [ | ||
open, | ||
duration1, | ||
context.isClosePausedRef, | ||
startTimer | ||
]); | ||
$iTyic$react.useEffect(()=>{ | ||
onToastAdd(); | ||
return ()=>onToastRemove() | ||
; | ||
}, [ | ||
onToastAdd, | ||
onToastRemove | ||
]); | ||
if (!context.viewport) return null; | ||
return /*#__PURE__*/ $iTyic$react.createElement($iTyic$react.Fragment, null, /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastAnnounce, { | ||
__scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs. | ||
, | ||
role: "status", | ||
"aria-live": type === 'foreground' ? 'assertive' : 'polite', | ||
"aria-atomic": true | ||
}, props.children), /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$var$ToastInteractiveProvider, { | ||
scope: __scopeToast, | ||
isInteractive: true, | ||
onClose: handleClose | ||
}, /*#__PURE__*/ $iTyic$reactdom.createPortal(/*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactdismissablelayer.Root, { | ||
asChild: true, | ||
onEscapeKeyDown: $iTyic$radixuiprimitive.composeEventHandlers(onEscapeKeyDown, ()=>{ | ||
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose(); | ||
context.isFocusedToastEscapeKeyDownRef.current = false; | ||
}) | ||
}, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.li, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({ | ||
role: "status", | ||
"aria-live": "off", | ||
"aria-atomic": true, | ||
tabIndex: 0, | ||
"data-state": open ? 'open' : 'closed', | ||
"data-swipe-direction": context.swipeDirection | ||
}, toastProps, { | ||
ref: composedRefs, | ||
style: { | ||
userSelect: 'none', | ||
touchAction: 'none', | ||
...props.style | ||
}, | ||
onKeyDown: $iTyic$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{ | ||
if (event.key !== 'Escape') return; | ||
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent); | ||
if (!event.nativeEvent.defaultPrevented) { | ||
context.isFocusedToastEscapeKeyDownRef.current = true; | ||
handleClose(); | ||
} | ||
}), | ||
onPointerDown: $iTyic$radixuiprimitive.composeEventHandlers(props.onPointerDown, (event)=>{ | ||
if (event.button !== 0) return; | ||
pointerStartRef.current = { | ||
x: event.clientX, | ||
y: event.clientY | ||
}; | ||
}), | ||
onPointerMove: $iTyic$radixuiprimitive.composeEventHandlers(props.onPointerMove, (event)=>{ | ||
if (!pointerStartRef.current) return; | ||
const x = event.clientX - pointerStartRef.current.x; | ||
const y = event.clientY - pointerStartRef.current.y; | ||
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current); | ||
const isHorizontalSwipe = [ | ||
'left', | ||
'right' | ||
].includes(context.swipeDirection); | ||
const clamp = [ | ||
'left', | ||
'up' | ||
].includes(context.swipeDirection) ? Math.min : Math.max; | ||
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0; | ||
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0; | ||
const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2; | ||
const delta = { | ||
x: clampedX, | ||
y: clampedY | ||
}; | ||
const eventDetail = { | ||
originalEvent: event, | ||
delta: delta | ||
}; | ||
if (hasSwipeMoveStarted) { | ||
swipeDeltaRef.current = delta; | ||
$9208a85b3e79d33f$var$dispatchCustomEvent($9208a85b3e79d33f$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail); | ||
} else if ($9208a85b3e79d33f$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) { | ||
swipeDeltaRef.current = delta; | ||
$9208a85b3e79d33f$var$dispatchCustomEvent($9208a85b3e79d33f$var$TOAST_SWIPE_START, onSwipeStart, eventDetail); | ||
event.target.setPointerCapture(event.pointerId); | ||
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture | ||
// for the current pointer down interaction | ||
pointerStartRef.current = null; | ||
}), | ||
onPointerUp: $iTyic$radixuiprimitive.composeEventHandlers(props.onPointerUp, (event1)=>{ | ||
const delta = swipeDeltaRef.current; | ||
event1.target.releasePointerCapture(event1.pointerId); | ||
swipeDeltaRef.current = null; | ||
pointerStartRef.current = null; | ||
if (delta) { | ||
const toast = event1.currentTarget; | ||
const eventDetail = { | ||
originalEvent: event1, | ||
delta: delta | ||
}; | ||
if ($9208a85b3e79d33f$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $9208a85b3e79d33f$var$dispatchCustomEvent($9208a85b3e79d33f$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail); | ||
else $9208a85b3e79d33f$var$dispatchCustomEvent($9208a85b3e79d33f$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail); | ||
// Prevent click event from triggering on items within the toast when | ||
// pointer up is part of a swipe gesture | ||
toast.addEventListener('click', (event)=>event.preventDefault() | ||
, { | ||
once: true | ||
}); | ||
} | ||
}) | ||
}))), context.viewport))); | ||
}); | ||
$9208a85b3e79d33f$var$ToastImpl.propTypes = { | ||
type (props) { | ||
if (props.type && ![ | ||
'foreground', | ||
'background' | ||
].includes(props.type)) { | ||
const error = `Invalid prop \`type\` supplied to \`${$9208a85b3e79d33f$var$TOAST_NAME}\`. Expected \`foreground | background\`.`; | ||
throw new Error(error); | ||
} | ||
return null; | ||
} | ||
}; | ||
/* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$ToastAnnounce = (props)=>{ | ||
const { __scopeToast: __scopeToast , ...announceProps } = props; | ||
const context = $9208a85b3e79d33f$var$useToastProviderContext($9208a85b3e79d33f$var$TOAST_NAME, __scopeToast); | ||
const [renderChildren, setRenderChildren] = $iTyic$react.useState(false); | ||
const [isAnnounced, setIsAnnounced] = $iTyic$react.useState(false); // render children in the next frame to ensure toast is announced in NVDA | ||
$9208a85b3e79d33f$var$useNextFrame(()=>setRenderChildren(true) | ||
); | ||
$iTyic$react.useEffect(()=>{ | ||
const timer = window.setTimeout(()=>setIsAnnounced(true) | ||
, 1000); | ||
return ()=>window.clearTimeout(timer) | ||
; | ||
}, []); | ||
return isAnnounced ? null : /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactportal.UnstablePortal, { | ||
asChild: true | ||
}, /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactvisuallyhidden.VisuallyHidden, { | ||
asChild: true | ||
}, /*#__PURE__*/ $iTyic$react.createElement("div", announceProps, renderChildren && /*#__PURE__*/ $iTyic$react.createElement($iTyic$react.Fragment, null, context.label, " ", props.children)))); | ||
}; | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastTitle | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$TITLE_NAME = 'ToastTitle'; | ||
const $9208a85b3e79d33f$export$16d42d7c29b95a4 = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , ...titleProps } = props; | ||
return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({}, titleProps, { | ||
ref: forwardedRef | ||
})); | ||
}); | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$16d42d7c29b95a4, { | ||
displayName: $9208a85b3e79d33f$var$TITLE_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastDescription | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$DESCRIPTION_NAME = 'ToastDescription'; | ||
const $9208a85b3e79d33f$export$ecddd96c53621d9a = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , ...descriptionProps } = props; | ||
return /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({}, descriptionProps, { | ||
ref: forwardedRef | ||
})); | ||
}); | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$ecddd96c53621d9a, { | ||
displayName: $9208a85b3e79d33f$var$DESCRIPTION_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastAction | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$ACTION_NAME = 'ToastAction'; | ||
const $9208a85b3e79d33f$export$3019feecfda683d2 = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { altText: altText , ...actionProps } = props; | ||
const context = $9208a85b3e79d33f$var$useToastInteractiveContext($9208a85b3e79d33f$var$ACTION_NAME, props.__scopeToast); | ||
if (!altText) return null; | ||
return context.isInteractive ? /*#__PURE__*/ $iTyic$react.createElement($9208a85b3e79d33f$export$811e70f61c205839, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({}, actionProps, { | ||
ref: forwardedRef | ||
})) : /*#__PURE__*/ $iTyic$react.createElement("span", null, altText); | ||
}); | ||
$9208a85b3e79d33f$export$3019feecfda683d2.propTypes = { | ||
altText (props) { | ||
if (!props.altText) throw new Error(`Missing prop \`altText\` expected on \`${$9208a85b3e79d33f$var$ACTION_NAME}\``); | ||
return null; | ||
} | ||
}; | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$3019feecfda683d2, { | ||
displayName: $9208a85b3e79d33f$var$ACTION_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastClose | ||
* -----------------------------------------------------------------------------------------------*/ const $9208a85b3e79d33f$var$CLOSE_NAME = 'ToastClose'; | ||
const $9208a85b3e79d33f$export$811e70f61c205839 = /*#__PURE__*/ $iTyic$react.forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , ...closeProps } = props; | ||
const interactiveContext = $9208a85b3e79d33f$var$useToastInteractiveContext($9208a85b3e79d33f$var$CLOSE_NAME, __scopeToast); | ||
return interactiveContext.isInteractive ? /*#__PURE__*/ $iTyic$react.createElement($iTyic$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($iTyic$babelruntimehelpersextends))({ | ||
type: "button" | ||
}, closeProps, { | ||
ref: forwardedRef, | ||
onClick: $iTyic$radixuiprimitive.composeEventHandlers(props.onClick, interactiveContext.onClose) | ||
})) : null; | ||
}); | ||
/*#__PURE__*/ Object.assign($9208a85b3e79d33f$export$811e70f61c205839, { | ||
displayName: $9208a85b3e79d33f$var$CLOSE_NAME | ||
}); | ||
/* ---------------------------------------------------------------------------------------------- */ function $9208a85b3e79d33f$var$dispatchCustomEvent(name, handler, detail) { | ||
const currentTarget = detail.originalEvent.currentTarget; | ||
const event = new CustomEvent(name, { | ||
bubbles: true, | ||
cancelable: true, | ||
detail: detail | ||
}); | ||
if (handler) currentTarget.addEventListener(name, handler, { | ||
once: true | ||
}); | ||
currentTarget.dispatchEvent(event); | ||
} | ||
const $9208a85b3e79d33f$var$isDeltaInDirection = (delta, direction, threshold = 0)=>{ | ||
const deltaX = Math.abs(delta.x); | ||
const deltaY = Math.abs(delta.y); | ||
const isDeltaX = deltaX > deltaY; | ||
if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold; | ||
else return !isDeltaX && deltaY > threshold; | ||
}; | ||
function $9208a85b3e79d33f$var$useNextFrame(callback = ()=>{}) { | ||
const fn = $iTyic$radixuireactusecallbackref.useCallbackRef(callback); | ||
$iTyic$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
let raf1 = 0; | ||
let raf2 = 0; | ||
raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn) | ||
); | ||
return ()=>{ | ||
window.cancelAnimationFrame(raf1); | ||
window.cancelAnimationFrame(raf2); | ||
}; | ||
}, [ | ||
fn | ||
]); | ||
} | ||
const $9208a85b3e79d33f$export$2881499e37b75b9a = $9208a85b3e79d33f$export$f5d03d415824e0e; | ||
const $9208a85b3e79d33f$export$d5c6c08dc2d3ca7 = $9208a85b3e79d33f$export$6192c2425ecfd989; | ||
const $9208a85b3e79d33f$export$be92b6f5f03c0fe9 = $9208a85b3e79d33f$export$8d8dc7d5f743331b; | ||
const $9208a85b3e79d33f$export$f99233281efd08a0 = $9208a85b3e79d33f$export$16d42d7c29b95a4; | ||
const $9208a85b3e79d33f$export$393edc798c47379d = $9208a85b3e79d33f$export$ecddd96c53621d9a; | ||
const $9208a85b3e79d33f$export$e19cd5f9376f8cee = $9208a85b3e79d33f$export$3019feecfda683d2; | ||
const $9208a85b3e79d33f$export$f39c2d165cd861fe = $9208a85b3e79d33f$export$811e70f61c205839; | ||
$parcel$exportWildcard(module.exports, $9208a85b3e79d33f$exports); | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,557 @@ | ||
import{VisuallyHidden as e}from"@radix-ui/react-visually-hidden";import{useLayoutEffect as t}from"@radix-ui/react-use-layout-effect";import{useControllableState as r}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as o}from"@radix-ui/react-use-callback-ref";import{Primitive as n}from"@radix-ui/react-primitive";import{Presence as s}from"@radix-ui/react-presence";import{UnstablePortal as a}from"@radix-ui/react-portal";import*as i from"@radix-ui/react-dismissable-layer";import{createContextScope as c}from"@radix-ui/react-context";import{useComposedRefs as u}from"@radix-ui/react-compose-refs";import{composeEventHandlers as l}from"@radix-ui/primitive";import*as p from"react-dom";import*as d from"react";import w from"@babel/runtime/helpers/esm/extends";const[f,m]=c("Toast");export{m as createToastScope};const[v,T]=f("ToastProvider");export const ToastProvider=e=>{const{__scopeToast:t,label:r="Notification",duration:o=5e3,swipeDirection:n="right",swipeThreshold:s=50,children:a}=e,[i,c]=d.useState(null),[u,l]=d.useState(0),p=d.useRef(!1),w=d.useRef(!1);/*#__PURE__*/return d.createElement(v,{scope:t,label:r,duration:o,swipeDirection:n,swipeThreshold:s,toastCount:u,viewport:i,onViewportChange:c,onToastAdd:d.useCallback((()=>l((e=>e+1))),[]),onToastRemove:d.useCallback((()=>l((e=>e-1))),[]),isFocusedToastEscapeKeyDownRef:p,isClosePausedRef:w},a)};/*#__PURE__*/const E=["F8"];export const ToastViewport=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeToast:r,hotkey:o=E,label:s="Notifications ({hotkey})",...a}=e,c=T("ToastViewport",r),l=d.useRef(null),p=d.useRef(null),f=u(t,p,c.onViewportChange),m=o.join("+").replace(/Key/g,"").replace(/Digit/g,"");return d.useEffect((()=>{const e=e=>{var t;o.every((t=>e[t]||e.code===t))&&(null===(t=p.current)||void 0===t||t.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)}),[o]),d.useEffect((()=>{const e=l.current,t=p.current;if(e&&t){const r=()=>{const e=new Event("toast.viewportPause");t.dispatchEvent(e),c.isClosePausedRef.current=!0},o=()=>{const e=new Event("toast.viewportResume");t.dispatchEvent(e),c.isClosePausedRef.current=!1};return e.addEventListener("focusin",r),e.addEventListener("focusout",o),e.addEventListener("pointerenter",r),e.addEventListener("pointerleave",o),window.addEventListener("blur",r),window.addEventListener("focus",o),()=>{e.removeEventListener("focusin",r),e.removeEventListener("focusout",o),e.removeEventListener("pointerenter",r),e.removeEventListener("pointerleave",o),window.removeEventListener("blur",r),window.removeEventListener("focus",o)}}}),[c.isClosePausedRef]),d.useEffect((()=>{const e=p.current;if(e){const t=new Set,r=new MutationObserver((r=>{r.map((e=>Array.from(e.addedNodes))).reduce(((e,t)=>e.concat(t))).forEach((r=>{t.has(r)?t.delete(r):(e.prepend(r),t.add(r))}))}));return r.observe(e,{childList:!0}),()=>r.disconnect()}}),[]),/*#__PURE__*/d.createElement(i.Branch,{ref:l,role:"region","aria-label":s.replace("{hotkey}",m),tabIndex:-1,style:{pointerEvents:c.toastCount>0?void 0:"none"}},/*#__PURE__*/d.createElement(n.ol,w({tabIndex:-1},a,{ref:f})))}));/*#__PURE__*/export const Toast=/*#__PURE__*/d.forwardRef(((e,t)=>{const{forceMount:o,open:n,defaultOpen:a,onOpenChange:i,...c}=e,[u=!0,p]=r({prop:n,defaultProp:a,onChange:i});/*#__PURE__*/return d.createElement(s,{present:o||u},/*#__PURE__*/d.createElement(g,w({open:u},c,{ref:t,onClose:()=>p(!1),onSwipeStart:l(e.onSwipeStart,(e=>{e.currentTarget.setAttribute("data-swipe","start")})),onSwipeMove:l(e.onSwipeMove,(e=>{const{x:t,y:r}=e.detail.delta;e.currentTarget.setAttribute("data-swipe","move"),e.currentTarget.style.setProperty("--radix-toast-swipe-move-x",`${t}px`),e.currentTarget.style.setProperty("--radix-toast-swipe-move-y",`${r}px`)})),onSwipeCancel:l(e.onSwipeCancel,(e=>{e.currentTarget.setAttribute("data-swipe","cancel"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"),e.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-end-y")})),onSwipeEnd:l(e.onSwipeEnd,(e=>{const{x:t,y:r}=e.detail.delta;e.currentTarget.setAttribute("data-swipe","end"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"),e.currentTarget.style.setProperty("--radix-toast-swipe-end-x",`${t}px`),e.currentTarget.style.setProperty("--radix-toast-swipe-end-y",`${r}px`),p(!1)}))})))}));/*#__PURE__*/const[x,y]=f("Toast",{isInteractive:!1,onClose(){}}),g=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeToast:r,type:s="foreground",duration:a,open:c,onClose:f,onEscapeKeyDown:m,onSwipeStart:v,onSwipeMove:E,onSwipeCancel:y,onSwipeEnd:g,...P}=e,R=T("Toast",r),D=d.useRef(null),S=u(t,D),L=d.useRef(null),A=d.useRef(null),_=a||R.duration,k=d.useRef(0),M=d.useRef(_),F=d.useRef(0),{onToastAdd:I,onToastRemove:K}=R,V=o((()=>{var e,t;(null===(e=D.current)||void 0===e?void 0:e.contains(document.activeElement))&&(null===(t=R.viewport)||void 0===t||t.focus()),f()})),$=d.useCallback((e=>{e&&e!==1/0&&(window.clearTimeout(F.current),k.current=(new Date).getTime(),F.current=window.setTimeout(V,e))}),[V]);return d.useEffect((()=>{const e=R.viewport;if(e){const t=()=>{$(M.current)},r=()=>{const e=(new Date).getTime()-k.current;M.current=M.current-e,window.clearTimeout(F.current)};return e.addEventListener("toast.viewportPause",r),e.addEventListener("toast.viewportResume",t),()=>{e.removeEventListener("toast.viewportPause",r),e.removeEventListener("toast.viewportResume",t)}}}),[R.viewport,_,$]),d.useEffect((()=>{c&&!R.isClosePausedRef.current&&$(_)}),[c,_,R.isClosePausedRef,$]),d.useEffect((()=>(I(),()=>K())),[I,K]),R.viewport?/*#__PURE__*/d.createElement(d.Fragment,null,/*#__PURE__*/d.createElement(h,{__scopeToast:r,role:"status","aria-live":"foreground"===s?"assertive":"polite","aria-atomic":!0},e.children),/*#__PURE__*/d.createElement(x,{scope:r,isInteractive:!0,onClose:V},/*#__PURE__*/p.createPortal(/*#__PURE__*/d.createElement(i.Root,{asChild:!0,onEscapeKeyDown:l(m,(()=>{R.isFocusedToastEscapeKeyDownRef.current||V(),R.isFocusedToastEscapeKeyDownRef.current=!1}))},/*#__PURE__*/d.createElement(n.li,w({role:"status","aria-live":"off","aria-atomic":!0,tabIndex:0,"data-state":c?"open":"closed","data-swipe-direction":R.swipeDirection},P,{ref:S,style:{userSelect:"none",touchAction:"none",...e.style},onKeyDown:l(e.onKeyDown,(e=>{"Escape"===e.key&&(null==m||m(e.nativeEvent),e.nativeEvent.defaultPrevented||(R.isFocusedToastEscapeKeyDownRef.current=!0,V()))})),onPointerDown:l(e.onPointerDown,(e=>{0===e.button&&(L.current={x:e.clientX,y:e.clientY})})),onPointerMove:l(e.onPointerMove,(e=>{if(!L.current)return;const t=e.clientX-L.current.x,r=e.clientY-L.current.y,o=Boolean(A.current),n=["left","right"].includes(R.swipeDirection),s=["left","up"].includes(R.swipeDirection)?Math.min:Math.max,a=n?s(0,t):0,i=n?0:s(0,r),c="touch"===e.pointerType?10:2,u={x:a,y:i},l={originalEvent:e,delta:u};o?(A.current=u,b("toast.swipeMove",E,l)):C(u,R.swipeDirection,c)?(A.current=u,b("toast.swipeStart",v,l),e.target.setPointerCapture(e.pointerId)):(Math.abs(t)>c||Math.abs(r)>c)&&(L.current=null)})),onPointerUp:l(e.onPointerUp,(e=>{const t=A.current;if(e.target.releasePointerCapture(e.pointerId),A.current=null,L.current=null,t){const r=e.currentTarget,o={originalEvent:e,delta:t};C(t,R.swipeDirection,R.swipeThreshold)?b("toast.swipeEnd",g,o):b("toast.swipeCancel",y,o),r.addEventListener("click",(e=>e.preventDefault()),{once:!0})}}))}))),R.viewport))):null}));g.propTypes={type(e){if(e.type&&!["foreground","background"].includes(e.type)){throw new Error("Invalid prop `type` supplied to `Toast`. Expected `foreground | background`.")}return null}};const h=r=>{const{__scopeToast:n,...s}=r,i=T("Toast",n),[c,u]=d.useState(!1),[l,p]=d.useState(!1);return function(e=(()=>{})){const r=o(e);t((()=>{let e=0,t=0;return e=window.requestAnimationFrame((()=>t=window.requestAnimationFrame(r))),()=>{window.cancelAnimationFrame(e),window.cancelAnimationFrame(t)}}),[r])}((()=>u(!0))),d.useEffect((()=>{const e=window.setTimeout((()=>p(!0)),1e3);return()=>window.clearTimeout(e)}),[]),l?null:/*#__PURE__*/d.createElement(a,{asChild:!0},/*#__PURE__*/d.createElement(e,{asChild:!0},/*#__PURE__*/d.createElement("div",s,c&&/*#__PURE__*/d.createElement(d.Fragment,null,i.label," ",r.children))))};export const ToastTitle=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e;/*#__PURE__*/return d.createElement(n.div,w({},o,{ref:t}))}));/*#__PURE__*/export const ToastDescription=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e;/*#__PURE__*/return d.createElement(n.div,w({},o,{ref:t}))}));/*#__PURE__*/export const ToastAction=/*#__PURE__*/d.forwardRef(((e,t)=>{const{altText:r,...o}=e,n=y("ToastAction",e.__scopeToast);return r?n.isInteractive?/*#__PURE__*/d.createElement(ToastClose,w({},o,{ref:t})):/*#__PURE__*/d.createElement("span",null,r):null}));ToastAction.propTypes={altText(e){if(!e.altText)throw new Error("Missing prop `altText` expected on `ToastAction`");return null}};export const ToastClose=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e,s=y("ToastClose",r);return s.isInteractive?/*#__PURE__*/d.createElement(n.button,w({type:"button"},o,{ref:t,onClick:l(e.onClick,s.onClose)})):null}));/*#__PURE__*/function b(e,t,r){const o=r.originalEvent.currentTarget,n=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r});t&&o.addEventListener(e,t,{once:!0}),o.dispatchEvent(n)}const C=(e,t,r=0)=>{const o=Math.abs(e.x),n=Math.abs(e.y),s=o>n;return"left"===t||"right"===t?s&&o>r:!s&&n>r};export const Provider=ToastProvider;export const Viewport=ToastViewport;export const Root=Toast;export const Title=ToastTitle;export const Description=ToastDescription;export const Action=ToastAction;export const Close=ToastClose; | ||
import $eyrYI$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends"; | ||
import {useState as $eyrYI$useState, useRef as $eyrYI$useRef, createElement as $eyrYI$createElement, useCallback as $eyrYI$useCallback, forwardRef as $eyrYI$forwardRef, useEffect as $eyrYI$useEffect, Fragment as $eyrYI$Fragment} from "react"; | ||
import {createPortal as $eyrYI$createPortal} from "react-dom"; | ||
import {composeEventHandlers as $eyrYI$composeEventHandlers} from "@radix-ui/primitive"; | ||
import {useComposedRefs as $eyrYI$useComposedRefs} from "@radix-ui/react-compose-refs"; | ||
import {createContextScope as $eyrYI$createContextScope} from "@radix-ui/react-context"; | ||
import {Branch as $eyrYI$Branch, Root as $eyrYI$Root} from "@radix-ui/react-dismissable-layer"; | ||
import {UnstablePortal as $eyrYI$UnstablePortal} from "@radix-ui/react-portal"; | ||
import {Presence as $eyrYI$Presence} from "@radix-ui/react-presence"; | ||
import {Primitive as $eyrYI$Primitive} from "@radix-ui/react-primitive"; | ||
import {useCallbackRef as $eyrYI$useCallbackRef} from "@radix-ui/react-use-callback-ref"; | ||
import {useControllableState as $eyrYI$useControllableState} from "@radix-ui/react-use-controllable-state"; | ||
import {useLayoutEffect as $eyrYI$useLayoutEffect} from "@radix-ui/react-use-layout-effect"; | ||
import {VisuallyHidden as $eyrYI$VisuallyHidden} from "@radix-ui/react-visually-hidden"; | ||
function $parcel$export(e, n, v, s) { | ||
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
} | ||
var $054eb8030ebde76e$exports = {}; | ||
$parcel$export($054eb8030ebde76e$exports, "createToastScope", () => $054eb8030ebde76e$export$8a359da18fbc9073); | ||
$parcel$export($054eb8030ebde76e$exports, "ToastProvider", () => $054eb8030ebde76e$export$f5d03d415824e0e); | ||
$parcel$export($054eb8030ebde76e$exports, "ToastViewport", () => $054eb8030ebde76e$export$6192c2425ecfd989); | ||
$parcel$export($054eb8030ebde76e$exports, "Toast", () => $054eb8030ebde76e$export$8d8dc7d5f743331b); | ||
$parcel$export($054eb8030ebde76e$exports, "ToastTitle", () => $054eb8030ebde76e$export$16d42d7c29b95a4); | ||
$parcel$export($054eb8030ebde76e$exports, "ToastDescription", () => $054eb8030ebde76e$export$ecddd96c53621d9a); | ||
$parcel$export($054eb8030ebde76e$exports, "ToastAction", () => $054eb8030ebde76e$export$3019feecfda683d2); | ||
$parcel$export($054eb8030ebde76e$exports, "ToastClose", () => $054eb8030ebde76e$export$811e70f61c205839); | ||
$parcel$export($054eb8030ebde76e$exports, "Provider", () => $054eb8030ebde76e$export$2881499e37b75b9a); | ||
$parcel$export($054eb8030ebde76e$exports, "Viewport", () => $054eb8030ebde76e$export$d5c6c08dc2d3ca7); | ||
$parcel$export($054eb8030ebde76e$exports, "Root", () => $054eb8030ebde76e$export$be92b6f5f03c0fe9); | ||
$parcel$export($054eb8030ebde76e$exports, "Title", () => $054eb8030ebde76e$export$f99233281efd08a0); | ||
$parcel$export($054eb8030ebde76e$exports, "Description", () => $054eb8030ebde76e$export$393edc798c47379d); | ||
$parcel$export($054eb8030ebde76e$exports, "Action", () => $054eb8030ebde76e$export$e19cd5f9376f8cee); | ||
$parcel$export($054eb8030ebde76e$exports, "Close", () => $054eb8030ebde76e$export$f39c2d165cd861fe); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastProvider | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$PROVIDER_NAME = 'ToastProvider'; | ||
const [$054eb8030ebde76e$var$createToastContext, $054eb8030ebde76e$export$8a359da18fbc9073] = $eyrYI$createContextScope('Toast'); | ||
const [$054eb8030ebde76e$var$ToastProviderProvider, $054eb8030ebde76e$var$useToastProviderContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$PROVIDER_NAME); | ||
const $054eb8030ebde76e$export$f5d03d415824e0e = (props)=>{ | ||
const { __scopeToast: __scopeToast , label: label = 'Notification' , duration: duration = 5000 , swipeDirection: swipeDirection = 'right' , swipeThreshold: swipeThreshold = 50 , children: children } = props; | ||
const [viewport, setViewport] = $eyrYI$useState(null); | ||
const [toastCount, setToastCount] = $eyrYI$useState(0); | ||
const isFocusedToastEscapeKeyDownRef = $eyrYI$useRef(false); | ||
const isClosePausedRef = $eyrYI$useRef(false); | ||
return /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastProviderProvider, { | ||
scope: __scopeToast, | ||
label: label, | ||
duration: duration, | ||
swipeDirection: swipeDirection, | ||
swipeThreshold: swipeThreshold, | ||
toastCount: toastCount, | ||
viewport: viewport, | ||
onViewportChange: setViewport, | ||
onToastAdd: $eyrYI$useCallback(()=>setToastCount((prevCount)=>prevCount + 1 | ||
) | ||
, []), | ||
onToastRemove: $eyrYI$useCallback(()=>setToastCount((prevCount)=>prevCount - 1 | ||
) | ||
, []), | ||
isFocusedToastEscapeKeyDownRef: isFocusedToastEscapeKeyDownRef, | ||
isClosePausedRef: isClosePausedRef | ||
}, children); | ||
}; | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$f5d03d415824e0e, { | ||
displayName: $054eb8030ebde76e$var$PROVIDER_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastViewport | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$VIEWPORT_NAME = 'ToastViewport'; | ||
const $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY = [ | ||
'F8' | ||
]; | ||
const $054eb8030ebde76e$var$VIEWPORT_PAUSE = 'toast.viewportPause'; | ||
const $054eb8030ebde76e$var$VIEWPORT_RESUME = 'toast.viewportResume'; | ||
const $054eb8030ebde76e$export$6192c2425ecfd989 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , hotkey: hotkey = $054eb8030ebde76e$var$VIEWPORT_DEFAULT_HOTKEY , label: label = 'Notifications ({hotkey})' , ...viewportProps } = props; | ||
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$VIEWPORT_NAME, __scopeToast); | ||
const wrapperRef = $eyrYI$useRef(null); | ||
const ref = $eyrYI$useRef(null); | ||
const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref, context.onViewportChange); | ||
const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, ''); | ||
$eyrYI$useEffect(()=>{ | ||
const handleKeyDown = (event)=>{ | ||
var _ref$current; | ||
// we use `event.code` as it is consistent regardless of meta keys that were pressed. | ||
// for example, `event.key` for `Control+Alt+t` is `†` and `t !== †` | ||
const isHotkeyPressed = hotkey.every((key)=>event[key] || event.code === key | ||
); | ||
if (isHotkeyPressed) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus(); | ||
}; | ||
document.addEventListener('keydown', handleKeyDown); | ||
return ()=>document.removeEventListener('keydown', handleKeyDown) | ||
; | ||
}, [ | ||
hotkey | ||
]); | ||
$eyrYI$useEffect(()=>{ | ||
const wrapper = wrapperRef.current; | ||
const viewport = ref.current; | ||
if (wrapper && viewport) { | ||
const handlePause = ()=>{ | ||
const pauseEvent = new Event($054eb8030ebde76e$var$VIEWPORT_PAUSE); | ||
viewport.dispatchEvent(pauseEvent); | ||
context.isClosePausedRef.current = true; | ||
}; | ||
const handleResume = ()=>{ | ||
const resumeEvent = new Event($054eb8030ebde76e$var$VIEWPORT_RESUME); | ||
viewport.dispatchEvent(resumeEvent); | ||
context.isClosePausedRef.current = false; | ||
}; // Toasts are not in the viewport React tree so we need to bind DOM events | ||
wrapper.addEventListener('focusin', handlePause); | ||
wrapper.addEventListener('focusout', handleResume); | ||
wrapper.addEventListener('pointerenter', handlePause); | ||
wrapper.addEventListener('pointerleave', handleResume); | ||
window.addEventListener('blur', handlePause); | ||
window.addEventListener('focus', handleResume); | ||
return ()=>{ | ||
wrapper.removeEventListener('focusin', handlePause); | ||
wrapper.removeEventListener('focusout', handleResume); | ||
wrapper.removeEventListener('pointerenter', handlePause); | ||
wrapper.removeEventListener('pointerleave', handleResume); | ||
window.removeEventListener('blur', handlePause); | ||
window.removeEventListener('focus', handleResume); | ||
}; | ||
} | ||
}, [ | ||
context.isClosePausedRef | ||
]); | ||
$eyrYI$useEffect(()=>{ | ||
const viewport = ref.current; // Re-order DOM so most recent toasts are at top of DOM structure to improve tab order | ||
if (viewport) { | ||
const prepended = new Set(); | ||
const observer = new MutationObserver((mutations)=>{ | ||
const addedNodes = mutations.map((mutation)=>Array.from(mutation.addedNodes) | ||
).reduce((a, b)=>a.concat(b) | ||
); | ||
addedNodes.forEach((node)=>{ | ||
// mutation will immediately fire again when we prepend so we only prepend if | ||
// it hasn't just prepended. | ||
if (!prepended.has(node)) { | ||
viewport.prepend(node); | ||
prepended.add(node); | ||
} else // this else catches the case where the mutation fires immediately after prepend. | ||
// we remove from cache after it prepends to allow observer to catch future updates | ||
// to DOM order, e.g. if `key` changes for a toast and is reportalled to bottom. | ||
prepended.delete(node); | ||
}); | ||
}); | ||
observer.observe(viewport, { | ||
childList: true | ||
}); | ||
return ()=>observer.disconnect() | ||
; | ||
} | ||
}, []); | ||
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Branch, { | ||
ref: wrapperRef, | ||
role: "region", | ||
"aria-label": label.replace('{hotkey}', hotkeyLabel) // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume | ||
, | ||
tabIndex: -1 // incase list has size when empty (e.g. padding), we remove pointer events so | ||
, | ||
style: { | ||
pointerEvents: context.toastCount > 0 ? undefined : 'none' | ||
} | ||
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.ol, $eyrYI$babelruntimehelpersesmextends({ | ||
tabIndex: -1 | ||
}, viewportProps, { | ||
ref: composedRefs | ||
}))); | ||
}); | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$6192c2425ecfd989, { | ||
displayName: $054eb8030ebde76e$var$VIEWPORT_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* Toast | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TOAST_NAME = 'Toast'; | ||
const $054eb8030ebde76e$var$TOAST_SWIPE_START = 'toast.swipeStart'; | ||
const $054eb8030ebde76e$var$TOAST_SWIPE_MOVE = 'toast.swipeMove'; | ||
const $054eb8030ebde76e$var$TOAST_SWIPE_CANCEL = 'toast.swipeCancel'; | ||
const $054eb8030ebde76e$var$TOAST_SWIPE_END = 'toast.swipeEnd'; | ||
const $054eb8030ebde76e$export$8d8dc7d5f743331b = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { forceMount: forceMount , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , ...toastProps } = props; | ||
const [open = true, setOpen] = $eyrYI$useControllableState({ | ||
prop: openProp, | ||
defaultProp: defaultOpen, | ||
onChange: onOpenChange | ||
}); | ||
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Presence, { | ||
present: forceMount || open | ||
}, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastImpl, $eyrYI$babelruntimehelpersesmextends({ | ||
open: open | ||
}, toastProps, { | ||
ref: forwardedRef, | ||
onClose: ()=>setOpen(false) | ||
, | ||
onSwipeStart: $eyrYI$composeEventHandlers(props.onSwipeStart, (event)=>{ | ||
event.currentTarget.setAttribute('data-swipe', 'start'); | ||
}), | ||
onSwipeMove: $eyrYI$composeEventHandlers(props.onSwipeMove, (event)=>{ | ||
const { x: x , y: y } = event.detail.delta; | ||
event.currentTarget.setAttribute('data-swipe', 'move'); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`); | ||
}), | ||
onSwipeCancel: $eyrYI$composeEventHandlers(props.onSwipeCancel, (event)=>{ | ||
event.currentTarget.setAttribute('data-swipe', 'cancel'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y'); | ||
}), | ||
onSwipeEnd: $eyrYI$composeEventHandlers(props.onSwipeEnd, (event)=>{ | ||
const { x: x , y: y } = event.detail.delta; | ||
event.currentTarget.setAttribute('data-swipe', 'end'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x'); | ||
event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y'); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`); | ||
event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`); | ||
setOpen(false); | ||
}) | ||
}))); | ||
}); | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$8d8dc7d5f743331b, { | ||
displayName: $054eb8030ebde76e$var$TOAST_NAME | ||
}); | ||
/* -----------------------------------------------------------------------------------------------*/ const [$054eb8030ebde76e$var$ToastInteractiveProvider, $054eb8030ebde76e$var$useToastInteractiveContext] = $054eb8030ebde76e$var$createToastContext($054eb8030ebde76e$var$TOAST_NAME, { | ||
isInteractive: false, | ||
onClose () {} | ||
}); | ||
const $054eb8030ebde76e$var$ToastImpl = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , type: type = 'foreground' , duration: durationProp , open: open , onClose: onClose , onEscapeKeyDown: onEscapeKeyDown , onSwipeStart: onSwipeStart , onSwipeMove: onSwipeMove , onSwipeCancel: onSwipeCancel , onSwipeEnd: onSwipeEnd , ...toastProps } = props; | ||
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast); | ||
const ref = $eyrYI$useRef(null); | ||
const composedRefs = $eyrYI$useComposedRefs(forwardedRef, ref); | ||
const pointerStartRef = $eyrYI$useRef(null); | ||
const swipeDeltaRef = $eyrYI$useRef(null); | ||
const duration1 = durationProp || context.duration; | ||
const closeTimerStartTimeRef = $eyrYI$useRef(0); | ||
const closeTimerRemainingTimeRef = $eyrYI$useRef(duration1); | ||
const closeTimerRef = $eyrYI$useRef(0); | ||
const { onToastAdd: onToastAdd , onToastRemove: onToastRemove } = context; | ||
const handleClose = $eyrYI$useCallbackRef(()=>{ | ||
var _ref$current2, _context$viewport; | ||
// focus viewport if focus is within toast to read the remaining toast | ||
// count to SR users and ensure focus isn't lost | ||
const isFocusInToast = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(document.activeElement); | ||
if (isFocusInToast) (_context$viewport = context.viewport) === null || _context$viewport === void 0 || _context$viewport.focus(); | ||
onClose(); | ||
}); | ||
const startTimer = $eyrYI$useCallback((duration)=>{ | ||
if (!duration || duration === Infinity) return; | ||
window.clearTimeout(closeTimerRef.current); | ||
closeTimerStartTimeRef.current = new Date().getTime(); | ||
closeTimerRef.current = window.setTimeout(handleClose, duration); | ||
}, [ | ||
handleClose | ||
]); | ||
$eyrYI$useEffect(()=>{ | ||
const viewport = context.viewport; | ||
if (viewport) { | ||
const handleResume = ()=>{ | ||
startTimer(closeTimerRemainingTimeRef.current); | ||
}; | ||
const handlePause = ()=>{ | ||
const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current; | ||
closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime; | ||
window.clearTimeout(closeTimerRef.current); | ||
}; | ||
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause); | ||
viewport.addEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume); | ||
return ()=>{ | ||
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_PAUSE, handlePause); | ||
viewport.removeEventListener($054eb8030ebde76e$var$VIEWPORT_RESUME, handleResume); | ||
}; | ||
} | ||
}, [ | ||
context.viewport, | ||
duration1, | ||
startTimer | ||
]); // start timer when toast opens or duration changes. | ||
// we include `open` in deps because closed !== unmounted when animating | ||
// so it could reopen before being completely unmounted | ||
$eyrYI$useEffect(()=>{ | ||
if (open && !context.isClosePausedRef.current) startTimer(duration1); | ||
}, [ | ||
open, | ||
duration1, | ||
context.isClosePausedRef, | ||
startTimer | ||
]); | ||
$eyrYI$useEffect(()=>{ | ||
onToastAdd(); | ||
return ()=>onToastRemove() | ||
; | ||
}, [ | ||
onToastAdd, | ||
onToastRemove | ||
]); | ||
if (!context.viewport) return null; | ||
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastAnnounce, { | ||
__scopeToast: __scopeToast // Toasts are always role=status to avoid stuttering issues with role=alert in SRs. | ||
, | ||
role: "status", | ||
"aria-live": type === 'foreground' ? 'assertive' : 'polite', | ||
"aria-atomic": true | ||
}, props.children), /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$var$ToastInteractiveProvider, { | ||
scope: __scopeToast, | ||
isInteractive: true, | ||
onClose: handleClose | ||
}, /*#__PURE__*/ $eyrYI$createPortal(/*#__PURE__*/ $eyrYI$createElement($eyrYI$Root, { | ||
asChild: true, | ||
onEscapeKeyDown: $eyrYI$composeEventHandlers(onEscapeKeyDown, ()=>{ | ||
if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose(); | ||
context.isFocusedToastEscapeKeyDownRef.current = false; | ||
}) | ||
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.li, $eyrYI$babelruntimehelpersesmextends({ | ||
role: "status", | ||
"aria-live": "off", | ||
"aria-atomic": true, | ||
tabIndex: 0, | ||
"data-state": open ? 'open' : 'closed', | ||
"data-swipe-direction": context.swipeDirection | ||
}, toastProps, { | ||
ref: composedRefs, | ||
style: { | ||
userSelect: 'none', | ||
touchAction: 'none', | ||
...props.style | ||
}, | ||
onKeyDown: $eyrYI$composeEventHandlers(props.onKeyDown, (event)=>{ | ||
if (event.key !== 'Escape') return; | ||
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event.nativeEvent); | ||
if (!event.nativeEvent.defaultPrevented) { | ||
context.isFocusedToastEscapeKeyDownRef.current = true; | ||
handleClose(); | ||
} | ||
}), | ||
onPointerDown: $eyrYI$composeEventHandlers(props.onPointerDown, (event)=>{ | ||
if (event.button !== 0) return; | ||
pointerStartRef.current = { | ||
x: event.clientX, | ||
y: event.clientY | ||
}; | ||
}), | ||
onPointerMove: $eyrYI$composeEventHandlers(props.onPointerMove, (event)=>{ | ||
if (!pointerStartRef.current) return; | ||
const x = event.clientX - pointerStartRef.current.x; | ||
const y = event.clientY - pointerStartRef.current.y; | ||
const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current); | ||
const isHorizontalSwipe = [ | ||
'left', | ||
'right' | ||
].includes(context.swipeDirection); | ||
const clamp = [ | ||
'left', | ||
'up' | ||
].includes(context.swipeDirection) ? Math.min : Math.max; | ||
const clampedX = isHorizontalSwipe ? clamp(0, x) : 0; | ||
const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0; | ||
const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2; | ||
const delta = { | ||
x: clampedX, | ||
y: clampedY | ||
}; | ||
const eventDetail = { | ||
originalEvent: event, | ||
delta: delta | ||
}; | ||
if (hasSwipeMoveStarted) { | ||
swipeDeltaRef.current = delta; | ||
$054eb8030ebde76e$var$dispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_MOVE, onSwipeMove, eventDetail); | ||
} else if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) { | ||
swipeDeltaRef.current = delta; | ||
$054eb8030ebde76e$var$dispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_START, onSwipeStart, eventDetail); | ||
event.target.setPointerCapture(event.pointerId); | ||
} else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) // User is swiping in wrong direction so we disable swipe gesture | ||
// for the current pointer down interaction | ||
pointerStartRef.current = null; | ||
}), | ||
onPointerUp: $eyrYI$composeEventHandlers(props.onPointerUp, (event1)=>{ | ||
const delta = swipeDeltaRef.current; | ||
event1.target.releasePointerCapture(event1.pointerId); | ||
swipeDeltaRef.current = null; | ||
pointerStartRef.current = null; | ||
if (delta) { | ||
const toast = event1.currentTarget; | ||
const eventDetail = { | ||
originalEvent: event1, | ||
delta: delta | ||
}; | ||
if ($054eb8030ebde76e$var$isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) $054eb8030ebde76e$var$dispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_END, onSwipeEnd, eventDetail); | ||
else $054eb8030ebde76e$var$dispatchCustomEvent($054eb8030ebde76e$var$TOAST_SWIPE_CANCEL, onSwipeCancel, eventDetail); | ||
// Prevent click event from triggering on items within the toast when | ||
// pointer up is part of a swipe gesture | ||
toast.addEventListener('click', (event)=>event.preventDefault() | ||
, { | ||
once: true | ||
}); | ||
} | ||
}) | ||
}))), context.viewport))); | ||
}); | ||
$054eb8030ebde76e$var$ToastImpl.propTypes = { | ||
type (props) { | ||
if (props.type && ![ | ||
'foreground', | ||
'background' | ||
].includes(props.type)) { | ||
const error = `Invalid prop \`type\` supplied to \`${$054eb8030ebde76e$var$TOAST_NAME}\`. Expected \`foreground | background\`.`; | ||
throw new Error(error); | ||
} | ||
return null; | ||
} | ||
}; | ||
/* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ToastAnnounce = (props)=>{ | ||
const { __scopeToast: __scopeToast , ...announceProps } = props; | ||
const context = $054eb8030ebde76e$var$useToastProviderContext($054eb8030ebde76e$var$TOAST_NAME, __scopeToast); | ||
const [renderChildren, setRenderChildren] = $eyrYI$useState(false); | ||
const [isAnnounced, setIsAnnounced] = $eyrYI$useState(false); // render children in the next frame to ensure toast is announced in NVDA | ||
$054eb8030ebde76e$var$useNextFrame(()=>setRenderChildren(true) | ||
); | ||
$eyrYI$useEffect(()=>{ | ||
const timer = window.setTimeout(()=>setIsAnnounced(true) | ||
, 1000); | ||
return ()=>window.clearTimeout(timer) | ||
; | ||
}, []); | ||
return isAnnounced ? null : /*#__PURE__*/ $eyrYI$createElement($eyrYI$UnstablePortal, { | ||
asChild: true | ||
}, /*#__PURE__*/ $eyrYI$createElement($eyrYI$VisuallyHidden, { | ||
asChild: true | ||
}, /*#__PURE__*/ $eyrYI$createElement("div", announceProps, renderChildren && /*#__PURE__*/ $eyrYI$createElement($eyrYI$Fragment, null, context.label, " ", props.children)))); | ||
}; | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastTitle | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$TITLE_NAME = 'ToastTitle'; | ||
const $054eb8030ebde76e$export$16d42d7c29b95a4 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , ...titleProps } = props; | ||
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.div, $eyrYI$babelruntimehelpersesmextends({}, titleProps, { | ||
ref: forwardedRef | ||
})); | ||
}); | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$16d42d7c29b95a4, { | ||
displayName: $054eb8030ebde76e$var$TITLE_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastDescription | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$DESCRIPTION_NAME = 'ToastDescription'; | ||
const $054eb8030ebde76e$export$ecddd96c53621d9a = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , ...descriptionProps } = props; | ||
return /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.div, $eyrYI$babelruntimehelpersesmextends({}, descriptionProps, { | ||
ref: forwardedRef | ||
})); | ||
}); | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$ecddd96c53621d9a, { | ||
displayName: $054eb8030ebde76e$var$DESCRIPTION_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastAction | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$ACTION_NAME = 'ToastAction'; | ||
const $054eb8030ebde76e$export$3019feecfda683d2 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { altText: altText , ...actionProps } = props; | ||
const context = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$ACTION_NAME, props.__scopeToast); | ||
if (!altText) return null; | ||
return context.isInteractive ? /*#__PURE__*/ $eyrYI$createElement($054eb8030ebde76e$export$811e70f61c205839, $eyrYI$babelruntimehelpersesmextends({}, actionProps, { | ||
ref: forwardedRef | ||
})) : /*#__PURE__*/ $eyrYI$createElement("span", null, altText); | ||
}); | ||
$054eb8030ebde76e$export$3019feecfda683d2.propTypes = { | ||
altText (props) { | ||
if (!props.altText) throw new Error(`Missing prop \`altText\` expected on \`${$054eb8030ebde76e$var$ACTION_NAME}\``); | ||
return null; | ||
} | ||
}; | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$3019feecfda683d2, { | ||
displayName: $054eb8030ebde76e$var$ACTION_NAME | ||
}); | ||
/* ------------------------------------------------------------------------------------------------- | ||
* ToastClose | ||
* -----------------------------------------------------------------------------------------------*/ const $054eb8030ebde76e$var$CLOSE_NAME = 'ToastClose'; | ||
const $054eb8030ebde76e$export$811e70f61c205839 = /*#__PURE__*/ $eyrYI$forwardRef((props, forwardedRef)=>{ | ||
const { __scopeToast: __scopeToast , ...closeProps } = props; | ||
const interactiveContext = $054eb8030ebde76e$var$useToastInteractiveContext($054eb8030ebde76e$var$CLOSE_NAME, __scopeToast); | ||
return interactiveContext.isInteractive ? /*#__PURE__*/ $eyrYI$createElement($eyrYI$Primitive.button, $eyrYI$babelruntimehelpersesmextends({ | ||
type: "button" | ||
}, closeProps, { | ||
ref: forwardedRef, | ||
onClick: $eyrYI$composeEventHandlers(props.onClick, interactiveContext.onClose) | ||
})) : null; | ||
}); | ||
/*#__PURE__*/ Object.assign($054eb8030ebde76e$export$811e70f61c205839, { | ||
displayName: $054eb8030ebde76e$var$CLOSE_NAME | ||
}); | ||
/* ---------------------------------------------------------------------------------------------- */ function $054eb8030ebde76e$var$dispatchCustomEvent(name, handler, detail) { | ||
const currentTarget = detail.originalEvent.currentTarget; | ||
const event = new CustomEvent(name, { | ||
bubbles: true, | ||
cancelable: true, | ||
detail: detail | ||
}); | ||
if (handler) currentTarget.addEventListener(name, handler, { | ||
once: true | ||
}); | ||
currentTarget.dispatchEvent(event); | ||
} | ||
const $054eb8030ebde76e$var$isDeltaInDirection = (delta, direction, threshold = 0)=>{ | ||
const deltaX = Math.abs(delta.x); | ||
const deltaY = Math.abs(delta.y); | ||
const isDeltaX = deltaX > deltaY; | ||
if (direction === 'left' || direction === 'right') return isDeltaX && deltaX > threshold; | ||
else return !isDeltaX && deltaY > threshold; | ||
}; | ||
function $054eb8030ebde76e$var$useNextFrame(callback = ()=>{}) { | ||
const fn = $eyrYI$useCallbackRef(callback); | ||
$eyrYI$useLayoutEffect(()=>{ | ||
let raf1 = 0; | ||
let raf2 = 0; | ||
raf1 = window.requestAnimationFrame(()=>raf2 = window.requestAnimationFrame(fn) | ||
); | ||
return ()=>{ | ||
window.cancelAnimationFrame(raf1); | ||
window.cancelAnimationFrame(raf2); | ||
}; | ||
}, [ | ||
fn | ||
]); | ||
} | ||
const $054eb8030ebde76e$export$2881499e37b75b9a = $054eb8030ebde76e$export$f5d03d415824e0e; | ||
const $054eb8030ebde76e$export$d5c6c08dc2d3ca7 = $054eb8030ebde76e$export$6192c2425ecfd989; | ||
const $054eb8030ebde76e$export$be92b6f5f03c0fe9 = $054eb8030ebde76e$export$8d8dc7d5f743331b; | ||
const $054eb8030ebde76e$export$f99233281efd08a0 = $054eb8030ebde76e$export$16d42d7c29b95a4; | ||
const $054eb8030ebde76e$export$393edc798c47379d = $054eb8030ebde76e$export$ecddd96c53621d9a; | ||
const $054eb8030ebde76e$export$e19cd5f9376f8cee = $054eb8030ebde76e$export$3019feecfda683d2; | ||
const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e70f61c205839; | ||
export {$054eb8030ebde76e$export$8a359da18fbc9073 as createToastScope, $054eb8030ebde76e$export$f5d03d415824e0e as ToastProvider, $054eb8030ebde76e$export$6192c2425ecfd989 as ToastViewport, $054eb8030ebde76e$export$8d8dc7d5f743331b as Toast, $054eb8030ebde76e$export$16d42d7c29b95a4 as ToastTitle, $054eb8030ebde76e$export$ecddd96c53621d9a as ToastDescription, $054eb8030ebde76e$export$3019feecfda683d2 as ToastAction, $054eb8030ebde76e$export$811e70f61c205839 as ToastClose, $054eb8030ebde76e$export$2881499e37b75b9a as Provider, $054eb8030ebde76e$export$d5c6c08dc2d3ca7 as Viewport, $054eb8030ebde76e$export$be92b6f5f03c0fe9 as Root, $054eb8030ebde76e$export$f99233281efd08a0 as Title, $054eb8030ebde76e$export$393edc798c47379d as Description, $054eb8030ebde76e$export$e19cd5f9376f8cee as Action, $054eb8030ebde76e$export$f39c2d165cd861fe as Close}; | ||
//# sourceMappingURL=index.module.js.map |
{ | ||
"name": "@radix-ui/react-toast", | ||
"version": "0.1.2-rc.12", | ||
"version": "0.1.2-rc.13", | ||
"license": "MIT", | ||
@@ -21,12 +21,12 @@ "source": "src/index.ts", | ||
"@radix-ui/primitive": "0.1.0", | ||
"@radix-ui/react-compose-refs": "0.1.1-rc.2", | ||
"@radix-ui/react-context": "0.1.2-rc.2", | ||
"@radix-ui/react-dismissable-layer": "0.1.6-rc.2", | ||
"@radix-ui/react-portal": "0.1.5-rc.2", | ||
"@radix-ui/react-presence": "0.1.3-rc.2", | ||
"@radix-ui/react-primitive": "0.1.5-rc.2", | ||
"@radix-ui/react-use-callback-ref": "0.1.1-rc.2", | ||
"@radix-ui/react-use-controllable-state": "0.1.1-rc.2", | ||
"@radix-ui/react-use-layout-effect": "0.1.1-rc.2", | ||
"@radix-ui/react-visually-hidden": "0.1.5-rc.2" | ||
"@radix-ui/react-compose-refs": "0.1.1-rc.3", | ||
"@radix-ui/react-context": "0.1.2-rc.3", | ||
"@radix-ui/react-dismissable-layer": "0.1.6-rc.3", | ||
"@radix-ui/react-portal": "0.1.5-rc.3", | ||
"@radix-ui/react-presence": "0.1.3-rc.3", | ||
"@radix-ui/react-primitive": "0.1.5-rc.3", | ||
"@radix-ui/react-use-callback-ref": "0.1.1-rc.3", | ||
"@radix-ui/react-use-controllable-state": "0.1.1-rc.3", | ||
"@radix-ui/react-use-layout-effect": "0.1.1-rc.3", | ||
"@radix-ui/react-visually-hidden": "0.1.5-rc.3" | ||
}, | ||
@@ -33,0 +33,0 @@ "peerDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
179556
1212
1
1
+ Added@radix-ui/react-compose-refs@0.1.1-rc.3(transitive)
+ Added@radix-ui/react-context@0.1.2-rc.3(transitive)
+ Added@radix-ui/react-dismissable-layer@0.1.6-rc.3(transitive)
+ Added@radix-ui/react-portal@0.1.5-rc.3(transitive)
+ Added@radix-ui/react-presence@0.1.3-rc.3(transitive)
+ Added@radix-ui/react-primitive@0.1.5-rc.3(transitive)
+ Added@radix-ui/react-slot@0.1.3-rc.3(transitive)
+ Added@radix-ui/react-use-body-pointer-events@0.1.2-rc.3(transitive)
+ Added@radix-ui/react-use-callback-ref@0.1.1-rc.3(transitive)
+ Added@radix-ui/react-use-controllable-state@0.1.1-rc.3(transitive)
+ Added@radix-ui/react-use-escape-keydown@0.1.1-rc.3(transitive)
+ Added@radix-ui/react-use-layout-effect@0.1.1-rc.3(transitive)
+ Added@radix-ui/react-visually-hidden@0.1.5-rc.3(transitive)
- Removed@radix-ui/react-compose-refs@0.1.1-rc.2(transitive)
- Removed@radix-ui/react-context@0.1.2-rc.2(transitive)
- Removed@radix-ui/react-dismissable-layer@0.1.6-rc.2(transitive)
- Removed@radix-ui/react-portal@0.1.5-rc.2(transitive)
- Removed@radix-ui/react-presence@0.1.3-rc.2(transitive)
- Removed@radix-ui/react-primitive@0.1.5-rc.2(transitive)
- Removed@radix-ui/react-slot@0.1.3-rc.2(transitive)
- Removed@radix-ui/react-use-body-pointer-events@0.1.2-rc.2(transitive)
- Removed@radix-ui/react-use-callback-ref@0.1.1-rc.2(transitive)
- Removed@radix-ui/react-use-controllable-state@0.1.1-rc.2(transitive)
- Removed@radix-ui/react-use-escape-keydown@0.1.1-rc.2(transitive)
- Removed@radix-ui/react-use-layout-effect@0.1.1-rc.2(transitive)
- Removed@radix-ui/react-visually-hidden@0.1.5-rc.2(transitive)