wimui 0.63.0 → 0.63.1

package/dist/components/media/ImageCompare/ImageCompare.js

@@ -1,104 +1,105 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import n from "../../../icon/chevron-left.js";
-import r from "../../../icon/chevron-right.js";
-import { Icon as i } from "../Icon/Icon.js";
-import a from "./image-compare.module.js";
-import o, { useCallback as s, useRef as c, useState as l } from "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { composeEventHandlers as n } from "../../_internal/composeEventHandlers.js";
+import r from "../../../icon/chevron-left.js";
+import i from "../../../icon/chevron-right.js";
+import { Icon as a } from "../Icon/Icon.js";
+import o from "./image-compare.module.js";
+import s, { useCallback as c, useRef as l, useState as u } from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/media/ImageCompare/ImageCompare.tsx
-var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, after: m, beforeAlt: h = "", afterAlt: g = "", beforeLabel: _, afterLabel: v, defaultPosition: y = 50, position: b, onPositionChange: x, orientation: S = "horizontal", width: C, height: w, radius: T = "md", labels: E, className: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, ...j }, M) => {
-	let { t: N } = e(t), { handleAriaLabel: P = N("imageCompare.handle") } = E ?? {}, F = b !== void 0, [I, L] = l(p(y)), R = p(F ? b : I), z = S === "vertical", B = c(null), V = c(!1), H = s((e) => {
-		B.current = e, typeof M == "function" ? M(e) : M && (M.current = e);
-	}, [M]), U = s((e) => {
-		let t = p(e);
-		F || L(t), x?.(t);
-	}, [F, x]), W = s((e, t) => {
-		let n = B.current?.getBoundingClientRect();
+var m = (e) => Math.max(0, Math.min(100, e)), h = s.forwardRef(({ before: s, after: h, beforeAlt: g = "", afterAlt: _ = "", beforeLabel: v, afterLabel: y, defaultPosition: b = 50, position: x, onPositionChange: S, orientation: C = "horizontal", width: w, height: T, radius: E = "md", labels: D, className: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, ...M }, N) => {
+	let { t: P } = e(t), { handleAriaLabel: F = P("imageCompare.handle") } = D ?? {}, I = x !== void 0, [L, R] = u(m(b)), z = m(I ? x : L), B = C === "vertical", V = l(null), H = l(!1), U = c((e) => {
+		V.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
+	}, [N]), W = c((e) => {
+		let t = m(e);
+		I || R(t), S?.(t);
+	}, [I, S]), G = c((e, t) => {
+		let n = V.current?.getBoundingClientRect();
 		if (!n) return;
-		let r = z ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
-		U(r);
-	}, [z, U]), G = (e) => {
-		V.current = !0, e.currentTarget.setPointerCapture(e.pointerId), W(e.clientX, e.clientY);
-	}, K = (e) => {
-		V.current && W(e.clientX, e.clientY);
+		let r = B ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
+		W(r);
+	}, [B, W]), K = (e) => {
+		H.current = !0, e.currentTarget.setPointerCapture(e.pointerId), G(e.clientX, e.clientY);
 	}, q = (e) => {
-		V.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+		H.current && G(e.clientX, e.clientY);
 	}, J = (e) => {
-		let t = e.shiftKey ? 10 : 2, n = z ? "ArrowUp" : "ArrowLeft", r = z ? "ArrowDown" : "ArrowRight";
-		e.key === n ? (e.preventDefault(), U(R - t)) : e.key === r ? (e.preventDefault(), U(R + t)) : e.key === "Home" ? (e.preventDefault(), U(0)) : e.key === "End" && (e.preventDefault(), U(100));
-	}, Y = z ? { clipPath: `inset(0 0 ${100 - R}% 0)` } : { clipPath: `inset(0 ${100 - R}% 0 0)` }, X = z ? { top: `${R}%` } : { left: `${R}%` };
-	return /* @__PURE__ */ f("div", {
-		ref: H,
-		className: u("wim-image-compare", a.root, z && a.vertical, a[`radius-${T}`], D),
-		onPointerDown: G,
-		onPointerMove: K,
-		onPointerUp: q,
-		...j,
+		H.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}, Y = (e) => {
+		let t = e.shiftKey ? 10 : 2, n = B ? "ArrowUp" : "ArrowLeft", r = B ? "ArrowDown" : "ArrowRight";
+		e.key === n ? (e.preventDefault(), W(z - t)) : e.key === r ? (e.preventDefault(), W(z + t)) : e.key === "Home" ? (e.preventDefault(), W(0)) : e.key === "End" && (e.preventDefault(), W(100));
+	}, X = B ? { clipPath: `inset(0 0 ${100 - z}% 0)` } : { clipPath: `inset(0 ${100 - z}% 0 0)` }, Z = B ? { top: `${z}%` } : { left: `${z}%` };
+	return /* @__PURE__ */ p("div", {
+		ref: U,
+		className: d("wim-image-compare", o.root, B && o.vertical, o[`radius-${E}`], O),
+		...M,
+		onPointerDown: n(M.onPointerDown, K),
+		onPointerMove: n(M.onPointerMove, q),
+		onPointerUp: n(M.onPointerUp, J),
 		style: {
-			width: C,
-			height: w,
-			...j.style
+			width: w,
+			height: T,
+			...M.style
 		},
 		children: [
-			/* @__PURE__ */ d("img", {
-				className: a.image,
-				src: m,
-				alt: g,
+			/* @__PURE__ */ f("img", {
+				className: o.image,
+				src: h,
+				alt: _,
 				draggable: !1
 			}),
-			v && /* @__PURE__ */ d("span", {
-				className: u(a.label, a.afterLabel),
-				children: v
+			y && /* @__PURE__ */ f("span", {
+				className: d(o.label, o.afterLabel),
+				children: y
 			}),
-			/* @__PURE__ */ f("div", {
-				className: a.beforeLayer,
-				style: Y,
-				children: [/* @__PURE__ */ d("img", {
-					className: a.image,
-					src: o,
-					alt: h,
+			/* @__PURE__ */ p("div", {
+				className: o.beforeLayer,
+				style: X,
+				children: [/* @__PURE__ */ f("img", {
+					className: o.image,
+					src: s,
+					alt: g,
 					draggable: !1
-				}), _ && /* @__PURE__ */ d("span", {
-					className: u(a.label, a.beforeLabel),
-					children: _
+				}), v && /* @__PURE__ */ f("span", {
+					className: d(o.label, o.beforeLabel),
+					children: v
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				className: a.divider,
-				style: X,
-				children: [/* @__PURE__ */ d("span", {
-					className: a.line,
+			/* @__PURE__ */ p("div", {
+				className: o.divider,
+				style: Z,
+				children: [/* @__PURE__ */ f("span", {
+					className: o.line,
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ f("button", {
+				}), /* @__PURE__ */ p("button", {
 					type: "button",
-					className: a.handle,
+					className: o.handle,
 					role: "slider",
-					"aria-label": k ? void 0 : O ?? P,
-					"aria-labelledby": k,
-					"aria-describedby": A,
-					"aria-orientation": S,
-					"aria-valuenow": Math.round(R),
+					"aria-label": A ? void 0 : k ?? F,
+					"aria-labelledby": A,
+					"aria-describedby": j,
+					"aria-orientation": C,
+					"aria-valuenow": Math.round(z),
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					onKeyDown: J,
-					onPointerDown: G,
-					children: [/* @__PURE__ */ d(i, {
-						component: n,
-						size: "sm",
-						className: a.arrow
-					}), /* @__PURE__ */ d(i, {
+					onKeyDown: Y,
+					onPointerDown: K,
+					children: [/* @__PURE__ */ f(a, {
 						component: r,
 						size: "sm",
-						className: a.arrow
+						className: o.arrow
+					}), /* @__PURE__ */ f(a, {
+						component: i,
+						size: "sm",
+						className: o.arrow
 					})]
 				})]
 			})
 		]
 	});
 });
-m.displayName = "ImageCompare";
+h.displayName = "ImageCompare";
 //#endregion
-export { m as ImageCompare };
+export { h as ImageCompare };

package/dist/components/media/Video/Video.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Icon/Icon.cjs"),ee=require("../../../hooks/useMediaLoader.cjs"),i=require("./hooks/useVideoPlayer.cjs"),a=require("./components/VideoAdvancedMenu.cjs"),o=require("./components/VideoControls.cjs"),s=require("./video.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=({src:e,width:d,height:te,autoPlay:f=!1,loop:p=!1,muted:m=!1,controls:h=!0,poster:g,radius:_=`none`,shadow:v=!1,border:y=!1,fit:b=`cover`,preload:x,caption:S,className:C,style:ne,customControls:w=!1,advancedControls:T=!1,videoId:E,resumePlayback:D=!1,playlist:O,autoPlayNext:k=!1,qualities:A,loading:j=`lazy`,fadeIn:M=!1,demoDelay:N,labels:P={},tracks:F,...I})=>{let{t:L}=t.useWimTranslation(n.commonNs),{videoAriaLabel:R=L(`video.label`),seconds:z=`s`}=P,{containerRef:B,isLoaded:V,isIntersecting:H,notifyLoaded:U,shouldShowSkeleton:W}=ee.useMediaLoader({loading:j,src:A?.[0]?.src||O?.[0]?.src||e,demoDelay:N}),G=i.useVideoPlayer({src:e,autoPlay:f,loop:p,muted:m,fit:b,videoId:E,resumePlayback:D,playlist:O,autoPlayNext:k,qualities:A,customControls:w,advancedControls:T,poster:g,containerRef:B}),{videoRef:K,isPlaying:q,activeSrc:J,activePoster:Y,showNativeControls:X,skipIndicator:Z,activeMenu:Q,setActiveMenu:$}=G;c.default.useEffect(()=>{let e=K.current;e&&(m?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[m,K,J,H]);let re={width:`100%`,height:te||`auto`,objectFit:G.activeFit,...ne},ie=_===`none`?null:s.default[`radius${_.charAt(0).toUpperCase()+_.slice(1)}`];return(0,u.jsxs)(`figure`,{className:(0,l.default)(`wim-video`,s.default.root,C),style:{width:`100%`},"aria-label":R,"data-testid":`video-root`,children:[(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.inner,ie,v&&s.default.shadow,y&&s.default.border,(w||T)&&s.default.custom,M&&s.default.fadeIn,M&&V&&s.default.isLoaded,W&&s.default.loading),ref:B,"data-testid":`video-inner`,children:[H&&(0,u.jsx)(`video`,{ref:K,src:J,className:s.default.video,style:re,autoPlay:f&&V,loop:p&&(!O||O.length<=1),muted:m,controls:X&&h,poster:Y,preload:x,playsInline:!0,onTimeUpdate:G.handleTimeUpdate,onLoadedMetadata:G.handleLoadedMetadata,onLoadedData:U,onEnded:G.handleEnded,onPlay:()=>{},onPause:()=>{},onClick:G.handleVideoClick,"data-testid":`video-element`,...I,children:F?.map((e,t)=>(0,u.jsx)(`track`,{...e},t))}),Z.show&&(0,u.jsxs)(`div`,{className:s.default.skipIndicator,children:[(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsxs)(`span`,{children:[`10`,z]})]}),(w||T)&&(0,u.jsxs)(`div`,{role:`none`,className:s.default.customControls,onClick:()=>Q&&$(null),children:[T&&(0,u.jsx)(a.VideoAdvancedMenu,{styles:s.default,activeMenu:Q,setActiveMenu:$,qualities:A,currentQualityIndex:G.currentQualityIndex,handleQualityChange:G.handleQualityChange,playbackRate:G.playbackRate,setPlaybackRate:G.setPlaybackRate,activeFit:G.activeFit,setActiveFit:G.setActiveFit,playlist:O,currentPlayIndex:G.currentPlayIndex,playPlaylistItem:G.playPlaylistItem,labels:P}),(0,u.jsx)(o.VideoControls,{styles:s.default,playlist:O,advancedControls:T,currentPlayIndex:G.currentPlayIndex,setCurrentPlayIndex:G.setCurrentPlayIndex,skip:G.skip,isPlaying:q,togglePlay:G.togglePlay,currentTime:G.currentTime,duration:G.duration,handleSeek:G.handleSeek,volume:G.volume,isMuted:G.isMuted,toggleMute:G.toggleMute,handleVolumeChange:G.handleVolumeChange,activeMenu:Q,setActiveMenu:$,togglePiP:G.togglePiP,isFullscreen:G.isFullscreen,toggleFullscreen:G.toggleFullscreen,formatTime:G.formatTime,labels:P})]})]}),S&&(0,u.jsx)(`figcaption`,{className:s.default.caption,"data-testid":`video-caption`,children:S})]})};exports.Video=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../_internal/composeEventHandlers.cjs"),i=require("../Icon/Icon.cjs"),a=require("../../../hooks/useMediaLoader.cjs"),ee=require("./hooks/useVideoPlayer.cjs"),o=require("./components/VideoAdvancedMenu.cjs"),s=require("./components/VideoControls.cjs"),c=require("./video.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=({src:e,width:f,height:p,autoPlay:m=!1,loop:h=!1,muted:g=!1,controls:_=!0,poster:te,radius:v=`none`,shadow:ne=!1,border:y=!1,fit:b=`cover`,preload:x,caption:S,className:C,style:w,customControls:T=!1,advancedControls:E=!1,videoId:D,resumePlayback:O=!1,playlist:k,autoPlayNext:A=!1,qualities:j,loading:M=`lazy`,fadeIn:N=!1,demoDelay:P,labels:F={},tracks:I,...L})=>{let{t:R}=t.useWimTranslation(n.commonNs),{videoAriaLabel:z=R(`video.label`),seconds:B=`s`}=F,{containerRef:V,isLoaded:H,isIntersecting:U,notifyLoaded:W,shouldShowSkeleton:G}=a.useMediaLoader({loading:M,src:j?.[0]?.src||k?.[0]?.src||e,demoDelay:P}),K=ee.useVideoPlayer({src:e,autoPlay:m,loop:h,muted:g,fit:b,videoId:D,resumePlayback:O,playlist:k,autoPlayNext:A,qualities:j,customControls:T,advancedControls:E,poster:te,containerRef:V}),{videoRef:q,isPlaying:J,activeSrc:Y,activePoster:X,showNativeControls:re,skipIndicator:Z,activeMenu:Q,setActiveMenu:$}=K;l.default.useEffect(()=>{let e=q.current;e&&(g?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[g,q,Y,U]);let ie={width:`100%`,height:p||`auto`,objectFit:K.activeFit,...w},ae=v===`none`?null:c.default[`radius${v.charAt(0).toUpperCase()+v.slice(1)}`];return(0,d.jsxs)(`figure`,{className:(0,u.default)(`wim-video`,c.default.root,C),style:{width:`100%`},"aria-label":z,"data-testid":`video-root`,children:[(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.inner,ae,ne&&c.default.shadow,y&&c.default.border,(T||E)&&c.default.custom,N&&c.default.fadeIn,N&&H&&c.default.isLoaded,G&&c.default.loading),ref:V,"data-testid":`video-inner`,children:[U&&(0,d.jsx)(`video`,{ref:q,src:Y,className:c.default.video,style:ie,autoPlay:m&&H,loop:h&&(!k||k.length<=1),muted:g,controls:re&&_,poster:X,preload:x,playsInline:!0,"data-testid":`video-element`,...L,onTimeUpdate:r.composeEventHandlers(L.onTimeUpdate,K.handleTimeUpdate),onLoadedMetadata:r.composeEventHandlers(L.onLoadedMetadata,K.handleLoadedMetadata),onLoadedData:r.composeEventHandlers(L.onLoadedData,W),onEnded:r.composeEventHandlers(L.onEnded,K.handleEnded),onPlay:r.composeEventHandlers(L.onPlay,()=>{}),onPause:r.composeEventHandlers(L.onPause,()=>{}),onClick:r.composeEventHandlers(L.onClick,K.handleVideoClick),children:I?.map((e,t)=>(0,d.jsx)(`track`,{...e},t))}),Z.show&&(0,d.jsxs)(`div`,{className:c.default.skipIndicator,children:[(0,d.jsx)(i.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,d.jsx)(i.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,d.jsx)(i.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,d.jsxs)(`span`,{children:[`10`,B]})]}),(T||E)&&(0,d.jsxs)(`div`,{role:`none`,className:c.default.customControls,onClick:()=>Q&&$(null),children:[E&&(0,d.jsx)(o.VideoAdvancedMenu,{styles:c.default,activeMenu:Q,setActiveMenu:$,qualities:j,currentQualityIndex:K.currentQualityIndex,handleQualityChange:K.handleQualityChange,playbackRate:K.playbackRate,setPlaybackRate:K.setPlaybackRate,activeFit:K.activeFit,setActiveFit:K.setActiveFit,playlist:k,currentPlayIndex:K.currentPlayIndex,playPlaylistItem:K.playPlaylistItem,labels:F}),(0,d.jsx)(s.VideoControls,{styles:c.default,playlist:k,advancedControls:E,currentPlayIndex:K.currentPlayIndex,setCurrentPlayIndex:K.setCurrentPlayIndex,skip:K.skip,isPlaying:J,togglePlay:K.togglePlay,currentTime:K.currentTime,duration:K.duration,handleSeek:K.handleSeek,volume:K.volume,isMuted:K.isMuted,toggleMute:K.toggleMute,handleVolumeChange:K.handleVolumeChange,activeMenu:Q,setActiveMenu:$,togglePiP:K.togglePiP,isFullscreen:K.isFullscreen,toggleFullscreen:K.toggleFullscreen,formatTime:K.formatTime,labels:F})]})]}),S&&(0,d.jsx)(`figcaption`,{className:c.default.caption,"data-testid":`video-caption`,children:S})]})};exports.Video=f;

package/dist/components/media/Video/Video.js

@@ -1,154 +1,155 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import { Icon as n } from "../Icon/Icon.js";
-import { useMediaLoader as ee } from "../../../hooks/useMediaLoader.js";
-import { useVideoPlayer as r } from "./hooks/useVideoPlayer.js";
-import { VideoAdvancedMenu as i } from "./components/VideoAdvancedMenu.js";
-import { VideoControls as a } from "./components/VideoControls.js";
-import o from "./video.module.js";
-import s from "react";
-import c from "classnames";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { composeEventHandlers as n } from "../../_internal/composeEventHandlers.js";
+import { Icon as r } from "../Icon/Icon.js";
+import { useMediaLoader as i } from "../../../hooks/useMediaLoader.js";
+import { useVideoPlayer as a } from "./hooks/useVideoPlayer.js";
+import { VideoAdvancedMenu as o } from "./components/VideoAdvancedMenu.js";
+import { VideoControls as s } from "./components/VideoControls.js";
+import c from "./video.module.js";
+import l from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/media/Video/Video.tsx
-var d = ({ src: d, width: te, height: f, autoPlay: p = !1, loop: m = !1, muted: h = !1, controls: ne = !0, poster: re, radius: g = "none", shadow: _ = !1, border: v = !1, fit: y = "cover", preload: b, caption: x, className: S, style: C, customControls: w = !1, advancedControls: T = !1, videoId: E, resumePlayback: D = !1, playlist: O, autoPlayNext: k = !1, qualities: A, loading: j = "lazy", fadeIn: M = !1, demoDelay: N, labels: P = {}, tracks: F, ...I }) => {
-	let { t: L } = e(t), { videoAriaLabel: R = L("video.label"), seconds: z = "s" } = P, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = ee({
-		loading: j,
-		src: A?.[0]?.src || O?.[0]?.src || d,
-		demoDelay: N
-	}), G = r({
-		src: d,
-		autoPlay: p,
-		loop: m,
-		muted: h,
-		fit: y,
-		videoId: E,
-		resumePlayback: D,
-		playlist: O,
-		autoPlayNext: k,
-		qualities: A,
-		customControls: w,
-		advancedControls: T,
-		poster: re,
-		containerRef: B
-	}), { videoRef: K, isPlaying: q, activeSrc: J, activePoster: Y, showNativeControls: X, skipIndicator: Z, activeMenu: Q, setActiveMenu: $ } = G;
-	s.useEffect(() => {
-		let e = K.current;
-		e && (h ? e.setAttribute("muted", "") : e.removeAttribute("muted"));
+var p = ({ src: p, width: ee, height: te, autoPlay: m = !1, loop: h = !1, muted: g = !1, controls: _ = !0, poster: v, radius: y = "none", shadow: b = !1, border: x = !1, fit: S = "cover", preload: C, caption: w, className: T, style: ne, customControls: E = !1, advancedControls: D = !1, videoId: O, resumePlayback: k = !1, playlist: A, autoPlayNext: j = !1, qualities: M, loading: N = "lazy", fadeIn: P = !1, demoDelay: F, labels: I = {}, tracks: L, ...R }) => {
+	let { t: z } = e(t), { videoAriaLabel: B = z("video.label"), seconds: V = "s" } = I, { containerRef: H, isLoaded: U, isIntersecting: W, notifyLoaded: G, shouldShowSkeleton: K } = i({
+		loading: N,
+		src: M?.[0]?.src || A?.[0]?.src || p,
+		demoDelay: F
+	}), q = a({
+		src: p,
+		autoPlay: m,
+		loop: h,
+		muted: g,
+		fit: S,
+		videoId: O,
+		resumePlayback: k,
+		playlist: A,
+		autoPlayNext: j,
+		qualities: M,
+		customControls: E,
+		advancedControls: D,
+		poster: v,
+		containerRef: H
+	}), { videoRef: J, isPlaying: Y, activeSrc: X, activePoster: re, showNativeControls: ie, skipIndicator: Z, activeMenu: Q, setActiveMenu: $ } = q;
+	l.useEffect(() => {
+		let e = J.current;
+		e && (g ? e.setAttribute("muted", "") : e.removeAttribute("muted"));
 	}, [
-		h,
-		K,
+		g,
 		J,
-		H
+		X,
+		W
 	]);
-	let ie = {
+	let ae = {
 		width: "100%",
-		height: f || "auto",
-		objectFit: G.activeFit,
-		...C
-	}, ae = g === "none" ? null : o[`radius${g.charAt(0).toUpperCase() + g.slice(1)}`];
-	return /* @__PURE__ */ u("figure", {
-		className: c("wim-video", o.root, S),
+		height: te || "auto",
+		objectFit: q.activeFit,
+		...ne
+	}, oe = y === "none" ? null : c[`radius${y.charAt(0).toUpperCase() + y.slice(1)}`];
+	return /* @__PURE__ */ f("figure", {
+		className: u("wim-video", c.root, T),
 		style: { width: "100%" },
-		"aria-label": R,
+		"aria-label": B,
 		"data-testid": "video-root",
-		children: [/* @__PURE__ */ u("div", {
-			className: c(o.inner, ae, _ && o.shadow, v && o.border, (w || T) && o.custom, M && o.fadeIn, M && V && o.isLoaded, W && o.loading),
-			ref: B,
+		children: [/* @__PURE__ */ f("div", {
+			className: u(c.inner, oe, b && c.shadow, x && c.border, (E || D) && c.custom, P && c.fadeIn, P && U && c.isLoaded, K && c.loading),
+			ref: H,
 			"data-testid": "video-inner",
 			children: [
-				H && /* @__PURE__ */ l("video", {
-					ref: K,
-					src: J,
-					className: o.video,
-					style: ie,
-					autoPlay: p && V,
-					loop: m && (!O || O.length <= 1),
-					muted: h,
-					controls: X && ne,
-					poster: Y,
-					preload: b,
+				W && /* @__PURE__ */ d("video", {
+					ref: J,
+					src: X,
+					className: c.video,
+					style: ae,
+					autoPlay: m && U,
+					loop: h && (!A || A.length <= 1),
+					muted: g,
+					controls: ie && _,
+					poster: re,
+					preload: C,
 					playsInline: !0,
-					onTimeUpdate: G.handleTimeUpdate,
-					onLoadedMetadata: G.handleLoadedMetadata,
-					onLoadedData: U,
-					onEnded: G.handleEnded,
-					onPlay: () => {},
-					onPause: () => {},
-					onClick: G.handleVideoClick,
 					"data-testid": "video-element",
-					...I,
-					children: F?.map((e, t) => /* @__PURE__ */ l("track", { ...e }, t))
+					...R,
+					onTimeUpdate: n(R.onTimeUpdate, q.handleTimeUpdate),
+					onLoadedMetadata: n(R.onLoadedMetadata, q.handleLoadedMetadata),
+					onLoadedData: n(R.onLoadedData, G),
+					onEnded: n(R.onEnded, q.handleEnded),
+					onPlay: n(R.onPlay, () => {}),
+					onPause: n(R.onPause, () => {}),
+					onClick: n(R.onClick, q.handleVideoClick),
+					children: L?.map((e, t) => /* @__PURE__ */ d("track", { ...e }, t))
 				}),
-				Z.show && /* @__PURE__ */ u("div", {
-					className: o.skipIndicator,
+				Z.show && /* @__PURE__ */ f("div", {
+					className: c.skipIndicator,
 					children: [
-						/* @__PURE__ */ l(n, {
+						/* @__PURE__ */ d(r, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ l(n, {
+						/* @__PURE__ */ d(r, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ l(n, {
+						/* @__PURE__ */ d(r, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ u("span", { children: ["10", z] })
+						/* @__PURE__ */ f("span", { children: ["10", V] })
 					]
 				}),
-				(w || T) && /* @__PURE__ */ u("div", {
+				(E || D) && /* @__PURE__ */ f("div", {
 					role: "none",
-					className: o.customControls,
+					className: c.customControls,
 					onClick: () => Q && $(null),
-					children: [T && /* @__PURE__ */ l(i, {
-						styles: o,
+					children: [D && /* @__PURE__ */ d(o, {
+						styles: c,
 						activeMenu: Q,
 						setActiveMenu: $,
-						qualities: A,
-						currentQualityIndex: G.currentQualityIndex,
-						handleQualityChange: G.handleQualityChange,
-						playbackRate: G.playbackRate,
-						setPlaybackRate: G.setPlaybackRate,
-						activeFit: G.activeFit,
-						setActiveFit: G.setActiveFit,
-						playlist: O,
-						currentPlayIndex: G.currentPlayIndex,
-						playPlaylistItem: G.playPlaylistItem,
-						labels: P
-					}), /* @__PURE__ */ l(a, {
-						styles: o,
-						playlist: O,
-						advancedControls: T,
-						currentPlayIndex: G.currentPlayIndex,
-						setCurrentPlayIndex: G.setCurrentPlayIndex,
-						skip: G.skip,
-						isPlaying: q,
-						togglePlay: G.togglePlay,
-						currentTime: G.currentTime,
-						duration: G.duration,
-						handleSeek: G.handleSeek,
-						volume: G.volume,
-						isMuted: G.isMuted,
-						toggleMute: G.toggleMute,
-						handleVolumeChange: G.handleVolumeChange,
+						qualities: M,
+						currentQualityIndex: q.currentQualityIndex,
+						handleQualityChange: q.handleQualityChange,
+						playbackRate: q.playbackRate,
+						setPlaybackRate: q.setPlaybackRate,
+						activeFit: q.activeFit,
+						setActiveFit: q.setActiveFit,
+						playlist: A,
+						currentPlayIndex: q.currentPlayIndex,
+						playPlaylistItem: q.playPlaylistItem,
+						labels: I
+					}), /* @__PURE__ */ d(s, {
+						styles: c,
+						playlist: A,
+						advancedControls: D,
+						currentPlayIndex: q.currentPlayIndex,
+						setCurrentPlayIndex: q.setCurrentPlayIndex,
+						skip: q.skip,
+						isPlaying: Y,
+						togglePlay: q.togglePlay,
+						currentTime: q.currentTime,
+						duration: q.duration,
+						handleSeek: q.handleSeek,
+						volume: q.volume,
+						isMuted: q.isMuted,
+						toggleMute: q.toggleMute,
+						handleVolumeChange: q.handleVolumeChange,
 						activeMenu: Q,
 						setActiveMenu: $,
-						togglePiP: G.togglePiP,
-						isFullscreen: G.isFullscreen,
-						toggleFullscreen: G.toggleFullscreen,
-						formatTime: G.formatTime,
-						labels: P
+						togglePiP: q.togglePiP,
+						isFullscreen: q.isFullscreen,
+						toggleFullscreen: q.toggleFullscreen,
+						formatTime: q.formatTime,
+						labels: I
 					})]
 				})
 			]
-		}), x && /* @__PURE__ */ l("figcaption", {
-			className: o.caption,
+		}), w && /* @__PURE__ */ d("figcaption", {
+			className: c.caption,
 			"data-testid": "video-caption",
-			children: x
+			children: w
 		})]
 	});
 };
 //#endregion
-export { d as Video };
+export { p as Video };

package/dist/components/navigation/SpeedDial/SpeedDial.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../form/FloatButton/FloatButton.cjs"),i=require("./speed-dial.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=a.default.forwardRef(({actions:e,icon:c=`PlusIcon`,activeIcon:l=`CloseIcon`,direction:u=`up`,trigger:d=`hover`,open:f,onOpenChange:p,className:m,"aria-label":h,...g},_)=>{let{t:v}=t.useWimTranslation(n.commonNs),[y,b]=(0,a.useState)(!1),x=f??y,S=(0,a.useRef)(null),C=(0,a.useRef)(!1),w=e=>{b(e),p?.(e)},T=()=>{d===`hover`&&w(!0)},E=()=>{d===`hover`&&w(!1)},D=()=>{d===`click`&&w(!x)},O=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),C.current=!x,w(!x))},k=e=>{e.key===`Escape`&&x&&(e.preventDefault(),C.current=!1,w(!1),e.currentTarget.querySelector(`[aria-haspopup]`)?.focus())},A=e=>{C.current&&(e.currentTarget.contains(e.relatedTarget)||(C.current=!1,w(!1)))},j=()=>{(d===`click`||C.current)&&(C.current=!1,S.current?.contains(document.activeElement)&&S.current.parentElement?.querySelector(`[aria-haspopup]`)?.focus(),w(!1))};return(0,a.useEffect)(()=>{x&&C.current&&S.current?.querySelector(`button`)?.focus()},[x]),(0,s.jsxs)(`div`,{ref:_,className:(0,o.default)(`wim-speed-dial`,i.default.root,i.default[u],x&&i.default.open,m),onMouseEnter:T,onMouseLeave:E,onKeyDown:k,onBlur:A,...g,children:[(0,s.jsx)(`div`,{ref:S,className:i.default.actions,inert:!x,children:e.map((e,t)=>(0,s.jsx)(`div`,{className:i.default.actionWrapper,style:{transitionDelay:x?`${t*50}ms`:`0ms`},children:(0,s.jsx)(r.FloatButton,{iconName:e.icon,label:e.label,size:`sm`,intent:e.intent,className:e.className,onClick:()=>{e.onClick?.(),j()},position:`inline`})},t))}),(0,s.jsx)(r.FloatButton,{iconName:x?l:c,onClick:D,className:i.default.trigger,position:`inline`,"aria-expanded":x,"aria-haspopup":`true`,"aria-label":h??v(x?`a11y.close_menu`:`a11y.open_menu`),onKeyDown:O})]})});c.displayName=`SpeedDial`,exports.SpeedDial=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../_internal/composeEventHandlers.cjs"),i=require("../../form/FloatButton/FloatButton.cjs"),a=require("./speed-dial.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=o.default.forwardRef(({actions:e,icon:l=`PlusIcon`,activeIcon:u=`CloseIcon`,direction:d=`up`,trigger:f=`hover`,open:p,onOpenChange:m,className:h,"aria-label":g,..._},v)=>{let{t:y}=t.useWimTranslation(n.commonNs),[b,x]=(0,o.useState)(!1),S=p??b,C=(0,o.useRef)(null),w=(0,o.useRef)(!1),T=e=>{x(e),m?.(e)},E=()=>{f===`hover`&&T(!0)},D=()=>{f===`hover`&&T(!1)},O=()=>{f===`click`&&T(!S)},k=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),w.current=!S,T(!S))},A=e=>{e.key===`Escape`&&S&&(e.preventDefault(),w.current=!1,T(!1),e.currentTarget.querySelector(`[aria-haspopup]`)?.focus())},j=e=>{w.current&&(e.currentTarget.contains(e.relatedTarget)||(w.current=!1,T(!1)))},M=()=>{(f===`click`||w.current)&&(w.current=!1,C.current?.contains(document.activeElement)&&C.current.parentElement?.querySelector(`[aria-haspopup]`)?.focus(),T(!1))};return(0,o.useEffect)(()=>{S&&w.current&&C.current?.querySelector(`button`)?.focus()},[S]),(0,c.jsxs)(`div`,{ref:v,className:(0,s.default)(`wim-speed-dial`,a.default.root,a.default[d],S&&a.default.open,h),..._,onMouseEnter:r.composeEventHandlers(_.onMouseEnter,E),onMouseLeave:r.composeEventHandlers(_.onMouseLeave,D),onKeyDown:r.composeEventHandlers(_.onKeyDown,A),onBlur:r.composeEventHandlers(_.onBlur,j),children:[(0,c.jsx)(`div`,{ref:C,className:a.default.actions,inert:!S,children:e.map((e,t)=>(0,c.jsx)(`div`,{className:a.default.actionWrapper,style:{transitionDelay:S?`${t*50}ms`:`0ms`},children:(0,c.jsx)(i.FloatButton,{iconName:e.icon,label:e.label,size:`sm`,intent:e.intent,className:e.className,onClick:()=>{e.onClick?.(),M()},position:`inline`})},t))}),(0,c.jsx)(i.FloatButton,{iconName:S?u:l,onClick:O,className:a.default.trigger,position:`inline`,"aria-expanded":S,"aria-haspopup":`true`,"aria-label":g??y(S?`a11y.close_menu`:`a11y.open_menu`),onKeyDown:k})]})});l.displayName=`SpeedDial`,exports.SpeedDial=l;

package/dist/components/navigation/SpeedDial/SpeedDial.js

@@ -1,71 +1,72 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import { FloatButton as n } from "../../form/FloatButton/FloatButton.js";
-import r from "./speed-dial.module.js";
-import i, { useEffect as a, useRef as o, useState as s } from "react";
-import c from "classnames";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { composeEventHandlers as n } from "../../_internal/composeEventHandlers.js";
+import { FloatButton as r } from "../../form/FloatButton/FloatButton.js";
+import i from "./speed-dial.module.js";
+import a, { useEffect as o, useRef as s, useState as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/navigation/SpeedDial/SpeedDial.tsx
-var d = i.forwardRef(({ actions: i, icon: d = "PlusIcon", activeIcon: f = "CloseIcon", direction: p = "up", trigger: m = "hover", open: h, onOpenChange: g, className: _, "aria-label": v, ...y }, b) => {
-	let { t: x } = e(t), [S, C] = s(!1), w = h ?? S, T = o(null), E = o(!1), D = (e) => {
-		C(e), g?.(e);
-	}, O = () => {
-		m === "hover" && D(!0);
+var f = a.forwardRef(({ actions: a, icon: f = "PlusIcon", activeIcon: p = "CloseIcon", direction: m = "up", trigger: h = "hover", open: g, onOpenChange: _, className: v, "aria-label": y, ...b }, x) => {
+	let { t: S } = e(t), [C, w] = c(!1), T = g ?? C, E = s(null), D = s(!1), O = (e) => {
+		w(e), _?.(e);
 	}, k = () => {
-		m === "hover" && D(!1);
+		h === "hover" && O(!0);
 	}, A = () => {
-		m === "click" && D(!w);
-	}, j = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), E.current = !w, D(!w));
+		h === "hover" && O(!1);
+	}, j = () => {
+		h === "click" && O(!T);
 	}, M = (e) => {
-		e.key === "Escape" && w && (e.preventDefault(), E.current = !1, D(!1), e.currentTarget.querySelector("[aria-haspopup]")?.focus());
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), D.current = !T, O(!T));
 	}, N = (e) => {
-		E.current && (e.currentTarget.contains(e.relatedTarget) || (E.current = !1, D(!1)));
-	}, P = () => {
-		(m === "click" || E.current) && (E.current = !1, T.current?.contains(document.activeElement) && T.current.parentElement?.querySelector("[aria-haspopup]")?.focus(), D(!1));
+		e.key === "Escape" && T && (e.preventDefault(), D.current = !1, O(!1), e.currentTarget.querySelector("[aria-haspopup]")?.focus());
+	}, P = (e) => {
+		D.current && (e.currentTarget.contains(e.relatedTarget) || (D.current = !1, O(!1)));
+	}, F = () => {
+		(h === "click" || D.current) && (D.current = !1, E.current?.contains(document.activeElement) && E.current.parentElement?.querySelector("[aria-haspopup]")?.focus(), O(!1));
 	};
-	return a(() => {
-		w && E.current && T.current?.querySelector("button")?.focus();
-	}, [w]), /* @__PURE__ */ u("div", {
-		ref: b,
-		className: c("wim-speed-dial", r.root, r[p], w && r.open, _),
-		onMouseEnter: O,
-		onMouseLeave: k,
-		onKeyDown: M,
-		onBlur: N,
-		...y,
-		children: [/* @__PURE__ */ l("div", {
-			ref: T,
-			className: r.actions,
-			inert: !w,
-			children: i.map((e, t) => /* @__PURE__ */ l("div", {
-				className: r.actionWrapper,
-				style: { transitionDelay: w ? `${t * 50}ms` : "0ms" },
-				children: /* @__PURE__ */ l(n, {
+	return o(() => {
+		T && D.current && E.current?.querySelector("button")?.focus();
+	}, [T]), /* @__PURE__ */ d("div", {
+		ref: x,
+		className: l("wim-speed-dial", i.root, i[m], T && i.open, v),
+		...b,
+		onMouseEnter: n(b.onMouseEnter, k),
+		onMouseLeave: n(b.onMouseLeave, A),
+		onKeyDown: n(b.onKeyDown, N),
+		onBlur: n(b.onBlur, P),
+		children: [/* @__PURE__ */ u("div", {
+			ref: E,
+			className: i.actions,
+			inert: !T,
+			children: a.map((e, t) => /* @__PURE__ */ u("div", {
+				className: i.actionWrapper,
+				style: { transitionDelay: T ? `${t * 50}ms` : "0ms" },
+				children: /* @__PURE__ */ u(r, {
 					iconName: e.icon,
 					label: e.label,
 					size: "sm",
 					intent: e.intent,
 					className: e.className,
 					onClick: () => {
-						e.onClick?.(), P();
+						e.onClick?.(), F();
 					},
 					position: "inline"
 				})
 			}, t))
-		}), /* @__PURE__ */ l(n, {
-			iconName: w ? f : d,
-			onClick: A,
-			className: r.trigger,
+		}), /* @__PURE__ */ u(r, {
+			iconName: T ? p : f,
+			onClick: j,
+			className: i.trigger,
 			position: "inline",
-			"aria-expanded": w,
+			"aria-expanded": T,
 			"aria-haspopup": "true",
-			"aria-label": v ?? x(w ? "a11y.close_menu" : "a11y.open_menu"),
-			onKeyDown: j
+			"aria-label": y ?? S(T ? "a11y.close_menu" : "a11y.open_menu"),
+			onKeyDown: M
 		})]
 	});
 });
-d.displayName = "SpeedDial";
+f.displayName = "SpeedDial";
 //#endregion
-export { d as SpeedDial };
+export { f as SpeedDial };