@wistia/vhs 6.0.2-beta.3abc3475.31abda7 → 6.0.2-beta.3c90e751.554d424

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v6.0.2-beta.3abc3475.31abda7
+ * @license @wistia/vhs v6.0.2-beta.3c90e751.554d424
  *
  * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
@@ -8,9 +8,8 @@
  */
 
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import { LiveAnnouncer, LiveMessage } from "react-aria-live";
 import { hasKey, isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isString, isUndefined } from "@wistia/type-guards";
-import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, memo, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { ThemeProvider, createGlobalStyle, css, keyframes, styled, useTheme as useTheme$1 } from "styled-components";
@@ -110,6 +109,123 @@ const useThemeColor = (colorName = null) => {
 	return getColor(colors, colorName);
 };
 //#endregion
+//#region src/providers/AriaLiveProvider/AriaLiveContext.tsx
+const warnMissingProvider = () => {
+	console.warn("Announcement failed: render VHSProvider (or AriaLiveProvider) above this component");
+};
+const AriaLiveContext = createContext({ announce: warnMissingProvider });
+//#endregion
+//#region src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+const screenReaderOnlyStyle = css`
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+const VisuallyHidden = styled.div`
+  ${screenReaderOnlyStyle}
+`;
+const VisuallyHiddenButFocusable = styled.div`
+  &:not(:focus-within) {
+    ${screenReaderOnlyStyle}
+  }
+`;
+const ScreenReaderOnly = ({ text, children, focusable = false, ...otherProps }) => {
+	const accessibleText = isNotNil(text) ? text : children;
+	if (focusable) return /* @__PURE__ */ jsx(VisuallyHiddenButFocusable, {
+		...otherProps,
+		children: accessibleText
+	});
+	return /* @__PURE__ */ jsx(VisuallyHidden, {
+		...otherProps,
+		children: accessibleText
+	});
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly_VHS";
+//#endregion
+//#region src/providers/AriaLiveProvider/AriaLiveProvider.tsx
+const ANNOUNCEMENT_CLEAR_DELAY_MS = 5e3;
+const HiddenRegion = styled.div`
+  ${screenReaderOnlyStyle}
+  margin: -1px;
+`;
+const LiveRegion = ({ announcements, politeness }) => /* @__PURE__ */ jsx(HiddenRegion, {
+	"aria-live": politeness,
+	role: "log",
+	children: announcements.filter((announcement) => announcement.politeness === politeness).map((announcement) => /* @__PURE__ */ jsx("div", { children: announcement.message }, announcement.id))
+});
+const AriaLiveProvider = ({ children }) => {
+	const [announcements, setAnnouncements] = useState([]);
+	const nextId = useRef(0);
+	const pendingKeys = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		pendingKeys.current.clear();
+	});
+	useEffect(() => {
+		if (announcements.length === 0) return;
+		const soonest = Math.min(...announcements.map((announcement) => announcement.expiresAt));
+		const timer = setTimeout(() => {
+			const now = Date.now();
+			setAnnouncements((current) => current.filter((announcement) => announcement.expiresAt > now));
+		}, Math.max(soonest - Date.now(), 0));
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [announcements]);
+	const announce = useCallback((message, politeness = "polite") => {
+		if (!isNonEmptyString(message)) return;
+		const key = `${politeness}:${message}`;
+		if (pendingKeys.current.has(key)) return;
+		pendingKeys.current.add(key);
+		const id = nextId.current;
+		nextId.current += 1;
+		const expiresAt = Date.now() + ANNOUNCEMENT_CLEAR_DELAY_MS;
+		setAnnouncements((current) => [...current, {
+			expiresAt,
+			id,
+			message,
+			politeness
+		}]);
+	}, []);
+	const value = useMemo(() => ({ announce }), [announce]);
+	return /* @__PURE__ */ jsxs(AriaLiveContext, {
+		value,
+		children: [children, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(LiveRegion, {
+			announcements,
+			politeness: "assertive"
+		}), /* @__PURE__ */ jsx(LiveRegion, {
+			announcements,
+			politeness: "polite"
+		})] })]
+	});
+};
+//#endregion
+//#region src/private/hooks/useAriaLive/useAriaLive.ts
+const useAriaLive = () => use(AriaLiveContext);
+//#endregion
+//#region src/private/components/LiveAnnouncement/LiveAnnouncement.tsx
+/**
+* Announces `message` to screen readers when it mounts and each time `message` changes.
+*/
+const LiveAnnouncement = ({ message, politeness = "polite" }) => {
+	const { announce } = useAriaLive();
+	const announcedMessage = useRef(null);
+	useEffect(() => {
+		if (announcedMessage.current === message) return;
+		announcedMessage.current = message;
+		announce(message, politeness);
+	}, [
+		announce,
+		message,
+		politeness
+	]);
+	return null;
+};
+//#endregion
 //#region src/private/helpers/coerceToBoolean/coerceToBoolean.ts
 /**
 * Converts a boolean string value `value` into a boolean. If passed
@@ -1618,9 +1734,9 @@ const ButtonContent = ({ children, icon, iconName, iconPosition, isLoading, size
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isLoading ? /* @__PURE__ */ jsxs(ButtonLoadingContainer, {
 		$textAlign: textAlign,
 		"data-testid": "button-content-loading",
-		children: [/* @__PURE__ */ jsx(LiveMessage, {
-			"aria-live": "assertive",
-			message: "Button has been disabled while action is in progress"
+		children: [/* @__PURE__ */ jsx(LiveAnnouncement, {
+			message: "Button has been disabled while action is in progress",
+			politeness: "assertive"
 		}), /* @__PURE__ */ jsx(Icon, {
 			size: iconSizeMap$2[size],
 			type: "spinner"
@@ -2090,9 +2206,9 @@ const Toast = memo(({ actionInterceptor, actionLabel = defaultActionLabel, color
 			...otherProps,
 			children: [/* @__PURE__ */ jsxs(ToastContent, {
 				"data-testid": "toast-message",
-				children: [/* @__PURE__ */ jsx(LiveMessage, {
-					"aria-live": ariaLive,
-					message
+				children: [/* @__PURE__ */ jsx(LiveAnnouncement, {
+					message,
+					politeness: ariaLive
 				}), message]
 			}), /* @__PURE__ */ jsx(Button, {
 				colorOverride: accentColor,
@@ -2644,7 +2760,7 @@ const DEFAULT_THEME = {};
 const VHSProvider = ({ children, theme = DEFAULT_THEME, globalStylesIncluded = true, skipAnimations = false, Link }) => {
 	return /* @__PURE__ */ jsxs(VHSThemeProvider, {
 		theme,
-		children: [globalStylesIncluded ? /* @__PURE__ */ jsx(GlobalStyle$1, {}) : null, /* @__PURE__ */ jsx(LiveAnnouncer, { children: /* @__PURE__ */ jsx(MotionConfig, {
+		children: [globalStylesIncluded ? /* @__PURE__ */ jsx(GlobalStyle$1, {}) : null, /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsx(MotionConfig, {
 			reducedMotion: skipAnimations ? "always" : "user",
 			children: /* @__PURE__ */ jsx(WrapperProvider, {
 				value: { Link },
@@ -2654,38 +2770,6 @@ const VHSProvider = ({ children, theme = DEFAULT_THEME, globalStylesIncluded = t
 	});
 };
 //#endregion
-//#region src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-const screenReaderOnlyStyle = css`
-  border: 0;
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`;
-const VisuallyHidden = styled.div`
-  ${screenReaderOnlyStyle}
-`;
-const VisuallyHiddenButFocusable = styled.div`
-  &:not(:focus-within) {
-    ${screenReaderOnlyStyle}
-  }
-`;
-const ScreenReaderOnly = ({ text, children, focusable = false, ...otherProps }) => {
-	const accessibleText = isNotNil(text) ? text : children;
-	if (focusable) return /* @__PURE__ */ jsx(VisuallyHiddenButFocusable, {
-		...otherProps,
-		children: accessibleText
-	});
-	return /* @__PURE__ */ jsx(VisuallyHidden, {
-		...otherProps,
-		children: accessibleText
-	});
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly_VHS";
-//#endregion
 //#region src/components/Truncate/Truncate.tsx
 const Truncate = ({ children, maxChars, terminator = "...", breakOnWords = false }) => {
 	if (isNil(children)) return null;