@wistia/ui 3.2.1 → 3.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v3.2.1
+ * @license @wistia/ui v3.4.0
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -1546,21 +1546,34 @@ const scopeTab = (node, event) => {
 	const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];
 	if (target) target.focus();
 };
+const ariaHiderState = /* @__PURE__ */ new WeakMap();
 const createAriaHider = (containerNode, selector = "body > :not(script)") => {
-	const rootNodes = [...document.querySelectorAll(selector)].map((node) => {
-		if (node.contains(containerNode)) return;
-		const ariaHidden = node.getAttribute("aria-hidden");
-		if (ariaHidden === null || ariaHidden === "false") node.setAttribute("aria-hidden", "true");
-		return {
-			node,
-			ariaHidden
-		};
+	const hiddenNodes = [...document.querySelectorAll(selector)].filter((node) => !node.contains(containerNode));
+	hiddenNodes.forEach((node) => {
+		const state = ariaHiderState.get(node);
+		if (state) {
+			state.count += 1;
+			return;
+		}
+		const originalAriaHidden = node.getAttribute("aria-hidden");
+		ariaHiderState.set(node, {
+			count: 1,
+			originalAriaHidden
+		});
+		if (originalAriaHidden === null || originalAriaHidden === "false") node.setAttribute("aria-hidden", "true");
 	});
+	let isRestored = false;
 	return () => {
-		rootNodes.forEach((item) => {
-			if (!item) return;
-			if (item.ariaHidden === null) item.node.removeAttribute("aria-hidden");
-			else item.node.setAttribute("aria-hidden", item.ariaHidden);
+		if (isRestored) return;
+		isRestored = true;
+		hiddenNodes.forEach((node) => {
+			const state = ariaHiderState.get(node);
+			if (!state) return;
+			state.count -= 1;
+			if (state.count > 0) return;
+			ariaHiderState.delete(node);
+			if (state.originalAriaHidden === null) node.removeAttribute("aria-hidden");
+			else node.setAttribute("aria-hidden", state.originalAriaHidden);
 		});
 	};
 };
@@ -1570,47 +1583,53 @@ const isRef = (val) => {
 	return val !== null && typeof val === "object" && "current" in val;
 };
 const useFocusTrap = (active = true, options = {}) => {
-	const ref = useRef(null);
-	const restoreAriaRef = useRef(null);
-	const setRef = useCallback((node) => {
-		if (restoreAriaRef.current !== null) restoreAriaRef.current();
-		if (ref.current) {
+	const { disableAriaHider = false, focusSelector } = options;
+	const [node, setNode] = useState(null);
+	const nodeRef = useRef(null);
+	const setRef = useCallback((nextNode) => {
+		nodeRef.current = nextNode ?? null;
+		setNode(nextNode ?? null);
+	}, []);
+	useLayoutEffect(() => {
+		if (!active || node === null) return;
+		setupScopedFocus(node);
+		markForFocusLater();
+		let restoreAria = null;
+		const processNode = () => {
+			restoreAria = disableAriaHider ? null : createAriaHider(node);
+			let focusElement = null;
+			if (isNotUndefined(focusSelector)) {
+				if (isRef(focusSelector)) focusElement = focusSelector.current;
+				else focusElement = typeof focusSelector === "string" ? node.querySelector(focusSelector) : focusSelector;
+			}
+			if (!focusElement) {
+				const children = [...node.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)];
+				focusElement = children.find((element) => isTabbableElement(element)) ?? children.find((element) => isFocusableElement(element)) ?? null;
+				if (!focusElement && isFocusableElement(node)) focusElement = node;
+			}
+			if (focusElement) focusElement.focus();
+			if (!focusElement) console.warn("[useFocusTrap]: Failed to find a focusable element after activating the focus trap. Make sure to include at an element that can recieve focus. As a fallback, you can also set \"tabIndex={-1}\" on the focus trap node.", node);
+		};
+		const timeoutId = setTimeout(() => {
+			if (node.ownerDocument) processNode();
+			if (!node.ownerDocument) console.warn("[useFocusTrap]: The focus trap is not part of the DOM yet, so it is unable to correctly set focus. Make sure to render the ref node.", node);
+		}, 0);
+		return () => {
+			clearTimeout(timeoutId);
+			restoreAria?.();
 			returnFocus();
 			teardownScopedFocus();
-		}
-		if (active && node !== null && node !== void 0) {
-			setupScopedFocus(node);
-			markForFocusLater();
-			const processNode = (node2) => {
-				restoreAriaRef.current = !(options.disableAriaHider ?? false) ? createAriaHider(node2) : null;
-				let focusElement = null;
-				if (isNotUndefined(options.focusSelector)) {
-					if (isRef(options.focusSelector)) focusElement = options.focusSelector.current;
-					else focusElement = typeof options.focusSelector === "string" ? node2.querySelector(options.focusSelector) : options.focusSelector;
-				}
-				if (!focusElement) {
-					const children = [...node2.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)];
-					focusElement = children.find((element) => isTabbableElement(element)) ?? children.find((element) => isFocusableElement(element)) ?? null;
-					if (!focusElement && isFocusableElement(node2)) focusElement = node2;
-				}
-				if (focusElement) focusElement.focus();
-				if (!focusElement) console.warn("[useFocusTrap]: Failed to find a focusable element after activating the focus trap. Make sure to include at an element that can recieve focus. As a fallback, you can also set \"tabIndex={-1}\" on the focus trap node.", node2);
-			};
-			setTimeout(() => {
-				if (node.ownerDocument) processNode(node);
-				if (!node.ownerDocument) console.warn("[useFocusTrap]: The focus trap is not part of the DOM yet, so it is unable to correctly set focus. Make sure to render the ref node.", node);
-			}, 0);
-			ref.current = node;
-		} else ref.current = null;
+		};
 	}, [
 		active,
-		options.focusSelector,
-		options.disableAriaHider
+		node,
+		focusSelector,
+		disableAriaHider
 	]);
 	useEffect(() => {
 		if (!active) return;
 		const handleKeyDown = (event) => {
-			if (event.key === "Tab" && ref.current) scopeTab(ref.current, event);
+			if (event.key === "Tab" && nodeRef.current) scopeTab(nodeRef.current, event);
 		};
 		document.addEventListener("keydown", handleKeyDown);
 		return () => {
@@ -1887,6 +1906,14 @@ const lineClampCss = ($lines = 1) => css`
   white-space: initial;
 `;
 //#endregion
+//#region src/css/wordBreakCss.tsx
+const wordBreakCss = (wordBreak = "anywhere") => {
+	if (wordBreak === "word") return css`
+      word-break: normal;
+      overflow-wrap: anywhere;
+    `;
+};
+//#endregion
 //#region src/components/Ellipsis/Ellipsis.tsx
 const ellipsisStyle = css`
   overflow: hidden;
@@ -1918,12 +1945,14 @@ const EllipsisComponent = styled.span`
   ${({ $lines }) => {
 	if (isNotNil($lines)) return lineClampCss($lines);
 }}
+  ${({ $wordBreak }) => wordBreakCss($wordBreak)};
 `;
 /**
 * Truncate text with an ellispsis visble at the end
 */
-const Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx(EllipsisComponent, {
+const Ellipsis = ({ children, lines, wordBreak = "anywhere", ...props }) => /* @__PURE__ */ jsx(EllipsisComponent, {
 	$lines: lines,
+	$wordBreak: wordBreak,
 	...props,
 	children
 });
@@ -2811,6 +2840,20 @@ const ChatIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	})
 });
 //#endregion
+//#region src/components/Icon/icons/ChatSparkleIcon.tsx
+const ChatSparkleIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	...props,
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [/* @__PURE__ */ jsx("path", {
+		d: "M18.333 2.667A3.667 3.667 0 0 1 22 6.334v3.88a1 1 0 0 1-2 0v-3.88c0-.92-.746-1.667-1.667-1.667H5.667C4.747 4.667 4 5.414 4 6.334v13.25l3.375-2.699A1 1 0 0 1 8 16.667h3a1 1 0 1 1 0 2H8.352l-4.727 3.78A1.001 1.001 0 0 1 2 21.668V6.334a3.667 3.667 0 0 1 3.667-3.667z",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M19 12.669a1 1 0 0 1 .948.681l.843 2.526 2.525.841a1 1 0 0 1 0 1.899l-2.525.842-.843 2.525a1 1 0 0 1-1.896 0l-.843-2.525-2.525-.842a1 1 0 0 1 0-1.899l2.525-.841.843-2.526a1 1 0 0 1 .948-.68",
+		fill: "currentColor"
+	})]
+});
+//#endregion
 //#region src/components/Icon/icons/CheckmarkCircleIcon.tsx
 const CheckmarkCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
@@ -3190,6 +3233,17 @@ const DiamondIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	})
 });
 //#endregion
+//#region src/components/Icon/icons/DockRightIcon.tsx
+const DockRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M19 3.333H5A3.67 3.67 0 0 0 1.333 7v10A3.67 3.67 0 0 0 5 20.667h14A3.67 3.67 0 0 0 22.667 17V7A3.67 3.67 0 0 0 19 3.333M20.667 17c0 .92-.747 1.667-1.667 1.667h-2.667c-.92 0-1.666-.747-1.666-1.667V7c0-.92.746-1.667 1.666-1.667H19c.92 0 1.667.747 1.667 1.667z",
+		fill: "currentColor"
+	})
+});
+//#endregion
 //#region src/components/Icon/icons/DocsDevIcon.tsx
 const DocsDevIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
@@ -5436,6 +5490,17 @@ const WebinarSeriesIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	})
 });
 //#endregion
+//#region src/components/Icon/icons/WistiaIcon.tsx
+const WistiaIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	...props,
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M11.312 14.304H8.087c-.98 0-1.91.422-2.549 1.16l-4.074 4.688c2.964.155 6.065.155 8.248.155 11.355 0 12.955-6.99 12.955-10.264-.986 1.197-3.759 4.26-11.362 4.26zm9.953-10.605c-.05.57-.366 2.909-7.014 2.909-5.408 0-7.59 0-12.918-.106l3.994 4.59a4.13 4.13 0 0 0 3.076 1.426c1.321.018 3.132.037 3.43.037 6.827 0 10.66-3.132 10.66-6.133 0-1.247-.415-2.134-1.222-2.729z",
+		fill: "currentColor"
+	})
+});
+//#endregion
 //#region src/components/Icon/icons/WriteIcon.tsx
 const WriteIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
@@ -5523,6 +5588,7 @@ const iconMap = {
 	channel: ChannelIcon,
 	chapters: ChaptersIcon,
 	chat: ChatIcon,
+	"chat-sparkle": ChatSparkleIcon,
 	checkmark: CheckmarkIcon,
 	"checkmark-circle": CheckmarkCircleIcon,
 	"checkmark-circle-outline": CheckmarkCircleOutlineIcon,
@@ -5554,6 +5620,7 @@ const iconMap = {
 	delete: DeleteIcon,
 	desktop: DesktopIcon,
 	diamond: DiamondIcon,
+	"dock-right": DockRightIcon,
 	"docs-dev": DocsDevIcon,
 	"dots-horizontal": DotsHorizontalIcon,
 	download: DownloadIcon,
@@ -5728,6 +5795,7 @@ const iconMap = {
 	waveform: WaveformIcon,
 	webhook: WebhookIcon,
 	"webinar-series": WebinarSeriesIcon,
+	wistia: WistiaIcon,
 	write: WriteIcon,
 	"zoom-in": ZoomInIcon,
 	"zoom-out": ZoomOutIcon
@@ -6871,10 +6939,11 @@ const PolymorphicStyledHeading = withPolymorphicAs(styled.div`
   line-height: var(--line-height);
   color: var(--text-color);
   ${({ $variant }) => headingVariantStyleMap[$variant]}
-  ${({ $maxLines }) => {
+  ${({ $maxLines, $wordBreak }) => {
 	if (isNotNil($maxLines)) return css`
         ${ellipsisStyle};
         ${lineClampCss($maxLines)};
+        ${wordBreakCss($wordBreak)};
       `;
 }}
   ${({ $inline }) => $inline && css`
@@ -6902,7 +6971,7 @@ const headingVariantElementMap = {
 	heading5: "h5",
 	heading6: "h6"
 };
-const HeadingComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, textTransform, variant = "heading1", renderAs, ...props }) => {
+const HeadingComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, textTransform, wordBreak = "anywhere", variant = "heading1", renderAs, ...props }) => {
 	const processedChildren = applyMaxCharsToChildren(children, maxChars);
 	return /* @__PURE__ */ jsx(PolymorphicStyledHeading, {
 		ref,
@@ -6915,6 +6984,7 @@ const HeadingComponent = ({ ref, align = "left", children, colorScheme = "inheri
 		$prominence: prominence,
 		$textTransform: textTransform,
 		$variant: variant,
+		$wordBreak: wordBreak,
 		as: renderAs ?? headingVariantElementMap[variant] ?? DEFAULT_ELEMENT$3,
 		...props,
 		children: processedChildren
@@ -7098,10 +7168,11 @@ const PolymorphicStyledText = withPolymorphicAs(styled.div`
   font-style: normal;
   margin: 0;
   ${({ $variant }) => textVariantStyleMap[$variant]}
-  ${({ $maxLines }) => {
+  ${({ $maxLines, $wordBreak }) => {
 	if (isNotNil($maxLines)) return css`
         ${ellipsisStyle};
         ${lineClampCss($maxLines)};
+        ${wordBreakCss($wordBreak)};
       `;
 }}
   ${({ $inline }) => $inline && css`
@@ -7127,7 +7198,7 @@ const PolymorphicStyledText = withPolymorphicAs(styled.div`
       }
     `}
 `);
-const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, textTransform, variant = "body2", renderAs, ...props }) => {
+const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, textTransform, wordBreak = "anywhere", variant = "body2", renderAs, ...props }) => {
 	const processedChildren = applyMaxCharsToChildren(children, maxChars);
 	return /* @__PURE__ */ jsx(PolymorphicStyledText, {
 		ref,
@@ -7140,6 +7211,7 @@ const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit",
 		$prominence: prominence,
 		$textTransform: textTransform,
 		$variant: variant,
+		$wordBreak: wordBreak,
 		as: renderAs ?? textVariantElementMap[variant] ?? DEFAULT_ELEMENT$2,
 		...props,
 		children: processedChildren